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

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3217
This commit is contained in:
Daniel Harte 2016-06-01 19:06:36 +00:00 committed by Audrius Butkevicius
parent 3b8ae33fe3
commit 01ae866d58
11 changed files with 178 additions and 1 deletions

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

View File

@ -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>

View File

@ -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) {