Merge pull request #5 from mabasic/animating

Options, blacklist, theme and changing the extension icon color.

assets/js/components/MainList.react.js

@@ -7,11 +7,22 @@ class MainList extends React.Component
 
     }
 
+    _openOptionsPage()
+    {
+      if (chrome.runtime.openOptionsPage) {
+        // New way to open options pages, if supported (Chrome 42+).
+        chrome.runtime.openOptionsPage();
+      } else {
+        // Reasonable fallback.
+        window.open(chrome.runtime.getURL('options.html'));
+      }
+    }
+
     render()
     {
         return(
             <div className="list-group">
-                <a href="#" className="list-group-item">
+                <a href="#" className="list-group-item" onClick={this._openOptionsPage}>
                     Options
                 </a>
                 <a href="#" className="list-group-item">

assets/js/components/WakaTime.react.js

@@ -3,11 +3,22 @@ var React = require("react");
 var NavBar = require('./NavBar.react');
 var MainList = require('./MainList.react');
 
+var changeExtensionIcon = require('../helpers/changeExtensionIcon');
+
 class WakaTime extends React.Component
 {
     componentDidMount()
     {
-
+      chrome.storage.sync.get({
+        theme: 'light'
+      }, function(items) {
+        if(items.theme == 'light') {
+          changeExtensionIcon();
+        }
+        else {
+          changeExtensionIcon('white');
+        }
+      });
     }
 
     render()

assets/js/helpers/changeExtensionIcon.js

@@ -0,0 +1,34 @@
+/**
+ * It changes the extension icon color.
+ * Supported values are: 'red', 'white' and ''.
+ *
+ * @param  string color = ''
+ * @return null
+ */
+export default function changeExtensionIcon(color = '') {
+
+    var canvas = document.getElementById('icon');
+    var context = canvas.getContext('2d');
+
+    var x = 0;
+    var y = 0;
+    var width = 19;
+    var height = 19;
+    var imageObj = new Image();
+
+    imageObj.onload = function() {
+      context.drawImage(imageObj, x, y, width, height);
+
+      var imageData = context.getImageData(x, y, width, height);
+
+      chrome.browserAction.setIcon({
+          imageData: imageData
+      });
+    };
+
+    if(color !== ''){
+        color = '-' + color;
+    }
+
+    imageObj.src = 'graphics/wakatime-logo-48' + color + '.png';
+}

assets/js/options.js

@@ -0,0 +1,44 @@
+/* This is a fix for Bootstrap requiring jQuery */
+global.jQuery = require('jquery');
+require('bootstrap');
+
+// Saves options to chrome.storage.sync.
+function save_options(e) {
+  e.preventDefault();
+
+  var theme = document.getElementById('theme').value;
+  var blacklist = document.getElementById('blacklist').value;
+
+  chrome.storage.sync.set({
+    theme: theme,
+    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...
+    
+    setTimeout(function() {
+      status.textContent = '';
+      status.style.display = 'none';
+    }, 1500);
+  });
+}
+
+// Restores select box and checkbox state using the preferences
+// stored in chrome.storage.
+function restore_options() {
+  // Use default value color = 'red' and likesColor = true.
+  chrome.storage.sync.get({
+    theme: 'light',
+    blacklist: ''
+  }, function(items) {
+    document.getElementById('theme').value = items.theme;
+    document.getElementById('blacklist').value = items.blacklist;
+  });
+}
+
+document.addEventListener('DOMContentLoaded', restore_options);
+document.getElementById('save').addEventListener('click', save_options);

assets/less/app.less

@@ -19,3 +19,11 @@ a.navbar-brand {
 div.container {
     margin-top: 20px;
 }
+
+canvas#icon {
+    display: none;
+}
+
+div#status {
+  display: none;
+}

gulpfile.js

@@ -21,4 +21,5 @@ elixir(function (mix) {
     mix.less('app.less');
     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');
 });

manifest.json

@@ -10,7 +10,8 @@
   },
   "permissions": [
     "alarms",
-    "tabs"
+    "tabs",
+    "storage"
   ],
   "background": {
     "scripts": [
@@ -25,5 +26,9 @@
     },
     "default_title": "WakaTime",
     "default_popup": "popup.html"
+  },
+  "options_ui": {
+    "page": "options.html",
+    "chrome_style": true
   }
 }

options.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>WakaTime options</title>
+
+    <link href="public/css/app.css" rel="stylesheet">
+  </head>
+  <body>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12">
+
+        <div id="status" class="alert alert-success">
+          <!-- <strong>Well done!</strong> Options have been saved. -->
+        </div>
+
+        <form class="form-horizontal">
+          <div class="form-group">
+            <label for="blacklist" class="col-lg-2 control-label">Blacklist</label>
+            <div class="col-lg-10">
+              <textarea class="form-control" rows="3" id="blacklist" placeholder="http://google.com"></textarea>
+              <span class="help-block">Sites that you don't want to show in your reports. <br />One line per site.</span>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label for="theme" class="col-lg-2 control-label">Theme</label>
+            <div class="col-lg-10">
+              <select class="form-control" id="theme">
+                <option value="light">Light</option>
+                <option value="dark">Dark</option>
+              </select>
+            </div>
+          </div>
+          <div class="form-group">
+            <div class="col-lg-10 col-lg-offset-2">
+              <button id="save" type="submit" class="btn btn-primary">Save</button>
+            </div>
+          </div>
+        </form>
+
+      </div>
+    </div>
+  </div>
+
+  <script src="public/js/options.js"></script>
+  </body>
+</html>

popup.html

@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+    <head>
-    <meta charset="utf-8">
+        <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>WakaTime</title>
+        <title>WakaTime</title>
 
-    <link href="public/css/app.css" rel="stylesheet">
+        <link href="public/css/app.css" rel="stylesheet">
-  </head>
+    </head>
-  <body>
+    <body>
 
-    <div id="wakatime"></div>
+        <canvas id="icon"></canvas>
 
-    <script src="public/js/bundle.js"></script>
+        <div id="wakatime"></div>
-  </body>
+
+        <script src="public/js/bundle.js"></script>
+    </body>
 </html>

public/css/app.css

@@ -8912,5 +8912,11 @@ a.navbar-brand img {
 div.container {
   margin-top: 20px;
 }
+canvas#icon {
+  display: none;
+}
+div#status {
+  display: none;
+}
 
 /*# sourceMappingURL=app.css.map */