feat: Allow choosing whether to display spaces in Sidebar in Mobile - M…

…EED-7855 - Meeds-io/MIPs#159

webapp/src/main/resources/locale/portlet/GeneralSettings_en.properties

@@ -253,6 +253,7 @@ generalSettings.sidebar.spacesSortItemsByRecentlyVisited=User last visited
 generalSettings.sidebar.spacesNamesPlaceHolder=Menu item name
 generalSettings.sidebar.spacesNamesDrawerTitle=Add Menu item translations
 generalSettings.sidebar.spacesSelectLimit=Select number of items to list
+generalSettings.sidebar.displaySpacesInMobile=List them when using mobile
 generalSettings.sidebar.linkName=Name
 generalSettings.sidebar.linkDescription=Tooltip
 generalSettings.sidebar.linkLabel=Link

webapp/src/main/webapp/vue-apps/general-settings/components/navigation/sidebar/NavigationSettingsSidebar.vue

@@ -22,8 +22,17 @@
 <template>
   <div v-if="menuSettings" class="d-flex">
     <div class="d-flex flex-column flex-grow-1 flex-shrink-1">
-      <div class="text-header mb-4">
-        {{ $t('generalSettings.sidebar') }}
+      <div class="d-flex align-center mb-4">
+        <div class="text-header">
+          {{ $t('generalSettings.sidebar') }}
+        </div>
+        <v-btn
+          :title="$t('generalSettings.topbar.switchDevicePreview')"
+          class="ms-2"
+          icon
+          @click="mobilePreview = !mobilePreview">
+          <v-icon size="20">{{ mobilePreview && 'fa-desktop' || 'fa-mobile-alt' }}</v-icon>
+        </v-btn>
       </div>
       <v-switch
         v-model="menuSettings.allowUserCustomHome"
@@ -194,8 +203,9 @@
       </v-data-table>
     </div>
     <portal-general-settings-navigation-settings-sidebar-preview
+      class="flex-grow-0 flex-shrink-1 elevation-3 ms-8"
       :settings="menuSettings"
-      class="flex-grow-0 flex-shrink-1 elevation-3 ms-8" />
+      :mobile-preview="mobilePreview" />
   </div>
 </template>
 <script>
@@ -208,6 +218,7 @@ export default {
   },
   data: () => ({
     menuSettings: null,
+    mobilePreview: false,
     allModes: ['HIDDEN', 'ICON', 'STICKY'],
   }),
   computed: {

webapp/src/main/webapp/vue-apps/general-settings/components/navigation/sidebar/NavigationSettingsSidebarPreview.vue

@@ -60,6 +60,7 @@
           :key="`${item.name}_${item.icon}_${index}`"
           :settings="settings"
           :item="item"
+          :mobile-preview="mobilePreview"
           :home-icon="homeItemIndex === index" />
       </div>
       <div class="flex-grow-0 flex-shrink-0">
@@ -96,6 +97,10 @@ export default {
       type: Object,
       default: null,
     },
+    mobilePreview: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     productName: eXo.env.portal.productName,

webapp/src/main/webapp/vue-apps/general-settings/components/navigation/sidebar/NavigationSettingsSidebarPreviewItem.vue

@@ -43,7 +43,7 @@
           </v-list-item-title>
         </v-list-item-content>
       </v-list-item>
-      <template v-if="item?.items?.length">
+      <template v-if="item?.items?.length && displayItemsInMobile">
         <portal-general-settings-navigation-settings-sidebar-preview-item
           v-for="(subItem, index) in item.items"
           :key="`${subItem.name}_${subItem.icon}_${index}`"
@@ -110,9 +110,13 @@ export default {
       type: Object,
       default: null,
     },
+    mobilePreview: {
+      type: Boolean,
+      default: false,
+    },
     homeIcon: {
       type: Boolean,
-      default: null,
+      default: false,
     },
   },
   computed: {
@@ -125,6 +129,9 @@ export default {
     isSpaceTemplate() {
       return this.item.type === 'SPACE_TEMPLATE';
     },
+    displayItemsInMobile() {
+      return !this.mobilePreview || (!this.isSpaces && !this.isSpaceTemplate) || this.item?.properties?.displayItemsInMobile === 'true';
+    },
   },
 };
 </script>

