[MS] Open contextuel menu from breadcrumb

Author: fabienSvtr

client/src/components/header/HeaderBreadcrumbs.vue

@@ -4,17 +4,22 @@
   <div class="header-breadcrumbs">
     <ion-breadcrumbs
       v-if="isLargeDisplay"
-      class="breadcrumb"
+      class="breadcrumb-container"
       @ion-collapsed-click="openPopover($event)"
       :max-items="maxShown"
       :items-before-collapse="itemsBeforeCollapse"
       :items-after-collapse="itemsAfterCollapse"
     >
       <ion-breadcrumb
         v-for="path in pathNodes"
-        @click="navigateTo(path)"
+        @click="path.display !== currentFolderName ? navigateTo(path) : null"
+        @contextmenu.prevent="onRightClick"
         :path="path"
         class="breadcrumb-element breadcrumb-normal"
+        :class="{
+          'breadcrumb-element--home': props.pathNodes.length === 1,
+          'breadcrumb-element--active': path.display === currentFolderName || (props.pathNodes.length === 1 && props.fromHeaderPage),
+        }"
         :key="path.id"
         ref="breadcrumb"
       >
@@ -26,6 +31,12 @@
         <div class="breadcrumb-text">
           {{ path.display ? path.display : $msTranslate(path.title) }}
         </div>
+        <ion-icon
+          v-if="currentFolderName === path.display"
+          :icon="ellipsisHorizontal"
+          class="option-icon"
+          @click="breadcrumbOptionClick(path, $event)"
+        />
       </ion-breadcrumb>
     </ion-breadcrumbs>
     <div
@@ -59,12 +70,17 @@ export interface RouterPathNode {
 
 <script setup lang="ts">
 import HeaderBreadcrumbPopover from '@/components/header/HeaderBreadcrumbPopover.vue';
-import { WorkspaceName } from '@/parsec';
+import { openWorkspaceContextMenu } from '@/components/workspaces';
+import { StartedWorkspaceInfo, WorkspaceInfo, WorkspaceName, WorkspaceRole } from '@/parsec';
 import { Query, Routes } from '@/router';
+import { EventDistributor, EventDistributorKey, Events, OpenFolderBreadcrumbContextMenuData } from '@/services/eventDistributor';
+import { InformationManager } from '@/services/informationManager';
+import { StorageManager } from '@/services/storageManager';
+import { WorkspaceAttributes } from '@/services/workspaceAttributes';
 import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonText, popoverController } from '@ionic/vue';
-import { chevronDown } from 'ionicons/icons';
+import { chevronDown, ellipsisHorizontal } from 'ionicons/icons';
 import { Translatable, useWindowSize } from 'megashark-lib';
