UI: change setting: displayAccentColorBackgrounds

aleksey-hoffman · Mar 25, 2022 · 3f4804d · 3f4804d
1 parent 3b6e44a
commit 3f4804d
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -7,7 +7,7 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
   <v-app
     :data-theme-type="themeType" 
     :route-name="$route.name" 
-    :display-accent-color-backgrounds="displayAccentColorBackgrounds" 
+    :dir-item-background="dirItemBackground"
     :is-window-maximized="windowsMainStateIsMaximized"
   >
     <window-toolbar/>
@@ -204,7 +204,7 @@ export default {
       storageDataSettings: 'storageData.settings',
       themeType: 'storageData.settings.theme.type',
       overlayInboundDrag: 'overlays.inboundDrag',
-      displayAccentColorBackgrounds: 'storageData.settings.displayAccentColorBackgrounds',
+      dirItemBackground: 'storageData.settings.dirItemBackground',
       visualFiltersApplyFiltersToMediaElements: 'storageData.settings.visualFilters.applyFiltersToMediaElements',
       visualFiltersContrastValue: 'storageData.settings.visualFilters.contrast.value',
       visualFiltersBrightnessValue: 'storageData.settings.visualFilters.brightness.value',

diff --git a/src/components/DirItem.vue b/src/components/DirItem.vue
@@ -1251,10 +1251,10 @@ export default {
   .dir-item-card__thumb-container {
     width: 48px;
     height: 48px;
-    background-color: rgb(var(--key-color-1-value), 0.3);
+    background-color: rgba(255, 255, 255, 0.04);
   }
 
-#app:not([display-accent-color-backgrounds])
+#app[dir-item-background="none"]
   [data-layout="list"]
     .dir-item-card__thumb-container  {
       background-color: transparent;

diff --git a/src/components/InfoPanel.vue b/src/components/InfoPanel.vue
@@ -816,10 +816,10 @@ export default {
   position: relative;
   width: 280px;
   height: 158px;
-  background-color: rgb(var(--key-color-1-value), 0.5);
+  background-color: rgba(255, 255, 255, 0.02);
 }
 
-#app:not([display-accent-color-backgrounds])
+#app[dir-item-background="none"]
   .info-panel__preview-container {
     background-color: transparent;
   }

diff --git a/src/store.js b/src/store.js
@@ -678,7 +678,7 @@ export default new Vuex.Store({
         },
         dirItemHoverEffect: 'scale',
         thumbnailStorageLimit: 100,
-        displayAccentColorBackgrounds: true,
+        dirItemBackground: 'minimal',
         autoCalculateDirSize: false,
         lastOpenedSettingsTab: 0,
         groupDirItems: false,

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -864,14 +864,23 @@ Copyright © 2021 - present Aleksey Hoffman. All rights reserved.
               >
                 <template #content>
                   <div class="text--sub-title-1 mt-2">
-                    Accent color
+                    Directory item icon background color
                   </div>
 
-                  <v-switch
-                    v-model="displayAccentColorBackgrounds"
-                    label="Display accent color backgrounds"
-                    class="mt-0 pt-0"
-                  />
+                  <v-radio-group
+                    v-model="dirItemBackground"
+                    class="py-0 mt-0 mb-6"
+                    hide-details
+                  >
+                    <v-radio
+                      label="None"
+                      value="none"
+                    />
+                    <v-radio
+                      label="Minimal"
+                      value="minimal"
+                    />
+                  </v-radio-group>
 
                   <div class="text--sub-title-1 mt-2">
                     Dashboard options
@@ -2111,7 +2120,7 @@ export default {
       appPropertiesOpenAtLogin: 'storageData.settings.appProperties.openAtLogin',
       appPropertiesOpenAsHidden: 'storageData.settings.appProperties.openAsHidden',
       homeBannerValue: 'storageData.settings.homeBanner.value',
-      displayAccentColorBackgrounds: 'storageData.settings.displayAccentColorBackgrounds',
+      dirItemBackground: 'storageData.settings.dirItemBackground',
       dashboardTimeline: 'storageData.settings.dashboard.tabs.timeline.show',
       openDirItemSecondClickDelay: 'storageData.settings.navigator.openDirItemSecondClickDelay',
       windowTransparencyEffect: 'storageData.settings.windowTransparencyEffect',