From 5774cbda70d70fffac1e5f84eaef69cfa3208756 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 16 Dec 2021 20:01:43 +0100
Subject: [PATCH] move theme into UI store

---
 zero.Backoffice.UI/app/app.vue                |  4 +++
 .../media/pages/overview/overview-item.vue    |  2 +-
 zero.Backoffice.UI/app/ui/app-navigation.vue  | 13 ++--------
 zero.Backoffice.UI/app/ui/app-overlays.vue    |  5 ----
 zero.Backoffice.UI/app/ui/store.ts            | 25 ++++++++++++++++++-
 zero.Backoffice.UI/app/ui/ui.d.ts             |  7 ++++++
 6 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/zero.Backoffice.UI/app/app.vue b/zero.Backoffice.UI/app/app.vue
index 258f9d15..43b612c8 100644
--- a/zero.Backoffice.UI/app/app.vue
+++ b/zero.Backoffice.UI/app/app.vue
@@ -46,6 +46,10 @@
         this.accountStore.user = userResponse.data;
         await useUiStore().setup();
       }
+      else
+      {
+        await useUiStore().setup(true);
+      }
 
       await useTranslationStore().setup();
 
diff --git a/zero.Backoffice.UI/app/modules/media/pages/overview/overview-item.vue b/zero.Backoffice.UI/app/modules/media/pages/overview/overview-item.vue
index a6323ba7..4c019de5 100644
--- a/zero.Backoffice.UI/app/modules/media/pages/overview/overview-item.vue
+++ b/zero.Backoffice.UI/app/modules/media/pages/overview/overview-item.vue
@@ -3,7 +3,7 @@
     <div class="media-item-preview" :class="{'media-pattern': value.image, 'is-covered': covered }">
       <span class="media-item-check"><ui-icon symbol="fth-check" :size="14" /></span>
       <img class="media-item-image" v-if="value.image" :src="value.image" />
-      <span class="media-item-icon" v-if="!value.image"><ui-icon :symbol="(value.isFolder ? 'fth-folder' : 'fth-file')" :size="36" :stroke-width="1.5" /></span>
+      <span class="media-item-icon" v-if="!value.image"><ui-icon :symbol="(value.isFolder ? 'fth-folder' : 'fth-file')" :size="26" :stroke-width="2" /></span>
     </div>
     <p class="media-item-text">
       <span :title="value.name">{{value.name}} <!--<ui-icon symbol="fth-cloud" v-if="value.isShared" :size="15" class="media-item-shared" />--></span>
diff --git a/zero.Backoffice.UI/app/ui/app-navigation.vue b/zero.Backoffice.UI/app/ui/app-navigation.vue
index f0afbe9e..7a7fdf35 100644
--- a/zero.Backoffice.UI/app/ui/app-navigation.vue
+++ b/zero.Backoffice.UI/app/ui/app-navigation.vue
@@ -51,8 +51,8 @@
       <ui-dropdown-button label="Edit" icon="fth-edit-2" @click="editUser" />
       <ui-dropdown-button label="Change password" icon="fth-lock" @click="changePassword" />
       <!--<ui-dropdown-button label="Toggle sidebar" icon="fth-minimize-2" @click="toggleSidebar" />-->
-      <ui-dropdown-button label="Dark theme" v-if="!darkTheme" icon="fth-moon" @click="toggleDarkTheme" />
-      <ui-dropdown-button label="Light theme" v-if="darkTheme" icon="fth-sun" @click="toggleDarkTheme" />
+      <ui-dropdown-button label="Dark theme" v-if="ui.preferences.theme !== 'dark'" icon="fth-moon" @click="ui.setTheme('dark')" />
+      <ui-dropdown-button label="Light theme" v-else icon="fth-sun" @click="ui.setTheme('light')" />
       <ui-dropdown-button label="Logout" icon="fth-log-out" @click="logout" />
     </ui-dropdown>
 
