Refactor

locales/ja-JP.yml

@@ -485,6 +485,14 @@ common/views/components/trends.vue:
   count: "{}人が投稿"
   empty: "トレンドなし"
 
+common/views/components/language-settings.vue:
+  title: "表示言語"
+  pick-language: "言語を選択"
+  recommended: "推奨"
+  auto: "自動"
+  specify-language: "言語を指定"
+  info: "変更はページの再度読み込み後に反映されます。"
+
 common/views/components/profile-editor.vue:
   title: "プロフィール"
   name: "名前"
@@ -870,13 +878,6 @@ desktop/views/components/settings.vue:
   volume: "ボリューム"
   test: "テスト"
 
-  language: "言語"
-  pick-language: "言語を選択"
-  recommended: "推奨"
-  auto: "自動"
-  specify-language: "言語を指定"
-  language-desc: "変更はページの再度読み込み後に反映されます。"
-
   cache: "キャッシュ"
   clean-cache: "クリーンアップ"
   cache-warn: "クリーンアップを行うと、ブラウザに記憶されたアカウント情報のキャッシュ、書きかけの投稿・返信・メッセージ、およびその他のデータ(設定情報含む)が削除されます。クリーンアップを行った後はページを再度読み込みする必要があります。"
@@ -1554,11 +1555,6 @@ mobile/views/pages/selectdrive.vue:
 
 mobile/views/pages/settings.vue:
   signed-in-as: "{}としてサインイン中"
-  lang: "言語"
-  lang-tip: "変更はページの再読み込み後に反映されます。"
-  recommended: "推奨"
-  auto: "自動"
-  specify-language: "言語を指定"
   design: "デザインと表示"
   dark-mode: "ダークモード"
   i-am-under-limited-internet: "私は通信を制限されている"

src/client/app/common/views/components/language-settings.vue

@@ -0,0 +1,54 @@
+<template>
+<ui-card>
+	<div slot="title"><fa icon="language"/> {{ $t('title') }}</div>
+
+	<section class="fit-top">
+		<ui-select v-model="lang" :placeholder="$t('pick-language')">
+			<optgroup :label="$t('recommended')">
+				<option value="">{{ $t('auto') }}</option>
+			</optgroup>
+
+			<optgroup :label="$t('specify-language')">
+				<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
+			</optgroup>
+		</ui-select>
+		<ui-info>Current: <i>{{ currentLanguage }}</i></ui-info>
+		<ui-info warn>{{ $t('info') }}</ui-info>
+	</section>
+</ui-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import { langs } from '../../../config';
+
+export default Vue.extend({
+	i18n: i18n('common/views/components/language-settings.vue'),
+
+	data() {
+		return {
+			langs,
+			currentLanguage: 'Unknown',
+		};
+	},
+
+	computed: {
+		lang: {
+			get() { return this.$store.state.device.lang; },
+			set(value) { this.$store.commit('device/set', { key: 'lang', value }); }
+		},
+	},
+
+	created() {
+		try {
+			const locale = JSON.parse(localStorage.getItem('locale') || "{}");
+			const localeKey = localStorage.getItem('localeKey');
+			this.currentLanguage = `${locale.meta.lang} (${localeKey})`;
+		} catch { }
+	},
+
+	methods: {
+	}
+});
+</script>

src/client/app/desktop/views/components/settings.vue

@@ -169,24 +169,7 @@
 			</section>
 		</ui-card>
 
-		<ui-card class="web" v-show="page == 'web'">
+		<x-language-settings/>
-			<div slot="title"><fa icon="language"/> {{ $t('language') }}</div>
-			<section class="fit-top">
-				<ui-select v-model="lang" :placeholder="$t('pick-language')">
-					<optgroup :label="$t('recommended')">
-						<option value="">{{ $t('auto') }}</option>
-					</optgroup>
-
-					<optgroup :label="$t('specify-language')">
-						<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
-					</optgroup>
-				</ui-select>
-				<div class="none ui info">
-					<div>Current: <i>{{ this.currentLanguage }}</i></div>
-					<p><fa icon="info-circle"/>{{ $t('language-desc') }}</p>
-				</div>
-			</section>
-		</ui-card>
 
 		<ui-card class="web" v-show="page == 'web'">
 			<div slot="title"><fa :icon="['far', 'trash-alt']"/> {{ $t('cache') }}</div>
@@ -318,8 +301,9 @@ import XMuteAndBlock from '../../../common/views/components/mute-and-block.vue';
 import XPasswordSettings from '../../../common/views/components/password-settings.vue';
 import XProfileEditor from '../../../common/views/components/profile-editor.vue';
 import XApiSettings from '../../../common/views/components/api-settings.vue';
+import XLanguageSettings from '../../../common/views/components/language-settings.vue';
 
