Add navigation page block improvements

client/web/compose/src/components/PageBlocks/Navigation/Base.vue

@@ -20,14 +20,15 @@
           :disabled="!navItem.options.enabled"
           :style="{ order: index, color: navItem.options.textColor, background: navItem.options.backgroundColor, justifyContent: options.display.alignment }"
           :link-attrs="{ style: `color: ${navItem.options.textColor}` }"
+          :href="generateHrefAttributeLink(navItem)"
+          :to="generateToAttributeLink(navItem)"
           :target="selectTargetOption(navItem.options.item.target)"
-          :href="redirectForNavItem(navItem)"
           class="d-flex align-items-center"
         >
           <template v-if="navItem.type === 'dropdown' || isComposeDropdownPage(navItem)">
             <b-button
               :id="`dropdown-popover-${index}-${block.blockID}`"
-              class="text-decoration-none"
+              class="text-decoration-none p-0"
               variant="link"
               :style="{ color: navItem.options.textColor, background: navItem.options.backgroundColor }"
             >
@@ -101,6 +102,7 @@
     </div>
   </wrap>
 </template>
+
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
 import { mapGetters } from 'vuex'
@@ -141,17 +143,28 @@ export default {
       return navItem.options.item.label
     },
 
-    redirectForNavItem (navItem) {
-      if (navItem.type === 'dropdown' || this.isComposeDropdownPage(navItem)) {
+    generateToAttributeLink (navItem) {
+      if (['dropdown', 'text-section'].includes(navItem.type) || this.isComposeDropdownPage(navItem)) {
         return
-      } else if (navItem.type === 'compose') {
-        const slug = this.$route.params.slug
-        const pageID = navItem.options.item.pageID
-
-        return `ns/${slug}/pages/${pageID}`
       }
 
-      return navItem.options.item.url
+      let url = ''
+
+      if (navItem.type === 'compose') {
+        const pageID = navItem.options.item.pageID
+
+        url = this.$router.resolve({ name: 'page', params: { pageID } }).href
+      }
+
+      return url
+    },
+
+    generateHrefAttributeLink (navItem) {
+      if (['dropdown', 'text-section'].includes(navItem.type) || this.isComposeDropdownPage(navItem)) {
+        return
+      }
+
+      return navItem.type === 'url' ? navItem.options.item.url : ''
     },
   },
 }

client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue

@@ -2,11 +2,13 @@
   <div>
     <b-tab :title="$t('navigation.label')">
       <div class="mb-3">
-        <h5 class="text-primary">
+        <h5>
           {{ $t("navigation.displayOptions") }}
         </h5>
 
-        <b-row class="justify-content-between">
+        <b-row
+          class="justify-content-between text-primary"
+        >
           <b-col
             cols="12"
             sm="4"
@@ -14,19 +16,22 @@
           >
             <b-form-group
               horizontal
+              variant="primary"
               :label="$t('navigation.appearance')"
             >
               <b-form-radio-group
                 v-model="options.display.appearance"
                 buttons
-                button-variant="outline-secondary"
+                button-variant="outline-primary"
                 :options="appearanceOptions"
+                size="sm"
               />
             </b-form-group>
           </b-col>
 
           <b-col
-            sm="4"
+            cols="12"
+            md="4"
             class="mb-2 mb-sm-0"
           >
             <b-form-group
@@ -36,15 +41,16 @@
               <b-form-radio-group
                 v-model="options.display.fillJustify"
                 buttons
-                button-variant="outline-secondary"
-
+                button-variant="outline-primary"
                 :options="fillJustifyOptions"
+                size="sm"
               />
             </b-form-group>
           </b-col>
 
           <b-col
-            sm="4"
+            cols="12"
+            md="4"
             class="mb-2 mb-sm-0"
           >
             <b-form-group
@@ -54,34 +60,23 @@
               <b-form-radio-group
                 v-model="options.display.alignment"
                 buttons
-                button-variant="outline-secondary"
+                button-variant="outline-primary"
                 :options="alignmentOptions"
+                size="sm"
               />
             </b-form-group>
           </b-col>
         </b-row>
       </div>
 
