[Client] Update theme setting

This commit is contained in:
syuilo 2018-12-30 13:02:06 +09:00
parent d8f3e9d4a3
commit cdb8e41176
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
4 changed files with 103 additions and 103 deletions

View file

@ -283,6 +283,7 @@ common/views/components/media-banner.vue:
click-to-show: "クリックして表示" click-to-show: "クリックして表示"
common/views/components/theme.vue: common/views/components/theme.vue:
theme: "テーマ"
light-theme: "非ダークモード時に使用するテーマ" light-theme: "非ダークモード時に使用するテーマ"
dark-theme: "ダークモード時に使用するテーマ" dark-theme: "ダークモード時に使用するテーマ"
light-themes: "明るいテーマ" light-themes: "明るいテーマ"
@ -299,6 +300,7 @@ common/views/components/theme.vue:
base-theme: "ベーステーマ" base-theme: "ベーステーマ"
base-theme-light: "Light" base-theme-light: "Light"
base-theme-dark: "Dark" base-theme-dark: "Dark"
find-more-theme: "その他のテーマを入手"
theme-name: "テーマ名" theme-name: "テーマ名"
preview-created-theme: "プレビュー" preview-created-theme: "プレビュー"
invalid-theme: "テーマが正しくありません。" invalid-theme: "テーマが正しくありません。"
@ -1628,7 +1630,6 @@ mobile/views/pages/settings.vue:
notification-position: "通知の表示" notification-position: "通知の表示"
notification-position-bottom: "下" notification-position-bottom: "下"
notification-position-top: "上" notification-position-top: "上"
theme: "テーマ"
behavior: "動作" behavior: "動作"
fetch-on-scroll: "スクロールで自動読み込み" fetch-on-scroll: "スクロールで自動読み込み"
note-visibility: "投稿の公開範囲" note-visibility: "投稿の公開範囲"

View file

