feature: add settings to control window transparency effects per page

aleksey-hoffman · Sep 3, 2021 · 0d09def · 0d09def
1 parent 83b2b86
commit 0d09def
Show file tree

Hide file tree

Showing 3 changed files with 183 additions and 24 deletions.
diff --git a/src/components/WindowEffects.vue b/src/components/WindowEffects.vue
@@ -7,20 +7,20 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
   <div v-if="windowTransparencyEffect.value">
     <img
       class="overlay--window-transparency-effect__media" 
-      v-if="windowTransparencyEffect.data.background.selected.type === 'image'"
-      :src="$storeUtils.getSafePath(windowTransparencyEffect.data.background.selected.path)"
+      v-if="currentPageEffects.windowTransparencyEffect.background.type === 'image'"
+      :src="$storeUtils.getSafePath(currentPageEffects.windowTransparencyEffect.background.path)"
       :style="{
-        'filter': `blur(${windowTransparencyEffect.blur}px)`,
-        'opacity': windowTransparencyEffect.opacity / 100
+        'filter': `blur(${currentPageEffects.windowTransparencyEffect.blur}px)`,
+        'opacity': currentPageEffects.windowTransparencyEffect.opacity / 100
       }"
     >
     <video
       class="overlay--window-transparency-effect__media" 
-      v-if="windowTransparencyEffect.data.background.selected.type === 'video'"
-      :src="$storeUtils.getSafePath(windowTransparencyEffect.data.background.selected.path)"
+      v-if="currentPageEffects.windowTransparencyEffect.background.type === 'video'"
+      :src="$storeUtils.getSafePath(currentPageEffects.windowTransparencyEffect.background.path)"
       :style="{
-        'filter': `blur(${windowTransparencyEffect.blur}px)`,
-        'opacity': windowTransparencyEffect.opacity / 100
+        'filter': `blur(${currentPageEffects.windowTransparencyEffect.blur}px)`,
+        'opacity': currentPageEffects.windowTransparencyEffect.opacity / 100
       }"
       autoplay loop muted
     />
