From 9e2ceff2648ac3a7ccf2e2cec28f3ebf611ca6e2 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 26 Dec 2021 12:31:00 +0300
Subject: [PATCH] inform about auto-saving

---
 _locales/en/messages.json |  3 +++
 edit/edit.css             | 10 ++++++----
 edit/settings.js          |  8 ++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 2e5a5a32..e1e4f2e4 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -88,6 +88,9 @@
     "message": "Author",
     "description": "Label for the style author"
   },
+  "autosaveNotice": {
+    "message": "Changes are saved automatically"
+  },
   "backupButtons": {
     "message": "Backup",
     "description": "Heading for backup"
diff --git a/edit/edit.css b/edit/edit.css
index 0055a7c3..02c1eaf7 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -792,12 +792,14 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
 }
 
 #help-popup .buttons {
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-top: .75em;
 }
 .non-windows #help-popup .buttons {
   direction: rtl;
-  text-align: right;
+  justify-content: start;
 }
 #help-popup button[name^="import"] {
   line-height: 1.5rem;
@@ -819,8 +821,8 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
 #help-popup .rules p {
   margin: .25em 0;
 }
-#help-popup .buttons button:nth-child(n + 2) {
-  margin-left: .5em;
+#help-popup .buttons > :nth-child(n + 2) {
+  margin-inline: .5em 0;
 }
 
 /************ lint ************/
diff --git a/edit/settings.js b/edit/settings.js
index 8513d63f..759e3e37 100644
--- a/edit/settings.js
+++ b/edit/settings.js
@@ -25,6 +25,7 @@ function StyleSettings() {
     ui,
     $create('.buttons', [
       $create('button', {onclick: helpPopup.close}, t('confirmClose')),
+      createInfo({title: t('autosaveNotice')}),
     ]),
   ]));
   $('#help-popup').className = 'style-settings-popup';
@@ -80,6 +81,13 @@ function StyleSettings() {
     };
   }
 
+  function createInfo(props) {
+    const info = $('.svg-icon.info').closest('a').cloneNode(true);
+    info.id = '';
+    info.dataset.cmd = 'note';
+    return Object.assign(info, props);
+  }
+
   function createInput(selector, getter, setter) {
     const el = $(selector, ui);
     el.addEventListener('change', setter);