Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2021-10-11 00:36:47 +09:00
parent a0c9fd75d7
commit 816493e01f
4 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/client/components/global/header.vue
View file

@ -37,13 +37,14 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onMounted, PropType, ref } from 'vue'; import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from 'vue';
import * as tinycolor from 'tinycolor2'; import * as tinycolor from 'tinycolor2';
import { popupMenu } from '@client/os'; import { popupMenu } from '@client/os';
import { url } from '@client/config'; import { url } from '@client/config';
import { scrollToTop } from '@client/scripts/scroll'; import { scrollToTop } from '@client/scripts/scroll';
import MkButton from '@client/components/ui/button.vue'; import MkButton from '@client/components/ui/button.vue';
import { i18n } from '../../i18n'; import { i18n } from '@client/i18n';
import { globalEvents } from '@client/events';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -136,11 +137,19 @@ export default defineComponent({
scrollToTop(el.value, { behavior: 'smooth' }); scrollToTop(el.value, { behavior: 'smooth' });
}; };
onMounted(() => { const calcBg = () => {
const rawBg = props.info?.bg || 'var(--bg)'; const rawBg = props.info?.bg || 'var(--bg)';
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg); const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
tinyBg.setAlpha(0.85); tinyBg.setAlpha(0.85);
bg.value = tinyBg.toRgbString(); bg.value = tinyBg.toRgbString();
};
onMounted(() => {
calcBg();
globalEvents.on('themeChanged', calcBg);
onUnmounted(() => {
globalEvents.off('themeChanged', calcBg);
});
if (el.value.parentElement) { if (el.value.parentElement) {
narrow.value = el.value.parentElement.offsetWidth < 500; narrow.value = el.value.parentElement.offsetWidth < 500;

4
src/client/events.ts Normal file
View file

@ -0,0 +1,4 @@
import { EventEmitter } from 'eventemitter3';
// TODO: 型付け
export const globalEvents = new EventEmitter();

2
src/client/pages/settings/import-export.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div> <div style="margin: 16px;">
<FormSection> <FormSection>
<template #label>{{ $ts._exportOrImport.allNotes }}</template> <template #label>{{ $ts._exportOrImport.allNotes }}</template>
<MkButton :class="$style.button" inline @click="doExport('notes')"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton> <MkButton :class="$style.button" inline @click="doExport('notes')"><i class="fas fa-download"></i> {{ $ts.export }}</MkButton>

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

@ -1,3 +1,4 @@
import { globalEvents } from '@client/events';
import * as tinycolor from 'tinycolor2'; import * as tinycolor from 'tinycolor2';
export type Theme = { export type Theme = {
@ -62,6 +63,9 @@ export function applyTheme(theme: Theme, persist = true) {
if (persist) { if (persist) {
localStorage.setItem('theme', JSON.stringify(props)); localStorage.setItem('theme', JSON.stringify(props));
} }
// 色計算など再度行えるようにクライアント全体に通知
globalEvents.emit('themeChanged');
} }
function compile(theme: Theme): Record<string, string> { function compile(theme: Theme): Record<string, string> {