テーマ関連の機能を強化

This commit is contained in:
syuilo 2018-10-03 02:57:31 +09:00
parent 7d11c8b767
commit 274cf1af1c
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
3 changed files with 53 additions and 9 deletions

View file

@ -311,6 +311,9 @@ common/views/components/theme.vue:
uninstalled: "「{}」をアンインストールしました" uninstalled: "「{}」をアンインストールしました"
author: "作者" author: "作者"
desc: "説明" desc: "説明"
export: "エクスポート"
import: "インポート"
import-by-code: "またはコードをペースト"
common/views/components/cw-button.vue: common/views/components/cw-button.vue:
hide: "隠す" hide: "隠す"

View file

@ -44,10 +44,13 @@
<details> <details>
<summary>%fa:download% %i18n:@install-a-theme%</summary> <summary>%fa:download% %i18n:@install-a-theme%</summary>
<ui-button @click="import_()">%fa:file-import% %i18n:@import%</ui-button>
<input ref="file" type="file" style="display:none;" @change="onUpdateImportFile"/>
<p>%i18n:@import-by-code%:</p>
<ui-textarea v-model="installThemeCode"> <ui-textarea v-model="installThemeCode">
<span>%i18n:@theme-code%</span> <span>%i18n:@theme-code%</span>
</ui-textarea> </ui-textarea>
<ui-button @click="install()">%fa:check% %i18n:@install%</ui-button> <ui-button @click="() => install(this.installThemeCode)">%fa:check% %i18n:@install%</ui-button>
</details> </details>
<details> <details>
@ -65,6 +68,7 @@
<ui-textarea readonly :value="selectedInstalledThemeCode"> <ui-textarea readonly :value="selectedInstalledThemeCode">
<span>%i18n:@theme-code%</span> <span>%i18n:@theme-code%</span>
</ui-textarea> </ui-textarea>
<ui-button @click="export_()" link :download="`${selectedInstalledTheme.name}.misskeytheme`" ref="export">%fa:box% %i18n:@export%</ui-button>
<ui-button @click="uninstall()">%fa:trash-alt R% %i18n:@uninstall%</ui-button> <ui-button @click="uninstall()">%fa:trash-alt R% %i18n:@uninstall%</ui-button>
</template> </template>
</details> </details>
@ -177,11 +181,11 @@ export default Vue.extend({
}, },
methods: { methods: {
install() { install(code) {
let theme; let theme;
try { try {
theme = JSON5.parse(this.installThemeCode); theme = JSON5.parse(code);
} catch (e) { } catch (e) {
alert('%i18n:@invalid-theme%'); alert('%i18n:@invalid-theme%');
return; return;
@ -219,6 +223,29 @@ export default Vue.extend({
alert('%i18n:@uninstalled%'.replace('{}', theme.name)); alert('%i18n:@uninstalled%'.replace('{}', theme.name));
}, },
import_() {
(this.$refs.file as any).click();
}
export_() {
const blob = new Blob([this.selectedInstalledThemeCode], {
type: 'application/json5'
});
this.$refs.export.$el.href = window.URL.createObjectURL(blob);
},
onUpdateImportFile() {
const f = (this.$refs.file as any).files[0];
const reader = new FileReader();
reader.onload = e => {
this.install(e.target.result);
};
reader.readAsText(f);
},
preview() { preview() {
applyTheme(this.myTheme, false); applyTheme(this.myTheme, false);
}, },
@ -239,10 +266,14 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.nicnklzforebnpfgasiypmpdaaglujqm .nicnklzforebnpfgasiypmpdaaglujqm
> details > details
margin-top 16px
padding-top 16px
border-top solid 1px var(--faceDivider) border-top solid 1px var(--faceDivider)
> summary
padding 16px 0
> *:last-child
margin-bottom 16px
> .creator > .creator
> div > div
padding 16px 0 padding 16px 0

View file

@ -1,7 +1,7 @@
<template> <template>
<button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')"> <component class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :is="link ? 'a' : 'button'" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
<slot></slot> <slot></slot>
</button> </component>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -21,6 +21,11 @@ export default Vue.extend({
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false
},
link: {
type: Boolean,
required: false,
default: false
} }
}, },
data() { data() {
@ -35,15 +40,20 @@ export default Vue.extend({
.dmtdnykelhudezerjlfpbhgovrgnqqgr .dmtdnykelhudezerjlfpbhgovrgnqqgr
display block display block
width 100% width 100%
min-height 40px
margin 0 margin 0
padding 0 padding 8px
text-align center
font-weight normal font-weight normal
font-size 16px font-size 16px
border none border none
border-radius 6px border-radius 6px
outline none outline none
box-shadow none box-shadow none
text-decoration none
user-select none
*
pointer-events none
&:focus &:focus
&:after &:after