From e9079adb25ec28e9546acd54bc2565b8d6e28120 Mon Sep 17 00:00:00 2001
From: Fabio Di Stasio <fabio286@gmail.com>
Date: Tue, 22 Mar 2022 16:13:44 +0100
Subject: [PATCH] feat(UI): option to disable blur effects, closes #209

---
 src/renderer/App.vue                         |  3 ++-
 src/renderer/components/ModalSettings.vue    | 18 ++++++++++++++++++
 src/renderer/i18n/en-US.js                   |  3 ++-
 src/renderer/scss/main.scss                  |  8 ++++++--
 src/renderer/store/modules/settings.store.js | 13 +++++++++++--
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 8427004d..a13a32bd 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,5 +1,5 @@
 <template>
-   <div id="wrapper" :class="`theme-${applicationTheme}`">
+   <div id="wrapper" :class="[`theme-${applicationTheme}`, !disableBlur || 'no-blur']">
       <TheTitleBar />
       <div id="window-content">
          <TheSettingBar />
@@ -51,6 +51,7 @@ export default {
          isScratchpad: 'application/isScratchpad',
          connections: 'connections/getConnections',
          applicationTheme: 'settings/getApplicationTheme',
+         disableBlur: 'settings/getDisableBlur',
          isUnsavedDiscardModal: 'workspaces/isUnsavedDiscardModal'
       })
    },
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index bb8ccd1f..cdd640b7 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -117,6 +117,19 @@
                                  </label>
                               </div>
                            </div>
+                           <div class="form-group mb-0">
+                              <div class="col-7 col-sm-12">
+                                 <label class="form-label">
+                                    {{ $t('message.disableBlur') }}
+                                 </label>
+                              </div>
+                              <div class="col-5 col-sm-12">
+                                 <label class="form-switch d-inline-block" @click.prevent="toggleDisableBlur">
+                                    <input type="checkbox" :checked="disableBlur">
+                                    <i class="form-icon" />
+                                 </label>
+                              </div>
+                           </div>
                            <div class="form-group">
                               <div class="col-7 col-sm-12">
                                  <label class="form-label">
@@ -389,6 +402,7 @@ export default {
          selectedLineWrap: 'settings/getLineWrap',
          notificationsTimeout: 'settings/getNotificationsTimeout',
          restoreTabs: 'settings/getRestoreTabs',
+         disableBlur: 'settings/getDisableBlur',
          applicationTheme: 'settings/getApplicationTheme',
          editorTheme: 'settings/getEditorTheme',
          editorFontSize: 'settings/getEditorFontSize',
@@ -450,6 +464,7 @@ ORDER BY
          changeLocale: 'settings/changeLocale',
          changePageSize: 'settings/changePageSize',
          changeRestoreTabs: 'settings/changeRestoreTabs',
+         changeDisableBlur: 'settings/changeDisableBlur',
          changeAutoComplete: 'settings/changeAutoComplete',
          changeLineWrap: 'settings/changeLineWrap',
          changeApplicationTheme: 'settings/changeApplicationTheme',
@@ -477,6 +492,9 @@ ORDER BY
       toggleRestoreSession () {
          this.changeRestoreTabs(!this.restoreTabs);
       },
+      toggleDisableBlur () {
+         this.changeDisableBlur(!this.disableBlur);
+      },
       toggleAutoComplete () {
          this.changeAutoComplete(!this.selectedAutoComplete);
       },
diff --git a/src/renderer/i18n/en-US.js b/src/renderer/i18n/en-US.js
index 3a6fb615..eb29fda4 100644
--- a/src/renderer/i18n/en-US.js
+++ b/src/renderer/i18n/en-US.js
@@ -286,7 +286,8 @@ module.exports = {
       executedQueries: '{n} query executed | {n} queries executed',
       ourputFormat: 'Output format',
       singleFile: 'Single {ext} file',
-      zipCompressedFile: 'ZIP compressed {ext} file'
+      zipCompressedFile: 'ZIP compressed {ext} file',
+      disableBlur: 'Disable blur'
    },
    faker: {
       address: 'Address',
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index 09de728b..fc71019f 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -167,11 +167,15 @@ option:checked {
   }
   
   .modal-overlay{
-    background: rgba( 255, 255, 255, 0.1 );
+    background: rgba( 255, 255, 255, 0.1);
     box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+  }
+}
+
+#wrapper:not(.no-blur){
+  .modal-overlay{
     backdrop-filter: blur( 4px );
     -webkit-backdrop-filter: blur( 4px );
-    border: 1px solid rgba( 255, 255, 255, 0.18 );
   }
 }
 
diff --git a/src/renderer/store/modules/settings.store.js b/src/renderer/store/modules/settings.store.js
index c0e208ab..8dc29298 100644
--- a/src/renderer/store/modules/settings.store.js
+++ b/src/renderer/store/modules/settings.store.js
@@ -20,7 +20,8 @@ export default {
       application_theme: persistentStore.get('application_theme', defaultAppTheme),
       editor_theme: persistentStore.get('editor_theme', defaultEditorTheme),
       editor_font_size: persistentStore.get('editor_font_size', 'medium'),
-      restore_tabs: persistentStore.get('restore_tabs', true)
+      restore_tabs: persistentStore.get('restore_tabs', true),
+      disable_blur: persistentStore.get('disable_blur', false)
    },
    getters: {
       getLocale: state => state.locale,
@@ -33,7 +34,8 @@ export default {
       getApplicationTheme: state => state.application_theme,
       getEditorTheme: state => state.editor_theme,
       getEditorFontSize: state => state.editor_font_size,
-      getRestoreTabs: state => state.restore_tabs
+      getRestoreTabs: state => state.restore_tabs,
+      getDisableBlur: state => state.disable_blur
    },
    mutations: {
       SET_LOCALE (state, locale) {
@@ -80,6 +82,10 @@ export default {
       SET_RESTORE_TABS (state, val) {
          state.restore_tabs = val;
          persistentStore.set('restore_tabs', state.restore_tabs);
+      },
+      SET_DISABLE_BLUR (state, val) {
+         state.disable_blur = val;
+         persistentStore.set('disable_blur', state.disable_blur);
       }
    },
    actions: {
@@ -115,6 +121,9 @@ export default {
       },
       changeRestoreTabs ({ commit }, size) {
          commit('SET_RESTORE_TABS', size);
+      },
+      changeDisableBlur ({ commit }, val) {
+         commit('SET_DISABLE_BLUR', val);
       }
    }
 };