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

Tweak UI

Browse source
This commit is contained in:
syuilo 2021-04-12 13:06:00 +09:00
parent 0cc4519fc0
commit d599c1e740
4 changed files with 64 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/client/components/form/form.scss
View file

@ -9,32 +9,34 @@
} }
} }
._formLabel { ._formLabel,
position: sticky; ._formCaption {
top: var(--stickyTop, 0px);
background: var(--bg);
z-index: 2;
font-size: 80%; font-size: 80%;
margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
padding: 8px calc(16px + var(--formXPadding)) 8px calc(16px + var(--formXPadding));
color: var(--fgTransparentWeak); color: var(--fgTransparentWeak);
background: var(--X17);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
&:empty { &:empty {
display: none; display: none;
} }
} }
._formCaption { ._formLabel {
font-size: 80%; position: sticky;
padding: 8px 16px 0 16px; top: var(--stickyTop, 0px);
opacity: 0.8; z-index: 2;
margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
padding: 8px calc(16px + var(--formXPadding)) 8px calc(16px + var(--formXPadding));
background: var(--X17);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
&:empty { ._themeChanging_ ._formLabel {
display: none; transition: none !important;
} background: transparent;
}
._formCaption {
padding: 8px 16px 0 16px;
} }
._formItem { ._formItem {

60
src/client/pages/settings/theme.vue
View file

@ -1,24 +1,5 @@
<template> <template>
<FormBase> <FormBase>
<FormSelect v-model:value="lightTheme" v-if="!darkMode">
<template #label>{{ $ts.themeForLightMode }}</template>
<optgroup :label="$ts.lightThemes">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.darkThemes">
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
<FormSelect v-model:value="darkTheme" v-else>
<template #label>{{ $ts.themeForDarkMode }}</template>
<optgroup :label="$ts.darkThemes">
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.lightThemes">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
<FormGroup> <FormGroup>
<div class="rfqxtzch _formItem _formPanel"> <div class="rfqxtzch _formItem _formPanel">
<div class="darkMode"> <div class="darkMode">
@ -45,6 +26,47 @@
<FormSwitch v-model:value="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch> <FormSwitch v-model:value="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch>
</FormGroup> </FormGroup>
<template v-if="darkMode">
<FormSelect v-model:value="darkTheme">
<template #label>{{ $ts.themeForDarkMode }}</template>
<optgroup :label="$ts.darkThemes">
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.lightThemes">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
<FormSelect v-model:value="lightTheme">
<template #label>{{ $ts.themeForLightMode }}</template>
<optgroup :label="$ts.lightThemes">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.darkThemes">
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
</template>
<template v-else>
<FormSelect v-model:value="lightTheme">
<template #label>{{ $ts.themeForLightMode }}</template>
<optgroup :label="$ts.lightThemes">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.darkThemes">
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
<FormSelect v-model:value="darkTheme">
<template #label>{{ $ts.themeForDarkMode }}</template>
<optgroup :label="$ts.darkThemes">
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$ts.lightThemes">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
</FormSelect>
</template>
<FormButton primary v-if="wallpaper == null" @click="setWallpaper">{{ $ts.setWallpaper }}</FormButton> <FormButton primary v-if="wallpaper == null" @click="setWallpaper">{{ $ts.setWallpaper }}</FormButton>
<FormButton primary v-else @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton> <FormButton primary v-else @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton>

4
src/client/scripts/theme.ts
View file

@ -29,10 +29,10 @@ let timeout = null;
export function applyTheme(theme: Theme, persist = true) { export function applyTheme(theme: Theme, persist = true) {
if (timeout) clearTimeout(timeout); if (timeout) clearTimeout(timeout);
document.documentElement.classList.add('changing-theme'); document.documentElement.classList.add('_themeChanging_');
timeout = setTimeout(() => { timeout = setTimeout(() => {
document.documentElement.classList.remove('changing-theme'); document.documentElement.classList.remove('_themeChanging_');
}, 1000); }, 1000);
// Deep copy // Deep copy

4
src/client/style.scss
View file

@ -82,9 +82,9 @@ html {
} }
} }
html.changing-theme { html._themeChanging_ {
&, * { &, * {
transition: background 1s ease !important; transition: background 1s ease, border 1s ease !important;
} }
} }