nullobsi/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

Improve theme manager

Browse source
This commit is contained in:
syuilo 2018-10-09 06:46:52 +09:00
parent 389f420cad
commit c464183329
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 30 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
locales/ja-JP.yml
View file

@ -307,6 +307,9 @@ common/views/components/theme.vue:
invalid-theme: "テーマが正しくありません。" invalid-theme: "テーマが正しくありません。"
already-installed: "既にそのテーマはインストールされています。" already-installed: "既にそのテーマはインストールされています。"
saved: "保存しました" saved: "保存しました"
manage-themes: "テーマの管理"
builtin-themes: "標準テーマ"
my-themes: "マイテーマ"
installed-themes: "インストールされたテーマ" installed-themes: "インストールされたテーマ"
select-theme: "テーマを選択してください" select-theme: "テーマを選択してください"
uninstall: "アンインストール" uninstall: "アンインストール"

45
src/client/app/common/views/components/theme.vue
View file

@ -67,22 +67,30 @@
</details> </details>
<details> <details>
<summary>%fa:folder-open% %i18n:@installed-themes%</summary> <summary>%fa:folder-open% %i18n:@manage-themes%</summary>
<ui-select v-model="selectedInstalledThemeId" placeholder="%i18n:@select-theme%"> <ui-select v-model="selectedThemeId" placeholder="%i18n:@select-theme%">
<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option> <optgroup label="%i18n:@builtin-themes%">
<option v-for="x in builtinThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup label="%i18n:@my-themes%">
<option v-for="x in installedThemes.filter(t => t.author == this.$store.state.i.username)" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup label="%i18n:@installed-themes%">
<option v-for="x in installedThemes.filter(t => t.author != this.$store.state.i.username)" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
</ui-select> </ui-select>
<template v-if="selectedInstalledTheme"> <template v-if="selectedTheme">
<ui-input readonly :value="selectedInstalledTheme.author"> <ui-input readonly :value="selectedTheme.author">
<span>%i18n:@author%</span> <span>%i18n:@author%</span>
</ui-input> </ui-input>
<ui-textarea v-if="selectedInstalledTheme.desc" readonly :value="selectedInstalledTheme.desc"> <ui-textarea v-if="selectedTheme.desc" readonly :value="selectedTheme.desc">
<span>%i18n:@desc%</span> <span>%i18n:@desc%</span>
</ui-textarea> </ui-textarea>
<ui-textarea readonly :value="selectedInstalledThemeCode"> <ui-textarea readonly :value="selectedThemeCode">
<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="export_()" link :download="`${selectedTheme.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()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)">%fa:trash-alt R% %i18n:@uninstall%</ui-button>
</template> </template>
</details> </details>
</div> </div>
@ -117,8 +125,9 @@ export default Vue.extend({
data() { data() {
return { return {
builtinThemes: builtinThemes,
installThemeCode: null, installThemeCode: null,
selectedInstalledThemeId: null, selectedThemeId: null,
myThemeBase: 'light', myThemeBase: 'light',
myThemeName: '', myThemeName: '',
myThemeDesc: '', myThemeDesc: '',
@ -155,14 +164,14 @@ export default Vue.extend({
set(value) { this.$store.commit('device/set', { key: 'darkTheme', value }); } set(value) { this.$store.commit('device/set', { key: 'darkTheme', value }); }
}, },
selectedInstalledTheme() { selectedTheme() {
if (this.selectedInstalledThemeId == null) return null; if (this.selectedThemeId == null) return null;
return this.installedThemes.find(x => x.id == this.selectedInstalledThemeId); return this.themes.find(x => x.id == this.selectedThemeId);
}, },
selectedInstalledThemeCode() { selectedThemeCode() {
if (this.selectedInstalledTheme == null) return null; if (this.selectedTheme == null) return null;
return JSON5.stringify(this.selectedInstalledTheme, null, '\t'); return JSON5.stringify(this.selectedTheme, null, '\t');
}, },
myTheme(): any { myTheme(): any {
@ -238,7 +247,7 @@ export default Vue.extend({
}, },
uninstall() { uninstall() {
const theme = this.selectedInstalledTheme; const theme = this.selectedTheme;
const themes = this.$store.state.device.themes.filter(t => t.id != theme.id); const themes = this.$store.state.device.themes.filter(t => t.id != theme.id);
this.$store.commit('device/set', { this.$store.commit('device/set', {
key: 'themes', value: themes key: 'themes', value: themes
@ -251,7 +260,7 @@ export default Vue.extend({
} }
export_() { export_() {
const blob = new Blob([this.selectedInstalledThemeCode], { const blob = new Blob([this.selectedThemeCode], {
type: 'application/json5' type: 'application/json5'
}); });
this.$refs.export.$el.href = window.URL.createObjectURL(blob); this.$refs.export.$el.href = window.URL.createObjectURL(blob);