@@ -161,15 +161,6 @@
         localStorage.setItem(compactCacheKey, this.compact.toString());
       },
 
-      toggleDarkTheme()
-      {
-        this.darkTheme = !this.darkTheme;
-        EventHub.emit('app.theme', this.darkTheme ? 'dark' : 'light');
-        localStorage.setItem(themeCacheKey, this.darkTheme ? 'dark' : 'light');
-        document.body.classList.toggle('theme-light', !this.darkTheme);
-        document.body.classList.toggle('theme-dark', this.darkTheme);
-      },
-
       openSearch()
       {
         //EventHub.$emit('app.search.open');
diff --git a/zero.Backoffice.UI/app/ui/app-overlays.vue b/zero.Backoffice.UI/app/ui/app-overlays.vue
index 27e84982..289e026c 100644
--- a/zero.Backoffice.UI/app/ui/app-overlays.vue
+++ b/zero.Backoffice.UI/app/ui/app-overlays.vue
@@ -50,11 +50,6 @@
       });
     },
 
-    beforeDestroy()
-    {
-      this.$el.removeEventListener('keyup');
-    },
-
     methods: {
 
       add(instance)
diff --git a/zero.Backoffice.UI/app/ui/store.ts b/zero.Backoffice.UI/app/ui/store.ts
index a328031b..dfa16fab 100644
--- a/zero.Backoffice.UI/app/ui/store.ts
+++ b/zero.Backoffice.UI/app/ui/store.ts
@@ -3,8 +3,14 @@ import { defineStore } from 'pinia';
 import { UiFlavorProvider, UiIconSet, UiSection, UiSettingsGroup, UiStoreState } from 'zero/ui';
 import api from './api';
 
+const THEME_KEY = 'zero.theme';
+
 export const useUiStore = defineStore('zero.ui', {
   state: () => ({
+    preferences: {
+      theme: 'dark'
+    },
+
     sections: [],
     settingGroups: [],
     iconSets: [],
@@ -13,8 +19,15 @@ export const useUiStore = defineStore('zero.ui', {
   } as UiStoreState),
 
   actions: {
-    async setup()
+    async setup(anonymous)
     {
+      this.setTheme(localStorage.getItem(THEME_KEY) || 'default');
+
+      if (anonymous)
+      {
+        return;
+      }
+
       const values = await Promise.all([
         api.getSections(),
         api.getSettingGroups(),
@@ -28,6 +41,16 @@ export const useUiStore = defineStore('zero.ui', {
       this.iconSets = values[2].data as UiIconSet[];
       this.flavors = values[3].data as Record<string, UiFlavorProvider>;
       this.blueprints = values[4].data as string[];
+    },
+
+    setTheme(theme: 'default' | 'light' | 'dark')
+    {
+      const dark = theme === 'dark';
+      this.preferences.theme = theme;
+      localStorage.setItem(THEME_KEY, theme);
+
+      document.body.classList.toggle('theme-light', !dark);
+      document.body.classList.toggle('theme-dark', dark);
     }
   }
 });
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/ui/ui.d.ts b/zero.Backoffice.UI/app/ui/ui.d.ts
index 0ee54dae..9a40158f 100644
--- a/zero.Backoffice.UI/app/ui/ui.d.ts
+++ b/zero.Backoffice.UI/app/ui/ui.d.ts
@@ -3,6 +3,8 @@ declare module 'zero/ui'
 {
   export interface UiStoreState
   {
+    preferences: UiPreferences;
+
     sections: UiSection[];
     settingGroups: UiSettingsGroup[];
     iconSets: UiIconSet[];
@@ -10,6 +12,11 @@ declare module 'zero/ui'
     blueprints: string[];
   }
 
+  export interface UiPreferences
+  {
+    theme: 'default' | 'dark' | 'light';
+  }
+
   export interface UiSection
   {
     alias: string;