From b3c6e28717dca26d4b35fad311b74956019b7689 Mon Sep 17 00:00:00 2001
From: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>
Date: Fri, 12 Jul 2019 22:24:29 +0900
Subject: [PATCH] Improve usability (#5142)

Fix #3862
---
 locales/ja-JP.yml                             |  2 +
 .../views/components/settings/app-type.vue    | 19 ++++++++-
 .../views/components/settings/settings.vue    | 39 ++++++++++++-------
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 2efe8461e..19bbec2de 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -290,6 +290,8 @@ common:
     load-raw-images: "添付された画像を高画質で表示する"
     load-remote-media: "リモートサーバーのメディアを表示する"
     sync: "同期"
+    save: "保存"
+    saved: "保存しました"
     home-profile: "ホームのプロファイル"
     deck-profile: "デッキのプロファイル"
 
diff --git a/src/client/app/common/views/components/settings/app-type.vue b/src/client/app/common/views/components/settings/app-type.vue
index 90ff28803..d163f1e74 100644
--- a/src/client/app/common/views/components/settings/app-type.vue
+++ b/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>
diff --git a/src/client/app/common/views/components/settings/settings.vue b/src/client/app/common/views/components/settings/settings.vue
index 281524979..401d9423a 100644
--- a/src/client/app/common/views/components/settings/settings.vue
+++ b/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>