feature: add 2 new settings for window transparency effect

- lessProminentOnHomePage: reduces visibility of the transparency effect on the home page. - previewEffect: makes it possible to preview settings for selected page from the settings page.
aleksey-hoffman · Sep 3, 2021 · ea1c8e9 · ea1c8e9
1 parent 0d09def
commit ea1c8e9
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 24 deletions.
diff --git a/src/components/WindowEffects.vue b/src/components/WindowEffects.vue
@@ -66,6 +66,8 @@ export default {
     ...mapFields({
       windowTransparencyEffect: 'storageData.settings.windowTransparencyEffect',
       windowTransparencyEffectSameSettingsOnAllPages: 'storageData.settings.windowTransparencyEffect.sameSettingsOnAllPages',
+      windowTransparencyEffectLessProminentOnHomePage: 'storageData.settings.windowTransparencyEffect.lessProminentOnHomePage',
+      windowTransparencyEffectPreviewEffect: 'storageData.settings.windowTransparencyEffect.previewEffect',
       windowTransparencyEffectOptionsSelectedPage: 'storageData.settings.windowTransparencyEffect.options.selectedPage',
       windowTransparencyEffectOptionsPages: 'storageData.settings.windowTransparencyEffect.options.pages',
       windowTransparencyEffectBlur: 'storageData.settings.windowTransparencyEffect.options.selectedPage.blur',
@@ -74,14 +76,29 @@ export default {
     }),
     currentPageEffects () {
       try {
-        if (this.windowTransparencyEffectSameSettingsOnAllPages) {
+        if (this.windowTransparencyEffectLessProminentOnHomePage && this.$route.name === 'home') {
+          let globalWindowTransparencyOptionsClone = this.$utils.cloneDeep(this.globalWindowTransparencyOptions)
+          globalWindowTransparencyOptionsClone.opacity = 5
+          globalWindowTransparencyOptionsClone.blur = 32
           return {
-            windowTransparencyEffect: this.globalWindowTransparencyOptions
-          }
+            windowTransparencyEffect: globalWindowTransparencyOptionsClone
+          } 
         }
-        else {
+        else if (this.windowTransparencyEffectPreviewEffect && this.$route.name === 'settings') {
           return {
-            windowTransparencyEffect: this.currentPageWindowTransparencyOptions
+            windowTransparencyEffect: this.windowTransparencyEffectOptionsSelectedPage
+          } 
+        }
+        else {
+          if (this.windowTransparencyEffectSameSettingsOnAllPages) {
+            return {
+              windowTransparencyEffect: this.globalWindowTransparencyOptions
+            }
+          }
+          else {
+            return {
+              windowTransparencyEffect: this.currentPageWindowTransparencyOptions
+            }
           }
         }
       }
@@ -111,7 +128,12 @@ export default {
     initMediaTransform () {
       // TODO: move to main process or to another thread to improve performance
       this.transformThrottle = new TimeUtils()
-      this.setMediaNode()
+      // TODO: move appStorage getter to main process to avoid this:
+      // Set media position with a delay,
+      // in case appStorage files are still loading 
+      setTimeout(() => {
+        this.setMediaNode()
+      }, 1000)
     },
     handleWindowTransform () {
       if (this.mediaNode) {
@@ -122,12 +144,7 @@ export default {
     },
     setMediaNode () {
       this.mediaNode = document.querySelector('.overlay--window-transparency-effect__media')
-      // TODO: move appStorage getter to main process to avoid this:
-      // Set media position with a delay,
-      // in case appStorage files are still loading 
-      setTimeout(() => {
-        this.transformMedia()
-      }, 1000)
+      this.transformMedia()
     },
     transformMedia () {
       if (this.mediaNode) {

diff --git a/src/store.js b/src/store.js
@@ -446,6 +446,8 @@ export default new Vuex.Store({
         UIZoomLevel: 1,
         windowTransparencyEffect: {
           value: true,
+          lessProminentOnHomePage: true,
+          previewEffect: true,
           sameSettingsOnAllPages: true,
           data: windowTransparencyEffectData,
           options: {

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -495,7 +495,7 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
                       <v-layout align-center>
                         <v-select
                           v-model="windowTransparencyEffectDataBackgroundSelected"
-                          :items="windowTransparencyEffectDataBackground.items"
+                          :items="windowTransparencyEffectDataBackgroundItems"
                           item-text="fileNameBase"
                           return-object
                           label="Overlay background"
@@ -518,15 +518,52 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
                         </v-tooltip>
                       </v-layout>
 
-                      <v-switch
-                        class="mt-0 pt-0 d-inline-flex"
-                        v-model="windowTransparencyEffectSameSettingsOnAllPages"
-                        label="Use the same settings for all pages"
-                        hide-details
-                      ></v-switch>
+                      <div>
+                        <v-switch
+                          class="d-inline-flex mt-0 pt-0"
+                          v-model="windowTransparencyEffectLessProminentOnHomePage"
+                          label="Make effect less prominent on home page"
+                        ></v-switch>
+                      </div>
+
+                      <div>
+                        <v-switch
+                          class="d-inline-flex mt-0 pt-0"
+                          v-model="windowTransparencyEffectSameSettingsOnAllPages"
+                          label="Use the same settings for all pages"
+                        ></v-switch>
+                      </div>
 
                       <v-expand-transition>
                         <div v-if="!windowTransparencyEffectSameSettingsOnAllPages">
+                          <div>
+                            <v-switch
+                              class="d-inline-flex mt-0 pt-0"
+                              v-model="windowTransparencyEffectPreviewEffect"
+                            >
+                              <template v-slot:label>
+                                <v-tooltip bottom max-width="400px">
+                                  <template v-slot:activator="{ on }">
+                                    <v-icon
+                                      v-on="on"
+                                      v-show="
+                                        windowTransparencyEffectPreviewEffect && 
+                                        windowTransparencyEffectOptionsSelectedPage.name !== 'settings'
+                                      "
+                                      color="red"
+                                    >mdi-circle-medium
+                                    </v-icon>
+                                    Preview effect for selected page
+                                  </template>
+                                  <span>
+                                    Disable after you finish customizing selected page to 
+                                    see the effects for "settings" page
+                                  </span>
+                                </v-tooltip>
+                              </template>
+                            </v-switch>
+                          </div>
+
                           <v-select
                             class="mt-2"
                             v-model="windowTransparencyEffectOptionsSelectedPage"
@@ -1417,14 +1454,16 @@ export default {
       navigatorOpenDirItemWithSingleClick: 'storageData.settings.navigator.openDirItemWithSingleClick',
       dirItemHoverEffect: 'storageData.settings.dirItemHoverEffect',
       windowTransparencyEffectValue: 'storageData.settings.windowTransparencyEffect.value',
+      windowTransparencyEffectLessProminentOnHomePage: 'storageData.settings.windowTransparencyEffect.lessProminentOnHomePage',
+      windowTransparencyEffectPreviewEffect: 'storageData.settings.windowTransparencyEffect.previewEffect',
       windowTransparencyEffectSameSettingsOnAllPages: 'storageData.settings.windowTransparencyEffect.sameSettingsOnAllPages',
       windowTransparencyEffectOptionsPages: 'storageData.settings.windowTransparencyEffect.options.pages',
       windowTransparencyEffectOptionsSelectedPage: 'storageData.settings.windowTransparencyEffect.options.selectedPage',
       windowTransparencyEffectBlur: 'storageData.settings.windowTransparencyEffect.options.selectedPage.blur',
       windowTransparencyEffectOpacity: 'storageData.settings.windowTransparencyEffect.options.selectedPage.opacity',
       windowTransparencyEffectParallaxDistance: 'storageData.settings.windowTransparencyEffect.options.selectedPage.parallaxDistance',
-      windowTransparencyEffectDataBackground: 'storageData.settings.windowTransparencyEffect.data.background',
-      windowTransparencyEffectDataBackgroundSelected: 'storageData.settings.windowTransparencyEffect.data.background.selected',
+      windowTransparencyEffectDataBackgroundItems: 'storageData.settings.windowTransparencyEffect.data.background.items',
+      windowTransparencyEffectDataBackgroundSelected: 'storageData.settings.windowTransparencyEffect.options.selectedPage.background',
       homeBannerMediaGlowEffectValue: 'storageData.settings.visualEffects.homeBannerMediaGlowEffect.value',
       animationsOnRouteChangeMediaBannerIn: 'storageData.settings.animations.onRouteChangeMediaBannerIn',
       dateTimeMonth: 'storageData.settings.dateTime.month',
@@ -1495,6 +1534,13 @@ export default {
       },
       deep: true
     },
+    windowTransparencyEffectSameSettingsOnAllPages (newValue) {
+      if (newValue) {
+        this.windowTransparencyEffectOptionsSelectedPage = this.windowTransparencyEffectOptionsPages.find(page => {
+          return page.name === ''
+        })
+      }
+    },
     settingsSelectedTab (value) {
       this.lastOpenedSettingsTabValue = value
     },
@@ -1714,16 +1760,16 @@ export default {
         .filter(listItem => listItem !== item)
     },
     setNextWindowTransparencyEffectBackground () {
-      let currentItemIndex = this.windowTransparencyEffectDataBackground.items
+      let currentItemIndex = this.windowTransparencyEffectDataBackgroundItems
         .findIndex(item => item.path === this.windowTransparencyEffectDataBackgroundSelected.path)
       let nextItemIndex = 0
-      if (currentItemIndex > this.windowTransparencyEffectDataBackground.items.length - 2) {
+      if (currentItemIndex > this.windowTransparencyEffectDataBackgroundItems.length - 2) {
         nextItemIndex = 0
       }
       else {
         nextItemIndex = currentItemIndex + 1
       }
-      this.windowTransparencyEffectDataBackgroundSelected = this.windowTransparencyEffectDataBackground.items[nextItemIndex]
+      this.windowTransparencyEffectDataBackgroundSelected = this.windowTransparencyEffectDataBackgroundItems[nextItemIndex]
     }
   }
 }