diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
index eb7dd2e9..e4ec148a 100644
--- a/client/components/Windows/Settings.vue
+++ b/client/components/Windows/Settings.vue
@@ -66,20 +66,28 @@
/>
Synchronize settings with other clients
-
- Warning Checking this box will override the settings of
- this client with those stored on the server.
-
-
- Warning No settings have been synced before. Enabling this
- will sync all settings of this client as the base for other clients.
-
-
+
+
+
+ Warning: Checking this box will override the
+ settings of this client with those stored on the server.
+
+
+ Use the button below to enable synchronization, and override any
+ settings already synced to the server.
+
+
+
+
+
+ Warning: No settings have been synced before.
+ Enabling this will sync all settings of this client as the base for
+ other clients.
+
+
+
@@ -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";
diff --git a/client/css/style.css b/client/css/style.css
index c7150a98..724b65ac 100644
--- a/client/css/style.css
+++ b/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 {
diff --git a/client/js/settings.js b/client/js/settings.js
index afe9cf0a..94d03b9c 100644
--- a/client/js/settings.js
+++ b/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: {
diff --git a/client/js/socket-events/setting.js b/client/js/socket-events/setting.js
index 3202ae45..e16e6c31 100644
--- a/client/js/socket-events/setting.js
+++ b/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");
}
});
diff --git a/client/js/store-settings.js b/client/js/store-settings.js
index 9792a51b..82d46365 100644
--- a/client/js/store-settings.js
+++ b/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]});
diff --git a/client/js/store.js b/client/js/store.js
index 8c5bba37..e68d7203 100644
--- a/client/js/store.js
+++ b/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),