webapp/src/main/webapp/vue-apps/general-settings/components/navigation/sidebar/drawer/NavigationSettingsAddSidebarSpacesDrawer.vue

@@ -97,9 +97,18 @@
           <number-input
             v-model="limit"
             :step="1"
-            :min="minSpaces"
+            :min="0"
             :max="10" />
         </div>
+        <div class="d-flex align-center mb-4">
+          <div>{{ $t('generalSettings.sidebar.displaySpacesInMobile') }}</div>
+          <v-spacer />
+          <v-switch
+            v-model="displayItemsInMobile"
+            true-value="true"
+            false-value="false"
+            class="ma-0 width-fit-content" />
+        </div>
       </div>
     </template>
     <template #footer>
@@ -136,14 +145,12 @@ export default {
     spaceTemplateId: null,
     sortBy: 'TITLE',
     limit: 4,
+    displayItemsInMobile: 'false',
   }),
   computed: {
     spaceTemplate() {
       return this.spaceTemplateId && this.spaceTemplates?.find?.(t => Number(t.id) === Number(this.spaceTemplateId)) || null;
     },
-    minSpaces() {
-      return this.option === 'SPACES' ? 0 : 1;
-    },
     disabled() {
       return !this.modified
         || (this.option === 'SPACE_TEMPLATE' && !this.spaceTemplteId)
@@ -167,6 +174,11 @@ export default {
         this.modified = true;
       }
     },
+    displayItemsInMobile() {
+      if (this.drawer) {
+        this.modified = true;
+      }
+    },
     sortBy() {
       if (this.drawer) {
         this.modified = true;
@@ -203,6 +215,7 @@ export default {
         properties: {
           sortBy: 'TITLE',
           limit: 4,
+          displayItemsInMobile: 'false',
         },
       };
       this.isNew = !item;
@@ -221,6 +234,7 @@ export default {
       this.spaceTemplateId = item?.properties?.spaceTemplateId && Number(item.properties.spaceTemplateId) || null;
       this.sortBy = item?.properties?.sortBy || 'TITLE';
       this.limit = item?.properties && Object.hasOwn(item.properties, 'limit') ? Number(item.properties.limit) : 4;
+      this.displayItemsInMobile = item?.properties && Object.hasOwn(item.properties, 'displayItemsInMobile') ? item.properties.displayItemsInMobile : 'false';
       this.names = item?.properties?.names && JSON.parse(item?.properties?.names) || {};
     },
     async apply() {
@@ -231,7 +245,8 @@ export default {
         this.item.properties = {
           spaceTemplateId: this.spaceTemplateId,
           sortBy: this.sortBy,
-          limit: this.limit,
+          limit: Math.min(this.limit, 10),
+          displayItemsInMobile: this.displayItemsInMobile,
         };
       } else {
         this.item.name = this.names[eXo.env.portal.language] || this.names[eXo.env.portal.defaultLanguage];
@@ -244,7 +259,8 @@ export default {
         this.item.properties = {
           names: JSON.stringify(this.names),
           sortBy: this.sortBy,
-          limit: this.limit,
+          limit: Math.min(this.limit, 10),
+          displayItemsInMobile: this.displayItemsInMobile,
         };
       }
       const data = await this.$spaceService.getSpacesByFilter({

webapp/src/main/webapp/vue-apps/sidebar/components/list/SidebarListItem.vue

@@ -72,7 +72,7 @@
         </v-list-item-action>
       </v-list-item>
     </v-hover>
-    <v-expand-transition>
+    <v-expand-transition v-if="displayItemsInMobile">
       <sidebar-list-sub-list
         v-show="!collapsedSpaces || !$root.displaySequentially"
         :item="item" />
@@ -313,6 +313,9 @@ export default {
         0: this.item.name
       })) || (this.isSpaces && this.$t('menu.spacesTooltip')) || null;
     },
+    displayItemsInMobile() {
+      return this.$root.displaySequentially || (!this.isSpaces && !this.isSpaceTemplate) || this.item?.properties?.displayItemsInMobile === 'true';
+    },
   },
   watch: {
     hover() {