Add notice to tell people to refresh after save.

This is the most common reason for settings to not work
muan · May 19, 2014 · b40ea9b · b40ea9b
1 parent 74add4e
commit b40ea9b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/src/options/index.html b/src/options/index.html
@@ -10,9 +10,10 @@
 
   <div class="wrapper">
     <div id="options"></div>
+    <div class="notice">Make sure you refresh both the extensions page (chrome://extensions/) and the gmail tab after updating the settings.</div>
     <button id="save">Save</button>
   </div>
 
 </body>
 
-</html>
+</html>
diff --git a/src/options/options.css b/src/options/options.css
@@ -18,6 +18,17 @@ body, * {
   border: 1px solid #e0e0e0;
 }
 
+.notice {
+  display: none;
+  background: #ffeeee;
+  border-top: 1px solid #fcc;
+  border-bottom: 1px solid #fcc;
+  color: #a00;
+  padding: 20px;
+  margin: -1px -20px 0;
+  font-weight: bold;
+}
+
 .option {
   margin: 0 -20px 0;
   padding: 20px;
@@ -27,7 +38,6 @@ body, * {
 
 .option:last-child {
   border-bottom: 1px solid #e0e0e0;
-  margin-bottom: 20px;
 }
 
 .option:nth-child(even) {
@@ -74,7 +84,7 @@ button {
   text-transform: uppercase;
   box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1);
   transition: all .6s;
-  margin-bottom: 20px;
+  margin: 20px 0;
 }
 
 button:active {

diff --git a/src/options/options.js b/src/options/options.js
@@ -49,6 +49,8 @@ $(document).on('click', '#save', function() {
 
   // Update status to let user know options were saved.
   var save = document.getElementById('save')
+  $('.notice').show()
+  window.scrollTo(0, 10000)
   save.innerHTML = 'Updated!'
   $(fields).closest('.option').removeClass('saved').addClass('saved')
   setTimeout(function() {