+      <hr class="my-2">
+
       <div class="mb-3 mt-2">
         <div class="d-flex align-items-center mb-4">
           <h5 class="text-primary mb-0">
             {{ $t("navigation.navigationItems") }}
           </h5>
-
-          <b-button
-            variant="link"
-            class="d-flex align-items-center text-decoration-none"
-            @click="addNavigationItem"
-          >
-            <font-awesome-icon
-              :icon="['fas', 'plus']"
-              size="sm"
-              class="mr-1"
-            />
-            {{ $t("navigation.add") }}
-          </b-button>
         </div>
-
         <div class="mt-3">
           <draggable
             v-model="block.options.navigationItems"
@@ -96,20 +91,25 @@
 
               <b-table-simple
                 borderless
+                responsive="lg"
+                small
               >
                 <thead>
                   <tr>
                     <th style="width: auto;" />
-                    <th>
+                    <th style="min-width: 200px;">
                       {{ $t("navigation.type") }}
                     </th>
-                    <th>
+                    <th style="min-width: 200px;">
                       {{ $t("navigation.color") }}
                     </th>
-                    <th>
+                    <th style="min-width: 200px;">
                       {{ $t("navigation.background") }}
                     </th>
-                    <th class="text-center">
+                    <th
+                      class="text-center"
+                      style="min-width: 200px;"
+                    >
                       {{ $t("navigation.enabled") }}
                     </th>
                     <th style="width: auto; min-width: 100px;" />
@@ -120,7 +120,7 @@
                     <td class="align-middle">
                       <font-awesome-icon
                         :icon="['fas', 'bars']"
-                        class="grab text-grey"
+                        class="grab text-light"
                       />
                     </td>
                     <td class="align-middle">
@@ -171,6 +171,30 @@
               </b-table-simple>
             </div>
           </draggable>
+
+          <div
+            v-if="!block.options.navigationItems.length"
+            class="text-center my-4"
+          >
+            <p>
+              {{ $t('navigation.noNavigationItems') }}
+            </p>
+          </div>
+        </div>
+
+        <div class="d-flex align-items-center mb-4">
+          <b-button
+            variant="primary"
+            class="d-flex align-items-center text-decoration-none"
+            @click="addNavigationItem"
+          >
+            <font-awesome-icon
+              :icon="['fas', 'plus']"
+              size="sm"
+              class="mr-1"
+            />
+            {{ $t("navigation.add") }}
+          </b-button>
         </div>
       </div>
     </b-tab>
