テーマに関して強化

This commit is contained in:
syuilo 2018-10-02 16:10:45 +09:00
parent f4ed35af43
commit fd611ceba7
2 changed files with 24 additions and 9 deletions

View file

@ -309,6 +309,8 @@ common/views/components/theme.vue:
select-theme: "テーマを選択してください" select-theme: "テーマを選択してください"
uninstall: "アンインストール" uninstall: "アンインストール"
uninstalled: "「{}」をアンインストールしました" uninstalled: "「{}」をアンインストールしました"
author: "作者"
desc: "説明"
common/views/components/cw-button.vue: common/views/components/cw-button.vue:
hide: "隠す" hide: "隠す"

View file

@ -52,13 +52,21 @@
<details> <details>
<summary>%i18n:@installed-themes%</summary> <summary>%i18n:@installed-themes%</summary>
<ui-select v-model="selectedInstalledTheme" placeholder="%i18n:@select-theme%"> <ui-select v-model="selectedInstalledThemeId" placeholder="%i18n:@select-theme%">
<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option> <option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</ui-select> </ui-select>
<ui-textarea readonly :value="selectedInstalledThemeCode"> <template v-if="selectedInstalledTheme">
<span>%i18n:@theme-code%</span> <ui-input readonly :value="selectedInstalledTheme.author">
</ui-textarea> <span>%i18n:@author%</span>
<ui-button @click="uninstall()">%i18n:@uninstall%</ui-button> </ui-input>
<ui-textarea v-if="selectedInstalledTheme.desc" readonly :value="selectedInstalledTheme.desc">
<span>%i18n:@desc%</span>
</ui-textarea>
<ui-textarea readonly :value="selectedInstalledThemeCode">
<span>%i18n:@theme-code%</span>
</ui-textarea>
<ui-button @click="uninstall()">%i18n:@uninstall%</ui-button>
</template>
</details> </details>
</div> </div>
</template> </template>
@ -93,7 +101,7 @@ export default Vue.extend({
data() { data() {
return { return {
installThemeCode: null, installThemeCode: null,
selectedInstalledTheme: null, selectedInstalledThemeId: null,
myThemeBase: 'light', myThemeBase: 'light',
myThemeName: '', myThemeName: '',
myThemePrimary: lightTheme.vars.primary, myThemePrimary: lightTheme.vars.primary,
@ -121,15 +129,20 @@ 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() {
if (this.selectedInstalledThemeId == null) return null;
return this.installedThemes.find(x => x.id == this.selectedInstalledThemeId);
},
selectedInstalledThemeCode() { selectedInstalledThemeCode() {
if (this.selectedInstalledTheme == null) return null; if (this.selectedInstalledTheme == null) return null;
return JSON5.stringify(this.installedThemes.find(x => x.id == this.selectedInstalledTheme), null, '\t'); return JSON5.stringify(this.selectedInstalledTheme, null, '\t');
}, },
myTheme(): any { myTheme(): any {
return { return {
name: this.myThemeName, name: this.myThemeName,
author: this.$store.state.i.name, author: this.$store.state.i.username,
base: this.myThemeBase, base: this.myThemeBase,
vars: { vars: {
primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(), primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
@ -198,7 +211,7 @@ export default Vue.extend({
}, },
uninstall() { uninstall() {
const theme = this.installedThemes.find(x => x.id == this.selectedInstalledTheme); const theme = this.selectedInstalledTheme;
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