From 4e682e4e1f77a7f6bf18d97b52d941e8b1ad7b8e Mon Sep 17 00:00:00 2001
From: hensm <m+github@matt.tf>
Date: Wed, 12 Dec 2018 13:13:18 +0000
Subject: [PATCH] Notify on saved options

---
 ext/src/_locales/en/messages.json |  7 +++++--
 ext/src/options/index.jsx         | 20 +++++++++++++++++++-
 ext/src/options/styles/index.css  |  6 ++++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/ext/src/_locales/en/messages.json b/ext/src/_locales/en/messages.json
index 477992c..f146de0 100755
--- a/ext/src/_locales/en/messages.json
+++ b/ext/src/_locales/en/messages.json
@@ -119,7 +119,10 @@
   , "optionsReset": {
         "message": "Restore Defaults"
     }
-  , "optionsSubmit": {
-        "message": "Submit"
+  , "optionsSave": {
+        "message": "Save"
+    }
+  , "optionsSaved": {
+        "message": "Saved!"
     }
 }
diff --git a/ext/src/options/index.jsx b/ext/src/options/index.jsx
index f246f4c..1f2afac 100644
--- a/ext/src/options/index.jsx
+++ b/ext/src/options/index.jsx
@@ -46,6 +46,7 @@ class App extends Component {
           , bridgeInfo: null
           , bridgeLoading: true
           , isFormValid: true
+          , hasSaved: false
         };
 
         this.handleReset = this.handleReset.bind(this);
@@ -104,6 +105,16 @@ class App extends Component {
                 }
             }
 
+            this.setState({
+                hasSaved: true
+            }, () => {
+                window.setTimeout(() => {
+                    this.setState({
+                        hasSaved: false
+                    });
+                }, 1000)
+            });
+
             // Send update message / event
             browser.runtime.sendMessage({
                 subject: "optionsUpdated"
@@ -270,13 +281,20 @@ class App extends Component {
                     </fieldset>
 
                     <div id="buttons">
+                        <div id="status-line">
+                            { do {
+                                if (this.state.hasSaved) {
+                                    _("optionsSaved")
+                                }
+                            }}
+                        </div>
                         <button onClick={ this.handleReset }>
                             { _("optionsReset") }
                         </button>
                         <button type="submit"
                                 default
                                 disabled={ !this.state.isFormValid }>
-                            { _("optionsSubmit") }
+                            { _("optionsSave") }
                         </button>
                     </div>
                 </form>
diff --git a/ext/src/options/styles/index.css b/ext/src/options/styles/index.css
index 88f5aee..b57c275 100644
--- a/ext/src/options/styles/index.css
+++ b/ext/src/options/styles/index.css
@@ -12,6 +12,8 @@
 }
 
 #buttons {
+    display: flex;
+    align-items: center;
     align-self: flex-end;
     margin-block-start: 5px;
 }
@@ -20,6 +22,10 @@
     margin-inline-end: 5px;
 }
 
+#status-line {
+    color: graytext;
+}
+
 
 .bridge {
     margin-top: 20px;