Improve usability (#5142)

Fix #3862

locales/ja-JP.yml

@@ -290,6 +290,8 @@ common:
     load-raw-images: "添付された画像を高画質で表示する"
     load-remote-media: "リモートサーバーのメディアを表示する"
     sync: "同期"
+    save: "保存"
+    saved: "保存しました"
     home-profile: "ホームのプロファイル"
     deck-profile: "デッキのプロファイル"
 

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

@@ -29,8 +29,25 @@ export default Vue.extend({
 	computed: {
 		appTypeForce: {
 			get() { return this.$store.state.device.appTypeForce; },
-			set(value) { this.$store.commit('device/set', { key: 'appTypeForce', value }); }
+			set(value) {
+				this.$store.commit('device/set', { key: 'appTypeForce', value });
+				this.reload();
+			}
 		},
 	},
+
+	methods: {
+		reload() {
+			this.$root.dialog({
+				type: 'warning',
+				text: this.$t('@.reload-to-apply-the-setting'),
+				showCancelButton: true
+			}).then(({ canceled }) => {
+				if (!canceled) {
+					location.reload();
+				}
+			});
+		},
+	}
 });
 </script>

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

@@ -143,13 +143,17 @@
 				<ui-input v-model="webSearchEngine">{{ $t('@._settings.web-search-engine') }}
 					<template #desc>{{ $t('@._settings.web-search-engine-desc') }}</template>
 				</ui-input>
+				<ui-button @click="save('webSearchEngine', webSearchEngine)"><fa :icon="faSave"/> {{ $t('@._settings.save') }}</ui-button>
 			</section>
 
 			<section v-if="!$root.isMobile">
 				<header>{{ $t('@._settings.paste') }}</header>
 				<ui-input v-model="pastedFileName">{{ $t('@._settings.pasted-file-name') }}
-					<template #desc>{{ $t('@._settings.pasted-file-name-desc') }}</template>
+					<template v-if="pastedFileName === this.$store.state.settings.pastedFileName" #desc>{{ $t('@._settings.pasted-file-name-desc') }}</template>
+					<template v-else #desc>{{ pastedFileNamePreview() }}</template>
 				</ui-input>
+				<ui-button @click="save('pastedFileName', pastedFileName)"><fa :icon="faSave"/> {{ $t('@._settings.save') }}</ui-button>
+
 				<ui-switch v-model="pasteDialog">{{ $t('@._settings.paste-dialog') }}
 					<template #desc>{{ $t('@._settings.paste-dialog-desc') }}</template>
 				</ui-switch>
@@ -289,6 +293,8 @@ import XNotification from './notification.vue';
 
 import { url, version } from '../../../../config';
 import checkForUpdate from '../../../scripts/check-for-update';
+import { formatTimeString } from '../../../../../../misc/format-time-string';
+import { faSave } from '@fortawesome/free-regular-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n(),
@@ -319,8 +325,11 @@ export default Vue.extend({
 		return {
 			meta: null,
 			version,
+			webSearchEngine: this.$store.state.settings.webSearchEngine,
+			pastedFileName : this.$store.state.settings.pastedFileName,
 			latestVersion: undefined,
-			checkingForUpdate: false
+			checkingForUpdate: false,
+			faSave
 		};
 	},
 	computed: {
@@ -419,16 +428,6 @@ export default Vue.extend({
 			set(value) { this.$store.dispatch('settings/set', { key: 'defaultNoteVisibility', value }); }
 		},
 
-		webSearchEngine: {
-			get() { return this.$store.state.settings.webSearchEngine; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'webSearchEngine', value }); }
-		},
-
-		pastedFileName: {
-			get() { return this.$store.state.settings.pastedFileName; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'pastedFileName', value }); }
-		},
-
 		pasteDialog: {
 			get() { return this.$store.state.settings.pasteDialog; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'pasteDialog', value }); }
@@ -565,6 +564,17 @@ export default Vue.extend({
 				}
 			});
 		},
+		save(key, value) {
+			this.$store.dispatch('settings/set', {
+				key,
+				value
+			}).then(() => {
+				this.$root.dialog({
+					type: 'success',
+					text: this.$t('@._settings.saved')
+				})
+			});
+		},
 		customizeHome() {
 			location.href = '/?customize';
 		},
@@ -600,7 +610,10 @@ export default Vue.extend({
 			const sound = new Audio(`${url}/assets/message.mp3`);
 			sound.volume = this.$store.state.device.soundVolume;
 			sound.play();
-		}
+		},
+		pastedFileNamePreview() {
+			return `${formatTimeString(new Date(), this.pastedFileName).replace(/{{number}}/g, `1`)}.png`
+		},
 	}
 });
 </script>