feat: Improve Sidebar Style and UX - Meeds-io/MIPs#159

Meeds-io · Nov 27, 2024 · 8c9dbfe · 8c9dbfe
1 parent f2985f1
commit 8c9dbfe
Show file tree

Hide file tree

Showing 20 changed files with 199 additions and 87 deletions.
diff --git a/webapp/src/main/webapp/WEB-INF/gatein-resources.xml b/webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -1495,6 +1495,9 @@
       <depends>
         <module>extensionRegistry</module>
       </depends>
+      <depends>
+        <module>autoLinker</module>
+      </depends>
       <depends>
         <module>siteDetailsComponent</module>
       </depends>

diff --git a/webapp/src/main/webapp/WEB-INF/jsp/portlet/hamburgerMenu.jsp b/webapp/src/main/webapp/WEB-INF/jsp/portlet/hamburgerMenu.jsp
@@ -45,7 +45,7 @@
 <div class="VuetifyApp">
   <div id="HamburgerNavigationMenu" data-app="true" class="v-application HamburgerNavigationMenu v-application--is-ltr theme--light" id="app" color="transaprent" flat="">
     <div class="v-application--wrap">
-      <% if (mode != SidebarMode.HIDDEN) { %>
+      <% if (mode == SidebarMode.STICKY) { %>
       <script type="text/javascript">
         if (!window.siteStickyMenuLoaded) {
           window.siteStickyMenuLoaded = true;
@@ -57,7 +57,7 @@
           } else {
             document.querySelector('#HamburgerNavigationMenu > .v-application--wrap').innerHTML = `
             <a class="HamburgerNavigationMenuLink">
-              <div class="px-5 py-3">
+              <div class="d-flex justify-center" style="min-width: 69px;">
                 <i aria-hidden="true"
                   class="v-icon notranslate fa fa-bars theme--light"
                   style="font-size: 24px;"></i>
@@ -68,10 +68,12 @@
       </script>
       <% } else { %>
       <a class="HamburgerNavigationMenuLink">
-        <div class="px-5 py-3">
+        <div class="d-flex justify-center" style="min-width: 69px;">
+          <% if (mode == SidebarMode.HIDDEN) { %>
           <i aria-hidden="true"
             class="v-icon notranslate fa fa-bars theme--light"
             style="font-size: 24px;"></i>
+          <% } %>
         </div>
       </a>
       <% } %>

diff --git a/webapp/src/main/webapp/vue-apps/common/components/FavoriteButton.vue b/webapp/src/main/webapp/vue-apps/common/components/FavoriteButton.vue
@@ -129,7 +129,7 @@ export default {
       return this.isFavorite && this.$t('Favorite.tooltip.DeleteFavorite') || this.$t('Favorite.tooltip.AddAsFavorite');
     },
     favoriteIconColor() {
-      return this.isFavorite && 'yellow--text text--darken-2 ml-n2px' || 'icon-default-color';
+      return this.isFavorite && 'yellow--text text--darken-2 ma-n2px' || 'icon-default-color';
     },
     favoriteIcon() {
       return this.isFavorite && 'fas fa-star' || 'far fa-star';

diff --git a/webapp/src/main/webapp/vue-apps/common/js/Utils.js b/webapp/src/main/webapp/vue-apps/common/js/Utils.js
@@ -26,11 +26,18 @@ export function trim(text) {
 }
 
 export function includeExtensions(suffix) {
-  Object.keys(window.requirejs.s.contexts._.registry)
-    .filter(definedMofule => definedMofule.includes(suffix))
-    .forEach(module => {
-      window.require([module], app => app.init && app.init());
-    });
+  const modules = Object.keys(window.requirejs.s.contexts._.registry)
+    .filter(definedMofule => definedMofule.includes(suffix));
+  if (modules?.length) {
+    return Promise.all(modules.map(module => {
+      window.require([module], app => new Promise(resolve => {
+        app?.init?.();
+        resolve();
+      }));
+    }));
+  } else {
+    return Promise.resolve();
+  }
 }
 
 export function blobToBase64(blob) {

diff --git a/webapp/src/main/webapp/vue-apps/favorites-list-top-bar/components/TopBarFavoritesDrawer.vue b/webapp/src/main/webapp/vue-apps/favorites-list-top-bar/components/TopBarFavoritesDrawer.vue
@@ -99,8 +99,8 @@ export default {
   methods: {
     openDrawer() {
       this.retrieveFavoritesList();
-      window.require(['SHARED/favoriteDrawerExtensions'], () => {
-        this.$utils.includeExtensions('FavoriteDrawerExtension');
+      window.require(['SHARED/favoriteDrawerExtensions'], async () => {
+        await this.$utils.includeExtensions('FavoriteDrawerExtension');
         this.$refs.favoritesDrawer.open();
       });
     },

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/Sidebar.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/Sidebar.vue
@@ -24,8 +24,6 @@
     color="transaprent"
     class="HamburgerNavigationMenu"
     flat>
-    <div v-if="hiddenDisplay">
-    </div>
     <v-hover v-model="$root.hoverButton">
       <sidebar-button 
         :unread-per-space="unreadPerSpace"

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/SidebarButton.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/SidebarButton.vue
@@ -20,12 +20,17 @@
 -->
 <template>
   <ripple-hover-button
+    v-if="!$root.sticky"
     class="HamburgerNavigationMenuLink flex full-height pa-0 border-box-sizing"
     text
     @ripple-hover="$emit('open-drawer', $event)">
-    <div class="px-5 py-3">
-      <v-icon size="24">fa-bars</v-icon>
-    </div>
+    <v-card
+      class="d-flex justify-center"
+      min-height="56"
+      min-width="69"
+      flat>
+      <v-icon v-show="$root.hidden" size="24">fa-bars</v-icon>
+    </v-card>
     <div
       v-show="showBadge"
       class="hamburger-unread-badge position-absolute"
@@ -43,6 +48,7 @@ export default {
   computed: {
     showBadge() {
       return this.$root.unreadPerSpace
+        && this.$root.hidden
         && Object.values(this.$root.unreadPerSpace).reduce((sum, v) => sum += v, 0) > 0;
     },
   },

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/drawer/SidebarFirstLevel.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/drawer/SidebarFirstLevel.vue
@@ -24,6 +24,7 @@
     id="HamburgerMenuNavigation"
     :value="firstLevelDrawer"
     :drawer-width="drawerWidth"
+    :drawer-style="drawerStyle"
     :levels-opened="levelsOpened"
     class="HamburgerMenuFirstLevelParent no-box-shadow border-box-sizing"
     @opened="$emit('firstLevelDrawer', true)"
@@ -83,6 +84,9 @@ export default {
       default: null,
     },
   },
+  data: () => ({
+    drawerStyle: null,
+  }),
   computed: {
     levelsOpened() {
       return this.secondLevelDrawer || this.thirdLevelDrawer;
@@ -93,6 +97,27 @@ export default {
     stickyDisplay() {
       return this.$root.sticky;
     },
-  }
+    iconCollapse() {
+      return this.$root.iconCollapse;
+    },
+  },
+  watch: {
+    iconCollapse: {
+      immediate: true,
+      handler() {
+        if (this.iconCollapse) {
+          window.setTimeout(() => {
+            if (this.iconCollapse) {
+              this.drawerStyle = 'z-index: 2 !important';
+            } else {
+              this.drawerStyle = '';
+            }
+          }, 500);
+        } else {
+          this.drawerStyle = '';
+        }
+      }
+    },
+  },
 };
 </script>
diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListContent.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListContent.vue
@@ -21,30 +21,11 @@
 -->
 <template>
   <div>
-    <v-list-item-group v-if="menuItems" :value="activeMenu">
-      <sidebar-list-item
-        v-for="(item, index) in menuItems"
-        :key="`${item.name}_${item.icon}_${index}`"
-        :item="item" />
-    </v-list-item-group>
+    <sidebar-list-sub-list :item="$root.settings" />
   </div>
 </template>
 <script>
 export default {
-  computed: {
-    menuItems() {
-      return this.$root.settings?.items;
-    },
-    activeMenu() {
-      if (eXo.env.portal.spaceGroup) {
-        const selectedSpaceMenu = this.menuItems.find(item => item?.properties?.groupId?.length && window.location.pathname.includes(item.properties.groupId.replaceAll('/', ':')));
-        return selectedSpaceMenu?.url;
-      } else {
-        const selectedSiteMenu = this.menuItems.find(item => item.url && window.location.pathname.includes(item.url));
-        return selectedSiteMenu?.url;
-      }
-    },
-  },
   created() {
     this.$socialWebSocket.initCometd('/SpaceWebNotification');
   },

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListFooter.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListFooter.vue
@@ -49,14 +49,17 @@
       </v-list-item-action>
       <v-spacer v-if="$root.expand" />
       <div v-else class="me-3"></div>
-      <v-list-item-action class="my-auto mx-0 d-flex flex-row">
+      <v-list-item-action
+        :class="$root.expand && 'mx-0' || 'ms-1 me-0'"
+        class="my-auto d-flex flex-row">
         <v-tooltip top>
           <template #activator="{ on, attrs }">
             <v-btn
               v-bind="attrs"
               v-on="on"
               :href="profileUri"
               :aria-label="$t('menu.userProfilePageLink')"
+              :class="!$root.expand && 'ms-n2px'"
               class="accountTitleItem my-auto"
               icon>
               <v-avatar

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListHeader.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListHeader.vue
@@ -35,8 +35,13 @@
           width="36px">
       </div>
       <v-list-item-content>
-        <v-list-item-title v-if="$root.expand" class="logoTitle font-weight-bold menu-text-color text-truncate">
-          {{ companyName }}
+        <v-list-item-title v-if="$root.expand" class="font-weight-bold menu-text-color text-truncate">
+          <v-card
+            class="text-no-wrap transparent"
+            min-width="50"
+            flat>
+            {{ companyName }}
+          </v-card>
         </v-list-item-title>
       </v-list-item-content>
       <v-list-item-action v-if="$root.expand && $root.stickyAllowed" class="d-flex flex-row ms-auto my-auto">

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListItem.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListItem.vue
@@ -22,24 +22,20 @@
 <template>
   <v-divider v-if="item.type === 'SEPARATOR'" class="my-1" />
   <div v-else-if="isSitePages">
-    <v-list-item-group v-if="menuItems?.length" :value="activeMenu">
-      <sidebar-list-item
-        v-for="(subItem, index) in menuItems"
-        :key="`${subItem.name}_${subItem.url}_${index}`"
-        :item="subItem" />
-    </v-list-item-group>
+    <sidebar-list-sub-list
+      :item="item" />
   </div>
   <div v-else-if="isSpaces || isSpaceTemplate">
     <template v-if="menuItems?.length || isSpaces">
       <v-list-item
-        v-bind="item.url && {
-          href: item.url,
+        v-bind="url && {
+          href: url,
           target: item.target,
           value: item.url,
         }"
-        :class="$root.iconCollapse && 'mx-0 px-0'"
+        :class="$root.iconCollapse && 'mx-0'"
         :disabled="!item.url"
-        class="d-flex">
+        class="d-flex ps-3">
         <v-list-item-avatar class="me-2 my-auto" min-width="40">
           <v-icon size="18">{{ item.icon || 'fa-folder' }}</v-icon>
         </v-list-item-avatar>
@@ -49,12 +45,8 @@
           </v-list-item-title>
         </v-list-item-content>
       </v-list-item>
-      <v-list-item-group v-if="menuItems?.length" :value="activeMenu">
-        <sidebar-list-item
-          v-for="(subItem, index) in menuItems"
-          :key="`${subItem.name}_${subItem.url}_${index}`"
-          :item="subItem" />
-      </v-list-item-group>
+      <sidebar-list-sub-list
+        :item="item" />
     </template>
   </div>
   <v-hover
@@ -65,7 +57,8 @@
       v-on="itemActions"
       :value="item.url"
       :disabled="!item.url"
-      class="d-flex"
+      :class="!$root.expand && item.avatar && 'ms-n2px'"
+      class="d-flex ps-3"
       dense>
       <v-list-item-avatar
         v-if="$root.expand || !item.avatar"
@@ -80,7 +73,8 @@
       </v-list-item-avatar>
       <v-list-item-avatar
         v-if="item.avatar"
-        class="my-auto me-2"
+        :class="$root.expand && 'me-2' || 'ms-2'"
+        class="my-auto"
         min-width="28"
         width="28"
         height="28"
@@ -167,17 +161,6 @@ export default {
     isHome() {
       return this.isPage && this.defaultUserPath === this.item?.url;
     },
-    activeMenu() {
-      if (eXo.env.portal.spaceGroup) {
-        const selectedSpaceMenu = this.menuItems.find(item =>
-          item?.properties?.groupId?.length
-          && window.location.pathname.includes(item.properties.groupId.replaceAll('/', ':')));
-        return selectedSpaceMenu?.url;
-      } else {
-        const selectedSiteMenu = this.menuItems.find(item => item.url && window.location.pathname.includes(item.url));
-        return selectedSiteMenu?.url;
-      }
-    },
     isSitePages() {
       return this.item.type === 'SITE' && this.item.properties.expandPages === 'true';
     },
@@ -212,10 +195,15 @@ export default {
     isUrl() {
       return (this.isPage || this.$root.displaySequentially) && this.item.url;
     },
+    url() {
+      return this.isUrl && this.item.url && Autolinker.parse(this.item.url, {
+        email: true,
+      })?.[0]?.getUrl?.() || this.item.url;
+    },
     itemAttributes() {
       const attributes = {};
       if (this.isUrl) {
-        attributes.href = this.item.url;
+        attributes.href = this.url;
         attributes.target = this.item.target;
       }
       return attributes;