簡易テーマエディタ実装
This commit is contained in:
syuilo
parent
f7ebf14501
commit
edbaa07867
8 changed files with 530 additions and 299 deletions
|
|
@ -679,6 +679,12 @@ nUsers: "{n}ユーザー"
|
|||
nNotes: "{n}ノート"
|
||||
sendErrorReports: "エラーリポートを送信"
|
||||
sendErrorReportsDescription: "オンにすると、問題が発生したときにエラーの詳細情報がMisskeyに共有され、ソフトウェアの品質向上に役立てることができます。"
|
||||
myTheme: "マイテーマ"
|
||||
backgroundColor: "背景"
|
||||
accentColor: "アクセント"
|
||||
textColor: "文字"
|
||||
saveAs: "名前を付けて保存"
|
||||
advanced: "高度"
|
||||
|
||||
_aboutMisskey:
|
||||
about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<MkButton inline>This is</MkButton>
|
||||
<MkButton inline primary>the button</MkButton>
|
||||
</div>
|
||||
<div class="_content">
|
||||
<div class="_content" style="pointer-events: none;">
|
||||
<Mfm :text="mfm"/>
|
||||
</div>
|
||||
<div class="_content">
|
||||
|
|
@ -49,7 +49,7 @@ export default defineComponent({
|
|||
data() {
|
||||
return {
|
||||
text: '',
|
||||
flag: false,
|
||||
flag: true,
|
||||
radio: 'misskey',
|
||||
mfm: `Hello world! This is an @example mention. BTW you are @${this.$i.username}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`
|
||||
}
|
||||
|
|
|
|||
353
src/client/pages/advanced-theme-editor.vue
Normal file
353
src/client/pages/advanced-theme-editor.vue
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
<template>
|
||||
<div class="t9makv94">
|
||||
<section class="_section">
|
||||
<div class="_content">
|
||||
<details>
|
||||
<summary>{{ $ts.import }}</summary>
|
||||
<MkTextarea v-model:value="themeToImport">
|
||||
{{ $ts._theme.importInfo }}
|
||||
</MkTextarea>
|
||||
<MkButton :disabled="!themeToImport.trim()" @click="importTheme">{{ $ts.import }}</MkButton>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
<section class="_section">
|
||||
<div class="_content _card _vMargin">
|
||||
<div class="_content">
|
||||
<MkInput v-model:value="name" required><span>{{ $ts.name }}</span></MkInput>
|
||||
<MkInput v-model:value="author" required><span>{{ $ts.author }}</span></MkInput>
|
||||
<MkTextarea v-model:value="description"><span>{{ $ts.description }}</span></MkTextarea>
|
||||
<div class="_inputs">
|
||||
<div v-text="$ts._theme.base" />
|
||||
<MkRadio v-model="baseTheme" value="light">{{ $ts.light }}</MkRadio>
|
||||
<MkRadio v-model="baseTheme" value="dark">{{ $ts.dark }}</MkRadio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_content _card _vMargin">
|
||||
<div class="list-view _content">
|
||||
<div class="item" v-for="([ k, v ], i) in theme" :key="k">
|
||||
<div class="_inputs">
|
||||
<div>
|
||||
{{ k.startsWith('$') ? `${k} (${$ts._theme.constant})` : $t('_theme.keys.' + k) }}
|
||||
<button v-if="k.startsWith('$')" class="_button _link" @click="del(i)" v-text="$ts.delete" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="type" @click="chooseType($event, i)">
|
||||
{{ getTypeOf(v) }} <Fa :icon="faChevronDown"/>
|
||||
</div>
|
||||
<!-- default -->
|
||||
<div v-if="v === null" v-text="baseProps[k]" class="default-value" />
|
||||
<!-- color -->
|
||||
<div v-else-if="typeof v === 'string'" class="color">
|
||||
<input type="color" :value="v" @input="colorChanged($event.target.value, i)"/>
|
||||
<MkInput class="select" :value="v" @update:value="colorChanged($event, i)"/>
|
||||
</div>
|
||||
<!-- ref const -->
|
||||
<MkInput v-else-if="v.type === 'refConst'" v-model:value="v.key">
|
||||
<template #prefix>$</template>
|
||||
<span>{{ $ts.name }}</span>
|
||||
</MkInput>
|
||||
<!-- ref props -->
|
||||
<MkSelect class="select" v-else-if="v.type === 'refProp'" v-model:value="v.key">
|
||||
<option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option>
|
||||
</MkSelect>
|
||||
<!-- func -->
|
||||
<template v-else-if="v.type === 'func'">
|
||||
<MkSelect class="select" v-model:value="v.name">
|
||||
<template #label>{{ $ts._theme.funcKind }}</template>
|
||||
<option v-for="n in ['alpha', 'darken', 'lighten']" :value="n" :key="n">{{ $t('_theme.' + n) }}</option>
|
||||
</MkSelect>
|
||||
<MkInput type="number" v-model:value="v.arg"><span>{{ $ts._theme.argument }}</span></MkInput>
|
||||
<MkSelect class="select" v-model:value="v.value">
|
||||
<template #label>{{ $ts._theme.basedProp }}</template>
|
||||
<option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option>
|
||||
</MkSelect>
|
||||
</template>
|
||||
<!-- CSS -->
|
||||
<MkInput v-else-if="v.type === 'css'" v-model:value="v.value">
|
||||
<span>CSS</span>
|
||||
</MkInput>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MkButton primary @click="addConst">{{ $ts._theme.addConstant }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="_section">
|
||||
<details class="_content">
|
||||
<summary>{{ $ts.sample }}</summary>
|
||||
<MkSample/>
|
||||
</details>
|
||||
</section>
|
||||
<section class="_section">
|
||||
<div class="_content">
|
||||
<MkButton inline @click="preview">{{ $ts.preview }}</MkButton>
|
||||
<MkButton inline primary :disabled="!name || !author" @click="save">{{ $ts.save }}</MkButton>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { faPalette, faChevronDown, faKeyboard } from '@fortawesome/free-solid-svg-icons';
|
||||
import * as JSON5 from 'json5';
|
||||
import { toUnicode } from 'punycode';
|
||||
|
||||
import MkRadio from '@/components/ui/radio.vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
import MkInput from '@/components/ui/input.vue';
|
||||
import MkTextarea from '@/components/ui/textarea.vue';
|
||||
import MkSelect from '@/components/ui/select.vue';
|
||||
import MkSample from '@/components/sample.vue';
|
||||
|
||||
import { convertToMisskeyTheme, ThemeValue, convertToViewModel, ThemeViewModel } from '@/scripts/theme-editor';
|
||||
import { Theme, applyTheme, lightTheme, darkTheme, themeProps, validateTheme } from '@/scripts/theme';
|
||||
import { host } from '@/config';
|
||||
import * as os from '@/os';
|
||||
import { ColdDeviceStorage } from '@/store';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkRadio,
|
||||
MkButton,
|
||||
MkInput,
|
||||
MkTextarea,
|
||||
MkSelect,
|
||||
MkSample,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
INFO: {
|
||||
title: this.$ts.themeEditor,
|
||||
icon: faPalette,
|
||||
},
|
||||
theme: [] as ThemeViewModel,
|
||||
name: '',
|
||||
description: '',
|
||||
baseTheme: 'light' as 'dark' | 'light',
|
||||
author: `@${this.$i.username}@${toUnicode(host)}`,
|
||||
themeToImport: '',
|
||||
changed: false,
|
||||
lightTheme, darkTheme, themeProps,
|
||||
faPalette, faChevronDown, faKeyboard,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
baseProps() {
|
||||
return this.baseTheme === 'light' ? this.lightTheme.props : this.darkTheme.props;
|
||||
},
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('beforeunload', this.beforeunload);
|
||||
},
|
||||
|
||||
async beforeRouteLeave(to, from, next) {
|
||||
if (this.changed && !(await this.confirm())) {
|
||||
next(false);
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
window.addEventListener('beforeunload', this.beforeunload);
|
||||
const changed = () => this.changed = true;
|
||||
this.$watch('name', changed);
|
||||
this.$watch('description', changed);
|
||||
this.$watch('baseTheme', changed);
|
||||
this.$watch('author', changed);
|
||||
this.$watch('theme', changed);
|
||||
},
|
||||
|
||||
methods: {
|
||||
beforeunload(e: BeforeUnloadEvent) {
|
||||
if (this.changed) {
|
||||
e.preventDefault();
|
||||
e.returnValue = '';
|
||||
}
|
||||
},
|
||||
|
||||
async confirm(): Promise<boolean> {
|
||||
const { canceled } = await os.dialog({
|
||||
type: 'warning',
|
||||
text: this.$ts.leaveConfirm,
|
||||
showCancelButton: true
|
||||
});
|
||||
return !canceled;
|
||||
},
|
||||
|
||||
init() {
|
||||
const t: ThemeViewModel = [];
|
||||
for (const key of themeProps) {
|
||||
t.push([ key, null ]);
|
||||
}
|
||||
this.theme = t;
|
||||
},
|
||||
|
||||
async del(i: number) {
|
||||
const { canceled } = await os.dialog({
|
||||
type: 'warning',
|
||||
showCancelButton: true,
|
||||
text: this.$t('_theme.deleteConstantConfirm', { const: this.theme[i][0] }),
|
||||
});
|
||||
if (canceled) return;
|
||||
Vue.delete(this.theme, i);
|
||||
},
|
||||
|
||||
async addConst() {
|
||||
const { canceled, result } = await os.dialog({
|
||||
title: this.$ts._theme.inputConstantName,
|
||||
input: true
|
||||
});
|
||||
if (canceled) return;
|
||||
this.theme.push([ '$' + result, '#000000']);
|
||||
},
|
||||
|
||||
save() {
|
||||
const theme = convertToMisskeyTheme(this.theme, this.name, this.description, this.author, this.baseTheme);
|
||||
const themes = ColdDeviceStorage.get('themes').concat(theme);
|
||||
ColdDeviceStorage.set('themes', themes);
|
||||
os.dialog({
|
||||
type: 'success',
|
||||
text: this.$t('_theme.installed', { name: theme.name })
|
||||
});
|
||||
this.changed = false;
|
||||
},
|
||||
|
||||
preview() {
|
||||
const theme = convertToMisskeyTheme(this.theme, this.name, this.description, this.author, this.baseTheme);
|
||||
try {
|
||||
applyTheme(theme, false);
|
||||
} catch (e) {
|
||||
os.dialog({
|
||||
type: 'error',
|
||||
text: e.message
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async importTheme() {
|
||||
if (this.changed && (!await this.confirm())) return;
|
||||
|
||||
try {
|
||||
const theme = JSON5.parse(this.themeToImport) as Theme;
|
||||
if (!validateTheme(theme)) throw new Error(this.$ts._theme.invalid);
|
||||
|
||||
this.name = theme.name;
|
||||
this.description = theme.desc || '';
|
||||
this.author = theme.author;
|
||||
this.baseTheme = theme.base || 'light';
|
||||
this.theme = convertToViewModel(theme);
|
||||
this.themeToImport = '';
|
||||
} catch (e) {
|
||||
os.dialog({
|
||||
type: 'error',
|
||||
text: e.message
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
colorChanged(color: string, i: number) {
|
||||
this.theme[i] = [this.theme[i][0], color];
|
||||
},
|
||||
|
||||
getTypeOf(v: ThemeValue) {
|
||||
return v === null
|
||||
? this.$ts._theme.defaultValue
|
||||
: typeof v === 'string'
|
||||
? this.$ts._theme.color
|
||||
: this.$t('_theme.' + v.type);
|
||||
},
|
||||
|
||||
async chooseType(e: MouseEvent, i: number) {
|
||||
const newValue = await this.showTypeMenu(e);
|
||||
this.theme[i] = [ this.theme[i][0], newValue ];
|
||||
},
|
||||
|
||||
showTypeMenu(e: MouseEvent) {
|
||||
return new Promise<ThemeValue>((resolve) => {
|
||||
os.modalMenu([{
|
||||
text: this.$ts._theme.defaultValue,
|
||||
action: () => resolve(null),
|
||||
}, {
|
||||
text: this.$ts._theme.color,
|
||||
action: () => resolve('#000000'),
|
||||
}, {
|
||||
text: this.$ts._theme.func,
|
||||
action: () => resolve({
|
||||
type: 'func', name: 'alpha', arg: 1, value: 'accent'
|
||||
}),
|
||||
}, {
|
||||
text: this.$ts._theme.refProp,
|
||||
action: () => resolve({
|
||||
type: 'refProp', key: 'accent',
|
||||
}),
|
||||
}, {
|
||||
text: this.$ts._theme.refConst,
|
||||
action: () => resolve({
|
||||
type: 'refConst', key: '',
|
||||
}),
|
||||
}, {
|
||||
text: 'CSS',
|
||||
action: () => resolve({
|
||||
type: 'css', value: '',
|
||||
}),
|
||||
}], e.currentTarget || e.target);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.t9makv94 {
|
||||
> ._section {
|
||||
> ._content {
|
||||
> .list-view {
|
||||
> .item {
|
||||
min-height: 48px;
|
||||
word-break: break-all;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.select {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.type {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.default-value {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.color {
|
||||
> input {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
> div {
|
||||
margin-left: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -49,11 +49,14 @@
|
|||
<FormButton primary v-else @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton>
|
||||
|
||||
<FormGroup>
|
||||
<FormLink to="https://assets.msky.cafe/theme/list" external>{{ $ts._theme.explore }}</FormLink>
|
||||
<FormLink to="/theme-editor">{{ $ts._theme.make }}</FormLink>
|
||||
<FormLink to="https://assets.msky.cafe/theme/list" external><template #icon><Fa :icon="faGlobe"/></template>{{ $ts._theme.explore }}</FormLink>
|
||||
<FormLink to="/settings/theme/install"><template #icon><Fa :icon="faDownload"/></template>{{ $ts._theme.install }}</FormLink>
|
||||
</FormGroup>
|
||||
|
||||
<FormLink to="/settings/theme/install"><template #icon><Fa :icon="faDownload"/></template>{{ $ts._theme.install }}</FormLink>
|
||||
<FormGroup>
|
||||
<FormLink to="/theme-editor"><template #icon><Fa :icon="faPaintRoller"/></template>{{ $ts._theme.make }}</FormLink>
|
||||
<FormLink to="/advanced-theme-editor"><template #icon><Fa :icon="faPaintRoller"/></template>{{ $ts._theme.make }} ({{ $ts.advanced }})</FormLink>
|
||||
</FormGroup>
|
||||
|
||||
<FormLink to="/settings/theme/manage"><template #icon><Fa :icon="faFolderOpen"/></template>{{ $ts._theme.manage }}</FormLink>
|
||||
</FormBase>
|
||||
|
|
@ -61,7 +64,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, ref, watch } from 'vue';
|
||||
import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye, faGlobe, faPaintRoller } from '@fortawesome/free-solid-svg-icons';
|
||||
import FormSwitch from '@/components/form/switch.vue';
|
||||
import FormSelect from '@/components/form/select.vue';
|
||||
import FormBase from '@/components/form/base.vue';
|
||||
|
|
@ -148,7 +151,7 @@ export default defineComponent({
|
|||
wallpaper.value = file.url;
|
||||
});
|
||||
},
|
||||
faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye
|
||||
faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye, faGlobe, faPaintRoller,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,121 +1,59 @@
|
|||
<template>
|
||||
<div class="t9makv94">
|
||||
<section class="_section">
|
||||
<div class="_content">
|
||||
<details>
|
||||
<summary>{{ $ts.import }}</summary>
|
||||
<MkTextarea v-model:value="themeToImport">
|
||||
{{ $ts._theme.importInfo }}
|
||||
</MkTextarea>
|
||||
<MkButton :disabled="!themeToImport.trim()" @click="importTheme">{{ $ts.import }}</MkButton>
|
||||
</details>
|
||||
<FormBase class="cwepdizn">
|
||||
<div class="_formItem colorPicker">
|
||||
<div class="_formLabel">{{ $ts.backgroundColor }}</div>
|
||||
<div class="_formPanel colors">
|
||||
<button v-for="color in bgColors" :key="color.color" @click="bgColor = color" class="color _button" :class="{ active: bgColor.color === color.color }">
|
||||
<div class="preview" :style="{ background: color.forPreview }"></div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="_section">
|
||||
<div class="_content _card _vMargin">
|
||||
<div class="_content">
|
||||
<MkInput v-model:value="name" required><span>{{ $ts.name }}</span></MkInput>
|
||||
<MkInput v-model:value="author" required><span>{{ $ts.author }}</span></MkInput>
|
||||
<MkTextarea v-model:value="description"><span>{{ $ts.description }}</span></MkTextarea>
|
||||
<div class="_inputs">
|
||||
<div v-text="$ts._theme.base" />
|
||||
<MkRadio v-model="baseTheme" value="light">{{ $ts.light }}</MkRadio>
|
||||
<MkRadio v-model="baseTheme" value="dark">{{ $ts.dark }}</MkRadio>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_formItem colorPicker">
|
||||
<div class="_formLabel">{{ $ts.accentColor }}</div>
|
||||
<div class="_formPanel colors">
|
||||
<button v-for="color in accentColors" :key="color" @click="accentColor = color" class="color rounded _button" :class="{ active: accentColor === color }">
|
||||
<div class="preview" :style="{ background: color }"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="_content _card _vMargin">
|
||||
<div class="list-view _content">
|
||||
<div class="item" v-for="([ k, v ], i) in theme" :key="k">
|
||||
<div class="_inputs">
|
||||
<div>
|
||||
{{ k.startsWith('$') ? `${k} (${$ts._theme.constant})` : $t('_theme.keys.' + k) }}
|
||||
<button v-if="k.startsWith('$')" class="_button _link" @click="del(i)" v-text="$ts.delete" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="type" @click="chooseType($event, i)">
|
||||
{{ getTypeOf(v) }} <Fa :icon="faChevronDown"/>
|
||||
</div>
|
||||
<!-- default -->
|
||||
<div v-if="v === null" v-text="baseProps[k]" class="default-value" />
|
||||
<!-- color -->
|
||||
<div v-else-if="typeof v === 'string'" class="color">
|
||||
<input type="color" :value="v" @input="colorChanged($event.target.value, i)"/>
|
||||
<MkInput class="select" :value="v" @update:value="colorChanged($event, i)"/>
|
||||
</div>
|
||||
<!-- ref const -->
|
||||
<MkInput v-else-if="v.type === 'refConst'" v-model:value="v.key">
|
||||
<template #prefix>$</template>
|
||||
<span>{{ $ts.name }}</span>
|
||||
</MkInput>
|
||||
<!-- ref props -->
|
||||
<MkSelect class="select" v-else-if="v.type === 'refProp'" v-model:value="v.key">
|
||||
<option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option>
|
||||
</MkSelect>
|
||||
<!-- func -->
|
||||
<template v-else-if="v.type === 'func'">
|
||||
<MkSelect class="select" v-model:value="v.name">
|
||||
<template #label>{{ $ts._theme.funcKind }}</template>
|
||||
<option v-for="n in ['alpha', 'darken', 'lighten']" :value="n" :key="n">{{ $t('_theme.' + n) }}</option>
|
||||
</MkSelect>
|
||||
<MkInput type="number" v-model:value="v.arg"><span>{{ $ts._theme.argument }}</span></MkInput>
|
||||
<MkSelect class="select" v-model:value="v.value">
|
||||
<template #label>{{ $ts._theme.basedProp }}</template>
|
||||
<option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option>
|
||||
</MkSelect>
|
||||
</template>
|
||||
<!-- CSS -->
|
||||
<MkInput v-else-if="v.type === 'css'" v-model:value="v.value">
|
||||
<span>CSS</span>
|
||||
</MkInput>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MkButton primary @click="addConst">{{ $ts._theme.addConstant }}</MkButton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="_formItem colorPicker">
|
||||
<div class="_formLabel">{{ $ts.textColor }}</div>
|
||||
<div class="_formPanel colors">
|
||||
<button v-for="color in fgColors" :key="color" @click="fgColor = color" class="color char _button" :class="{ active: fgColor === color }">
|
||||
<div class="preview" :style="{ color: color.forPreview ? color.forPreview : bgColor.kind === 'light' ? '#5f5f5f' : '#dadada' }">A</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="_section">
|
||||
<details class="_content">
|
||||
<summary>{{ $ts.sample }}</summary>
|
||||
<MkSample/>
|
||||
</details>
|
||||
</section>
|
||||
<section class="_section">
|
||||
<div class="_content">
|
||||
<MkButton inline @click="preview">{{ $ts.preview }}</MkButton>
|
||||
<MkButton inline primary :disabled="!name || !author" @click="save">{{ $ts.save }}</MkButton>
|
||||
</div>
|
||||
<div class="_formItem preview">
|
||||
<div class="_formLabel">{{ $ts.preview }}</div>
|
||||
<div class="_formPanel preview">
|
||||
<MkSample class="preview"/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<FormButton @click="saveAs">{{ $ts.saveAs }}</FormButton>
|
||||
</FormBase>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { faPalette, faChevronDown, faKeyboard } from '@fortawesome/free-solid-svg-icons';
|
||||
import * as JSON5 from 'json5';
|
||||
import { toUnicode } from 'punycode';
|
||||
import * as tinycolor from 'tinycolor2';
|
||||
import { v4 as uuid} from 'uuid';
|
||||
|
||||
import MkRadio from '@/components/ui/radio.vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
import MkInput from '@/components/ui/input.vue';
|
||||
import MkTextarea from '@/components/ui/textarea.vue';
|
||||
import MkSelect from '@/components/ui/select.vue';
|
||||
import FormBase from '@/components/form/base.vue';
|
||||
import FormButton from '@/components/form/button.vue';
|
||||
import MkSample from '@/components/sample.vue';
|
||||
|
||||
import { convertToMisskeyTheme, ThemeValue, convertToViewModel, ThemeViewModel } from '@/scripts/theme-editor';
|
||||
import { Theme, applyTheme, lightTheme, darkTheme, themeProps, validateTheme } from '@/scripts/theme';
|
||||
import { Theme, applyTheme, validateTheme } from '@/scripts/theme';
|
||||
import { host } from '@/config';
|
||||
import * as os from '@/os';
|
||||
import { ColdDeviceStorage } from '@/store';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkRadio,
|
||||
MkButton,
|
||||
MkInput,
|
||||
MkTextarea,
|
||||
MkSelect,
|
||||
FormBase,
|
||||
FormButton,
|
||||
MkSample,
|
||||
},
|
||||
|
||||
|
|
@ -125,229 +63,159 @@ export default defineComponent({
|
|||
title: this.$ts.themeEditor,
|
||||
icon: faPalette,
|
||||
},
|
||||
theme: [] as ThemeViewModel,
|
||||
name: '',
|
||||
description: '',
|
||||
baseTheme: 'light' as 'dark' | 'light',
|
||||
author: `@${this.$i.username}@${toUnicode(host)}`,
|
||||
themeToImport: '',
|
||||
changed: false,
|
||||
lightTheme, darkTheme, themeProps,
|
||||
faPalette, faChevronDown, faKeyboard,
|
||||
bgColors: [
|
||||
{ color: '#f5f5f5', kind: 'light', forPreview: '#f5f5f5' },
|
||||
{ color: '#f0eee9', kind: 'light', forPreview: '#f3e2b9' },
|
||||
{ color: '#e9eff0', kind: 'light', forPreview: '#bfe3e8' },
|
||||
{ color: '#f0e9ee', kind: 'light', forPreview: '#f1d1e8' },
|
||||
{ color: '#2b2b2b', kind: 'dark', forPreview: '#2b2b2b' },
|
||||
{ color: '#362e29', kind: 'dark', forPreview: '#735c4d' },
|
||||
{ color: '#303629', kind: 'dark', forPreview: '#506d2f' },
|
||||
{ color: '#293436', kind: 'dark', forPreview: '#258192' },
|
||||
],
|
||||
bgColor: null,
|
||||
accentColors: ['#e36749', '#f29924', '#98c934', '#34c9a9', '#34a1c9', '#606df7', '#8d34c9', '#e84d83'],
|
||||
accentColor: null,
|
||||
fgColors: [
|
||||
{ color: 'none', forLight: '#5f5f5f', forDark: '#dadada', forPreview: null },
|
||||
{ color: 'red', forLight: '#7f6666', forDark: '#e4d1d1', forPreview: '#ca4343' },
|
||||
{ color: 'yellow', forLight: '#736955', forDark: '#e0d5c0', forPreview: '#d49923' },
|
||||
{ color: 'green', forLight: '#586d5b', forDark: '#d1e4d4', forPreview: '#4cbd5c' },
|
||||
{ color: 'cyan', forLight: '#5d7475', forDark: '#d1e3e4', forPreview: '#2abdc3' },
|
||||
{ color: 'blue', forLight: '#676880', forDark: '#d1d2e4', forPreview: '#3035b5' },
|
||||
{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
|
||||
],
|
||||
fgColor: null,
|
||||
faPalette,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
baseProps() {
|
||||
return this.baseTheme === 'light' ? this.lightTheme.props : this.darkTheme.props;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const currentBgColor = getComputedStyle(document.documentElement).getPropertyValue('--bg');
|
||||
const matchedBgColor = this.bgColors.find(x => tinycolor(x.color).toRgbString() === tinycolor(currentBgColor).toRgbString());
|
||||
this.bgColor = matchedBgColor ? matchedBgColor : this.bgColors[0];
|
||||
const currentAccentColor = getComputedStyle(document.documentElement).getPropertyValue('--accent');
|
||||
const matchedAccentColor = this.accentColors.find(x => tinycolor(x).toRgbString() === tinycolor(currentAccentColor).toRgbString());
|
||||
this.accentColor = matchedAccentColor ? matchedAccentColor : this.accentColors[0];
|
||||
const currentFgColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
|
||||
const matchedFgColor = this.fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(currentFgColor).toRgbString()));
|
||||
this.fgColor = matchedFgColor ? matchedFgColor : this.fgColors[0];
|
||||
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('beforeunload', this.beforeunload);
|
||||
},
|
||||
|
||||
async beforeRouteLeave(to, from, next) {
|
||||
if (this.changed && !(await this.confirm())) {
|
||||
next(false);
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
window.addEventListener('beforeunload', this.beforeunload);
|
||||
const changed = () => this.changed = true;
|
||||
this.$watch('name', changed);
|
||||
this.$watch('description', changed);
|
||||
this.$watch('baseTheme', changed);
|
||||
this.$watch('author', changed);
|
||||
this.$watch('theme', changed);
|
||||
this.$watch('bgColor', this.apply);
|
||||
this.$watch('accentColor', this.apply);
|
||||
this.$watch('fgColor', this.apply);
|
||||
this.apply();
|
||||
},
|
||||
|
||||
methods: {
|
||||
beforeunload(e: BeforeUnloadEvent) {
|
||||
if (this.changed) {
|
||||
e.preventDefault();
|
||||
e.returnValue = '';
|
||||
}
|
||||
convert() {
|
||||
return {
|
||||
id: '#MY_THEME#',
|
||||
name: this.$ts.myTheme,
|
||||
base: this.bgColor.kind,
|
||||
props: {
|
||||
bg: this.bgColor.color,
|
||||
fg: this.bgColor.kind === 'light' ? this.fgColor.forLight : this.fgColor.forDark,
|
||||
accent: this.accentColor,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
async confirm(): Promise<boolean> {
|
||||
const { canceled } = await os.dialog({
|
||||
type: 'warning',
|
||||
text: this.$ts.leaveConfirm,
|
||||
showCancelButton: true
|
||||
});
|
||||
return !canceled;
|
||||
apply() {
|
||||
const theme = this.convert();
|
||||
applyTheme(theme, true);
|
||||
|
||||
const themes = ColdDeviceStorage.get('themes').filter(t => t.id != '#MY_THEME#').concat(theme);
|
||||
ColdDeviceStorage.set('themes', themes);
|
||||
ColdDeviceStorage.set('lightTheme', theme.id);
|
||||
ColdDeviceStorage.set('darkTheme', theme.id);
|
||||
},
|
||||
|
||||
init() {
|
||||
const t: ThemeViewModel = [];
|
||||
for (const key of themeProps) {
|
||||
t.push([ key, null ]);
|
||||
}
|
||||
this.theme = t;
|
||||
},
|
||||
|
||||
async del(i: number) {
|
||||
const { canceled } = await os.dialog({
|
||||
type: 'warning',
|
||||
showCancelButton: true,
|
||||
text: this.$t('_theme.deleteConstantConfirm', { const: this.theme[i][0] }),
|
||||
async saveAs() {
|
||||
const { canceled, result: name } = await os.dialog({
|
||||
title: this.$ts.name,
|
||||
input: {
|
||||
allowEmpty: false
|
||||
}
|
||||
});
|
||||
if (canceled) return;
|
||||
Vue.delete(this.theme, i);
|
||||
},
|
||||
|
||||
async addConst() {
|
||||
const { canceled, result } = await os.dialog({
|
||||
title: this.$ts._theme.inputConstantName,
|
||||
input: true
|
||||
});
|
||||
if (canceled) return;
|
||||
this.theme.push([ '$' + result, '#000000']);
|
||||
},
|
||||
|
||||
save() {
|
||||
const theme = convertToMisskeyTheme(this.theme, this.name, this.description, this.author, this.baseTheme);
|
||||
|
||||
const theme = this.convert();
|
||||
theme.id = uuid();
|
||||
theme.name = name;
|
||||
theme.author = `@${this.$i.username}@${toUnicode(host)}`;
|
||||
const themes = ColdDeviceStorage.get('themes').concat(theme);
|
||||
ColdDeviceStorage.set('themes', themes);
|
||||
ColdDeviceStorage.set('lightTheme', theme.id);
|
||||
ColdDeviceStorage.set('darkTheme', theme.id);
|
||||
os.dialog({
|
||||
type: 'success',
|
||||
text: this.$t('_theme.installed', { name: theme.name })
|
||||
});
|
||||
this.changed = false;
|
||||
},
|
||||
|
||||
preview() {
|
||||
const theme = convertToMisskeyTheme(this.theme, this.name, this.description, this.author, this.baseTheme);
|
||||
try {
|
||||
applyTheme(theme, false);
|
||||
} catch (e) {
|
||||
os.dialog({
|
||||
type: 'error',
|
||||
text: e.message
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async importTheme() {
|
||||
if (this.changed && (!await this.confirm())) return;
|
||||
|
||||
try {
|
||||
const theme = JSON5.parse(this.themeToImport) as Theme;
|
||||
if (!validateTheme(theme)) throw new Error(this.$ts._theme.invalid);
|
||||
|
||||
this.name = theme.name;
|
||||
this.description = theme.desc || '';
|
||||
this.author = theme.author;
|
||||
this.baseTheme = theme.base || 'light';
|
||||
this.theme = convertToViewModel(theme);
|
||||
this.themeToImport = '';
|
||||
} catch (e) {
|
||||
os.dialog({
|
||||
type: 'error',
|
||||
text: e.message
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
colorChanged(color: string, i: number) {
|
||||
this.theme[i] = [this.theme[i][0], color];
|
||||
},
|
||||
|
||||
getTypeOf(v: ThemeValue) {
|
||||
return v === null
|
||||
? this.$ts._theme.defaultValue
|
||||
: typeof v === 'string'
|
||||
? this.$ts._theme.color
|
||||
: this.$t('_theme.' + v.type);
|
||||
},
|
||||
|
||||
async chooseType(e: MouseEvent, i: number) {
|
||||
const newValue = await this.showTypeMenu(e);
|
||||
this.theme[i] = [ this.theme[i][0], newValue ];
|
||||
},
|
||||
|
||||
showTypeMenu(e: MouseEvent) {
|
||||
return new Promise<ThemeValue>((resolve) => {
|
||||
os.modalMenu([{
|
||||
text: this.$ts._theme.defaultValue,
|
||||
action: () => resolve(null),
|
||||
}, {
|
||||
text: this.$ts._theme.color,
|
||||
action: () => resolve('#000000'),
|
||||
}, {
|
||||
text: this.$ts._theme.func,
|
||||
action: () => resolve({
|
||||
type: 'func', name: 'alpha', arg: 1, value: 'accent'
|
||||
}),
|
||||
}, {
|
||||
text: this.$ts._theme.refProp,
|
||||
action: () => resolve({
|
||||
type: 'refProp', key: 'accent',
|
||||
}),
|
||||
}, {
|
||||
text: this.$ts._theme.refConst,
|
||||
action: () => resolve({
|
||||
type: 'refConst', key: '',
|
||||
}),
|
||||
}, {
|
||||
text: 'CSS',
|
||||
action: () => resolve({
|
||||
type: 'css', value: '',
|
||||
}),
|
||||
}], e.currentTarget || e.target);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.t9makv94 {
|
||||
> ._section {
|
||||
> ._content {
|
||||
> .list-view {
|
||||
> .item {
|
||||
min-height: 48px;
|
||||
word-break: break-all;
|
||||
.cwepdizn {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
> .colorPicker {
|
||||
> .colors {
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
|
||||
> .color {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
> .preview {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
margin: 24px 0;
|
||||
> .preview {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
box-shadow: 0 0 0 2px var(--divider) inset;
|
||||
}
|
||||
|
||||
&.rounded {
|
||||
border-radius: 999px;
|
||||
|
||||
> .preview {
|
||||
border-radius: 999px;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.default-value {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.color {
|
||||
> input {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
> div {
|
||||
margin-left: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.char {
|
||||
line-height: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .preview > .preview > .preview {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ export const router = createRouter({
|
|||
{ path: '/featured', component: page('featured') },
|
||||
{ path: '/docs', component: page('docs') },
|
||||
{ path: '/theme-editor', component: page('theme-editor') },
|
||||
{ path: '/advanced-theme-editor', component: page('advanced-theme-editor') },
|
||||
{ path: '/docs/:doc', component: page('doc'), props: route => ({ doc: route.params.doc }) },
|
||||
{ path: '/explore', component: page('explore') },
|
||||
{ path: '/explore/tags/:tag', props: true, component: page('explore') },
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
focus: ':alpha<0.3<@accent',
|
||||
bg: '#000',
|
||||
acrylicBg: ':alpha<0.5<@bg',
|
||||
fg: '#c7d1d8',
|
||||
fg: '#dadada',
|
||||
fgHighlighted: ':lighten<3<@fg',
|
||||
divider: 'rgba(255, 255, 255, 0.1)',
|
||||
indicator: '@accent',
|
||||
panel: '#000',
|
||||
panel: ':lighten<3<@bg',
|
||||
panelHighlight: ':lighten<3<@panel',
|
||||
panelHeaderBg: ':lighten<3<@panel',
|
||||
panelHeaderFg: '@fg',
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
focus: ':alpha<0.3<@accent',
|
||||
bg: '#fff',
|
||||
acrylicBg: ':alpha<0.5<@bg',
|
||||
fg: '#5c6a73',
|
||||
fg: '#5f5f5f',
|
||||
fgHighlighted: ':darken<3<@fg',
|
||||
divider: 'rgba(0, 0, 0, 0.1)',
|
||||
indicator: '@accent',
|
||||
panel: '#fff',
|
||||
panel: ':lighten<3<@bg',
|
||||
panelHighlight: ':darken<3<@panel',
|
||||
panelHeaderBg: ':lighten<3<@panel',
|
||||
panelHeaderFg: '@fg',
|
||||
|
|
|
|||
Loading…
Reference in a new issue