feat: articles check + translucency/animation toggles

src-electron/electron-main.js

@@ -36,8 +36,9 @@ function createWindow () {
     // useContentSize: true,
     center: true,
     frame: true,
+    backgroundColor: '#000',
     // backgroundMaterial: 'auto',
-    vibrancy: 'under-window',
+    // vibrancy: 'under-window',
     darkTheme: true,
     webPreferences: {
       contextIsolation: true,

src/App.vue

@@ -1,9 +1,9 @@
-<template>
-  <router-view />
+<template lang='pug'>
+router-view
 </template>
 
 <script setup>
-import { defineAsyncComponent, onMounted } from 'vue'
+import { defineAsyncComponent, onMounted, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useDocsStore } from 'src/stores/docs'
 import { useEditorStore } from 'src/stores/editor'
@@ -77,6 +77,24 @@ window.ipcBridge.subscribe('setProgressDialog', (evt, opts) => {
   }
 })
 
+// -> Handle translucency flags
+watch(() => editorStore.translucencyEffects, (newValue) => {
+  if (newValue) {
+    document.body.classList.remove('no-translucency')
+  } else {
+    document.body.classList.add('no-translucency')
+  }
+}, { immediate: true })
+
+// -> Handle animation flags
+watch(() => editorStore.animationEffects, (newValue) => {
+  if (newValue) {
+    document.body.classList.remove('no-animations')
+  } else {
+    document.body.classList.add('no-animations')
+  }
+}, { immediate: true })
+
 onMounted(async () => {
   await editorStore.fetchGitConfig()
   window.ipcBridge.emit('lspInitialize')

src/components/AboutDialog.vue

@@ -1,5 +1,10 @@
 <template lang="pug">
-q-dialog(ref='dialogRef' @hide='onDialogHide' transition-show='jump-up' transition-hide='jump-down')
+q-dialog(
+  ref='dialogRef'
+  @hide='onDialogHide'
+  :transition-show='editorStore.animationEffects ? `jump-up` : `none`'
+  :transition-hide='editorStore.animationEffects ? `jump-down` : `none`'
+  )
   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')
@@ -28,6 +33,9 @@ q-dialog(ref='dialogRef' @hide='onDialogHide' transition-show='jump-up' transiti
 
 <script setup>
 import { useDialogPluginComponent, useQuasar } from 'quasar'
+import { useEditorStore } from 'src/stores/editor'
+
+const editorStore = useEditorStore()
 
 const $q = useQuasar()
 

src/components/CloneRepositoryDialog.vue

@@ -1,5 +1,10 @@
 <template lang="pug">
-q-dialog(ref='dialogRef' @hide='onDialogHide' persistent transition-show='jump-up' transition-hide='jump-down')
+q-dialog(
+  ref='dialogRef'
+  @hide='onDialogHide'
+  :transition-show='editorStore.animationEffects ? `jump-up` : `none`'
+  :transition-hide='editorStore.animationEffects ? `jump-down` : `none`'
+  )
   q-card.mica(style='min-width: 800px;')
     q-card-section.flex.items-center.bg-light-blue-10
       q-icon(name='mdi-git', left, size='sm')

src/components/DrawerTools.vue

@@ -28,7 +28,9 @@ q-list
     q-item-section(side)
       q-icon(v-if='editorStore.validationChecks[chk.key] === 0' name='mdi-circle-outline' size='xs' color='blue-grey')
       q-icon(v-else-if='editorStore.validationChecks[chk.key] === 1' name='mdi-check-circle' size='xs' color='positive')
+      q-icon(v-else-if='editorStore.validationChecks[chk.key] === 2' name='mdi-information' size='xs' color='light-blue-5')
       q-icon(v-else-if='editorStore.validationChecks[chk.key] === -1' name='mdi-close-circle' size='xs' color='red-5')
+      q-icon(v-else-if='editorStore.validationChecks[chk.key] === -2' name='mdi-alert-circle' size='xs' color='orange-5')
 q-separator.q-my-sm(inset)
 .q-px-md.q-pt-sm.q-pb-sm
   .flex.items-center
@@ -45,6 +47,7 @@ q-list
 
 <script setup>
 import { useQuasar } from 'quasar'
+import { checkArticles } from 'src/tools/articles'
 import { checkInclusiveLanguage } from 'src/tools/inclusive-language'
 import { checkNonAscii } from 'src/tools/non-ascii'
 import { useDocsStore } from 'src/stores/docs'
@@ -59,6 +62,13 @@ const docsStore = useDocsStore()
 const editorStore = useEditorStore()
 
 const valChecks = [
+  {
+    key: 'articles',
+    title: 'Articles Check',
+    description: 'Check for bad indefinite articles usage',
+    icon: 'mdi-alpha-a-box-outline',
+    click: () => articlesCheck()
+  },
   {
     key: 'inclusiveLanguage',
     title: 'Inclusive Language Check',
@@ -77,9 +87,37 @@ const valChecks = [
 
 // METHODS
 
+function articlesCheck (silent) {
+  const warnings = checkArticles(modelStore[docsStore.activeDocument.id].getValue())
+  if (warnings.length < 1) {
+    editorStore.setValidationCheckState('articles', 1)
+    if (!silent) {
+      $q.notify({
+        message: 'Looks good!',
+        caption: 'No bad usage of indefinite articles found.',
+        color: 'positive',
+        icon: 'mdi-alpha-a-box-outline'
+      })
+    }
+  } else {
+    editorStore.setValidationCheckState('articles', -2)
+    if (!silent) {
+      setTimeout(() => {
+        EVENT_BUS.emit('editorCommand', 'editor.action.marker.next')
+      })
+    }
+  }
+
+  if (silent) {
+    editorStore.errors.push(...warnings)
+  } else {
+    editorStore.errors = warnings
+  }
+}
+
 function inclusiveLangCheck (silent = false) {
-  editorStore.errors = checkInclusiveLanguage(modelStore[docsStore.activeDocument.id].getValue())
-  if (editorStore.errors.length < 1) {
+  const warnings = checkInclusiveLanguage(modelStore[docsStore.activeDocument.id].getValue())
+  if (warnings.length < 1) {
     editorStore.setValidationCheckState('inclusiveLanguage', 1)
     if (!silent) {
       $q.notify({
@@ -90,18 +128,24 @@ function inclusiveLangCheck (silent = false) {
       })
     }
   } else {
-    editorStore.setValidationCheckState('inclusiveLanguage', -1)
+    editorStore.setValidationCheckState('inclusiveLanguage', -2)
     if (!silent) {
       setTimeout(() => {
         EVENT_BUS.emit('editorCommand', 'editor.action.marker.next')
       })
     }
   }
+
+  if (silent) {
+    editorStore.errors.push(...warnings)
+  } else {
+    editorStore.errors = warnings
+  }
 }
 
 function nonAsciiCheck (silent = false) {
-  editorStore.errors = checkNonAscii(modelStore[docsStore.activeDocument.id].getValue())
-  if (editorStore.errors.length < 1) {
+  const infos = checkNonAscii(modelStore[docsStore.activeDocument.id].getValue())
+  if (infos.length < 1) {
     editorStore.setValidationCheckState('nonAscii', 1)
     if (!silent) {
       $q.notify({
@@ -112,16 +156,24 @@ function nonAsciiCheck (silent = false) {
       })
     }
   } else {
-    editorStore.setValidationCheckState('nonAscii', -1)
+    editorStore.setValidationCheckState('nonAscii', 2)
     if (!silent) {
       setTimeout(() => {
         EVENT_BUS.emit('editorCommand', 'editor.action.marker.next')
       })
     }
   }
+
+  if (silent) {
+    editorStore.errors.push(...infos)
+  } else {
+    editorStore.errors = infos
+  }
 }
 
 function runAllChecks () {
+  editorStore.clearErrors()
+  articlesCheck(true)
   inclusiveLangCheck(true)
   nonAsciiCheck(true)
 

src/components/ManageBranchesDialog.vue

@@ -1,5 +1,10 @@
 <template lang="pug">
-q-dialog(ref='dialogRef' @hide='onDialogHide' transition-show='jump-up' transition-hide='jump-down')
+q-dialog(
+  ref='dialogRef'
+  @hide='onDialogHide'
+  :transition-show='editorStore.animationEffects ? `jump-up` : `none`'
+  :transition-hide='editorStore.animationEffects ? `jump-down` : `none`'
+  )
   q-card.mica.branches
     q-card-section.flex.items-center.bg-light-blue-10
       q-icon(name='mdi-source-branch', left, size='sm')

src/components/ManageRemotesDialog.vue

@@ -1,5 +1,10 @@
 <template lang="pug">
-q-dialog(ref='dialogRef' @hide='onDialogHide' transition-show='jump-up' transition-hide='jump-down')
+q-dialog(
+  ref='dialogRef'
+  @hide='onDialogHide'
+  :transition-show='editorStore.animationEffects ? `jump-up` : `none`'
+  :transition-hide='editorStore.animationEffects ? `jump-down` : `none`'
+  )
   q-card.mica.remotes
     q-card-section.flex.items-center.bg-light-blue-10
       q-icon(name='mdi-satellite-uplink', left, size='sm')

src/components/NewDraftDialog.vue

@@ -1,5 +1,10 @@
 <template lang="pug">
-q-dialog(ref='dialogRef' @hide='onDialogHide' transition-show='jump-up' transition-hide='jump-down')
+q-dialog(
+  ref='dialogRef'
+  @hide='onDialogHide'
+  :transition-show='editorStore.animationEffects ? `jump-up` : `none`'
+  :transition-hide='editorStore.animationEffects ? `jump-down` : `none`'
+  )
   q-card.mica(style='min-width: 600px;')
     q-card-section.flex.items-center.bg-light-blue-10
       q-icon(name='mdi-file-document-plus-outline', left, size='sm')
@@ -25,8 +30,8 @@ q-dialog(ref='dialogRef' @hide='onDialogHide' transition-show='jump-up' transiti
             q-item-label(caption): em.text-grey Recommended
           q-menu(
             touch-position
-            transition-show='jump-down'
-            transition-hide='jump-up'
+            :transition-show='editorStore.animationEffects ? `jump-up` : `none`'
+            :transition-hide='editorStore.animationEffects ? `jump-down` : `none`'
             )
             q-list(separator bordered)
               q-item(clickable @click='selectType(`xml`)')
@@ -75,8 +80,10 @@ q-dialog(ref='dialogRef' @hide='onDialogHide' transition-show='jump-up' transiti
 <script setup>
 import { useDialogPluginComponent, useQuasar } from 'quasar'
 import { useDocsStore } from 'src/stores/docs'
+import { useEditorStore } from 'src/stores/editor'
 
 const docsStore = useDocsStore()
+const editorStore = useEditorStore()
 
 const $q = useQuasar()
 

src/components/OpenFromUrlDialog.vue

@@ -1,5 +1,10 @@
 <template lang="pug">
-q-dialog(ref='dialogRef' @hide='onDialogHide' no-backdrop-dismiss transition-show='jump-up' transition-hide='jump-down')
+q-dialog(
+  ref='dialogRef'
+  @hide='onDialogHide'
+  :transition-show='editorStore.animationEffects ? `jump-up` : `none`'
+  :transition-hide='editorStore.animationEffects ? `jump-down` : `none`'
+  )
   q-card.mica(style='min-width: 800px;')
     q-card-section.flex.items-center.bg-light-blue-10
       q-icon(name='mdi-tray-arrow-down', left, size='sm')
@@ -42,6 +47,7 @@ q-dialog(ref='dialogRef' @hide='onDialogHide' no-backdrop-dismiss transition-sho
 import { useDialogPluginComponent, useQuasar } from 'quasar'
 import { reactive } from 'vue'
 import { useDocsStore } from 'src/stores/docs'
+import { useEditorStore } from 'src/stores/editor'
 import { last } from 'lodash-es'
 
 const $q = useQuasar()
@@ -55,6 +61,7 @@ defineEmits([
 // STORES
 
 const docsStore = useDocsStore()
+const editorStore = useEditorStore()
 
 // QUASAR
 

src/components/OpenPGPSetupDialog.vue

@@ -1,5 +1,11 @@
 <template lang="pug">
-q-dialog(ref='dialogRef' @hide='onDialogHide' no-backdrop-dismiss)
+q-dialog(
+  ref='dialogRef'
+  @hide='onDialogHide'
+  :transition-show='editorStore.animationEffects ? `jump-up` : `none`'
+  :transition-hide='editorStore.animationEffects ? `jump-down` : `none`'
+  no-backdrop-dismiss
+  )
   q-card.mica(style='min-width: 800px;')
     q-card-section.flex.items-center.bg-light-blue-10
       q-icon(name='mdi-key-variant', left, size='sm')

src/components/PreferencesDialog.vue

@@ -1,5 +1,10 @@
 <template lang="pug">
-q-dialog(ref='dialogRef', @hide='onDialogHide', transition-show='jump-up', transition-hide='jump-down')
+q-dialog(
+  ref='dialogRef'
+  @hide='onDialogHide'
+  :transition-show='editorStore.animationEffects ? `jump-up` : `none`'
+  :transition-hide='editorStore.animationEffects ? `jump-down` : `none`'
+  )
   q-card.mica.prefs
     q-card-section.flex.items-center.bg-light-blue-10
       q-icon(name='mdi-cog', left, size='sm')
@@ -60,6 +65,27 @@ q-dialog(ref='dialogRef', @hide='onDialogHide', transition-show='jump-up', trans
                   checked-icon='mdi-check'
                   unchecked-icon='mdi-close'
                 )
+            q-separator
+            .row
+              .col
+                .text-body2 Enable Translucency Effects
+                .text-caption.text-grey-5 Show translucent background effects on modals and menu UI elements.
+              .col-auto
+                q-toggle(
+                  v-model='editorStore.translucencyEffects'
+                  checked-icon='mdi-check'
+                  unchecked-icon='mdi-close'
+                )
+            .row
+              .col
+                .text-body2 Enable Animations
+                .text-caption.text-grey-5 Use transition animations for modals and dialogs.
+              .col-auto
+                q-toggle(
+                  v-model='editorStore.animationEffects'
+                  checked-icon='mdi-check'
+                  unchecked-icon='mdi-close'
+                )
         template(v-else-if='state.tab === `editor`')
           q-form.q-gutter-md.q-pa-lg
             .row