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