feat: about dialog

ietf-tools · Dec 4, 2023 · fcc20f5 · fcc20f5
1 parent cc56da4
commit fcc20f5
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 42 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -25,10 +25,10 @@ module.exports = {
     'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
     // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
     // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+
     'plugin:vue-pug/vue3-essential',
 
     'standard'
-
   ],
 
   plugins: [

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -63,7 +63,7 @@ jobs:
   # BUILD PWA
   # -----------------------------------------------------------------
   build-pwa:
-    name: Build Electron
+    name: Build PWA
     needs: [prepare]
     runs-on: ubuntu-latest
     permissions:
@@ -116,7 +116,7 @@ jobs:
   # DEPLOY PWA
   # -----------------------------------------------------------------
   deploy-pwa:
-    name: Deploy to Sandbox
+    name: Deploy PWA to Sandbox
     needs: [prepare, build-pwa]
     runs-on: [self-hosted, dev-server]
     env:

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,8 +11,8 @@
     "javascriptreact",
     "typescript",
     "vue"
-  ],
-  "[vue]": {
-    "editor.defaultFormatter": "Vue.volar"
-  }
+  ]
+  // "[vue]": {
+  //   "editor.defaultFormatter": "Vue.volar"
+  // }
 }
diff --git a/public/images/draftforge-banner.png b/public/images/draftforge-banner.png
diff --git a/quasar.config.js b/quasar.config.js
@@ -10,6 +10,7 @@
 
 const { configure } = require('quasar/wrappers')
 const curYear = new Date().getFullYear()
