feat: git drawer UI (wip) + various improvements

ietf-tools · Feb 22, 2024 · ef57281 · ef57281
1 parent 2e6694e
commit ef57281
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 21 deletions.
diff --git a/src-electron/menu.js b/src-electron/menu.js
@@ -1,7 +1,7 @@
 import { Menu, app, shell } from 'electron'
 import os from 'node:os'
 
-import { openDocument } from './handlers'
+import { openDocument, selectDirectory } from './handlers'
 
 export function registerMenu (mainWindow) {
   const platform = process.platform || os.platform()
@@ -51,6 +51,18 @@ export function registerMenu (mainWindow) {
         {
           type: 'separator'
         },
+        {
+          label: 'Set Working Directory...',
+          async click () {
+            const wdPath = await selectDirectory(mainWindow, null, 'Select Working Directory...')
+            if (wdPath) {
+              mainWindow.webContents.send('setWorkingDirectory', wdPath)
+            }
+          }
+        },
+        {
+          type: 'separator'
+        },
         {
           label: 'Save',
           accelerator: 'CommandOrControl+S',

diff --git a/src/components/DrawerGit.vue b/src/components/DrawerGit.vue
@@ -4,6 +4,32 @@
     .text-caption.text-light-blue-3
       strong Git
     q-space
+    template(v-if='editorStore.isGitRepo')
+      q-btn(
+        flat
+        size='sm'
+        icon='mdi-sync'
+        padding='xs xs'
+        text-color='light-blue-3'
+        )
+        q-tooltip Fetch
+      q-btn(
+        flat
+        size='sm'
+        icon='mdi-content-duplicate'
+        padding='xs xs'
+        text-color='light-blue-3'
+        @click='cloneRepo'
+        )
+        q-tooltip Clone Repository...
+      q-btn(
+        flat
+        size='sm'
+        icon='mdi-archive-plus-outline'
+        padding='xs xs'
+        text-color='light-blue-3'
+        )
+        q-tooltip Initialize New...
     q-btn(
       flat
       size='sm'
@@ -13,31 +39,66 @@
       @click='gitSettings'
       )
       q-tooltip Git Settings
-  q-btn.full-width.q-mt-sm(
-    icon='mdi-cloud-download'
-    label='Clone Repository...'
-    color='primary'
-    no-caps
-    unelevated
-    @click='cloneRepo'
-  )
-  q-btn.full-width.q-mt-sm(
-    icon='mdi-git'
-    label='Initialize New...'
-    color='primary'
-    no-caps
-    unelevated
-  )
+  template(v-if='!editorStore.isGitRepo')
+    q-btn.full-width.q-mt-sm(
+      icon='mdi-cloud-download'
+      label='Clone Repository...'
+      color='primary'
+      no-caps
+      unelevated
+      @click='cloneRepo'
+    )
+    q-btn.full-width.q-mt-sm(
+      icon='mdi-git'
+      label='Initialize New...'
+      color='primary'
+      no-caps
+      unelevated
+    )
+  template(v-else)
+    .drawer-git-branch.q-mt-sm
+      q-icon.q-mr-sm(name='mdi-source-branch')
+      span Branch: #[strong main]
+      q-space
+      q-btn(
+        flat
+        size='sm'
+        icon='mdi-swap-horizontal'
+        padding='xs xs'
+        text-color='grey-5'
+        )
+        q-tooltip Checkout Branch...
+    .drawer-git-changes.q-mt-sm
+      .flex.items-center.text-caption.text-grey-4
+        q-icon.q-mr-sm(name='mdi-list-status')
+        strong Changes
+        q-space
+        q-btn(
+          flat
+          size='sm'
+          icon='mdi-refresh'
+          padding='xs xs'
+          text-color='grey-5'
+          )
+          q-tooltip Refresh
+      .text-center.text-caption.q-mt-sm
+        em.text-grey-5 No changes.
+    .drawer-git-history.q-mt-sm
+      .flex.items-center.text-caption.text-grey-4
+        q-icon.q-mr-sm(name='mdi-list-box-outline')
+        strong History
+      .text-center.text-caption.q-mt-sm
+        em.text-grey-5 No commit yet.
 </template>
 
 <script setup>
 import { defineAsyncComponent } from 'vue'
 import { useQuasar } from 'quasar'
-// import { useEditorStore } from 'src/stores/editor'
+import { useEditorStore } from 'src/stores/editor'
 
 const $q = useQuasar()
 
-// const editorStore = useEditorStore()
+const editorStore = useEditorStore()
 
 // METHODS
 
@@ -57,3 +118,26 @@ function cloneRepo () {
 }
 
 </script>
+
+<style lang="scss">
+.drawer-git {
+  &-branch {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    background-color: rgba(255,255,255,.1);
+    border-radius: 4px;
+    padding: 5px 8px;
+  }
+  &-changes {
+    background-color: rgba(255,255,255,.1);
+    border-radius: 4px;
+    padding: 5px 8px;
+  }
+  &-history {
+    background-color: rgba(255,255,255,.1);
+    border-radius: 4px;
+    padding: 5px 8px;
+  }
+}
+</style>
diff --git a/src/components/DrawerPane.vue b/src/components/DrawerPane.vue
@@ -8,7 +8,8 @@ q-drawer.bg-dark-4(
   q-scroll-area.fit(
     :horizontal-thumb-style='{ opacity: 0 }'
     )
-    component(:is='panes[editorStore.drawerPane]')
+    keep-alive
+      component(:is='panes[editorStore.drawerPane]')
 </template>
 
 <script setup>

diff --git a/src/stores/editor.js b/src/stores/editor.js
@@ -31,7 +31,8 @@ export const useEditorStore = defineStore('editor', {
   }),
   getters: {
     hasErrors: (state) => state.errors?.length > 0,
-    isDarkTheme: (state) => ['ietf-dark', 'hc-black'].includes(state.theme)
+    isDarkTheme: (state) => ['ietf-dark', 'hc-black'].includes(state.theme),
+    isGitRepo: (state) => state.workingDirFiles.some(f => f.name === '.git')
   },
   actions: {
     async fetchGitConfig () {
@@ -65,7 +66,6 @@ export const useEditorStore = defineStore('editor', {
     paths: [
       'cursorBlinking',
       'cursorStyle',
-      'drawerPane',
       'fontSize',
       'formatOnType',
       'previewPaneShown',