client: テーマコードをコピーできるようにしたり

This commit is contained in:
syuilo 2020-08-08 10:27:37 +09:00
parent d500f88740
commit 61b8757e21
2 changed files with 14 additions and 5 deletions

View File

@ -557,6 +557,7 @@ wordMute: "ワードミュート"
userSaysSomething: "{name}が何かを言いました" userSaysSomething: "{name}が何かを言いました"
makeActive: "アクティブにする" makeActive: "アクティブにする"
display: "表示" display: "表示"
copy: "コピー"
_sidebar: _sidebar:
full: "フル" full: "フル"

View File

@ -55,8 +55,8 @@
<mk-textarea v-model="installThemeCode"> <mk-textarea v-model="installThemeCode">
<span>{{ $t('_theme.code') }}</span> <span>{{ $t('_theme.code') }}</span>
</mk-textarea> </mk-textarea>
<mk-button @click="() => install(this.installThemeCode)" :disabled="installThemeCode == null" primary inline><fa :icon="faCheck"/> {{ $t('install') }}</mk-button> <mk-button @click="() => install(installThemeCode)" :disabled="installThemeCode == null" primary inline><fa :icon="faCheck"/> {{ $t('install') }}</mk-button>
<mk-button @click="() => preview(this.installThemeCode)" :disabled="installThemeCode == null" inline><fa :icon="faEye"/> {{ $t('preview') }}</mk-button> <mk-button @click="() => preview(installThemeCode)" :disabled="installThemeCode == null" inline><fa :icon="faEye"/> {{ $t('preview') }}</mk-button>
</details> </details>
</div> </div>
<div class="_content"> <div class="_content">
@ -68,6 +68,7 @@
<template v-if="selectedTheme"> <template v-if="selectedTheme">
<mk-textarea readonly tall :value="selectedThemeCode"> <mk-textarea readonly tall :value="selectedThemeCode">
<span>{{ $t('_theme.code') }}</span> <span>{{ $t('_theme.code') }}</span>
<template #desc><button @click="copyThemeCode()" class="_textButton">{{ $t('copy') }}</button></template>
</mk-textarea> </mk-textarea>
<mk-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="faTrashAlt"/> {{ $t('uninstall') }}</mk-button> <mk-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="faTrashAlt"/> {{ $t('uninstall') }}</mk-button>
</template> </template>
@ -80,7 +81,6 @@
import Vue from 'vue'; import Vue from 'vue';
import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons'; import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
import * as JSON5 from 'json5'; import * as JSON5 from 'json5';
import MkInput from '../../components/ui/input.vue';
import MkButton from '../../components/ui/button.vue'; import MkButton from '../../components/ui/button.vue';
import MkSelect from '../../components/ui/select.vue'; import MkSelect from '../../components/ui/select.vue';
import MkSwitch from '../../components/ui/switch.vue'; import MkSwitch from '../../components/ui/switch.vue';
@ -88,10 +88,10 @@ import MkTextarea from '../../components/ui/textarea.vue';
import { Theme, builtinThemes, applyTheme, validateTheme } from '../../scripts/theme'; import { Theme, builtinThemes, applyTheme, validateTheme } from '../../scripts/theme';
import { selectFile } from '../../scripts/select-file'; import { selectFile } from '../../scripts/select-file';
import { isDeviceDarkmode } from '../../scripts/is-device-darkmode'; import { isDeviceDarkmode } from '../../scripts/is-device-darkmode';
import copyToClipboard from '../../scripts/copy-to-clipboard';
export default Vue.extend({ export default Vue.extend({
components: { components: {
MkInput,
MkButton, MkButton,
MkSelect, MkSelect,
MkSwitch, MkSwitch,
@ -192,6 +192,14 @@ export default Vue.extend({
}); });
}, },
copyThemeCode() {
copyToClipboard(this.selectedThemeCode);
this.$root.dialog({
type: 'success',
iconOnly: true, autoClose: true
});
},
parseThemeCode(code) { parseThemeCode(code) {
let theme; let theme;
@ -247,7 +255,7 @@ export default Vue.extend({
key: 'themes', value: themes key: 'themes', value: themes
}); });
this.$root.dialog({ this.$root.dialog({
type: 'info', type: 'success',
iconOnly: true, autoClose: true iconOnly: true, autoClose: true
}); });
}, },