gui: Use favicon as indication for status (fixes #1018)
GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3217
20
assets/statusicons/default.svg
Normal 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 |
31
assets/statusicons/notify.svg
Normal 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 |
31
assets/statusicons/pause.svg
Normal 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 |
31
assets/statusicons/sync.svg
Normal 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 |
BIN
gui/default/assets/img/favicon-default.png
Normal file
After Width: | Height: | Size: 5.0 KiB |
BIN
gui/default/assets/img/favicon-notify.png
Normal file
After Width: | Height: | Size: 4.7 KiB |
BIN
gui/default/assets/img/favicon-pause.png
Normal file
After Width: | Height: | Size: 4.7 KiB |
BIN
gui/default/assets/img/favicon-sync.png
Normal file
After Width: | Height: | Size: 6.5 KiB |
Before Width: | Height: | Size: 6.4 KiB |
@ -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>
|
||||
|
@ -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) {
|
||||
|