gui: Use favicon as indication for status (fixes #1018)

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3217

assets/statusicons/default.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <defs>
+        <linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="8" y1="0" x2="8" y2="16">
+            <stop offset="0" style="stop-color:#26B6DB"/>
+            <stop offset="1" style="stop-color:#0882C8"/>
+        </linearGradient>
+    </defs>
+    <g id="syncthing-logo">
+        <circle id="outer" cx="8" cy="8" r="8" style="fill:url(#grad)"/>
+        <circle id="inner" cx="8" cy="7.9727402" r="5.9557071" style="fill:none;stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-l" x1="9.1993189" y1="8.776825" x2="2.262351" y2="9.4173737" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-tr" x1="9.1993189" y1="8.776825" x2="13.301533" y2="5.3696747" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-br" x1="9.1993189" y1="8.776825" x2="11.788756" y2="12.51107" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <circle id="node-c" cx="9.1993189" cy="8.776825" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-l" cx="2.262351" cy="9.4173737" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-tr" cx="13.301533" cy="5.3696747" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-br" cx="11.788756" cy="12.51107" r="1.22" style="fill:#ffffff"/>
+    </g>
+</svg>

assets/statusicons/notify.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <defs>
+        <linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="8" y1="0" x2="8" y2="16">
+            <stop offset="0" style="stop-color:#26B6DB"/>
+            <stop offset="1" style="stop-color:#0882C8"/>
+        </linearGradient>
+        <mask id="bitemask" maskUnits="userSpaceOnUse">
+            <g>
+                <rect id="mask-bg" x="0" y="0" width="16" height="16" style="fill:#ffffff"/>
+                <circle id="mask-subtract" cx="11.5" cy="11.5" r="5.5" style="fill:#000000"/>
+            </g>
+        </mask>
+    </defs>
+    <g id="syncthing-logo" mask="url(#bitemask)">
+        <circle id="outer" cx="8" cy="8" r="8" style="fill:url(#grad)"/>
+        <circle id="inner" cx="8" cy="7.9727402" r="5.9557071" style="fill:none;stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-l" x1="9.1993189" y1="8.776825" x2="2.262351" y2="9.4173737" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-tr" x1="9.1993189" y1="8.776825" x2="13.301533" y2="5.3696747" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-br" x1="9.1993189" y1="8.776825" x2="11.788756" y2="12.51107" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <circle id="node-c" cx="9.1993189" cy="8.776825" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-l" cx="2.262351" cy="9.4173737" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-tr" cx="13.301533" cy="5.3696747" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-br" cx="11.788756" cy="12.51107" r="1.22" style="fill:#ffffff"/>
+    </g>
+    <circle id="bubble" cx="11.5" cy="11.5" r="4.5" style="fill:#000000"/>
+    <g id="exclaim">
+        <rect id="exclaim-top" x="11" y="9" width="1" height="3" style="fill:#ffffff"/>
+        <rect id="exclaim-bottom" x="11" y="13" width="1" height="1" style="fill:#ffffff"/>
+    </g>
+</svg>

assets/statusicons/pause.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <defs>
+        <linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="8" y1="0" x2="8" y2="16">
+            <stop offset="0" style="stop-color:#26B6DB"/>
+            <stop offset="1" style="stop-color:#0882C8"/>
+        </linearGradient>
+        <mask id="bitemask" maskUnits="userSpaceOnUse">
+            <g>
+                <rect id="mask-bg" x="0" y="0" width="16" height="16" style="fill:#ffffff"/>
+                <circle id="mask-subtract" cx="11.5" cy="11.5" r="5.5" style="fill:#000000"/>
+            </g>
+        </mask>
+    </defs>
+    <g id="syncthing-logo" mask="url(#bitemask)">
+        <circle id="outer" cx="8" cy="8" r="8" style="fill:url(#grad)"/>
+        <circle id="inner" cx="8" cy="7.9727402" r="5.9557071" style="fill:none;stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-l" x1="9.1993189" y1="8.776825" x2="2.262351" y2="9.4173737" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-tr" x1="9.1993189" y1="8.776825" x2="13.301533" y2="5.3696747" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-br" x1="9.1993189" y1="8.776825" x2="11.788756" y2="12.51107" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <circle id="node-c" cx="9.1993189" cy="8.776825" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-l" cx="2.262351" cy="9.4173737" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-tr" cx="13.301533" cy="5.3696747" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-br" cx="11.788756" cy="12.51107" r="1.22" style="fill:#ffffff"/>
+    </g>
+    <circle id="bubble" cx="11.5" cy="11.5" r="4.5" style="fill:#000000"/>
+    <g id="pause">
+        <rect id="pause-leftbar" x="10" y="9" width="1" height="5" style="fill:#ffffff"/>
+        <rect id="pause-rightbar" x="12" y="9" width="1" height="5" style="fill:#ffffff"/>
+    </g>
+</svg>

assets/statusicons/sync.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <defs>
+        <linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="8" y1="0" x2="8" y2="16">
+            <stop offset="0" style="stop-color:#26B6DB"/>
+            <stop offset="1" style="stop-color:#0882C8"/>
+        </linearGradient>
+        <mask id="bitemask" maskUnits="userSpaceOnUse">
+            <g>
+                <rect id="mask-bg" x="0" y="0" width="16" height="16" style="fill:#ffffff"/>
+                <circle id="mask-subtract" cx="11.5" cy="11.5" r="5.5" style="fill:#000000"/>
+            </g>
+        </mask>
+    </defs>
+    <g id="syncthing-logo" mask="url(#bitemask)">
+        <circle id="outer" cx="8" cy="8" r="8" style="fill:url(#grad)"/>
+        <circle id="inner" cx="8" cy="7.9727402" r="5.9557071" style="fill:none;stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-l" x1="9.1993189" y1="8.776825" x2="2.262351" y2="9.4173737" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-tr" x1="9.1993189" y1="8.776825" x2="13.301533" y2="5.3696747" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <line id="arm-br" x1="9.1993189" y1="8.776825" x2="11.788756" y2="12.51107" style="stroke:#ffffff;stroke-width:0.81771719"/>
+        <circle id="node-c" cx="9.1993189" cy="8.776825" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-l" cx="2.262351" cy="9.4173737" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-tr" cx="13.301533" cy="5.3696747" r="1.22" style="fill:#ffffff"/>
+        <circle id="node-br" cx="11.788756" cy="12.51107" r="1.22" style="fill:#ffffff"/>
+    </g>
+    <circle id="bubble" cx="11.5" cy="11.5" r="4.5" style="fill:#000000"/>
+    <g id="arrows" transform="rotate(0 11.5 11.5)">
+        <path id="arrow-left" d="m 11.5,14 0,-1 c -1.5,0 -1.5,0 -1.5,-2 l 1,0 -1.5,-2 -1.5,2 1,0 c 0,3 0,3 2.5,3 z" style="fill:#ffffff" />
+        <path id="arrow-right" d="m 11.5,9 0,1 c 1.5,0 1.5,0 1.5,2 l -1,0 1.5,2 1.5,-2 -1,0 C 14,9 14,9 11.5,9 Z" style="fill:#ffffff" />
+    </g>
+</svg>

gui/default/index.html

@@ -14,7 +14,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="">
   <meta name="author" content="">
-  <link rel="shortcut icon" href="assets/img/favicon.png">
+  <link rel="shortcut icon" href="assets/img/favicon-{{syncthingStatus()}}.png">
   <link rel="mask-icon" href="assets/img/safari-pinned-tab.svg" color="#0882c8">
 
   <title ng-bind="thisDeviceName() + ' | Syncthing'"></title>

gui/default/syncthing/core/syncthingController.js

@@ -780,6 +780,70 @@ angular.module('syncthing.core')
             return 'info';
         };
 