-import { url, langs, clientVersion as version } from '../../../config';
+import { url, clientVersion as version } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
 
 export default Vue.extend({
@@ -338,6 +322,7 @@ export default Vue.extend({
 		XPasswordSettings,
 		XProfileEditor,
 		XApiSettings,
+		XLanguageSettings,
 	},
 	props: {
 		initialPage: {
@@ -350,8 +335,6 @@ export default Vue.extend({
 			page: this.initialPage || 'profile',
 			meta: null,
 			version,
-			langs,
-			currentLanguage: 'Unknown',
 			latestVersion: undefined,
 			checkingForUpdate: false
 		};
@@ -412,11 +395,6 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'soundVolume', value }); }
 		},
 
-		lang: {
-			get() { return this.$store.state.device.lang; },
-			set(value) { this.$store.commit('device/set', { key: 'lang', value }); }
-		},
-
 		preventUpdate: {
 			get() { return this.$store.state.device.preventUpdate; },
 			set(value) { this.$store.commit('device/set', { key: 'preventUpdate', value }); }
@@ -556,12 +534,6 @@ export default Vue.extend({
 		this.$root.getMeta().then(meta => {
 			this.meta = meta;
 		});
-
-		try {
-			const locale = JSON.parse(localStorage.getItem('locale') || "{}");
-			const localeKey = localStorage.getItem('localeKey');
-			this.currentLanguage = `${locale.meta.lang} (${localeKey})`;
-		} catch { }
 	},
 	methods: {
 		readAllUnreadNotes() {

src/client/app/mobile/views/pages/settings.vue

@@ -105,23 +105,7 @@
 				</section>
 			</ui-card>
 
-			<ui-card>
+			<x-language-settings/>
-				<div slot="title"><fa icon="language"/> {{ $t('lang') }}</div>
-
-				<section class="fit-top">
-					<ui-select v-model="lang" :placeholder="$t('auto')">
-						<optgroup :label="$t('recommended')">
-							<option value="">{{ $t('auto') }}</option>
-						</optgroup>
-
-						<optgroup :label="$t('specify-language')">
-							<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
-						</optgroup>
-					</ui-select>
-					<div>Current: <i>{{ this.currentLanguage }}</i></div>
-					<p><fa icon="info-circle"/> {{ $t('lang-tip') }}</p>
-				</section>
-			</ui-card>
 
 			<ui-card>
 				<div slot="title"><fa :icon="['fab', 'twitter']"/> {{ $t('twitter') }}</div>
@@ -199,7 +183,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import { apiUrl, clientVersion as version, codename, langs } from '../../../config';
+import { apiUrl, clientVersion as version, codename } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
 import XTheme from '../../../common/views/components/theme.vue';
 import XDriveSettings from '../../../common/views/components/drive-settings.vue';
@@ -207,6 +191,7 @@ import XMuteAndBlock from '../../../common/views/components/mute-and-block.vue';
 import XPasswordSettings from '../../../common/views/components/password-settings.vue';
 import XProfileEditor from '../../../common/views/components/profile-editor.vue';
 import XApiSettings from '../../../common/views/components/api-settings.vue';
+import XLanguageSettings from '../../../common/views/components/language-settings.vue';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/settings.vue'),
@@ -218,6 +203,7 @@ export default Vue.extend({
 		XPasswordSettings,
 		XProfileEditor,
 		XApiSettings,
+		XLanguageSettings,
 	},
 
 	data() {
@@ -225,8 +211,6 @@ export default Vue.extend({
 			apiUrl,
 			version,
 			codename,
-			langs,
-			currentLanguage: 'Unknown',
 			latestVersion: undefined,
 			checkingForUpdate: false
 		};
@@ -277,11 +261,6 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'loadRawImages', value }); }
 		},
 
-		lang: {
-			get() { return this.$store.state.device.lang; },
-			set(value) { this.$store.commit('device/set', { key: 'lang', value }); }
-		},
-
 		enableSounds: {
 			get() { return this.$store.state.device.enableSounds; },
 			set(value) { this.$store.commit('device/set', { key: 'enableSounds', value }); }
@@ -327,7 +306,6 @@ export default Vue.extend({
 			set(value) { this.$store.dispatch('settings/set', { key: 'showVia', value }); }
 		},
 
-
 		iLikeSushi: {
 			get() { return this.$store.state.settings.iLikeSushi; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
@@ -379,14 +357,6 @@ export default Vue.extend({
 		},
 	},
 
-	created() {
-		try {
-			const locale = JSON.parse(localStorage.getItem('locale') || "{}");
-			const localeKey = localStorage.getItem('localeKey');
-			this.currentLanguage = `${locale.meta.lang} (${localeKey})`;
-		} catch { }
-	},
-
 	mounted() {
 		document.title = this.$t('settings');
 	},