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

Fix theme import (#8749)

Browse source
This commit is contained in:
tamaina 2022-05-28 21:59:23 +09:00 committed by GitHub
parent 708fba989a
commit 4a50c49211
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 46 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/client/@types/theme.d.ts vendored
View file

@ -1,5 +1,7 @@
import { Theme } from '../src/scripts/theme';
declare module '@/themes/*.json5' { declare module '@/themes/*.json5' {
export = Theme; import { Theme } from "@/scripts/theme";
const theme: Theme;
export default theme;
} }

11
packages/client/src/pages/settings/theme.manage.vue
View file

@ -10,13 +10,13 @@
</optgroup> </optgroup>
</FormSelect> </FormSelect>
<template v-if="selectedTheme"> <template v-if="selectedTheme">
<FormInput readonly :modelValue="selectedTheme.author" class="_formBlock"> <FormInput readonly :model-value="selectedTheme.author" class="_formBlock">
<template #label>{{ i18n.ts.author }}</template> <template #label>{{ i18n.ts.author }}</template>
</FormInput> </FormInput>
<FormTextarea v-if="selectedTheme.desc" readonly :modelValue="selectedTheme.desc" class="_formBlock"> <FormTextarea v-if="selectedTheme.desc" readonly :model-value="selectedTheme.desc" class="_formBlock">
<template #label>{{ i18n.ts._theme.description }}</template> <template #label>{{ i18n.ts._theme.description }}</template>
</FormTextarea> </FormTextarea>
<FormTextarea readonly tall :modelValue="selectedThemeCode" class="_formBlock"> <FormTextarea readonly tall :model-value="selectedThemeCode" class="_formBlock">
<template #label>{{ i18n.ts._theme.code }}</template> <template #label>{{ i18n.ts._theme.code }}</template>
<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template> <template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
</FormTextarea> </FormTextarea>
@ -32,7 +32,7 @@ import FormTextarea from '@/components/form/textarea.vue';
import FormSelect from '@/components/form/select.vue'; import FormSelect from '@/components/form/select.vue';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/ui/button.vue'; import FormButton from '@/components/ui/button.vue';
import { Theme, builtinThemes } from '@/scripts/theme'; import { Theme, getBuiltinThemesRef } from '@/scripts/theme';
import copyToClipboard from '@/scripts/copy-to-clipboard'; import copyToClipboard from '@/scripts/copy-to-clipboard';
import * as os from '@/os'; import * as os from '@/os';
import { getThemes, removeTheme } from '@/theme-store'; import { getThemes, removeTheme } from '@/theme-store';
@ -40,9 +40,10 @@ import * as symbols from '@/symbols';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
const installedThemes = ref(getThemes()); const installedThemes = ref(getThemes());
const builtinThemes = getBuiltinThemesRef();
const selectedThemeId = ref(null); const selectedThemeId = ref(null);
const themes = computed(() => builtinThemes.concat(installedThemes.value)); const themes = computed(() => [ ...installedThemes.value, ...builtinThemes.value ]);
const selectedTheme = computed(() => { const selectedTheme = computed(() => {
if (selectedThemeId.value == null) return null; if (selectedThemeId.value == null) return null;

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

@ -93,7 +93,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 FormButton from '@/components/ui/button.vue'; import FormButton from '@/components/ui/button.vue';
import { builtinThemes } from '@/scripts/theme'; import { getBuiltinThemesRef } 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 } from '@/store'; import { ColdDeviceStorage } from '@/store';
@ -105,12 +105,13 @@ import { fetchThemes, getThemes } from '@/theme-store';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
const installedThemes = ref(getThemes()); const installedThemes = ref(getThemes());
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.concat(builtinThemes.concat(installedThemes.value)), theme => theme.id)); 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 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 lightThemes = computed(() => themes.value.filter(t => t.base === 'light' || t.kind === 'light'));
const darkTheme = ColdDeviceStorage.ref('darkTheme'); const darkTheme = ColdDeviceStorage.ref('darkTheme');

4
packages/client/src/pages/theme-editor.vue
View file

@ -75,7 +75,9 @@ import FormButton from '@/components/ui/button.vue';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormFolder from '@/components/form/folder.vue'; import FormFolder from '@/components/form/folder.vue';
import { Theme, applyTheme, darkTheme, lightTheme } from '@/scripts/theme'; import { Theme, applyTheme } from '@/scripts/theme';
import lightTheme from '@/themes/_light.json5';
import darkTheme from '@/themes/_dark.json5';
import { host } from '@/config'; import { host } from '@/config';
import * as os from '@/os'; import * as os from '@/os';
import { ColdDeviceStorage, defaultStore } from '@/store'; import { ColdDeviceStorage, defaultStore } from '@/store';

49
packages/client/src/scripts/theme.ts
View file

@ -1,3 +1,4 @@
import { ref } from 'vue';
import { globalEvents } from '@/events'; import { globalEvents } from '@/events';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
@ -10,30 +11,38 @@ export type Theme = {
props: Record<string, string>; props: Record<string, string>;
}; };
export const lightTheme: Theme = await import('@/themes/_light.json5'); import lightTheme from '@/themes/_light.json5';
export const darkTheme: Theme = await import('@/themes/_dark.json5'); import darkTheme from '@/themes/_dark.json5';
export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X')); export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
export const builtinThemes = [ export const getBuiltinThemes = () => Promise.all(
await import('@/themes/l-light.json5'), [
await import('@/themes/l-coffee.json5'), 'l-light',
await import('@/themes/l-apricot.json5'), 'l-coffee',
await import('@/themes/l-rainy.json5'), 'l-apricot',
await import('@/themes/l-vivid.json5'), 'l-rainy',
await import('@/themes/l-cherry.json5'), 'l-vivid',
await import('@/themes/l-sushi.json5'), 'l-cherry',
'l-sushi',
await import('@/themes/d-dark.json5'), 'd-dark',
await import('@/themes/d-persimmon.json5'), 'd-persimmon',
await import('@/themes/d-astro.json5'), 'd-astro',
await import('@/themes/d-future.json5'), 'd-future',
await import('@/themes/d-botanical.json5'), 'd-botanical',
await import('@/themes/d-cherry.json5'), 'd-cherry',
await import('@/themes/d-ice.json5'), 'd-ice',
await import('@/themes/d-pumpkin.json5'), 'd-pumpkin',
await import('@/themes/d-black.json5'), 'd-black',
] as Theme[]; ].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default))
);
export const getBuiltinThemesRef = () => {
const builtinThemes = ref<Theme[]>([]);
getBuiltinThemes().then(themes => builtinThemes.value = themes);
return builtinThemes;
}
let timeout = null; let timeout = null;