coloured systray icons for SchizoDuckie#768

@Js41637  please work your css presentation magic at your convinience,
thanks.

_locales/en_us.json

@@ -60,6 +60,7 @@
     "BACKUPCTRLjs/wipe/desc": "Do you really want to remove all series and episodes from the DuckieTV database and clear all the settings?",
     "CHROMETOPSITES-click/hdr": "Click for most visited sites",
     "CHROMETOPSITES-hover/hdr": "Pull down most visited sites",
+    "COLORLIST": "Black,White,Red,Orange,Yellow,Green,Blue,Indigo,Violet",
     "COMMON/about/hdr": "About DuckieTV",
     "COMMON/actors/hdr": "Actors",
     "COMMON/address/lbl": "Address",
@@ -465,10 +466,12 @@
     "SETTINGS/WINDOW/standalone-startup-normalized/tooltip": "Normalized",
     "SETTINGS/WINDOW/standalone-startup-window/desc": "Choose whether DuckieTV's window should minimize on start-up.",
     "SETTINGS/WINDOW/standalone-startup-window/hdr": "Window on start-up",
-    "SETTINGS/WINDOW/system-tray-always/lbl": "Always show tray icon <small>(Requires restart)</small>",
+    "SETTINGS/WINDOW/system-tray-always/lbl": "Always show tray icon",
     "SETTINGS/WINDOW/system-tray-close/lbl": "Close button minimizes DuckieTV to tray",
     "SETTINGS/WINDOW/system-tray-minimize/lbl": "Minimize button minimizes DuckieTV to tray",
     "SETTINGS/WINDOW/system-tray/hdr": "System Tray",
+    "SETTINGS/WINDOW/tray-color/desc": "Choose the color of the system tray icon.",
+    "SETTINGS/WINDOW/tray-color/hdr": "System Tray Color",
     "SIDEPANEL/EPISODE-DETAILS/find-torrent/btn": "Find a torrent",
     "SIDEPANEL/EPISODE-DETAILS/leak-override/lbl": "Click here if the episode leaked online before ",
     "SIDEPANEL/EPISODE-DETAILS/watch-netflix/btn": "Watch on netflix",

css/main.css

@@ -2861,3 +2861,56 @@ ng-dial-gauge {
     font-size: 12px
   }
 }
+
+.tray {
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  text-align: left;
+}
+
+.tray.tray-black {
+  background: url('../img/logo/icon64.png') no-repeat;
+  background-size: contain;
+  background-color: grey;
+}
+.tray.tray-white {
+  background: url('../img/logo/icon64-inverted.png') no-repeat;
+  background-size: contain;
+  background-color: grey;
+}
+.tray.tray-red {
+  background: url('../img/logo/icon64-red.png') no-repeat;
+  background-size: contain;
+  background-color: grey;
+}
+.tray.tray-orange {
+  background: url('../img/logo/icon64-orange.png') no-repeat;
+  background-size: contain;
+  background-color: grey;
+}
+.tray.tray-yellow {
+  background: url('../img/logo/icon64-yellow.png') no-repeat;
+  background-size: contain;
+  background-color: grey;
+}
+.tray.tray-green {
+  background: url('../img/logo/icon64-green.png') no-repeat;
+  background-size: contain;
+  background-color: grey;
+}
+.tray.tray-blue {
+  background: url('../img/logo/icon64-blue.png') no-repeat;
+  background-size: contain;
+  background-color: grey;
+}
+.tray.tray-indigo {
+  background: url('../img/logo/icon64-indigo.png') no-repeat;
+  background-size: contain;
+  background-color: grey;
+}
+.tray.tray-violet {
+  background: url('../img/logo/icon64-violet.png') no-repeat;
+  background-size: contain;
+  background-color: grey;
+}

js/app.standalone.systray.js

