テーマ関連の機能を強化
This commit is contained in:
parent
7d11c8b767
commit
274cf1af1c
|
@ -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: "隠す"
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue