feat(UI): option to disable blur effects, closes #209

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'
       })
    },

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);
       },

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',

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 );
   }
 }
 

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);
       }
    }
 };