-import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
+import { computed, inject, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 
 const props = withDefaults(
   defineProps<{
@@ -73,21 +89,29 @@ const props = withDefaults(
     itemsBeforeCollapse?: number;
     itemsAfterCollapse?: number;
     maxShown?: number;
-    fromHeaderPage?: boolean;
+    fromHeaderPage?: {
+      workspaceAttributes: WorkspaceAttributes;
+      workspace: StartedWorkspaceInfo | WorkspaceInfo;
+      ownRole: WorkspaceRole;
+      eventDistributor: EventDistributor;
+      informationManager: InformationManager;
+      storageManager: StorageManager;
+    };
     availableWidth?: number;
     showParentNode?: boolean;
   }>(),
   {
     itemsBeforeCollapse: 2,
     itemsAfterCollapse: 1,
     maxShown: 3,
-    fromHeaderPage: false,
+    fromHeaderPage: undefined,
     availableWidth: 0,
     showParentNode: true,
   },
 );
 
 const { windowWidth, isLargeDisplay, isSmallDisplay } = useWindowSize();
+const eventDistributor: EventDistributor = inject(EventDistributorKey)!;
 const breadcrumbRef = useTemplateRef<HTMLIonBreadcrumbElement>('breadcrumb');
 const breadcrumbWidthProperty = ref('');
 let ignoreNextEvent = false;
@@ -121,14 +145,37 @@ const currentFolderName = computed(() => {
     return '';
   }
 
-  if (props.pathNodes.length === 1) {
-    return props.workspaceName;
+  if (props.pathNodes.length === 1 && props.fromHeaderPage) {
+    return props.fromHeaderPage.workspace.currentName;
   }
 
   const lastNode = props.pathNodes[props.pathNodes.length - 1];
   return lastNode.display || props.workspaceName;
 });
 
+async function breadcrumbOptionClick(path: RouterPathNode, event: Event): Promise<void> {
+  if (!props.fromHeaderPage) {
+    return;
+  }
+
+  if (path.display === props.workspaceName) {
+    await openWorkspaceContextMenu(
+      event,
+      props.fromHeaderPage.workspace as WorkspaceInfo,
+      props.fromHeaderPage.workspaceAttributes,
+      props.fromHeaderPage.eventDistributor,
+      props.fromHeaderPage.informationManager,
+      props.fromHeaderPage.storageManager,
+      true,
+    );
+  } else {
+    await eventDistributor.dispatchEvent(Events.OpenFolderBreadcrumbContextMenu, {
+      event,
+      role: props.fromHeaderPage.ownRole,
+    } as OpenFolderBreadcrumbContextMenuData);
+  }
+}
+
 function setBreadcrumbWidth(): void {
   if (props.availableWidth > 0 && breadcrumbRef.value) {
     let visibleNodes = Math.min(props.pathNodes.length, props.maxShown);
@@ -192,6 +239,12 @@ function navigateTo(path: RouterPathNode): void {
   }
   emits('change', path);
 }
+
+async function onRightClick(event: Event): Promise<void> {
+  event.preventDefault();
+  event.stopPropagation();
+  await breadcrumbOptionClick(props.pathNodes[props.pathNodes.length - 1], event);
+}
 </script>
 
 <style scoped lang="scss">
@@ -207,13 +260,13 @@ function navigateTo(path: RouterPathNode): void {
   }
 }
 
-.breadcrumb {
+.breadcrumb-container {
   padding: 0;
   color: var(--parsec-color-light-secondary-grey);
   display: flex;
   flex-wrap: nowrap;
 
-  &-element {
+  .breadcrumb-element {
     .main-icon {
       font-size: 1.125rem;
     }
@@ -240,6 +293,7 @@ function navigateTo(path: RouterPathNode): void {
     &:hover:not(.breadcrumb-collapsed) {
       color: var(--parsec-color-light-secondary-text);
       position: relative;
+      cursor: default;
 
       &::after {
         content: '';
@@ -259,28 +313,65 @@ function navigateTo(path: RouterPathNode): void {
         }
       }
     }
-  }
-
-  // Defined by ionic
-  // eslint-disable-next-line vue-scoped-css/no-unused-selector
-  &-active {
-    color: var(--parsec-color-light-primary-700);
-    pointer-events: none;
 
-    &::part(native) {
+    .breadcrumb-text {
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 1rem;
+      pointer-events: none;
       cursor: default;
     }
 
-    .main-icon {
+    &--active:not(.breadcrumb-element--home) {
+      color: var(--parsec-color-light-secondary-text);
+      --background: none;
+
+      &::part(native) {
+        border-radius: var(--parsec-radius-6);
+      }
+
+      .breadcrumb-text {
+        pointer-events: none;
+        cursor: default;
+      }
+
+      &:hover:not(.breadcrumb-collapsed) {
+        color: var(--parsec-color-light-primary-700);
+        position: relative;
+
+        &::after {
+          content: none;
+        }
+      }
+
+      .option-icon:hover {
+        background: var(--parsec-color-light-secondary-medium);
+        border-radius: var(--parsec-radius-8);
+        pointer-events: all;
+        opacity: 1;
+        cursor: pointer;
+      }
+    }
+
+    &--home {
       color: var(--parsec-color-light-primary-700);
-      margin-right: 0.5rem;
+
+      .main-icon {
+        color: var(--parsec-color-light-primary-700);
+        margin-right: 0.5rem;
+      }
     }
   }
 
-  &-text {
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .option-icon {
+    font-size: 1.25rem;
+    padding: 0.25rem;
+    color: var(--parsec-color-light-secondary-text);
+    margin-left: 0.25rem;
+    opacity: 0.3;
+    pointer-events: all;
+    flex-shrink: 0;
   }
 }
 

client/src/services/eventDistributor.ts

@@ -49,7 +49,8 @@ enum Events {
   EntryDeleted = 1 << 26,
   EntrySyncProgress = 1 << 27,
   WorkspaceMountpointsSync = 1 << 28,
-  OpenContextMenu = 1 << 28,
+  OpenContextMenu = 1 << 29,
+  OpenFolderBreadcrumbContextMenu = 1 << 30,
 }
 
 interface WorkspaceCreatedData {
@@ -135,6 +136,11 @@ interface OpenContextualMenuData {
   event: Event;
 }
 
+interface OpenFolderBreadcrumbContextMenuData {
+  event: Event;
+  role: WorkspaceRole;
+}
+
 type EventData =
   | WorkspaceCreatedData
   | InvitationUpdatedData
@@ -151,7 +157,8 @@ type EventData =
   | EntryRenamedData
   | EntryDeletedData
   | WorkspaceMountpointInfo
-  | OpenContextualMenuData;
+  | OpenContextualMenuData
+  | OpenFolderBreadcrumbContextMenuData;
 
 interface Callback {
   id: string;
@@ -242,6 +249,7 @@ export {
   InvitationUpdatedData,
   MenuActionData,
   OpenContextualMenuData,
+  OpenFolderBreadcrumbContextMenuData,
   UpdateAvailabilityData,
   WorkspaceCreatedData,
   WorkspaceMountpointInfo,

client/src/theme/components/_popovers.scss

@@ -58,6 +58,7 @@
 
 #workspace-context-menu,
 #file-context-menu,
+#folder-breadcrumb-context-menu,
 #user-context-menu,
 #workspace-context-sheet-modal,
 #file-context-sheet-modal,
@@ -213,6 +214,7 @@
 
 #workspace-context-menu,
 #file-context-menu,
+#folder-breadcrumb-context-menu,
 #user-context-menu {
   .list-group {
     gap: 0.375rem;