feat(ui): Nav Bar > adds workspace quick switcher (closes #210)

flawiddsouza · Aug 12, 2024 · 7cd96b8 · 7cd96b8
1 parent 918191c
commit 7cd96b8
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/packages/ui/src/components/ContextMenu.vue b/packages/ui/src/components/ContextMenu.vue
@@ -147,11 +147,11 @@ export default {
             this.$emit('update:show', false)
         },
         getOption(option) {
-            const tickMark = '<div class="selected-indicator"><i class="fa fa-check"></i>&nbsp;</div>'
-            const noTickMark = '<div class="selected-indicator">&nbsp;&nbsp;&nbsp;&nbsp;</div>'
+            const tickMark = '<div class="selected-indicator"><i class="fa fa-check"></i>&nbsp;&nbsp;</div>'
+            const noTickMark = '<div class="selected-indicator">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>'
             const displayedOption = `<div style="word-break: break-all;">${option.label}</div>`
 
-            if(this.selectedOption === undefined) {
+            if(this.selectedOption === undefined || option.disabled) {
                 return displayedOption
             }
 

diff --git a/packages/ui/src/components/NavBar.vue b/packages/ui/src/components/NavBar.vue
@@ -9,6 +9,9 @@
             <div style="margin-left: 0.5rem; font-size: 0.6rem" v-if="activeWorkspaceLoaded && activeWorkspace._type === 'file'">
                 <button class="button" @click="openWorkspaceFolder">Open Folder</button>
             </div>
+            <div style="margin-left: 0.5rem; font-size: 0.6rem" v-if="activeWorkspaceLoaded">
+                <button class="button workspace-quick-switcher" @click="openWorkspaceQuickSwitcher"><i class="fa fa-repeat"></i> Switch</button>
+            </div>
         </div>
         <div class="right-nav-container">
             <a href="#" @click.prevent="cycleTheme()" class="bl theme-selector">Theme: {{ getThemeName(theme) }}</a>
@@ -20,7 +23,7 @@
                 <div style="display: inline-flex; align-items: center; height: 100%; margin-right: 0.5rem;">
                     <a href="#" @click.prevent="environmentModalShow = true" style="margin-right: 0.2rem; padding-right: 0.2rem;" class="bl">Environment</a>
                     <div class="custom-dropdown" style="padding-left: 0;" @click="toggleEnvSelectorDropdown">
-                        <i class="fa fa-circle" :style="{ color: currentEnvironmentColor }">&nbsp;</i> {{ currentEnvironment ?? 'Default' }}
+                        <i class="fa fa-circle" :style="{ color: currentEnvironmentColor }"></i>&nbsp;&nbsp;{{ currentEnvironment ?? 'Default' }}
                         <i class="fa fa-caret-down space-right"></i>
                     </div>
                     <ContextMenu
@@ -62,6 +65,15 @@
     <LogsModal v-model:showModal="showLogsModal"></LogsModal>
     <EnvironmentModal v-model:showModal="environmentModalShow" :workspace="activeWorkspace" v-if="activeWorkspace" />
     <BackupAndRestoreModal />
+    <ContextMenu
+        :options="workspaceQuickSwitcherOptions"
+        :element="workspaceQuickSwitcherElement"
+        :x="workspaceQuickSwitcherContextMenuX"
+        :y="workspaceQuickSwitcherContextMenuY"
+        v-model:show="workspaceQuickSwitcherDropdownVisible"
+        :selected-option="activeWorkspace"
+        @click="setActiveWorkspace"
+    />
 </template>
 
 <script>
@@ -106,6 +118,10 @@ export default {
             envSelectorContextMenuX: null,
             envSelectorContextMenuY: null,
             envSelectorDropdownVisible: false,
+            workspaceQuickSwitcherElement: null,
+            workspaceQuickSwitcherContextMenuX: null,
+            workspaceQuickSwitcherContextMenuY: null,
+            workspaceQuickSwitcherDropdownVisible: false,
         }
     },
     computed: {
@@ -173,6 +189,27 @@ export default {
         flags() {
             return this.$store.state.flags
         },
+        workspaceQuickSwitcherOptions() {
+            const workspacesOptions = this.$store.state.workspaces.map(workspace => {
+                return {
+                    type: 'option',
+                    label: workspace.name,
+                    value: workspace,
+                    class: 'context-menu-item-with-left-padding',
+                }
+            })
+
+            return [
+                {
+                    type: 'option',
+                    label: 'Workspaces',
+                    icon: 'fa fa-book',
+                    disabled: true,
+                    class: 'text-with-line'
+                },
+                ...workspacesOptions
+            ]
+        },
     },
     methods: {
         async exportCollection() {
@@ -276,7 +313,7 @@ export default {
             const list =  this.environments.map(item => {
                 return {
                     type: 'option',
-                    label: `&nbsp;<i class="fa fa-circle" style="color:${item.color}"></i> ${item.name}`,
+                    label: `<i class="fa fa-circle" style="color:${item.color}"></i>&nbsp;&nbsp;${item.name}`,
                     value: `${item.name}`,
                     class: 'context-menu-item-with-left-padding'
                 }
@@ -286,7 +323,14 @@ export default {
         selectEnv(value) {
             this.currentEnvironment = value
             this.$store.dispatch('reloadTabEnvironmentResolved')
-        }
+        },
+        openWorkspaceQuickSwitcher(event) {
+            const containerElement = event.target.closest('.workspace-quick-switcher')
+            this.workspaceQuickSwitcherContextMenuX = containerElement.getBoundingClientRect().left
+            this.workspaceQuickSwitcherContextMenuY = containerElement.getBoundingClientRect().top + containerElement.getBoundingClientRect().height
+            this.workspaceQuickSwitcherElement = containerElement
+            this.workspaceQuickSwitcherDropdownVisible = true
+        },
     },
 }
 </script>

diff --git a/packages/ui/src/components/Workspaces.vue b/packages/ui/src/components/Workspaces.vue
@@ -87,8 +87,8 @@ export default {
         }
     },
     methods: {
-        setActiveWorkspace(workspaceId) {
-            this.$store.commit('setActiveWorkspace', workspaceId)
+        setActiveWorkspace(workspace) {
+            this.$store.commit('setActiveWorkspace', workspace)
         },
         handleContextMenu(event, workspace) {
             this.contextMenuElement = event.target.closest('.workspace-settings-button')