enhance(frontend): テーマ設定で簡易プレビューを表示するように (#15643)
* enhance(frontend): テーマ設定で簡易プレビューを表示するように * Update Changelog * fix lint * 🎨 --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
かっこかり
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
<template>
|
||||
<SearchMarker path="/settings/theme" :label="i18n.ts.theme" :keywords="['theme']" icon="ti ti-palette">
|
||||
<div class="_gaps_m rsljpzjq">
|
||||
<div class="_gaps_m">
|
||||
<div v-adaptive-border class="rfqxtzch _panel">
|
||||
<div class="toggle">
|
||||
<div class="toggleWrapper">
|
||||
@@ -36,23 +36,149 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="selects">
|
||||
<div class="select">
|
||||
<div class="_gaps">
|
||||
<template v-if="!darkMode">
|
||||
<SearchMarker :keywords="['light', 'theme']">
|
||||
<MkSelect v-model="lightThemeId" large :items="lightThemeSelectorItems">
|
||||
<MkFolder :defaultOpen="true" :max-height="500">
|
||||
<template #icon><i class="ti ti-sun"></i></template>
|
||||
<template #label><SearchLabel>{{ i18n.ts.themeForLightMode }}</SearchLabel></template>
|
||||
<template #prefix><i class="ti ti-sun"></i></template>
|
||||
</MkSelect>
|
||||
<template #caption>{{ lightThemeName }}</template>
|
||||
|
||||
<div class="_gaps_m">
|
||||
<FormSection v-if="instanceLightTheme != null" first>
|
||||
<template #label>{{ i18n.ts._theme.instanceTheme }}</template>
|
||||
<div :class="$style.themeSelect">
|
||||
<div :class="$style.themeItemOuter">
|
||||
<input
|
||||
:id="`themeRadio_${instanceLightTheme.id}`"
|
||||
v-model="lightThemeId"
|
||||
type="radio"
|
||||
name="lightTheme"
|
||||
:class="$style.themeRadio"
|
||||
:value="instanceLightTheme.id"
|
||||
/>
|
||||
<label :for="`themeRadio_${instanceLightTheme.id}`" :class="$style.themeItemRoot" class="_button">
|
||||
<MkThemePreview :theme="instanceLightTheme" :class="$style.themeItemPreview"/>
|
||||
<div :class="$style.themeItemCaption">{{ instanceLightTheme.name }}</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
<FormSection v-if="installedLightThemes.length > 0" :first="instanceLightTheme == null">
|
||||
<template #label>{{ i18n.ts._theme.installedThemes }}</template>
|
||||
<div :class="$style.themeSelect">
|
||||
<div v-for="theme in installedLightThemes" :class="$style.themeItemOuter">
|
||||
<input
|
||||
:id="`themeRadio_${theme.id}`"
|
||||
v-model="lightThemeId"
|
||||
type="radio"
|
||||
name="lightTheme"
|
||||
:class="$style.themeRadio"
|
||||
:value="theme.id"
|
||||
/>
|
||||
<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
|
||||
<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
|
||||
<div :class="$style.themeItemCaption">{{ theme.name }}</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
<FormSection :first="installedLightThemes.length === 0 && instanceLightTheme == null">
|
||||
<template #label>{{ i18n.ts._theme.builtinThemes }}</template>
|
||||
<div :class="$style.themeSelect">
|
||||
<div v-for="theme in builtinLightThemes" :class="$style.themeItemOuter">
|
||||
<input
|
||||
:id="`themeRadio_${theme.id}`"
|
||||
v-model="lightThemeId"
|
||||
type="radio"
|
||||
name="lightTheme"
|
||||
:class="$style.themeRadio"
|
||||
:value="theme.id"
|
||||
/>
|
||||
<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
|
||||
<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
|
||||
<div :class="$style.themeItemCaption">{{ theme.name }}</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
</MkFolder>
|
||||
</SearchMarker>
|
||||
</div>
|
||||
<div class="select">
|
||||
</template>
|
||||
<template v-else>
|
||||
<SearchMarker :keywords="['dark', 'theme']">
|
||||
<MkSelect v-model="darkThemeId" large :items="darkThemeSelectorItems">
|
||||
<MkFolder :defaultOpen="true" :max-height="500">
|
||||
<template #icon><i class="ti ti-moon"></i></template>
|
||||
<template #label><SearchLabel>{{ i18n.ts.themeForDarkMode }}</SearchLabel></template>
|
||||
<template #prefix><i class="ti ti-moon"></i></template>
|
||||
</MkSelect>
|
||||
<template #caption>{{ darkThemeName }}</template>
|
||||
|
||||
<div class="_gaps_m">
|
||||
<FormSection v-if="instanceDarkTheme != null" first>
|
||||
<template #label>{{ i18n.ts._theme.instanceTheme }}</template>
|
||||
<div :class="$style.themeSelect">
|
||||
<div :class="$style.themeItemOuter">
|
||||
<input
|
||||
:id="`themeRadio_${instanceDarkTheme.id}`"
|
||||
v-model="darkThemeId"
|
||||
type="radio"
|
||||
name="darkTheme"
|
||||
:class="$style.themeRadio"
|
||||
:value="instanceDarkTheme.id"
|
||||
/>
|
||||
<label :for="`themeRadio_${instanceDarkTheme.id}`" :class="$style.themeItemRoot" class="_button">
|
||||
<MkThemePreview :theme="instanceDarkTheme" :class="$style.themeItemPreview"/>
|
||||
<div :class="$style.themeItemCaption">{{ instanceDarkTheme.name }}</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
<FormSection v-if="installedDarkThemes.length > 0" :first="instanceDarkTheme == null">
|
||||
<template #label>{{ i18n.ts._theme.installedThemes }}</template>
|
||||
<div :class="$style.themeSelect">
|
||||
<div v-for="theme in installedDarkThemes" :class="$style.themeItemOuter">
|
||||
<input
|
||||
:id="`themeRadio_${theme.id}`"
|
||||
v-model="darkThemeId"
|
||||
type="radio"
|
||||
name="darkTheme"
|
||||
:class="$style.themeRadio"
|
||||
:value="theme.id"
|
||||
/>
|
||||
<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
|
||||
<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
|
||||
<div :class="$style.themeItemCaption">{{ theme.name }}</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
||||
<FormSection :first="installedDarkThemes.length === 0 && instanceDarkTheme == null">
|
||||
<template #label>{{ i18n.ts._theme.builtinThemes }}</template>
|
||||
<div :class="$style.themeSelect">
|
||||
<div v-for="theme in builtinDarkThemes" :class="$style.themeItemOuter">
|
||||
<input
|
||||
:id="`themeRadio_${theme.id}`"
|
||||
v-model="darkThemeId"
|
||||
type="radio"
|
||||
name="darkTheme"
|
||||
:class="$style.themeRadio"
|
||||
:value="theme.id"
|
||||
/>
|
||||
<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
|
||||
<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
|
||||
<div :class="$style.themeItemCaption">{{ theme.name }}</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
</MkFolder>
|
||||
</SearchMarker>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<FormSection>
|
||||
@@ -77,12 +203,13 @@ import { computed, onActivated, ref, watch } from 'vue';
|
||||
import JSON5 from 'json5';
|
||||
import defaultLightTheme from '@@/themes/l-light.json5';
|
||||
import defaultDarkTheme from '@@/themes/d-green-lime.json5';
|
||||
import type { MkSelectItem } from '@/components/MkSelect.vue';
|
||||
import type { Theme } from '@/theme.js';
|
||||
import MkSwitch from '@/components/MkSwitch.vue';
|
||||
import MkSelect from '@/components/MkSelect.vue';
|
||||
import FormSection from '@/components/form/section.vue';
|
||||
import FormLink from '@/components/form/link.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkFolder from '@/components/MkFolder.vue';
|
||||
import MkThemePreview from '@/components/MkThemePreview.vue';
|
||||
import { getBuiltinThemesRef } from '@/theme.js';
|
||||
import { selectFile } from '@/utility/select-file.js';
|
||||
import { isDeviceDarkmode } from '@/utility/is-device-darkmode.js';
|
||||
@@ -99,79 +226,16 @@ import { prefer } from '@/preferences.js';
|
||||
const installedThemes = ref(getThemes());
|
||||
const builtinThemes = getBuiltinThemesRef();
|
||||
|
||||
const instanceDarkTheme = computed(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
|
||||
const instanceDarkTheme = computed<Theme | null>(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
|
||||
const installedDarkThemes = computed(() => installedThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
|
||||
const builtinDarkThemes = computed(() => builtinThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
|
||||
const instanceLightTheme = computed(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
|
||||
const instanceLightTheme = computed<Theme | null>(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
|
||||
const installedLightThemes = computed(() => installedThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
|
||||
const builtinLightThemes = computed(() => builtinThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
|
||||
const themes = computed(() => uniqueBy([instanceDarkTheme.value, instanceLightTheme.value, ...builtinThemes.value, ...installedThemes.value].filter(x => x != null), theme => theme.id));
|
||||
|
||||
const lightThemeSelectorItems = computed(() => {
|
||||
const items = [] as MkSelectItem[];
|
||||
if (instanceLightTheme.value) {
|
||||
items.push({
|
||||
type: 'option',
|
||||
value: instanceLightTheme.value.id,
|
||||
label: instanceLightTheme.value.name,
|
||||
});
|
||||
}
|
||||
if (installedLightThemes.value.length > 0) {
|
||||
items.push({
|
||||
type: 'group',
|
||||
label: i18n.ts._theme.installedThemes,
|
||||
items: installedLightThemes.value.map(x => ({
|
||||
type: 'option',
|
||||
value: x.id,
|
||||
label: x.name,
|
||||
})),
|
||||
});
|
||||
}
|
||||
items.push({
|
||||
type: 'group',
|
||||
label: i18n.ts._theme.builtinThemes,
|
||||
items: builtinLightThemes.value.map(x => ({
|
||||
type: 'option',
|
||||
value: x.id,
|
||||
label: x.name,
|
||||
})),
|
||||
});
|
||||
return items;
|
||||
});
|
||||
|
||||
const darkThemeSelectorItems = computed(() => {
|
||||
const items = [] as MkSelectItem[];
|
||||
if (instanceDarkTheme.value) {
|
||||
items.push({
|
||||
type: 'option',
|
||||
value: instanceDarkTheme.value.id,
|
||||
label: instanceDarkTheme.value.name,
|
||||
});
|
||||
}
|
||||
if (installedDarkThemes.value.length > 0) {
|
||||
items.push({
|
||||
type: 'group',
|
||||
label: i18n.ts._theme.installedThemes,
|
||||
items: installedDarkThemes.value.map(x => ({
|
||||
type: 'option',
|
||||
value: x.id,
|
||||
label: x.name,
|
||||
})),
|
||||
});
|
||||
}
|
||||
items.push({
|
||||
type: 'group',
|
||||
label: i18n.ts._theme.builtinThemes,
|
||||
items: builtinDarkThemes.value.map(x => ({
|
||||
type: 'option',
|
||||
value: x.id,
|
||||
label: x.name,
|
||||
})),
|
||||
});
|
||||
return items;
|
||||
});
|
||||
|
||||
const darkTheme = prefer.r.darkTheme;
|
||||
const darkThemeName = computed(() => darkTheme.value?.name ?? defaultDarkTheme.name);
|
||||
const darkThemeId = computed({
|
||||
get() {
|
||||
return darkTheme.value ? darkTheme.value.id : defaultDarkTheme.id;
|
||||
@@ -184,6 +248,7 @@ const darkThemeId = computed({
|
||||
},
|
||||
});
|
||||
const lightTheme = prefer.r.lightTheme;
|
||||
const lightThemeName = computed(() => lightTheme.value?.name ?? defaultLightTheme.name);
|
||||
const lightThemeId = computed({
|
||||
get() {
|
||||
return lightTheme.value ? lightTheme.value.id : defaultLightTheme.id;
|
||||
@@ -236,6 +301,57 @@ definePage(() => ({
|
||||
}));
|
||||
</script>
|
||||
|
||||
<style module>
|
||||
.themeSelect {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: var(--MI-margin);
|
||||
}
|
||||
|
||||
.themeItemOuter {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.themeRadio {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.themeItemRoot {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: clip;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid var(--MI_THEME-divider);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
|
||||
.themeRadio:focus-visible + .themeItemRoot {
|
||||
outline: 2px solid var(--MI_THEME-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.themeRadio:checked + .themeItemRoot {
|
||||
border-color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
.themeItemPreview {
|
||||
display: block;
|
||||
width: calc(100% + 2px);
|
||||
height: auto;
|
||||
margin-left: -1px;
|
||||
border-bottom: 1px solid var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.themeItemCaption {
|
||||
box-sizing: border-box;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
font-size: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rfqxtzch {
|
||||
border-radius: 6px;
|
||||
@@ -471,17 +587,4 @@ definePage(() => ({
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
}
|
||||
|
||||
.rsljpzjq {
|
||||
> .selects {
|
||||
display: flex;
|
||||
gap: 1.5em var(--MI-margin);
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .select {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user