From cdb8e41176d928f0cdd9c0f5f67816eff9be03c6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 30 Dec 2018 13:02:06 +0900
Subject: [PATCH] [Client] Update theme setting

---
 locales/ja-JP.yml                             |   3 +-
 .../app/common/views/components/theme.vue     | 188 +++++++++---------
 .../app/desktop/views/components/settings.vue |   8 +-
 .../app/mobile/views/pages/settings.vue       |   7 +-
 4 files changed, 103 insertions(+), 103 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 52d5ff8f6..917c4028d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -283,6 +283,7 @@ common/views/components/media-banner.vue:
   click-to-show: "クリックして表示"
 
 common/views/components/theme.vue:
+  theme: "テーマ"
   light-theme: "非ダークモード時に使用するテーマ"
   dark-theme: "ダークモード時に使用するテーマ"
   light-themes: "明るいテーマ"
@@ -299,6 +300,7 @@ common/views/components/theme.vue:
   base-theme: "ベーステーマ"
   base-theme-light: "Light"
   base-theme-dark: "Dark"
+  find-more-theme: "その他のテーマを入手"
   theme-name: "テーマ名"
   preview-created-theme: "プレビュー"
   invalid-theme: "テーマが正しくありません。"
@@ -1628,7 +1630,6 @@ mobile/views/pages/settings.vue:
   notification-position: "通知の表示"
   notification-position-bottom: "下"
   notification-position-top: "上"
-  theme: "テーマ"
   behavior: "動作"
   fetch-on-scroll: "スクロールで自動読み込み"
   note-visibility: "投稿の公開範囲"
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 6a90c3021..2b421bffb 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -1,99 +1,104 @@
 <template>
-<div class="nicnklzforebnpfgasiypmpdaaglujqm">
-	<label>
-		<span><fa :icon="faSun"/> {{ $t('light-theme') }}</span>
-		<ui-select v-model="light" :placeholder="$t('light-theme')">
-			<optgroup :label="$t('light-themes')">
-				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-			</optgroup>
-			<optgroup :label="$t('dark-themes')">
-				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-			</optgroup>
-		</ui-select>
-	</label>
+<ui-card>
+	<div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div>
+	<section class="nicnklzforebnpfgasiypmpdaaglujqm fit-top">
+		<label>
+			<ui-select v-model="light" :placeholder="$t('light-theme')">
+				<span slot="label"><fa :icon="faSun"/> {{ $t('light-theme') }}</span>
+				<optgroup :label="$t('light-themes')">
+					<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+				</optgroup>
+				<optgroup :label="$t('dark-themes')">
+					<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+				</optgroup>
+			</ui-select>
+		</label>
 
-	<label>
-		<span><fa :icon="faMoon"/> {{ $t('dark-theme') }}</span>
-		<ui-select v-model="dark" :placeholder="$t('dark-theme')">
-			<optgroup :label="$t('dark-themes')">
-				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-			</optgroup>
-			<optgroup :label="$t('light-themes')">
-				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-			</optgroup>
-		</ui-select>
-	</label>
+		<label>
+			<ui-select v-model="dark" :placeholder="$t('dark-theme')">
+				<span slot="label"><fa :icon="faMoon"/> {{ $t('dark-theme') }}</span>
+				<optgroup :label="$t('dark-themes')">
+					<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+				</optgroup>
+				<optgroup :label="$t('light-themes')">
+					<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+				</optgroup>
+			</ui-select>
+		</label>
 
-	<details class="creator">
-		<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>
+		<a href="https://assets.msky.cafe/theme/list" target="_blank">{{ $t('find-more-theme') }}</a>
 
-	<details>
-		<summary><fa icon="download"/> {{ $t('install-a-theme') }}</summary>
-		<ui-button @click="import_()"><fa icon="file-import"/> {{ $t('import') }}</ui-button>
-		<input ref="file" type="file" accept=".misskeytheme" style="display:none;" @change="onUpdateImportFile"/>
-		<p>{{ $t('import-by-code') }}:</p>
-		<ui-textarea v-model="installThemeCode">
-			<span>{{ $t('theme-code') }}</span>
-		</ui-textarea>
-		<ui-button @click="() => install(this.installThemeCode)"><fa icon="check"/> {{ $t('install') }}</ui-button>
-	</details>
+		<details class="creator">
+			<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>
-		<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 :value="selectedThemeCode">
+		<details>
+			<summary><fa icon="download"/> {{ $t('install-a-theme') }}</summary>
+			<ui-button @click="import_()"><fa icon="file-import"/> {{ $t('import') }}</ui-button>
+			<input ref="file" type="file" accept=".misskeytheme" style="display:none;" @change="onUpdateImportFile"/>
+			<p>{{ $t('import-by-code') }}:</p>
+			<ui-textarea v-model="installThemeCode">
 				<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>
-</div>
+			<ui-button @click="() => install(this.installThemeCode)"><fa icon="check"/> {{ $t('install') }}</ui-button>
+		</details>
+
+		<details>
+			<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>
 
 <script lang="ts">
@@ -331,6 +336,11 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .nicnklzforebnpfgasiypmpdaaglujqm
+	> a
+		display block
+		margin-top -16px
+		margin-bottom 16px
+
 	> details
 		border-top solid 1px var(--faceDivider)
 
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 1497e5912..073ab0e71 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -19,13 +19,7 @@
 			<x-integration-settings/>
 		</div>
 
-		<ui-card class="theme" v-show="page == 'theme'">
-			<div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div>
-
-			<section>
-				<x-theme/>
-			</section>
-		</ui-card>
+		<x-theme class="theme" v-show="page == 'theme'"/>
 
 		<ui-card class="web" v-show="page == 'web'">
 			<div slot="title"><fa icon="sliders-h"/> {{ $t('behaviour') }}</div>
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index ddccfd1a8..164a773b0 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -7,12 +7,7 @@
 		<div>
 			<x-profile-editor/>
 
-			<ui-card>
-				<div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div>
-				<section>
-					<x-theme/>
-				</section>
-			</ui-card>
+			<x-theme/>
 
 			<ui-card>
 				<div slot="title"><fa icon="poll-h"/> {{ $t('design') }}</div>