+        $scope.syncthingStatus = function () {
+            var syncCount = 0;
+            var notifyCount = 0;
+            var pauseCount = 0;
+            
+            // loop through all folders
+            var folderListCache = $scope.folderList();
+            for (var i = 0; i < folderListCache.length; i++) {
+                var status = $scope.folderStatus(folderListCache[i]);
+                switch (status) {
+                    case 'syncing':
+                        syncCount++;
+                        break;
+                    case 'stopped':
+                    case 'unknown':
+                    case 'outofsync':
+                    case 'error':
+                        notifyCount++;
+                        break;
+                }
+            }
+
+            // loop through all devices
+            var deviceCount = $scope.devices.length;
+            for (var i = 0; i < $scope.devices.length; i++) {
+                var status = $scope.deviceStatus({
+                    deviceID:$scope.devices[i].deviceID
+                });
+                switch (status) {
+                    case 'unknown':
+                        notifyCount++;
+                        break;
+                    case 'paused':
+                        pauseCount++;
+                        break;
+                    case 'unused':
+                        deviceCount--;
+                        break;
+                }
+            }
+
+            // enumerate notifications
+            if ($scope.openNoAuth || !$scope.configInSync || Object.keys($scope.deviceRejections).length > 0 || Object.keys($scope.folderRejections).length > 0 || $scope.errorList().length > 0 || !online) {
+                notifyCount++;
+            }
+
+            // at least one folder is syncing
+            if (syncCount > 0) {
+                return 'sync';
+            }
+
+            // a device is unknown or a folder is stopped/unknown/outofsync/error or some other notification is open or gui offline
+            if (notifyCount > 0) {
+                return 'notify';
+            }
+            
+            // all used devices are paused except (this) one
+            if (pauseCount === deviceCount-1) {
+                return 'pause';
+            }
+            
+            return 'default';
+        };
+
         $scope.deviceAddr = function (deviceCfg) {
             var conn = $scope.connections[deviceCfg.deviceID];
             if (conn && conn.connected) {