Updated manifest to exclude chrome styles and added animation to option alert.

assets/js/options.js

@@ -2,6 +2,8 @@
 global.jQuery = require('jquery');
 require('bootstrap');
 
+var $ = require('jquery');
+
 // Saves options to chrome.storage.sync.
 function save_options(e) {
   e.preventDefault();
@@ -14,16 +16,17 @@ function save_options(e) {
     blacklist: blacklist
   }, function() {
     // Update status to let user know options were saved.
-    var status = document.getElementById('status');
-    status.style.display = 'block';
-    status.innerHTML = '<strong>Well done!</strong> Options have been saved.';
-
-    //TODO: This is a nice place for fade in and fade out...
+    var status = $('#status');
+    status.html('<strong>Well done!</strong> Options have been saved.');
 
+    status.fadeIn(1500, function() {
       setTimeout(function() {
-      status.textContent = '';
-      status.style.display = 'none';
-    }, 1500);
+        status.fadeOut(1500, function() {
+          status.html('');
+        });
+      }, 750);
+    });
+
   });
 }
 

gulpfile.js

@@ -19,7 +19,7 @@ elixir(function (mix) {
     mix.copy('vendor/bower_components/font-awesome/less', 'assets/less/font-awesome');
     mix.copy('vendor/bower_components/font-awesome/fonts', 'public/fonts');
     mix.less('app.less');
-    mix.browserify('app.js', null, 'assets/js');
+    //mix.browserify('app.js', null, 'assets/js');
     //mix.browserify('events.js', 'public/js/events.js', 'assets/js');
-    //mix.browserify('options.js', 'public/js/options.js', 'assets/js');
+    mix.browserify('options.js', 'public/js/options.js', 'assets/js');
 });

manifest.json

@@ -29,6 +29,6 @@
   },
   "options_ui": {
     "page": "options.html",
-    "chrome_style": true
+    "chrome_style": false
   }
 }

public/js/options.js

@@ -6,6 +6,8 @@
 global.jQuery = require('jquery');
 require('bootstrap');
 
+var $ = require('jquery');
+
 // Saves options to chrome.storage.sync.
 function save_options(e) {
   e.preventDefault();
@@ -18,16 +20,16 @@ function save_options(e) {
     blacklist: blacklist
   }, function () {
     // Update status to let user know options were saved.
-    var status = document.getElementById('status');
-    status.style.display = 'block';
-    status.innerHTML = '<strong>Well done!</strong> Options have been saved.';
-
-    //TODO: This is a nice place for fade in and fade out...
+    var status = $('#status');
+    status.html('<strong>Well done!</strong> Options have been saved.');
 
+    status.fadeIn(1500, function () {
       setTimeout(function () {
-      status.textContent = '';
-      status.style.display = 'none';
-    }, 1500);
+        status.fadeOut(1500, function () {
+          status.html('');
+        });
+      }, 750);
+    });
   });
 }