@@ -48,7 +48,7 @@ export default {
     this.initMediaTransform()
   },
   watch: {
-    'windowTransparencyEffect.data.background.selected.path' () {
+    'windowTransparencyEffect.options.selectedPage.background.path' () {
       this.$nextTick(() => {
         this.setMediaNode()
       })
@@ -65,8 +65,42 @@ export default {
   computed: {
     ...mapFields({
       windowTransparencyEffect: 'storageData.settings.windowTransparencyEffect',
+      windowTransparencyEffectSameSettingsOnAllPages: 'storageData.settings.windowTransparencyEffect.sameSettingsOnAllPages',
+      windowTransparencyEffectOptionsSelectedPage: 'storageData.settings.windowTransparencyEffect.options.selectedPage',
+      windowTransparencyEffectOptionsPages: 'storageData.settings.windowTransparencyEffect.options.pages',
+      windowTransparencyEffectBlur: 'storageData.settings.windowTransparencyEffect.options.selectedPage.blur',
+      windowTransparencyEffectOpacity: 'storageData.settings.windowTransparencyEffect.options.selectedPage.opacity',
       UIZoomLevel: 'storageData.settings.UIZoomLevel',
-    })
+    }),
+    currentPageEffects () {
+      try {
+        if (this.windowTransparencyEffectSameSettingsOnAllPages) {
+          return {
+            windowTransparencyEffect: this.globalWindowTransparencyOptions
+          }
+        }
+        else {
+          return {
+            windowTransparencyEffect: this.currentPageWindowTransparencyOptions
+          }
+        }
+      }
+      catch (error) {
+        return {
+          windowTransparencyEffect: this.windowTransparencyEffectOptionsSelectedPage
+        }
+      }
+    },
+    globalWindowTransparencyOptions () {
+      return this.windowTransparencyEffectOptionsPages.find(page => {
+        return page.name === ''
+      })
+    },
+    currentPageWindowTransparencyOptions () {
+      return this.windowTransparencyEffectOptionsPages.find(page => {
+        return page.name === this.$route.name
+      })
+    }
   },
   methods: {
     initIPCListeners () {
@@ -95,15 +129,15 @@ export default {
         this.transformMedia()
       }, 1000)
     },
-    transformMedia (windowPoosition) {
+    transformMedia () {
       if (this.mediaNode) {
         this.mediaNode.width = window.screen.width / electron.webFrame.getZoomFactor()
         this.mediaNode.height = window.screen.height / electron.webFrame.getZoomFactor()
 
-        if (this.windowTransparencyEffect.parallaxDistance > 0) {
+        if (this.currentPageEffects.windowTransparencyEffect.parallaxDistance > 0) {
           let [winX, winY] = currentWindow.getPosition()
-          let newXposition = -(winX / window.screen.width * 100 / this.windowTransparencyEffect.parallaxDistance)
-          let newYposition = -(winY / window.screen.height * 100 / this.windowTransparencyEffect.parallaxDistance)
+          let newXposition = -(winX / window.screen.width * 100 / this.currentPageEffects.windowTransparencyEffect.parallaxDistance)
+          let newYposition = -(winY / window.screen.height * 100 / this.currentPageEffects.windowTransparencyEffect.parallaxDistance)
           this.mediaNode.style.transform = `translate(${newXposition}%, ${newYposition}%)`
         }
       }

diff --git a/src/store.js b/src/store.js
@@ -446,10 +446,76 @@ export default new Vuex.Store({
         UIZoomLevel: 1,
         windowTransparencyEffect: {
           value: true,
-          blur: 56,
-          opacity: 10,
-          parallaxDistance: 5,
+          sameSettingsOnAllPages: true,
           data: windowTransparencyEffectData,
+          options: {
+            selectedPage: {
+              title: 'Global settings',
+              name: '',
+              icon: 'mdi-infinity',
+              blur: 56,
+              opacity: 10,
+              parallaxDistance: 5,
+              background: windowTransparencyEffectData.background.selected,
+            },
+            pages: [
+              {
+                title: 'Global settings',
+                name: '',
+                icon: 'mdi-infinity',
+                blur: 56,
+                opacity: 10,
+                parallaxDistance: 5,
+                background: windowTransparencyEffectData.background.selected,
+              },
+              {
+                title: 'Home page',
+                name: 'home',
+                icon: 'mdi-apps',
+                blur: 56,
+                opacity: 10,
+                parallaxDistance: 5,
+                background: windowTransparencyEffectData.background.selected,
+              },
+              {
+                title: 'Navigator page',
+                name: 'navigator',
+                icon: 'mdi-folder-outline',
+                blur: 56,
+                opacity: 10,
+                parallaxDistance: 5,
+                background: windowTransparencyEffectData.background.selected,
+              },
+              {
+                title: 'Dashboard page',
+                name: 'dashboard',
+                icon: 'mdi-bookmark-multiple-outline',
+                blur: 56,
+                opacity: 10,
+                parallaxDistance: 5,
+                background: windowTransparencyEffectData.background.selected,
+              },
+              {
+                title: 'Notes page',
+                name: 'notes',
+                icon: 'mdi-square-edit-outline',
+                blur: 56,
+                opacity: 10,
+                parallaxDistance: 5,
+                background: windowTransparencyEffectData.background.selected,
+              },
+              {
+                title: 'Settings page',
+                name: 'settings',
+                icon: 'mdi-cog-outline',
+                blur: 56,
+                opacity: 10,
+                parallaxDistance: 5,
+                background: windowTransparencyEffectData.background.selected,
+              }
+            ]
+          }
+        },
         visualEffects: {
           homeBannerMediaGlowEffect: {
             value: true

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="windowTransparencyEffect.data.background.items"
+                          :items="windowTransparencyEffectDataBackground.items"
                           item-text="fileNameBase"
                           return-object
                           label="Overlay background"
@@ -517,6 +517,50 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
                           <span>Select next background</span>
                         </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>
+
+                      <v-expand-transition>
+                        <div v-if="!windowTransparencyEffectSameSettingsOnAllPages">
+                          <v-select
+                            class="mt-2"
+                            v-model="windowTransparencyEffectOptionsSelectedPage"
+                            :items="windowTransparencyEffectOptionsPages"
+                            item-text="title"
+                            return-object
+                            label="Page to customize"
+                            style="max-width: 400px"
+                          >
+                            <template v-slot:selection="{item}">
+                              <v-icon class="mr-4">
+                                {{item.icon}}
+                              </v-icon>
+                              <div>
+                                {{item.title}}
+                              </div>
+                            </template>
+
+                            <template v-slot:item="{item}">
+                              <v-icon class="mr-4">
+                                {{item.icon}}
+                              </v-icon>
+                              <div>
+                                {{item.title}}
+                              </div>
+                            </template>
+                          </v-select>
+
+                          <div>
+                            - Select page from the list and adjust settings to save. 
+                            <br>- The preview of the effect will be displayed on this page until you visit another page.
+                          </div>
+                        </div>
+                      </v-expand-transition>
                     </div>
                   </v-expand-transition>
 
@@ -1373,9 +1417,13 @@ export default {
       navigatorOpenDirItemWithSingleClick: 'storageData.settings.navigator.openDirItemWithSingleClick',
       dirItemHoverEffect: 'storageData.settings.dirItemHoverEffect',
       windowTransparencyEffectValue: 'storageData.settings.windowTransparencyEffect.value',
-      windowTransparencyEffectBlur: 'storageData.settings.windowTransparencyEffect.blur',
-      windowTransparencyEffectOpacity: 'storageData.settings.windowTransparencyEffect.opacity',
-      windowTransparencyEffectParallaxDistance: 'storageData.settings.windowTransparencyEffect.parallaxDistance',
+      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',
       homeBannerMediaGlowEffectValue: 'storageData.settings.visualEffects.homeBannerMediaGlowEffect.value',
       animationsOnRouteChangeMediaBannerIn: 'storageData.settings.animations.onRouteChangeMediaBannerIn',
@@ -1436,6 +1484,17 @@ export default {
     this.fetchGithubProjectData()
   },
   watch: {
+    windowTransparencyEffectOptionsSelectedPage: {
+      handler () {
+        let pageIndex = this.windowTransparencyEffectOptionsPages.findIndex(page => {
+          return page.name === this.windowTransparencyEffectOptionsSelectedPage.name
+        })
+        let clone = this.$utils.cloneDeep(this.windowTransparencyEffectOptionsPages)
+        clone[pageIndex] = this.windowTransparencyEffectOptionsSelectedPage
+        this.windowTransparencyEffectOptionsPages = clone
+      },
+      deep: true
+    },
     settingsSelectedTab (value) {
       this.lastOpenedSettingsTabValue = value
     },
@@ -1655,16 +1714,16 @@ export default {
         .filter(listItem => listItem !== item)
     },
     setNextWindowTransparencyEffectBackground () {
-      let currentItemIndex = this.windowTransparencyEffect.data.background.items
+      let currentItemIndex = this.windowTransparencyEffectDataBackground.items
         .findIndex(item => item.path === this.windowTransparencyEffectDataBackgroundSelected.path)
       let nextItemIndex = 0
-      if (currentItemIndex > this.windowTransparencyEffect.data.background.items.length - 2) {
+      if (currentItemIndex > this.windowTransparencyEffectDataBackground.items.length - 2) {
         nextItemIndex = 0
       }
       else {
         nextItemIndex = currentItemIndex + 1
       }
-      this.windowTransparencyEffectDataBackgroundSelected = this.windowTransparencyEffect.data.background.items[nextItemIndex]
+      this.windowTransparencyEffectDataBackgroundSelected = this.windowTransparencyEffectDataBackground.items[nextItemIndex]
     }
   }
 }