@ -1,99 +1,104 @@
<template> <template>
<div class="nicnklzforebnpfgasiypmpdaaglujqm"> <ui-card>
<label> <div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div>
<span><fa :icon="faSun"/> {{ $t('light-theme') }}</span> <section class="nicnklzforebnpfgasiypmpdaaglujqm fit-top">
<ui-select v-model="light" :placeholder="$t('light-theme')"> <label>
<optgroup :label="$t('light-themes')"> <ui-select v-model="light" :placeholder="$t('light-theme')">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option> <span slot="label"><fa :icon="faSun"/> {{ $t('light-theme') }}</span>
</optgroup> <optgroup :label="$t('light-themes')">
<optgroup :label="$t('dark-themes')"> <option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option> </optgroup>
</optgroup> <optgroup :label="$t('dark-themes')">
</ui-select> <option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</label> </optgroup>
</ui-select>
</label>
<label> <label>
<span><fa :icon="faMoon"/> {{ $t('dark-theme') }}</span> <ui-select v-model="dark" :placeholder="$t('dark-theme')">
<ui-select v-model="dark" :placeholder="$t('dark-theme')"> <span slot="label"><fa :icon="faMoon"/> {{ $t('dark-theme') }}</span>
<optgroup :label="$t('dark-themes')"> <optgroup :label="$t('dark-themes')">
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option> <option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup> </optgroup>
<optgroup :label="$t('light-themes')"> <optgroup :label="$t('light-themes')">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option> <option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup> </optgroup>
</ui-select> </ui-select>
</label> </label>
<details class="creator"> <a href="https://assets.msky.cafe/theme/list" target="_blank">{{ $t('find-more-theme') }}</a>
<summary><fa icon="palette"/> {{ $t('create-a-theme') }}</summary>
<div>
<span>{{ $t('base-theme') }}:</span>
<ui-radio v-model="myThemeBase" value="light">{{ $t('base-theme-light') }}</ui-radio>
<ui-radio v-model="myThemeBase" value="dark">{{ $t('base-theme-dark') }}</ui-radio>
</div>
<div>
<ui-input v-model="myThemeName">
<span>{{ $t('theme-name') }}</span>
</ui-input>
<ui-textarea v-model="myThemeDesc">
<span>{{ $t('desc') }}</span>
</ui-textarea>
</div>
<div>
<div style="padding-bottom:8px;">{{ $t('primary-color') }}:</div>
<color-picker v-model="myThemePrimary"/>
</div>
<div>
<div style="padding-bottom:8px;">{{ $t('secondary-color') }}:</div>
<color-picker v-model="myThemeSecondary"/>
</div>
<div>
<div style="padding-bottom:8px;">{{ $t('text-color') }}:</div>
<color-picker v-model="myThemeText"/>
</div>
<ui-button @click="preview()"><fa icon="eye"/> {{ $t('preview-created-theme') }}</ui-button>
<ui-button primary @click="gen()"><fa :icon="['far', 'save']"/> {{ $t('save-created-theme') }}</ui-button>
</details>
<details> <details class="creator">
<summary><fa icon="download"/> {{ $t('install-a-theme') }}</summary> <summary><fa icon="palette"/> {{ $t('create-a-theme') }}</summary>
<ui-button @click="import_()"><fa icon="file-import"/> {{ $t('import') }}</ui-button> <div>
<input ref="file" type="file" accept=".misskeytheme" style="display:none;" @change="onUpdateImportFile"/> <span>{{ $t('base-theme') }}:</span>
<p>{{ $t('import-by-code') }}:</p> <ui-radio v-model="myThemeBase" value="light">{{ $t('base-theme-light') }}</ui-radio>
<ui-textarea v-model="installThemeCode"> <ui-radio v-model="myThemeBase" value="dark">{{ $t('base-theme-dark') }}</ui-radio>
<span>{{ $t('theme-code') }}</span> </div>
</ui-textarea> <div>
<ui-button @click="() => install(this.installThemeCode)"><fa icon="check"/> {{ $t('install') }}</ui-button> <ui-input v-model="myThemeName">
</details> <span>{{ $t('theme-name') }}</span>
</ui-input>
<ui-textarea v-model="myThemeDesc">
<span>{{ $t('desc') }}</span>
</ui-textarea>
</div>
<div>
<div style="padding-bottom:8px;">{{ $t('primary-color') }}:</div>
<color-picker v-model="myThemePrimary"/>
</div>
<div>
<div style="padding-bottom:8px;">{{ $t('secondary-color') }}:</div>
<color-picker v-model="myThemeSecondary"/>
</div>
<div>
<div style="padding-bottom:8px;">{{ $t('text-color') }}:</div>
<color-picker v-model="myThemeText"/>
</div>
<ui-button @click="preview()"><fa icon="eye"/> {{ $t('preview-created-theme') }}</ui-button>
<ui-button primary @click="gen()"><fa :icon="['far', 'save']"/> {{ $t('save-created-theme') }}</ui-button>
</details>
<details> <details>
<summary><fa icon="folder-open"/> {{ $t('manage-themes') }}</summary> <summary><fa icon="download"/> {{ $t('install-a-theme') }}</summary>
<ui-select v-model="selectedThemeId" :placeholder="$t('select-theme')"> <ui-button @click="import_()"><fa icon="file-import"/> {{ $t('import') }}</ui-button>
<optgroup :label="$t('builtin-themes')"> <input ref="file" type="file" accept=".misskeytheme" style="display:none;" @change="onUpdateImportFile"/>
<option v-for="x in builtinThemes" :value="x.id" :key="x.id">{{ x.name }}</option> <p>{{ $t('import-by-code') }}:</p>
</optgroup> <ui-textarea v-model="installThemeCode">
<optgroup :label="$t('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="$t('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>
<template v-if="selectedTheme">
<ui-input readonly :value="selectedTheme.author">
<span>{{ $t('author') }}</span>
</ui-input>
<ui-textarea v-if="selectedTheme.desc" readonly :value="selectedTheme.desc">
<span>{{ $t('desc') }}</span>
</ui-textarea>
<ui-textarea readonly :value="selectedThemeCode">
<span>{{ $t('theme-code') }}</span> <span>{{ $t('theme-code') }}</span>
</ui-textarea> </ui-textarea>
<ui-button @click="export_()" link :download="`${selectedTheme.name}.misskeytheme`" ref="export"><fa icon="box"/> {{ $t('export') }}</ui-button> <ui-button @click="() => install(this.installThemeCode)"><fa icon="check"/> {{ $t('install') }}</ui-button>
<ui-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="['far', 'trash-alt']"/> {{ $t('uninstall') }}</ui-button> </details>
</template>
</details> <details>
</div> <summary><fa icon="folder-open"/> {{ $t('manage-themes') }}</summary>
<ui-select v-model="selectedThemeId" :placeholder="$t('select-theme')">
<optgroup :label="$t('builtin-themes')">
<option v-for="x in builtinThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup :label="$t('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="$t('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>
<template v-if="selectedTheme">
<ui-input readonly :value="selectedTheme.author">
<span>{{ $t('author') }}</span>
</ui-input>
<ui-textarea v-if="selectedTheme.desc" readonly :value="selectedTheme.desc">
<span>{{ $t('desc') }}</span>
</ui-textarea>
<ui-textarea readonly tall :value="selectedThemeCode">
<span>{{ $t('theme-code') }}</span>
</ui-textarea>
<ui-button @click="export_()" link :download="`${selectedTheme.name}.misskeytheme`" ref="export"><fa icon="box"/> {{ $t('export') }}</ui-button>
<ui-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="['far', 'trash-alt']"/> {{ $t('uninstall') }}</ui-button>
</template>
</details>
</section>
</ui-card>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -331,6 +336,11 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.nicnklzforebnpfgasiypmpdaaglujqm .nicnklzforebnpfgasiypmpdaaglujqm
> a
display block
margin-top -16px
margin-bottom 16px
> details > details
border-top solid 1px var(--faceDivider) border-top solid 1px var(--faceDivider)

View file

@ -19,13 +19,7 @@
<x-integration-settings/> <x-integration-settings/>
</div> </div>
<ui-card class="theme" v-show="page == 'theme'"> <x-theme class="theme" v-show="page == 'theme'"/>
<div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div>
<section>
<x-theme/>
</section>
</ui-card>
<ui-card class="web" v-show="page == 'web'"> <ui-card class="web" v-show="page == 'web'">
<div slot="title"><fa icon="sliders-h"/> {{ $t('behaviour') }}</div> <div slot="title"><fa icon="sliders-h"/> {{ $t('behaviour') }}</div>

View file

@ -7,12 +7,7 @@
<div> <div>
<x-profile-editor/> <x-profile-editor/>
<ui-card> <x-theme/>
<div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div>
<section>
<x-theme/>
</section>
</ui-card>
<ui-card> <ui-card>
<div slot="title"><fa icon="poll-h"/> {{ $t('design') }}</div> <div slot="title"><fa icon="poll-h"/> {{ $t('design') }}</div>