@@ -7,6 +7,10 @@ if ((navigator.userAgent.toLowerCase().indexOf('standalone') !== -1)) {
     var gui = require('nw.gui');
     var win = gui.Window.get();
     var alwaysShowTray = (window.localStorage.getItem('standalone.alwaysShowTray') === 'Y');
+    var trayColor = ''; // default colour of the tray icon
+    if (localStorage.getItem('standalone.trayColor')) {
+        trayColor = localStorage.getItem('standalone.trayColor');
+    }
     var winState = 'normal';
     if (localStorage.getItem('standalone.position')) {
         var pos = JSON.parse(localStorage.getItem('standalone.position'));
@@ -113,7 +117,7 @@ if ((navigator.userAgent.toLowerCase().indexOf('standalone') !== -1)) {
          };
         tray = new gui.Tray({
             title: navigator.userAgent,
-            icon: 'img/logo/icon64.png'
+            icon: 'img/logo/icon64' + trayColor + '.png'
         });
         //console.debug('createTray: tray created id=',tray.id);
         tray.on('click', function() {

js/controllers/settings/WindowCtrl.js

@@ -1,5 +1,5 @@
-DuckieTV.controller('WindowCtrl', ["$scope",
-    function($scope) {
+DuckieTV.controller('WindowCtrl', ["$scope", "$injector", "$filter",
+    function($scope, $injector, $filter) {
 
         /**
          * All nw.js specific window settings are stored in localStorage because
@@ -10,6 +10,18 @@ DuckieTV.controller('WindowCtrl', ["$scope",
         $scope.alwaysShowTray = localStorage.getItem('standalone.alwaysShowTray');
         $scope.minimizeToTray = localStorage.getItem('standalone.minimizeSystray');
         $scope.closeToTray = localStorage.getItem('standalone.closeSystray');
+        $scope.activeTrayColor = 'black'; // default color of the tray icon
+        if (localStorage.getItem('standalone.trayColor')) {
+            $scope.activeTrayColor = ($scope.activeTrayColor === '') ? 'black' : localStorage.getItem('standalone.trayColor').replace('-', '').replace('inverted', 'white');
+        }
+        $scope.colorList = 'black|white|red|orange|yellow|green|blue|indigo|violet'.split('|'); // used by $scope.translateColor()
+        var translatedColorList = $filter('translate')('COLORLIST').split(',');
+
+        // Takes the English color and returns a translation
+        $scope.translateColor = function(color) {
+            var idx = $scope.colorList.indexOf(color);
+            return (idx != -1) ? translatedColorList[idx] : color;
+        };
 
         // Toggles whether to minimize the Standalone window at start-up 
         $scope.toggleStartupMinimized = function() {
@@ -22,6 +34,7 @@ DuckieTV.controller('WindowCtrl', ["$scope",
         $scope.toggleAlwaysShowTray = function() {
             //console.debug("Always show tray", $scope.alwaysShowTray);
             localStorage.setItem('standalone.alwaysShowTray', $scope.alwaysShowTray);
+            $injector.get('DuckietvReload').windowLocationReload();
         };
 
         // Toggles whether minimize button minimizes to tray
@@ -35,5 +48,21 @@ DuckieTV.controller('WindowCtrl', ["$scope",
             //console.debug("Close to tray", $scope.closeToTray);
             localStorage.setItem('standalone.closeSystray', $scope.closeToTray);
         };
+
+        // Sets the colour of the tray icon
+        $scope.setTrayColor = function(color) {
+            switch (color) {
+                case 'black': 
+                    localStorage.setItem('standalone.trayColor', '');
+                    break;
+                case 'white': 
+                    localStorage.setItem('standalone.trayColor', '-inverted');
+                    break;
+                default:
+                    localStorage.setItem('standalone.trayColor', '-'+color);
+            }
+            $scope.activeTrayColor = color;
+            $injector.get('DuckietvReload').windowLocationReload();
+        };
     }
 ]);

templates/settings/window.html

@@ -3,29 +3,42 @@ <h2>
     <span uib-tooltip="{{standaloneStartupMinimized ? 'SETTINGS/WINDOW/standalone-startup-minimized/tooltip' : 'SETTINGS/WINDOW/standalone-startup-normalized/tooltip'|translate}}" tooltip-placement="left">
       <i class="glyphicon glyphicon-{{standaloneStartupMinimized ? 'win-minimize alert-success' : 'win-maximize alert-info'}}" style="-webkit-transform: scale(1.5);-webkit-filter: invert(100%)"></i>
     </span>
-    <li translate-once="SETTINGS/WINDOW/standalone-startup-window/hdr"></li>
+    <li translate-once>SETTINGS/WINDOW/standalone-startup-window/hdr</li>
   </h2>
 
-  <p translate-once="SETTINGS/WINDOW/standalone-startup-window/desc"></p>
-  <p><strong translate-once="COMMON/current-setting/hdr"></strong>
+  <p translate-once>SETTINGS/WINDOW/standalone-startup-window/desc</p>
+  <p><strong translate-once>COMMON/current-setting/hdr</strong>
    {{startupMinimized ? 'SETTINGS/WINDOW/standalone-startup-minimized/tooltip' : 'SETTINGS/WINDOW/standalone-startup-normalized/tooltip'|translate}}</p>
   <a ng-click="toggleStartupMinimized()" class="btn btn-{{startupMinimized ? 'info' : 'success'}}">
     <i class="glyphicon glyphicon-{{startupMinimized ? 'win-maximize' : 'win-minimize'}}"  style="-webkit-transform: scale(1.5);-webkit-filter: invert(100%)"></i> {{startupMinimized ? 'SETTINGS/WINDOW/standalone-startup-normal/btn' : 'COMMON/minimize/btn'|translate}}
   </a>
   <hr class="setting-divider">
 
   <h2>
-    <li translate-once="SETTINGS/WINDOW/system-tray/hdr"></li>
+    <li translate-once>SETTINGS/WINDOW/system-tray/hdr</li>
   </h2>
   <div style="text-align: left">
     <div class="checkbox" ng-hide="isMac">
-      <input type="checkbox" ng-model="alwaysShowTray" ng-true-value="'Y'" ng-false-value="'N'" ng-change="toggleAlwaysShowTray()" id="w_ast"><label for="w_ast" translate-once="SETTINGS/WINDOW/system-tray-always/lbl"></label>
+      <input type="checkbox" ng-model="alwaysShowTray" ng-true-value="'Y'" ng-false-value="'N'" ng-change="toggleAlwaysShowTray()" id="w_ast"><label for="w_ast" translate-once>SETTINGS/WINDOW/system-tray-always/lbl</label>
     </div>
     <div class="checkbox">
-      <input type="checkbox" ng-model="minimizeToTray" ng-true-value="'Y'" ng-false-value="'N'" ng-change="toggleMinimizeToTray()" id="w_mtt"><label for="w_mtt" translate-once="SETTINGS/WINDOW/system-tray-minimize/lbl"></label>
+      <input type="checkbox" ng-model="minimizeToTray" ng-true-value="'Y'" ng-false-value="'N'" ng-change="toggleMinimizeToTray()" id="w_mtt"><label for="w_mtt" translate-once>SETTINGS/WINDOW/system-tray-minimize/lbl</label>
     </div>
     <div class="checkbox" ng-hide="isMac">
-      <input type="checkbox" ng-model="closeToTray" ng-true-value="'Y'" ng-false-value="'N'" ng-change="toggleCloseToTray()" id="w_ctt"><label for="w_ctt" translate-once="SETTINGS/WINDOW/system-tray-close/lbl"></label>
+      <input type="checkbox" ng-model="closeToTray" ng-true-value="'Y'" ng-false-value="'N'" ng-change="toggleCloseToTray()" id="w_ctt"><label for="w_ctt" translate-once>SETTINGS/WINDOW/system-tray-close/lbl</label>
     </div>
   </div>
+  <hr class="setting-divider">
+
+  <h2>
+    <span style="background-color: grey" uib-tooltip="{{translateColor(activeTrayColor)}}" tooltip-placement="left">
+      <i class="tray tray-{{activeTrayColor}}"></i>
+    </span>
+    <li translate-once>SETTINGS/WINDOW/tray-color/hdr</li>
+  </h2>
+  <p translate-once>SETTINGS/WINDOW/tray-color/desc</p>
+  <a style="text-align: left" ng-click="setTrayColor(color)" ng-repeat="color in colorList" class="btn {{ activeTrayColor == color ? 'btn-success' : '' }}">
+    <i class="tray tray-{{color}}"></i>
+    <span>{{translateColor(color)}}</span>
+  </a>
 </div>