FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

client: don't use refs for themes
All checks were successful
ci/woodpecker/push/lint-backend Pipeline was successful
Details
ci/woodpecker/push/lint-client Pipeline was successful
Details
ci/woodpecker/push/build Pipeline was successful
Details
ci/woodpecker/push/lint-foundkey-js Pipeline was successful
Details
ci/woodpecker/push/lint-sw Pipeline was successful
Details
ci/woodpecker/push/test Pipeline was successful
Details

Browse source 
I am not sure why ref's were used here before, since all changes to
those refs could only be from the same page the user was already on.
It seems the ColdDeviceStorage.ref was causing some circular thingies
that went wrong.

closes #353

Changelog: Fixed
This commit is contained in:
Johann150 2023-03-19 10:15:19 +01:00
parent 742fa37e2b
commit 3cf728a664
Signed by: Johann150
GPG key ID: 9EE6577A2A06F8F1
1 changed files with 14 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
packages/client/src/pages/settings/theme.vue
View file

@ -71,7 +71,7 @@ import FormSelect from '@/components/form/select.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormLink from '@/components/form/link.vue'; import FormLink from '@/components/form/link.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import { getBuiltinThemesRef } from '@/scripts/theme'; import { getBuiltinThemes } from '@/scripts/theme';
import { selectFile } from '@/scripts/select-file'; import { selectFile } from '@/scripts/select-file';
import { isDeviceDarkmode } from '@/scripts/is-device-darkmode'; import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
import { ColdDeviceStorage , defaultStore } from '@/store'; import { ColdDeviceStorage , defaultStore } from '@/store';
@ -81,38 +81,39 @@ import { uniqueBy } from '@/scripts/array';
import { fetchThemes, getThemes } from '@/theme-store'; import { fetchThemes, getThemes } from '@/theme-store';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';
const installedThemes = ref(getThemes()); const [installedThemes, builtinThemes] = await Promise.all([fetchThemes(), getBuiltinThemes()]);
const builtinThemes = getBuiltinThemesRef();
const instanceThemes = []; const instanceThemes = [];
if (instance.defaultLightTheme != null) instanceThemes.push(JSON5.parse(instance.defaultLightTheme)); if (instance.defaultLightTheme != null) instanceThemes.push(JSON5.parse(instance.defaultLightTheme));
if (instance.defaultDarkTheme != null) instanceThemes.push(JSON5.parse(instance.defaultDarkTheme)); if (instance.defaultDarkTheme != null) instanceThemes.push(JSON5.parse(instance.defaultDarkTheme));
const themes = computed(() => uniqueBy([ ...instanceThemes, ...builtinThemes.value, ...installedThemes.value ], theme => theme.id)); const themes = uniqueBy([ ...instanceThemes, ...builtinThemes, ...installedThemes ], theme => theme.id);
const darkThemes = computed(() => themes.value.filter(t => t.base === 'dark' || t.kind === 'dark')); const darkThemes = themes.filter(t => t.base === 'dark' || t.kind === 'dark');
const lightThemes = computed(() => themes.value.filter(t => t.base === 'light' || t.kind === 'light')); const lightThemes = themes.filter(t => t.base === 'light' || t.kind === 'light');
const darkTheme = ColdDeviceStorage.ref('darkTheme'); let darkTheme = $ref(ColdDeviceStorage.get('darkTheme'));
const darkThemeId = computed({ const darkThemeId = computed({
get() { get() {
return darkTheme.value.id; return darkTheme.id;
}, },
set(id) { set(id) {
ColdDeviceStorage.set('darkTheme', themes.value.find(x => x.id === id)); darkTheme = themes.find(x => x.id === id);
ColdDeviceStorage.set('darkTheme', darkTheme);
}, },
}); });
const lightTheme = ColdDeviceStorage.ref('lightTheme'); let lightTheme = $ref(ColdDeviceStorage.get('lightTheme'));
const lightThemeId = computed({ const lightThemeId = computed({
get() { get() {
return lightTheme.value.id; return lightTheme.id;
}, },
set(id) { set(id) {
ColdDeviceStorage.set('lightTheme', themes.value.find(x => x.id === id)); lightTheme = themes.find(x => x.id === id);
ColdDeviceStorage.set('lightTheme', lightTheme);
}, },
}); });
const darkMode = computed(defaultStore.makeGetterSetter('darkMode')); const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode')); const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
const wallpaper = ref(localStorage.getItem('wallpaper')); const wallpaper = ref(localStorage.getItem('wallpaper'));
const themesCount = installedThemes.value.length; const themesCount = installedThemes.length;
watch(syncDeviceDarkMode, () => { watch(syncDeviceDarkMode, () => {
if (syncDeviceDarkMode.value) { if (syncDeviceDarkMode.value) {
@ -129,16 +130,6 @@ watch(wallpaper, () => {
location.reload(); location.reload();
}); });
onActivated(() => {
fetchThemes().then(() => {
installedThemes.value = getThemes();
});
});
fetchThemes().then(() => {
installedThemes.value = getThemes();
});
function setWallpaper(event) { function setWallpaper(event) {
selectFile(event.currentTarget ?? event.target, null).then(file => { selectFile(event.currentTarget ?? event.target, null).then(file => {
wallpaper.value = file.url; wallpaper.value = file.url;