fix: Enhance UX of Sidebar Ripple button opening second level drawer - …

…Meeds-io/MIPs#159
Meeds-io · Dec 1, 2024 · a26a5d5 · a26a5d5
1 parent 732803b
commit a26a5d5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/webapp/src/main/webapp/vue-apps/sidebar/components/Sidebar.vue b/webapp/src/main/webapp/vue-apps/sidebar/components/Sidebar.vue
@@ -230,7 +230,7 @@ export default {
         this.closeTimeout = window.setTimeout(() => this.allowClosing = true, 2000);
       }
     },
-    async changeSpacesMenu(spaceTemplateId, spacesUrl, sortBy, name) {
+    async changeSpacesMenu(spaceTemplateId, spacesUrl, sortBy, name, type) {
       this.site = null;
       if (this.secondLevel === 'spaces'
           && ((spaceTemplateId && this.$root.openedSpaceTemplateId === spaceTemplateId)
@@ -240,6 +240,7 @@ export default {
         this.secondLevelDrawer = false;
         this.thirdLevelDrawer = false;
         window.setTimeout(() => {
+          this.$root.openedFirstLevelType = null;
           this.$root.openedSpaceTemplateId = null;
           this.$root.openedSpaceTemplateName = null;
           this.$root.openedSpaces = false;
@@ -251,6 +252,7 @@ export default {
           await this.$nextTick();
         }
         this.space = null;
+        this.$root.openedFirstLevelType = type;
         this.$root.openedSpaceTemplateId = spaceTemplateId;
         this.$root.openedSpaceTemplateName = name;
         this.$root.openedSpaces = !spaceTemplateId;
@@ -285,6 +287,9 @@ export default {
           this.thirdLevelDrawer = false;
         }
       }
+      if (!thirdLevel) {
+        this.$root.openedFirstLevelType = 'SPACE';
+      }
     },
     changeSiteMenu(site) {
       this.space = null;
@@ -296,6 +301,7 @@ export default {
       } else {
         this.site = site;
         this.secondLevel = 'site';
+        this.$root.openedFirstLevelType = 'SITE';
         this.secondLevelDrawer = true;
         this.thirdLevelDrawer = false;
       }

diff --git a/webapp/src/main/webapp/vue-apps/sidebar/components/list/SidebarListItem.vue b/webapp/src/main/webapp/vue-apps/sidebar/components/list/SidebarListItem.vue
@@ -125,7 +125,7 @@
       </v-list-item-content>
       <v-list-item-action
         v-if="toggleArrow && $root.expand"
-        class="my-auto align-center"
+        class="my-auto align-center z-index-one position-relative"
         @mousedown.stop.prevent
         @mouseup.stop.prevent>
         <ripple-hover-button
@@ -163,7 +163,7 @@
       <space-unread-badge
         v-if="isSpace"
         v-show="!toggleArrow"
-        :space-id="id"
+        :space-id="spaceId"
         :unread-badge="space?.unread"
         @refresh="retrieveSpace(true)" />
     </v-list-item>
@@ -183,9 +183,6 @@ export default {
     space: null,
   }),
   computed: {
-    id() {
-      return this.item?.properties?.id;
-    },
     menuItems() {
       return this.item?.items;
     },
@@ -216,9 +213,15 @@ export default {
     isSpaceTemplate() {
       return this.item.type === 'SPACE_TEMPLATE';
     },
+    siteName() {
+      return this.isSite && this.item?.properties?.siteName;
+    },
+    spaceId() {
+      return this.isSpace && this.item?.properties?.id;
+    },
     drawerOpened() {
-      return (this.isSite && this.$root.openedSiteName === this.item?.properties?.siteName)
-        || (this.isSpace && Number(this.$root.openedSpaceId) === Number(this.item?.properties?.id))
+      return (this.isSite && this.$root.openedSiteName === this.siteName)
+        || (this.isSpace && this.$root.openedFirstLevelType === 'SPACE' && Number(this.$root.openedSpaceId) === Number(this.spaceId))
         || (this.isSpaces && this.$root.openedSpaces)
         || (this.isSpaceTemplate && Number(this.$root.openedSpaceTemplateId) === Number(this.item?.properties?.spaceTemplateId));
     },
@@ -232,7 +235,7 @@ export default {
       return this.hover && this.hasItems && !this.url;
     },
     displaySpacesExpandKey() {
-      return `sidebar-collapsed-${this.item.type}-${this.item.url || this.item?.properties?.id || this.item?.properties?.spaceTemplateId}`;
+      return `sidebar-collapsed-${this.item.type}-${this.item.url || this.spaceId || this.item?.properties?.spaceTemplateId}`;
     },
     spacesIcon() {
       return this.hover && this.hasItems ? (this.collapsedSpaces && `fa-caret-${this.$vuetify.rtl && 'left' || 'right'}` || 'fa-caret-down') : (this.item.icon || 'fa-folder');
@@ -310,14 +313,15 @@ export default {
         this.isSpaceTemplate && this.item.properties?.spaceTemplateId,
         this.isSpaces && this.url,
         this.item.properties?.sortBy,
-        this.item.name);
+        this.item.name,
+        this.item.type);
     },
     async openOrCloseDrawer() {
       if (this.isSite) {
         if (!this.$root.sites) {
           await this.retrieveSites();
         }
-        const site = this.$root.sites?.find(s => s.name === this.item?.properties?.siteName);
+        const site = this.$root.sites?.find(s => s.name === this.siteName);
         this.$root.$emit('change-site-menu', site);
       } else if (this.isSpace) {
         if (!this.space) {
@@ -337,7 +341,7 @@ export default {
       this.$root.sites = await this.$siteService.getSites('PORTAL', null, 'global', true, true, true, true, true, true, true, true, true, ['displayed', 'temporal']);
     },
     async retrieveSpace(refresh) {
-      this.space = await this.$spaceService.getSpaceById(this.id, 'member,managers,favorite,unread,muted', refresh);
+      this.space = await this.$spaceService.getSpaceById(this.spaceId, 'member,managers,favorite,unread,muted', refresh);
       this.$set(this.$root.unreadPerSpace, this.space.id, this.space.unread && Number(this.space.unread) || 0);
     },
     forceOpenLink() {

diff --git a/webapp/src/main/webapp/vue-apps/sidebar/main.js b/webapp/src/main/webapp/vue-apps/sidebar/main.js
@@ -66,6 +66,7 @@ export function init(
           openedSpacesUrl: null,
           openedSpaceTemplateId: null,
           openedSpaceTemplateName: null,
+          openedFirstLevelType: null,
           sites: null,
           settings: null,
           openedOverlay: false,