Sharkey/packages/frontend/src/pages/theme-editor.vue

284 lines
8.3 KiB
Vue
Raw Normal View History

2022-06-23 18:47:55 +03:00
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
2022-06-23 18:47:55 +03:00
<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
2023-01-06 06:40:17 +02:00
<div class="cwepdizn _gaps_m">
2023-01-05 14:04:56 +02:00
<FormFolder :default-open="true">
2022-06-23 18:47:55 +03:00
<template #label>{{ i18n.ts.backgroundColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
</div>
<div class="row">
<button v-for="color in bgColors.filter(x => x.kind === 'dark')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
<div class="preview" :style="{ background: color.forPreview }"></div>
</button>
</div>
2022-01-04 15:42:04 +02:00
</div>
2022-06-23 18:47:55 +03:00
</FormFolder>
2023-01-05 14:04:56 +02:00
<FormFolder :default-open="true">
2022-06-23 18:47:55 +03:00
<template #label>{{ i18n.ts.accentColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in accentColors" :key="color" class="color rounded _button" :class="{ active: theme.props.accent === color }" @click="setAccentColor(color)">
<div class="preview" :style="{ background: color }"></div>
</button>
</div>
2022-01-04 15:42:04 +02:00
</div>
2022-06-23 18:47:55 +03:00
</FormFolder>
2023-01-05 14:04:56 +02:00
<FormFolder :default-open="true">
2022-06-23 18:47:55 +03:00
<template #label>{{ i18n.ts.textColor }}</template>
<div class="cwepdizn-colors">
<div class="row">
<button v-for="color in fgColors" :key="color" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }" @click="setFgColor(color)">
<div class="preview" :style="{ color: color.forPreview ? color.forPreview : theme.base === 'light' ? '#5f5f5f' : '#dadada' }">A</div>
</button>
</div>
2022-01-04 15:42:04 +02:00
</div>
2022-06-23 18:47:55 +03:00
</FormFolder>
2023-01-05 14:04:56 +02:00
<FormFolder :default-open="false">
<template #icon><i class="ti ti-code"></i></template>
2022-06-23 18:47:55 +03:00
<template #label>{{ i18n.ts.editCode }}</template>
2023-01-06 06:40:17 +02:00
<div class="_gaps_m">
2023-01-07 08:09:46 +02:00
<MkTextarea v-model="themeCode" tall>
2022-06-23 18:47:55 +03:00
<template #label>{{ i18n.ts._theme.code }}</template>
2023-01-07 08:09:46 +02:00
</MkTextarea>
2023-01-06 02:41:14 +02:00
<MkButton primary @click="applyThemeCode">{{ i18n.ts.apply }}</MkButton>
2022-06-23 18:47:55 +03:00
</div>
</FormFolder>
2023-01-05 14:04:56 +02:00
<FormFolder :default-open="false">
2022-06-23 18:47:55 +03:00
<template #label>{{ i18n.ts.addDescription }}</template>
2023-01-06 06:40:17 +02:00
<div class="_gaps_m">
2023-01-07 08:09:46 +02:00
<MkTextarea v-model="description">
2022-06-23 18:47:55 +03:00
<template #label>{{ i18n.ts._theme.description }}</template>
2023-01-07 08:09:46 +02:00
</MkTextarea>
2022-01-04 15:42:04 +02:00
</div>
2022-06-23 18:47:55 +03:00
</FormFolder>
</div>
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import { toUnicode } from 'punycode/';
refactor: use Vite to build instead of webpack (#8575) * update stream.ts * https://github.com/misskey-dev/misskey/pull/7769#issuecomment-917542339 * fix lint * clean up? * add app * fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * :v: * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * :v: * clean up config * typesを戻した * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * clean up * clean up * キャッシュ対策 * Truncate push notification message * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * i18n.ts * update * :v: * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * URLをsw.jsに戻す * clean up * wip * wip * wip * wip * wip * wip * :v: * use import * fix * install rollup * use defineAsyncComponent. * fix emojilist * wip use defineAsyncComponent * popup(import -> popup(defineAsyncComponent(() => import * draggable? * fix init import * clean up * fix router * add comment * :v: * :v: * :v: * remove webpack * update vite * fix boot sequence * Revert "fix boot sequence" This reverts commit e893dbf37aed83bf9f12e427d98c78a7065b4a39. * revert boot import * never make two app div * ; * remove console.log * change clientEntry sequence * fix * Revert "fix" This reverts commit 12741b3d89950a31dbb1bb81477ddb27b0e9951a. * fix * add comment https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 * add log * add comment Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
2022-05-01 16:51:07 +03:00
import tinycolor from 'tinycolor2';
import { v4 as uuid } from 'uuid';
refactor: use Vite to build instead of webpack (#8575) * update stream.ts * https://github.com/misskey-dev/misskey/pull/7769#issuecomment-917542339 * fix lint * clean up? * add app * fix * nanka iroiro * wip * wip * fix lint * fix loginId * fix * refactor * refactor * remove follow action * clean up * Revert "remove follow action" This reverts commit defbb416480905af2150d1c92f10d8e1d1288c0a. * Revert "clean up" This reverts commit f94919cb9cff41e274044fc69c56ad36a33974f2. * remove fetch specification * renoteの条件追加 * apiFetch => cli * bypass fetch? * fix * refactor: use path alias * temp: add submodule * remove submodule * enhane: unison-reloadに指定したパスに移動できるように * null * null * feat: ログインするアカウントのIDをクエリ文字列で指定する機能 * null * await? * rename * rename * Update read.ts * merge * get-note-summary * fix * swパッケージに * add missing packages * fix getNoteSummary * add webpack-cli * :v: * remove plugins * sw-inject分離したがテストしてない * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix notification.vue * remove a blank line * disconnect intersection observer * disconnect2 * fix * :v: * clean up config * typesを戻した * Update packages/client/src/components/notification.vue Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> * disconnect * oops * Failed to load the script unexpectedly回避 sw.jsとlib.tsを分離してみた * truncate notification * Update packages/client/src/ui/_common_/common.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp> * clean up * clean up * キャッシュ対策 * Truncate push notification message * クライアントがあったらストリームに接続しているということなので通知しない判定の位置を修正 * components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * merge * fix * Service Workerのビルドにesbuildを使うようにする * return createEmptyNotification() * fix * i18n.ts * update * :v: * remove ts-loader * fix * fix * enhance: Service Workerを常に登録するように * pollEnded * URLをsw.jsに戻す * clean up * wip * wip * wip * wip * wip * wip * :v: * use import * fix * install rollup * use defineAsyncComponent. * fix emojilist * wip use defineAsyncComponent * popup(import -> popup(defineAsyncComponent(() => import * draggable? * fix init import * clean up * fix router * add comment * :v: * :v: * :v: * remove webpack * update vite * fix boot sequence * Revert "fix boot sequence" This reverts commit e893dbf37aed83bf9f12e427d98c78a7065b4a39. * revert boot import * never make two app div * ; * remove console.log * change clientEntry sequence * fix * Revert "fix" This reverts commit 12741b3d89950a31dbb1bb81477ddb27b0e9951a. * fix * add comment https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 * add log * add comment Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
2022-05-01 16:51:07 +03:00
import JSON5 from 'json5';
2023-01-06 02:41:14 +02:00
import MkButton from '@/components/MkButton.vue';
2023-01-07 08:09:46 +02:00
import MkTextarea from '@/components/MkTextarea.vue';
2022-01-04 15:42:04 +02:00
import FormFolder from '@/components/form/folder.vue';
2022-07-04 17:33:55 +03:00
import { $i } from '@/account';
2022-05-28 15:59:23 +03:00
import { Theme, applyTheme } from '@/scripts/theme';
import lightTheme from '@/themes/_light.json5';
import darkTheme from '@/themes/_dark.json5';
2021-11-11 19:02:25 +02:00
import { host } from '@/config';
import * as os from '@/os';
import { ColdDeviceStorage, defaultStore } from '@/store';
2021-11-11 19:02:25 +02:00
import { addTheme } from '@/theme-store';
import { i18n } from '@/i18n';
import { useLeaveGuard } from '@/scripts/use-leave-guard';
2022-06-23 18:47:55 +03:00
import { definePageMetadata } from '@/scripts/page-metadata';
const 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: '#dce2e0', kind: 'light', forPreview: '#a4dccc' },
{ color: '#e2e0dc', kind: 'light', forPreview: '#d8c7a5' },
{ color: '#d5dbe0', kind: 'light', forPreview: '#b0cae0' },
{ color: '#dad5d5', kind: 'light', forPreview: '#d6afaf' },
{ color: '#2b2b2b', kind: 'dark', forPreview: '#444444' },
{ color: '#362e29', kind: 'dark', forPreview: '#735c4d' },
{ color: '#303629', kind: 'dark', forPreview: '#506d2f' },
{ color: '#293436', kind: 'dark', forPreview: '#258192' },
{ color: '#2e2936', kind: 'dark', forPreview: '#504069' },
{ color: '#252722', kind: 'dark', forPreview: '#3c462f' },
{ color: '#212525', kind: 'dark', forPreview: '#303e3e' },
{ color: '#191919', kind: 'dark', forPreview: '#272727' },
] as const;
const accentColors = ['#e36749', '#f29924', '#98c934', '#34c9a9', '#34a1c9', '#606df7', '#8d34c9', '#e84d83'];
const 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: '#7275d8' },
{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
];
let theme = $ref<Partial<Theme>>({
base: 'light',
props: lightTheme.props,
});
let description = $ref<string | null>(null);
let themeCode = $ref<string | null>(null);
let changed = $ref(false);
useLeaveGuard($$(changed));
function showPreview() {
2022-05-29 13:21:36 +03:00
os.pageWindow('/preview');
}
2021-11-19 12:36:12 +02:00
function setBgColor(color: typeof bgColors[number]) {
if (theme.base !== color.kind) {
const base = color.kind === 'dark' ? darkTheme : lightTheme;
for (const prop of Object.keys(base.props)) {
if (prop === 'accent') continue;
if (prop === 'fg') continue;
theme.props[prop] = base.props[prop];
}
}
theme.base = color.kind;
theme.props.bg = color.color;
if (theme.props.fg) {
const matchedFgColor = fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(theme.props.fg).toRgbString()));
if (matchedFgColor) setFgColor(matchedFgColor);
}
}
2021-01-16 06:47:07 +02:00
function setAccentColor(color) {
theme.props.accent = color;
}
2021-01-16 06:47:07 +02:00
function setFgColor(color) {
theme.props.fg = theme.base === 'light' ? color.forLight : color.forDark;
}
2021-02-06 11:06:54 +02:00
function apply() {
themeCode = JSON5.stringify(theme, null, '\t');
applyTheme(theme, false);
changed = true;
}
2021-02-06 11:06:54 +02:00
function applyThemeCode() {
let parsed;
try {
parsed = JSON5.parse(themeCode);
} catch (err) {
os.alert({
type: 'error',
text: i18n.ts._theme.invalid,
});
return;
}
theme = parsed;
}
async function saveAs() {
const { canceled, result: name } = await os.inputText({
title: i18n.ts.name,
allowEmpty: false,
});
if (canceled) return;
theme.id = uuid();
theme.name = name;
theme.author = `@${$i.username}@${toUnicode(host)}`;
if (description) theme.desc = description;
await addTheme(theme);
applyTheme(theme);
if (defaultStore.state.darkMode) {
ColdDeviceStorage.set('darkTheme', theme);
} else {
ColdDeviceStorage.set('lightTheme', theme);
}
changed = false;
os.alert({
type: 'success',
text: i18n.t('_theme.installed', { name: theme.name }),
});
}
watch($$(theme), apply, { deep: true });
2022-06-23 18:47:55 +03:00
const headerActions = $computed(() => [{
asFullButton: true,
icon: 'ti ti-eye',
2022-06-23 18:47:55 +03:00
text: i18n.ts.preview,
handler: showPreview,
}, {
asFullButton: true,
icon: 'ti ti-check',
2022-06-23 18:47:55 +03:00
text: i18n.ts.saveAs,
handler: saveAs,
}]);
const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.themeEditor,
icon: 'ti ti-palette',
});
</script>
<style lang="scss" scoped>
2021-01-09 10:18:45 +02:00
.cwepdizn {
2022-01-04 15:42:04 +02:00
::v-deep(.cwepdizn-colors) {
text-align: center;
> .row {
> .color {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
border-radius: 8px;
> .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;
}
2021-01-09 10:18:45 +02:00
2022-01-04 15:42:04 +02:00
&:hover {
2021-01-09 10:18:45 +02:00
> .preview {
2022-01-04 15:42:04 +02:00
transform: scale(1.1);
}
2022-01-04 15:42:04 +02:00
}
2022-01-04 15:42:04 +02:00
&.active {
box-shadow: 0 0 0 2px var(--divider) inset;
}
2022-01-04 15:42:04 +02:00
&.rounded {
border-radius: 999px;
2022-01-04 15:42:04 +02:00
> .preview {
2021-01-09 10:18:45 +02:00
border-radius: 999px;
}
2022-01-04 15:42:04 +02:00
}
2021-01-09 10:18:45 +02:00
2022-01-04 15:42:04 +02:00
&.char {
line-height: 42px;
2021-01-09 10:18:45 +02:00
}
}
}
}
}
</style>