@@ -244,7 +268,7 @@ export default {
         compose.PageBlockNavigation.makeNavigationItem({
           type: 'compose',
           options: {
-            backgroundColor: '#ffffff',
+            backgroundColor: '',
             item: {
               align: 'bottom',
               target: 'sameTab',

client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue

@@ -9,7 +9,7 @@
         />
       </b-form-group>
     </td>
-    <td>
+    <td style="width: 50%; min-width: 200px;">
       <b-form-group :label="$t('navigation.composePage')">
         <vue-select
           key="pageID"
@@ -18,6 +18,7 @@
           :options="tree"
           append-to-body
           label="title"
+          :calculate-position="calculatePosition"
           :reduce="f => f.pageID"
           :calculate-position="calculatePosition"
           option-value="pageID"
@@ -60,6 +61,7 @@ import base from './base'
 
 import { VueSelect } from 'vue-select'
 import { compose } from '@cortezaproject/corteza-js'
+import calculatePosition from 'corteza-webapp-compose/src/mixins/vue-select-position'
 
 export default {
   components: {
@@ -68,6 +70,10 @@ export default {
 
   extends: base,
 
+  mixins: [
+    calculatePosition,
+  ],
+
   props: {
     namespace: {
       type: compose.Namespace,
@@ -114,3 +120,45 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+
+.block-selector {
+  position: relative;
+
+  &:not(.vs--open) .vs__selected + .vs__search {
+    // force this to not use any space
+    // we still need it to be rendered for the focus
+    width: 0;
+    padding: 0;
+    margin: 0;
+    border: none;
+    height: 0;
+  }
+
+  .vs__selected-options {
+    // do not allow growing
+    width: 0;
+  }
+
+  .vs__selected {
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+}
+
+.vs__dropdown-menu .vs__dropdown-option {
+  text-overflow: ellipsis;
+  overflow: hidden !important;
+}
+
+th,
+td {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+</style>

client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue

@@ -24,7 +24,7 @@
             <b-form-radio-group
               v-model="options.item.align"
               buttons
-              button-variant="outline-secondary"
+              button-variant="outline-primary"
               size="sm"
               :options="aligns"
             />
@@ -32,23 +32,10 @@
         </th>
       </div>
 
-      <div class="d-flex align-items-center mb-4 mb-3 px-3">
+      <div class="mb-4 mb-3 px-3">
         <h6 class="text-primary mb-0">
           {{ $t("navigation.dropdownItems") }}
         </h6>
-
-        <b-button
-          variant="link"
-          class="text-decoration-none"
-          @click="options.item.dropdown.items.push({ text: '', url: '', target: 'sameTab' })"
-        >
-          <font-awesome-icon
-            :icon="['fas', 'plus']"
-            size="sm"
-            class="mr-1"
-          />
-          {{ $t("navigation.add") }}
-        </b-button>
       </div>
 
       <div class="px-3">
@@ -120,6 +107,21 @@
           </tr>
         </table>
       </div>
+
+      <div class="mb-4 mb-3 px-3">
+        <b-button
+          variant="primary"
+          class="text-decoration-none"
+          @click="options.item.dropdown.items.push({ text: '', url: '', target: 'sameTab' })"
+        >
+          <font-awesome-icon
+            :icon="['fas', 'plus']"
+            size="sm"
+            class="mr-1"
+          />
+          {{ $t("navigation.addDropdown") }}
+        </b-button>
+      </div>
     </td>
   </tr>
 </template>
@@ -146,3 +148,11 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+th,
+td {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+</style>

client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Text.vue

@@ -19,3 +19,11 @@ export default {
   extends: base,
 }
 </script>
+
+<style lang="scss" scoped>
+th,
+td {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+</style>

client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Url.vue

@@ -45,3 +45,11 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+th,
+td {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+</style>

client/web/compose/src/components/PageBlocks/TabsConfigurator.vue

@@ -84,20 +84,14 @@
       </b-col>
     </b-row>
 
+    <hr class="my-2">
+
     <div
       class="d-flex align-items-center mb-2"
     >
       <h5 class="m-0">
         {{ $t('tabs.title') }}
       </h5>
-
-      <b-button
-        variant="link"
-        class="p-0 ml-3 text-decoration-none"
-        @click="addTab"
-      >
-        {{ $t('tabs.addTab') }}
-      </b-button>
     </div>
 
     <b-table-simple
@@ -223,6 +217,14 @@
       </p>
     </div>
 
+    <b-button
+      variant="primary"
+      class="text-decoration-none"
+      @click="addTab"
+    >
+      {{ $t('tabs.addTab') }}
+    </b-button>
+
     <b-modal
       id="createBlockSelectorTab"
       size="lg"

lib/js/src/compose/types/page-block/navigation/index.ts

@@ -18,9 +18,9 @@ interface Options {
 
 const defaults: Readonly<Options> = Object.freeze({
   display: {
-    appearance: 'tabs',
+    appearance: 'pills',
     alignment: 'center',
-    fillJustify: 'justify',
+    fillJustify: 'fill',
   },
   navigationItems: [],
   magnifyOption: '',

locale/en/corteza-webapp-compose/block.yaml

@@ -562,6 +562,7 @@ comment:
     footnote: 'Field value will be used as reference'
 navigation:
   chart: Charts
+  noNavigationItems: No navigation item configured
   label: Navigation
   displayOptions: Display options
   appearance: Appearance
@@ -577,7 +578,8 @@ navigation:
   background: Background
   url: URL
   drop: Dropdown position
-  add: Add
+  add: Add navigation item
+  addDropdown: Add dropdown item
   composePage: Compose page
   tabs: Tabs
   pills: Pills