+const packageInfo = require('./package.json')
 
 module.exports = configure(function (/* ctx */) {
   return {
@@ -67,7 +68,9 @@ module.exports = configure(function (/* ctx */) {
 
       // publicPath: '/',
       // analyze: true,
-      // env: {},
+      env: {
+        APP_VERSION: packageInfo.version
+      },
       // rawDefine: {}
       // ignorePublicFolder: true,
       // minify: false,
@@ -93,13 +96,15 @@ module.exports = configure(function (/* ctx */) {
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
     devServer: {
-      // https: true
+      https: true,
       open: true // opens browser window automatically
     },
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
     framework: {
-      config: {},
+      config: {
+        dark: true
+      },
 
       iconSet: 'mdi-v7', // Quasar icon set
       // lang: 'en-US', // Quasar language pack
@@ -112,7 +117,9 @@ module.exports = configure(function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: []
+      plugins: [
+        'Dialog'
+      ]
     },
 
     // animations: 'all', // --- includes all animations

diff --git a/src/components/AboutDialog.vue b/src/components/AboutDialog.vue
@@ -0,0 +1,42 @@
+<template lang="pug">
+q-dialog(ref='dialogRef', @hide='onDialogHide')
+  q-card(style='min-width: 600px;')
+    q-card-section.flex.items-center.bg-light-blue-10
+      q-icon(name='mdi-information-outline', left, size='sm')
+      span About DraftForge
+      q-space
+      q-btn(
+        unelevated
+        label='Close'
+        color='primary'
+        padding='xs md'
+        @click='onDialogOK'
+        )
+    img(src='/images/draftforge-banner.png' alt="DraftForge")
+    q-card-section.bg-black
+      .text-caption App Version: #[strong {{ appVersion }}]
+      .text-caption Execution Mode: #[strong {{ appMode }}]
+      .text-caption Quasar Framework Version: #[strong {{ $q.version }}]
+
+</template>
+
+<script setup>
+import { useDialogPluginComponent, useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+// EMITS
+
+defineEmits([
+  ...useDialogPluginComponent.emits
+])
+
+// QUASAR
+
+const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent()
+
+// INFO
+
+const appVersion = process.env.APP_VERSION ?? 'Unknown'
+const appMode = process.env.MODE ?? 'Unknown'
+</script>
diff --git a/src/components/MainToolbar.vue b/src/components/MainToolbar.vue
@@ -2,8 +2,8 @@
 q-bar.bg-light-blue-9
   q-btn(padding="xs sm" flat no-caps)
     span.text-body2 File
-    q-menu(transition-show='jump-down' transition-hide='jump-up')
-      q-list(dense auto-close padding)
+    q-menu.translucent-menu(transition-show='jump-down' transition-hide='jump-up' auto-close)
+      q-list(dense padding)
         q-item(clickable)
           q-item-section(side)
             q-icon(name='mdi-text-box-plus-outline')
@@ -20,8 +20,8 @@ q-bar.bg-light-blue-9
           q-item-section Open Recent
           q-item-section(side)
             q-icon(name='mdi-menu-right')
-          q-menu(anchor='top end' self='top start')
-            q-list(dense auto-close padding)
+          q-menu.translucent-menu(anchor='top end' self='top start')
+            q-list(dense padding)
               q-item(disabled)
                 q-item-section No Recent Drafts
         q-separator.q-my-sm
@@ -45,8 +45,8 @@ q-bar.bg-light-blue-9
           q-item-section Export
           q-item-section(side)
             q-icon(name='mdi-menu-right')
-          q-menu(anchor='top end' self='top start')
-            q-list(dense auto-close padding)
+          q-menu.translucent-menu(anchor='top end' self='top start')
+            q-list(dense padding)
               q-item(clickable)
                 q-item-section All
               q-item(clickable)
@@ -73,8 +73,8 @@ q-bar.bg-light-blue-9
           q-item-section Exit
   q-btn(padding="xs sm" flat no-caps)
     span.text-body2 Edit
-    q-menu(transition-show='jump-down' transition-hide='jump-up')
-      q-list(dense auto-close padding)
+    q-menu.translucent-menu(transition-show='jump-down' transition-hide='jump-up' auto-close)
+      q-list(dense padding)
         q-item(clickable)
           q-item-section(side)
             q-icon(name='mdi-undo-variant')
@@ -108,8 +108,8 @@ q-bar.bg-light-blue-9
           q-item-section Find
           q-item-section(side)
             q-icon(name='mdi-menu-right')
-          q-menu(anchor='top end' self='top start')
-            q-list(dense auto-close padding)
+          q-menu.translucent-menu(anchor='top end' self='top start')
+            q-list(dense padding)
               q-item(clickable)
                 q-item-section Find
                 q-item-section(side caption) {{cmdKey}}+F
@@ -131,8 +131,8 @@ q-bar.bg-light-blue-9
           q-item-section Spelling & Grammar
           q-item-section(side)
             q-icon(name='mdi-menu-right')
-          q-menu(anchor='top end' self='top start')
-            q-list(dense auto-close padding)
+          q-menu.translucent-menu(anchor='top end' self='top start')
+            q-list(dense padding)
               q-item(clickable)
                 q-item-section Check Spelling
               q-item(clickable)
@@ -143,8 +143,8 @@ q-bar.bg-light-blue-9
                 q-item-section Check for Duplicates
   q-btn(padding="xs sm" flat no-caps)
     span.text-body2 Selection
-    q-menu(transition-show='jump-down' transition-hide='jump-up')
-      q-list(dense auto-close padding)
+    q-menu.translucent-menu(transition-show='jump-down' transition-hide='jump-up' auto-close)
+      q-list(dense padding)
         q-item(clickable)
           q-item-section(side)
             q-icon(name='mdi-select-all')
@@ -217,8 +217,8 @@ q-bar.bg-light-blue-9
           q-item-section.text-caption(side caption) {{cmdKey}}+Shift+L
   q-btn(padding="xs sm" flat no-caps)
     span.text-body2 View
-    q-menu(transition-show='jump-down' transition-hide='jump-up')
-      q-list(dense auto-close padding)
+    q-menu.translucent-menu(transition-show='jump-down' transition-hide='jump-up' auto-close)
+      q-list(dense padding)
         q-item(clickable)
           q-item-section(side)
             q-icon(name='mdi-form-select')
@@ -246,8 +246,8 @@ q-bar.bg-light-blue-9
           q-item-section Preview Output
           q-item-section(side)
             q-icon(name='mdi-menu-right')
-          q-menu(anchor='top end' self='top start')
-            q-list(dense auto-close padding)
+          q-menu.translucent-menu(anchor='top end' self='top start')
+            q-list(dense padding)
               q-item(clickable)
                 q-item-section HTML
                 q-item-section(side)
@@ -262,8 +262,8 @@ q-bar.bg-light-blue-9
           q-item-section.text-caption(side caption) Alt+Z
   q-btn(padding="xs sm" flat no-caps)
     span.text-body2 Insert
-    q-menu(transition-show='jump-down' transition-hide='jump-up')
-      q-list(dense auto-close padding)
+    q-menu.translucent-menu(transition-show='jump-down' transition-hide='jump-up' auto-close)
+      q-list(dense padding)
         q-item(clickable)
           q-item-section(side)
             q-icon(name='mdi-tag-plus-outline')
@@ -278,8 +278,8 @@ q-bar.bg-light-blue-9
           q-item-section Create Table
   q-btn(padding="xs sm" flat no-caps)
     span.text-body2 Tools
-    q-menu(transition-show='jump-down' transition-hide='jump-up')
-      q-list(dense auto-close padding)
+    q-menu.translucent-menu(transition-show='jump-down' transition-hide='jump-up' auto-close)
+      q-list(dense padding)
         q-item(clickable)
           q-item-section(side)
             q-icon(name='mdi-bicycle-penny-farthing')
@@ -310,36 +310,36 @@ q-bar.bg-light-blue-9
           q-item-section Check SVG
   q-btn(padding="xs sm" flat no-caps)
     span.text-body2 Help
-    q-menu(transition-show='jump-down' transition-hide='jump-up')
-      q-list(dense auto-close padding)
-        q-item(clickable)
+    q-menu.translucent-menu(transition-show='jump-down' transition-hide='jump-up' auto-close)
+      q-list(dense padding)
+        q-item(clickable href="https://authors.ietf.org/" target="_blank")
           q-item-section(side)
             q-icon(name='mdi-book-open-page-variant-outline')
           q-item-section Documentation
-        q-item(clickable)
+        q-item(clickable href="https://authors.ietf.org/en/rfcxml-vocabulary" target="_blank")
           q-item-section(side)
             q-icon(name='mdi-bookshelf')
           q-item-section RFCXML Vocabulary
         q-separator.q-my-sm
-        q-item(clickable)
+        q-item(clickable href="https://github.com/ietf-tools/editor/releases" target="_blank")
           q-item-section(side)
             q-icon(name='mdi-list-box-outline')
           q-item-section Release Notes
-        q-item(clickable)
+        q-item(clickable href="https://github.com/ietf-tools/editor/issues" target="_blank")
           q-item-section(side)
             q-icon(name='mdi-bug-outline')
           q-item-section Report Issue
-        q-item(clickable)
+        q-item(clickable href="https://github.com/ietf-tools/editor/blob/main/LICENSE" target="_blank")
           q-item-section(side)
             q-icon(name='mdi-scale-balance')
           q-item-section View License
         q-separator.q-my-sm
-        q-item(clickable)
+        q-item(clickable disabled)
           q-item-section(side)
             q-icon(name='mdi-lan-pending')
           q-item-section Check for Updates...
         q-separator.q-my-sm
-        q-item(clickable)
+        q-item(clickable @click='helpAbout')
           q-item-section(side)
             q-icon(name='mdi-information-outline')
           q-item-section About
@@ -350,7 +350,17 @@ q-bar.bg-light-blue-9
 </template>
 
 <script setup>
+import { defineAsyncComponent } from 'vue'
 import { useQuasar } from 'quasar'
+
 const $q = useQuasar()
 const cmdKey = $q.platform.is.mac ? 'Cmd' : 'Ctrl'
+
+// HELP
+
+function helpAbout () {
+  $q.dialog({
+    component: defineAsyncComponent(() => import('components/AboutDialog.vue'))
+  })
+}
 </script>
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -3,3 +3,18 @@
 body {
   background-color: $dark-page;
 }
+
+.translucent-menu {
+  @at-root .body--light & {
+    background-color: rgba(255,255,255,.8);
+  }
+  @at-root .body--dark & {
+    background-color: rgba($dark,.7);
+  }
+
+  backdrop-filter: blur(10px) saturate(180%);
+
+  > .q-card {
+    background-color: transparent !important;
+  }
+}
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
@@ -23,3 +23,5 @@ $positive  : #21BA45;
 $negative  : #C10015;
 $info      : #31CCEC;
 $warning   : #F2C037;
+
+$dark-shadow-color : #000;