puniko/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

client: don't use refs for themes

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 FoundKeyGang/FoundKey#353

Changelog: Fixed
This commit is contained in:
Johann150 2023-03-19 10:15:19 +01:00
parent 742fa37e2b
commit 3cf728a664
Signed by untrusted user: 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;