Sharkey/src/client/app/common/views/components/theme.vue

318 lines
8.7 KiB
Vue
Raw Normal View History

2018-09-28 18:01:11 +03:00
<template>
<div class="nicnklzforebnpfgasiypmpdaaglujqm">
<label>
<span>%i18n:@light-theme%</span>
<ui-select v-model="light" placeholder="%i18n:@light-theme%">
2018-10-08 09:23:10 +03:00
<optgroup label="%i18n:@light-themes%">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup label="%i18n:@dark-themes%">
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
2018-09-28 18:01:11 +03:00
</ui-select>
</label>
<label>
<span>%i18n:@dark-theme%</span>
<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
2018-10-08 09:23:10 +03:00
<optgroup label="%i18n:@dark-themes%">
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup label="%i18n:@light-themes%">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
2018-09-28 18:01:11 +03:00
</ui-select>
</label>
<details class="creator">
2018-10-02 10:23:55 +03:00
<summary>%fa:palette% %i18n:@create-a-theme%</summary>
2018-09-28 18:01:11 +03:00
<div>
<span>%i18n:@base-theme%:</span>
<ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio>
<ui-radio v-model="myThemeBase" value="dark">%i18n:@base-theme-dark%</ui-radio>
</div>
<div>
<ui-input v-model="myThemeName">
<span>%i18n:@theme-name%</span>
</ui-input>
2018-10-02 21:07:46 +03:00
<ui-textarea v-model="myThemeDesc">
<span>%i18n:@desc%</span>
</ui-textarea>
2018-09-28 18:01:11 +03:00
</div>
<div>
<div style="padding-bottom:8px;">%i18n:@primary-color%:</div>
<color-picker v-model="myThemePrimary"/>
</div>
<div>
<div style="padding-bottom:8px;">%i18n:@secondary-color%:</div>
<color-picker v-model="myThemeSecondary"/>
</div>
<div>
<div style="padding-bottom:8px;">%i18n:@text-color%:</div>
<color-picker v-model="myThemeText"/>
</div>
2018-10-02 10:23:55 +03:00
<ui-button @click="preview()">%fa:eye% %i18n:@preview-created-theme%</ui-button>
<ui-button primary @click="gen()">%fa:save R% %i18n:@save-created-theme%</ui-button>
2018-09-28 18:01:11 +03:00
</details>
<details>
2018-10-02 10:23:55 +03:00
<summary>%fa:download% %i18n:@install-a-theme%</summary>
2018-10-02 20:57:31 +03:00
<ui-button @click="import_()">%fa:file-import% %i18n:@import%</ui-button>
2018-10-02 21:00:55 +03:00
<input ref="file" type="file" accept=".misskeytheme" style="display:none;" @change="onUpdateImportFile"/>
2018-10-02 20:57:31 +03:00
<p>%i18n:@import-by-code%:</p>
2018-09-28 18:01:11 +03:00
<ui-textarea v-model="installThemeCode">
<span>%i18n:@theme-code%</span>
</ui-textarea>
2018-10-02 20:57:31 +03:00
<ui-button @click="() => install(this.installThemeCode)">%fa:check% %i18n:@install%</ui-button>
2018-09-28 18:01:11 +03:00
</details>
<details>
2018-10-09 00:46:52 +03:00
<summary>%fa:folder-open% %i18n:@manage-themes%</summary>
<ui-select v-model="selectedThemeId" placeholder="%i18n:@select-theme%">
<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>
2018-09-28 18:01:11 +03:00
</ui-select>
2018-10-09 00:46:52 +03:00
<template v-if="selectedTheme">
<ui-input readonly :value="selectedTheme.author">
2018-10-02 10:10:45 +03:00
<span>%i18n:@author%</span>
</ui-input>
2018-10-09 00:46:52 +03:00
<ui-textarea v-if="selectedTheme.desc" readonly :value="selectedTheme.desc">
2018-10-02 10:10:45 +03:00
<span>%i18n:@desc%</span>
</ui-textarea>
2018-10-09 00:46:52 +03:00
<ui-textarea readonly :value="selectedThemeCode">
2018-10-02 10:10:45 +03:00
<span>%i18n:@theme-code%</span>
</ui-textarea>
2018-10-09 00:46:52 +03:00
<ui-button @click="export_()" link :download="`${selectedTheme.name}.misskeytheme`" ref="export">%fa:box% %i18n:@export%</ui-button>
<ui-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)">%fa:trash-alt R% %i18n:@uninstall%</ui-button>
2018-10-02 10:10:45 +03:00
</template>
2018-09-28 18:01:11 +03:00
</details>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-10-02 10:04:31 +03:00
import { lightTheme, darkTheme, builtinThemes, applyTheme, Theme } from '../../../theme';
2018-09-28 18:01:11 +03:00
import { Chrome } from 'vue-color';
import * as uuid from 'uuid';
import * as tinycolor from 'tinycolor2';
2018-10-02 10:04:31 +03:00
import * as JSON5 from 'json5';
// 後方互換性のため
function convertOldThemedefinition(t) {
const t2 = {
id: t.meta.id,
name: t.meta.name,
author: t.meta.author,
base: t.meta.base,
vars: t.meta.vars,
props: t
};
delete t2.props.meta;
return t2;
}
2018-09-28 18:01:11 +03:00
export default Vue.extend({
components: {
ColorPicker: Chrome
},
data() {
return {
2018-10-09 00:46:52 +03:00
builtinThemes: builtinThemes,
2018-09-28 18:01:11 +03:00
installThemeCode: null,
2018-10-09 00:46:52 +03:00
selectedThemeId: null,
2018-09-28 18:01:11 +03:00
myThemeBase: 'light',
myThemeName: '',
2018-10-02 21:07:46 +03:00
myThemeDesc: '',
2018-10-02 10:04:31 +03:00
myThemePrimary: lightTheme.vars.primary,
myThemeSecondary: lightTheme.vars.secondary,
myThemeText: lightTheme.vars.text
2018-09-28 18:01:11 +03:00
};
},
computed: {
2018-10-02 10:04:31 +03:00
themes(): Theme[] {
2018-10-08 09:23:10 +03:00
return builtinThemes.concat(this.$store.state.device.themes);
},
darkThemes(): Theme[] {
return this.themes.filter(t => t.base == 'dark' || t.kind == 'dark');
},
lightThemes(): Theme[] {
return this.themes.filter(t => t.base == 'light' || t.kind == 'light');
2018-09-28 18:01:11 +03:00
},
2018-10-02 10:04:31 +03:00
installedThemes(): Theme[] {
2018-09-28 18:01:11 +03:00
return this.$store.state.device.themes;
},
light: {
get() { return this.$store.state.device.lightTheme; },
set(value) { this.$store.commit('device/set', { key: 'lightTheme', value }); }
},
dark: {
get() { return this.$store.state.device.darkTheme; },
set(value) { this.$store.commit('device/set', { key: 'darkTheme', value }); }
},
2018-10-09 00:46:52 +03:00
selectedTheme() {
if (this.selectedThemeId == null) return null;
return this.themes.find(x => x.id == this.selectedThemeId);
2018-10-02 10:10:45 +03:00
},
2018-10-09 00:46:52 +03:00
selectedThemeCode() {
if (this.selectedTheme == null) return null;
return JSON5.stringify(this.selectedTheme, null, '\t');
2018-09-28 18:01:11 +03:00
},
myTheme(): any {
return {
2018-10-02 10:04:31 +03:00
name: this.myThemeName,
2018-10-02 10:10:45 +03:00
author: this.$store.state.i.username,
2018-10-02 21:07:46 +03:00
desc: this.myThemeDesc,
2018-10-02 10:04:31 +03:00
base: this.myThemeBase,
vars: {
primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
secondary: tinycolor(typeof this.myThemeSecondary == 'string' ? this.myThemeSecondary : this.myThemeSecondary.rgba).toRgbString(),
text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString()
2018-09-28 18:01:11 +03:00
}
};
}
},
watch: {
myThemeBase(v) {
const theme = v == 'light' ? lightTheme : darkTheme;
2018-10-02 10:04:31 +03:00
this.myThemePrimary = theme.vars.primary;
this.myThemeSecondary = theme.vars.secondary;
this.myThemeText = theme.vars.text;
2018-09-28 18:01:11 +03:00
}
},
2018-10-02 10:04:31 +03:00
beforeCreate() {
// migrate old theme definitions
// 後方互換性のため
this.$store.commit('device/set', {
key: 'themes', value: this.$store.state.device.themes.map(t => {
if (t.id == null) {
return convertOldThemedefinition(t);
} else {
return t;
}
})
});
},
2018-09-28 18:01:11 +03:00
methods: {
2018-10-02 20:57:31 +03:00
install(code) {
2018-10-02 10:04:31 +03:00
let theme;
try {
2018-10-02 20:57:31 +03:00
theme = JSON5.parse(code);
2018-10-02 10:04:31 +03:00
} catch (e) {
2018-09-28 18:01:11 +03:00
alert('%i18n:@invalid-theme%');
return;
}
2018-10-02 10:04:31 +03:00
// 後方互換性のため
if (theme.id == null && theme.meta != null) {
theme = convertOldThemedefinition(theme);
}
if (theme.id == null) {
alert('%i18n:@invalid-theme%');
return;
}
if (this.$store.state.device.themes.some(t => t.id == theme.id)) {
2018-09-28 18:01:11 +03:00
alert('%i18n:@already-installed%');
return;
}
2018-10-02 10:04:31 +03:00
2018-09-28 18:01:11 +03:00
const themes = this.$store.state.device.themes.concat(theme);
this.$store.commit('device/set', {
key: 'themes', value: themes
});
2018-10-02 10:04:31 +03:00
alert('%i18n:@installed%'.replace('{}', theme.name));
},
uninstall() {
2018-10-09 00:46:52 +03:00
const theme = this.selectedTheme;
2018-10-02 10:04:31 +03:00
const themes = this.$store.state.device.themes.filter(t => t.id != theme.id);
this.$store.commit('device/set', {
key: 'themes', value: themes
});
2018-10-02 10:04:31 +03:00
alert('%i18n:@uninstalled%'.replace('{}', theme.name));
2018-09-28 18:01:11 +03:00
},
2018-10-02 20:57:31 +03:00
import_() {
(this.$refs.file as any).click();
}
export_() {
2018-10-09 00:46:52 +03:00
const blob = new Blob([this.selectedThemeCode], {
2018-10-02 20:57:31 +03:00
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);
},
2018-09-28 18:01:11 +03:00
preview() {
applyTheme(this.myTheme, false);
},
gen() {
const theme = this.myTheme;
2018-10-02 21:07:46 +03:00
if (theme.name == null || theme.name.trim() == '') {
alert('%i18n:@theme-name-required%');
return;
}
2018-10-02 10:04:31 +03:00
theme.id = uuid();
2018-09-28 18:01:11 +03:00
const themes = this.$store.state.device.themes.concat(theme);
this.$store.commit('device/set', {
key: 'themes', value: themes
});
alert('%i18n:@saved%');
}
}
});
</script>
<style lang="stylus" scoped>
.nicnklzforebnpfgasiypmpdaaglujqm
2018-10-02 10:23:55 +03:00
> details
border-top solid 1px var(--faceDivider)
2018-10-02 20:57:31 +03:00
> summary
padding 16px 0
> *:last-child
margin-bottom 16px
2018-09-28 18:01:11 +03:00
> .creator
> div
padding 16px 0
border-bottom solid 1px var(--faceDivider)
</style>