Make sense out of settings sync and force sync

client/components/Windows/Settings.vue

@@ -66,20 +66,28 @@
 						/>
 						Synchronize settings with other clients
 					</label>
-					<p v-if="!$store.state.settings.syncSettings" class="sync-warning-override">
-						<strong>Warning</strong> Checking this box will override the settings of
-						this client with those stored on the server.
-					</p>
-					<p v-if="!$store.state.settings.syncSettings" class="sync-warning-base">
-						<strong>Warning</strong> No settings have been synced before. Enabling this
-						will sync all settings of this client as the base for other clients.
-					</p>
-					<div v-if="$store.state.settings.syncSettings" class="opt force-sync-button">
-						<button type="button" class="btn" @click="onForceSyncClick">
-							Force sync settings
-						</button>
-						<p>This will override any settings already synced to the server.</p>
-					</div>
+					<template v-if="!$store.state.settings.syncSettings">
+						<div v-if="$store.state.serverHasSettings" class="settings-sync-panel">
+							<p>
+								<strong>Warning:</strong> Checking this box will override the
+								settings of this client with those stored on the server.
+							</p>
+							<p>
+								Use the button below to enable synchronization, and override any
+								settings already synced to the server.
+							</p>
+							<button type="button" class="btn btn-small" @click="onForceSyncClick">
+								Sync settings and enable
+							</button>
+						</div>
+						<div v-else class="settings-sync-panel">
+							<p>
+								<strong>Warning:</strong> No settings have been synced before.
+								Enabling this will sync all settings of this client as the base for
+								other clients.
+							</p>
+						</div>
+					</template>
 				</div>
 
 				<div class="col-sm-12">
@@ -553,6 +561,11 @@ export default {
 		},
 		onForceSyncClick() {
 			this.$store.dispatch("settings/syncAll", true);
+			this.$store.dispatch("settings/update", {
+				name: "syncSettings",
+				value: true,
+				sync: true,
+			});
 		},
 		registerProtocol() {
 			const uri = document.location.origin + document.location.pathname + "?uri=%s";

client/css/style.css

@@ -1760,8 +1760,33 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	margin-top: 30px;
 }
 
-#settings .sync-warning-base {
-	display: none;
+#settings .settings-sync-panel {
+	padding: 10px;
+	margin-bottom: 16px;
+	border-radius: 2px;
+	background-color: #d9edf7;
+	color: #31708f;
+}
+
+#settings .settings-sync-panel p:last-child {
+	margin-bottom: 0;
+}
+
+#settings .settings-sync-panel .btn {
+	color: #007bff;
+	border-color: #007bff;
+	margin-bottom: 0;
+}
+
+#settings .settings-sync-panel .btn:hover,
+#settings .settings-sync-panel .btn:focus {
+	background-color: #007bff;
+	color: #fff;
+}
+
+#settings .settings-sync-panel .btn:active,
+#settings .settings-sync-panel .btn:focus {
+	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
 }
 
 #settings .opt {

client/js/settings.js

@@ -11,7 +11,9 @@ export const config = normalizeConfig({
 		default: true,
 		sync: "never",
 		apply(store, value) {
-			value && socket.emit("setting:get");
+			if (value) {
+				socket.emit("setting:get");
+			}
 		},
 	},
 	advanced: {

client/js/socket-events/setting.js

@@ -10,11 +10,15 @@ socket.on("setting:new", function(data) {
 });
 
 socket.on("setting:all", function(settings) {
-	if (Object.keys(settings).length === 0) {
-		store.dispatch("settings/syncAll");
-	} else {
+	const serverHasSettings = Object.keys(settings).length > 0;
+
+	store.commit("serverHasSettings", serverHasSettings);
+
+	if (serverHasSettings) {
 		for (const name in settings) {
 			store.dispatch("settings/update", {name, value: settings[name], sync: false});
 		}
+	} else {
+		store.dispatch("settings/syncAll");
 	}
 });

client/js/store-settings.js

@@ -13,10 +13,12 @@ export function createSettingsStore(store) {
 		},
 		actions: {
 			syncAll({state}, force = false) {
-				if (state.syncSettings === false || force === false) {
+				if (state.syncSettings === false && force === false) {
 					return;
 				}
 
+				store.commit("serverHasSettings", true);
+
 				for (const name in state) {
 					if (config[name].sync !== "never" || config[name].sync === "always") {
 						socket.emit("setting:set", {name, value: state[name]});

client/js/store.js

@@ -36,6 +36,7 @@ const store = new Vuex.Store({
 		versionData: null,
 		versionStatus: "loading",
 		versionDataExpired: false,
+		serverHasSettings: false,
 	},
 	mutations: {
 		appLoaded(state) {
@@ -104,6 +105,9 @@ const store = new Vuex.Store({
 		versionDataExpired(state, payload) {
 			state.versionDataExpired = payload;
 		},
+		serverHasSettings(state, value) {
+			state.serverHasSettings = value;
+		},
 	},
 	getters: {
 		currentSession: (state) => state.sessions.find((item) => item.current),