Martchus
/
syncthing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

gui: Add connection status icons to Remote Devices (fixes #8244) (#8553)

This commit is contained in:
Eric P 2022-09-30 18:15:19 +02:00 committed by GitHub
parent b39985483d
commit fd0a6225aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 128 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
gui/black/assets/css/theme.css
View File

@ -273,3 +273,8 @@ code.ng-binding{
.fancytree-focused {
background-color: #222;
}
/* Remote Devices 'connection type'-icon color set to #aaa */
.reception {
filter: invert(77%) sepia(0%) saturate(724%) hue-rotate(146deg) brightness(91%) contrast(85%);
}

5
gui/dark/assets/css/theme.css
View File

@ -285,3 +285,8 @@ code.ng-binding{
.fancytree-focused {
background-color: #424242;
}
/* Remote Devices 'connection type'-icon color set to #aaa */
.reception {
filter: invert(77%) sepia(0%) saturate(724%) hue-rotate(146deg) brightness(91%) contrast(85%);
}

32
gui/default/assets/css/overrides.css
View File

@ -144,6 +144,38 @@ table.table-auto td {
max-width: 0px;
}
/* Remote Devices connection-quality indicator */
.reception-0 {
background: url('../../vendor/bootstrap/fonts/reception-0.svg') no-repeat;
}
.reception-1 {
background: url('../../vendor/bootstrap/fonts/reception-1.svg') no-repeat;
}
.reception-2 {
background: url('../../vendor/bootstrap/fonts/reception-2.svg') no-repeat;
}
.reception-3 {
background: url('../../vendor/bootstrap/fonts/reception-3.svg') no-repeat;
}
.reception-4 {
background: url('../../vendor/bootstrap/fonts/reception-4.svg') no-repeat;
}
.reception {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -20%;
}
.remote-devices-panel {
display: inline-block;
}
/* Wrap long file paths to prevent text overflow. See issue #6268. */
.file-path {
word-break: break-all;

38
gui/default/index.html
View File

@ -24,6 +24,7 @@
<link href="assets/css/tree.css" rel="stylesheet"/>
<link href="assets/css/overrides.css" rel="stylesheet"/>
<link href="assets/css/theme.css" rel="stylesheet"/>
<link href="assets/css/customicons.css" rel="stylesheet"/>
</head>
<body>
@ -737,16 +738,25 @@
<div class="panel-progress" ng-show="deviceStatus(deviceCfg) == 'syncing'" ng-attr-style="width: {{completion[deviceCfg.deviceID]._total | percent}}"></div>
<h4 class="panel-title">
<identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>
<span ng-switch="deviceStatus(deviceCfg)" class="pull-right text-{{deviceClass(deviceCfg)}}">
<span ng-switch-when="insync"><span class="hidden-xs" translate>Up to Date</span><span class="visible-xs" aria-label="{{'Up to Date' | translate}}"><i class="fas fa-fw fa-check"></i></span></span>
<span ng-switch-when="unused-insync"><span class="hidden-xs" translate>Connected (Unused)</span><span class="visible-xs" aria-label="{{'Connected (Unused)' | translate}}"><i class="fas fa-fw fa-unlink"></i></span></span>
<span ng-switch-when="syncing">
<span class="hidden-xs" translate>Syncing</span> ({{completion[deviceCfg.deviceID]._total | percent}}, {{completion[deviceCfg.deviceID]._needBytes | binary}}B)
<span class="pull-right text-{{deviceClass(deviceCfg)}}">
<span ng-switch="deviceStatus(deviceCfg)" class="remote-devices-panel">
<span ng-switch-when="insync"><span class="hidden-xs" translate>Up to Date</span><span class="visible-xs" aria-label="{{'Up to Date' | translate}}"><i class="fas fa-fw fa-check"></i></span></span>
<span ng-switch-when="unused-insync"><span class="hidden-xs" translate>Connected (Unused)</span><span class="visible-xs" aria-label="{{'Connected (Unused)' | translate}}"><i class="fas fa-fw fa-unlink"></i></span></span>
<span ng-switch-when="syncing">
<span class="hidden-xs" translate>Syncing</span> ({{completion[deviceCfg.deviceID]._total | percent}}, {{completion[deviceCfg.deviceID]._needBytes | binary}}B)
</span>
<span ng-switch-when="paused"><span class="hidden-xs" translate>Paused</span><span class="visible-xs" aria-label="{{'Paused' | translate}}"><i class="fas fa-fw fa-pause"></i></span></span>
<span ng-switch-when="unused-paused"><span class="hidden-xs" translate>Paused (Unused)</span><span class="visible-xs" aria-label="{{'Paused (Unused)' | translate}}"><i class="fas fa-fw fa-unlink"></i></span></span>
<span ng-switch-when="disconnected"><span class="hidden-xs" translate>Disconnected</span><span class="visible-xs" aria-label="{{'Disconnected' | translate}}"><i class="fas fa-fw fa-power-off"></i></span></span>
<span ng-switch-when="unused-disconnected"><span class="hidden-xs" translate>Disconnected (Unused)</span><span class="visible-xs" aria-label="{{'Disconnected (Unused)' | translate}}"><i class="fas fa-fw fa-unlink"></i></span></span>
</span>
<span ng-switch="rdConnType(deviceCfg.deviceID)" class="remote-devices-panel">
<span ng-switch-when="tcplan" class="reception reception-4 reception-theme"></span>
<span ng-switch-when="tcpwan" class="reception reception-3 reception-theme"></span>
<span ng-switch-when="quic" class="reception reception-2 reception-theme"></span>
<span ng-switch-when="relay" class="reception reception-1 reception-theme"></span>
<span ng-switch-when="disconnected" class="reception reception-0 reception-theme"></span>
</span>
<span ng-switch-when="paused"><span class="hidden-xs" translate>Paused</span><span class="visible-xs" aria-label="{{'Paused' | translate}}"><i class="fas fa-fw fa-pause"></i></span></span>
<span ng-switch-when="unused-paused"><span class="hidden-xs" translate>Paused (Unused)</span><span class="visible-xs" aria-label="{{'Paused (Unused)' | translate}}"><i class="fas fa-fw fa-unlink"></i></span></span>
<span ng-switch-when="disconnected"><span class="hidden-xs" translate>Disconnected</span><span class="visible-xs" aria-label="{{'Disconnected' | translate}}"><i class="fas fa-fw fa-power-off"></i></span></span>
<span ng-switch-when="unused-disconnected"><span class="hidden-xs" translate>Disconnected (Unused)</span><span class="visible-xs" aria-label="{{'Disconnected (Unused)' | translate}}"><i class="fas fa-fw fa-unlink"></i></span></span>
</span>
<div class="panel-title-text">{{deviceName(deviceCfg)}}</div>
</h4>
@ -823,9 +833,13 @@
</span>
</td>
</tr>
<tr ng-if="connections[deviceCfg.deviceID].connected && connections[deviceCfg.deviceID].type.indexOf('Relay') > -1" tooltip data-original-title="Connections via relays might be rate limited by the relay">
<th><span class="fas fa-fw fa-exclamation-triangle text-danger"></span>&nbsp;<span translate>Connection Type</span></th>
<td class="text-right">{{connections[deviceCfg.deviceID].type}}</td>
<tr ng-if="connections[deviceCfg.deviceID].connected">
<th><span class="reception reception-4 reception-theme"></span>&nbsp;<span translate>Connection Type</span></th>
<td ng-if="connections[deviceCfg.deviceID].connected" class="text-right">
<span tooltip data-original-title="{{rdConnDetails(rdConnType(deviceCfg.deviceID))}}">
{{rdConnTypeString(rdConnType(deviceCfg.deviceID))}}
</span>
</td>
</tr>
<tr ng-if="deviceCfg.allowedNetworks.length > 0">
<th><span class="fas fa-fw fa-filter"></span>&nbsp;<span translate>Allowed Networks</span></th>

55
gui/default/syncthing/core/syncthingController.js
View File

@ -1192,6 +1192,61 @@ angular.module('syncthing.core')
return '?';
};
$scope.rdConnType = function(deviceID) {
var conn = $scope.connections[deviceID];
if(!conn)
return "-1";
if (conn.type.indexOf('relay') === 0)
return "relay";
if (conn.type.indexOf('quic') === 0)
return "quic";
if(conn.type.indexOf('tcp') === 0)
return "tcp"+rdAddrType(conn.address);
return "disconnected";
}
function rdAddrType(address) {
var re = /(^(?:127\.|0?10\.|172\.0?1[6-9]\.|172\.0?2[0-9]\.|172\.0?3[01]\.|192\.168\.|169\.254\.|::1|[fF][cCdD][0-9a-fA-F]{2}:|[fF][eE][89aAbB][0-9a-fA-F]:))/
if(re.test(address))
return "lan";
return "wan";
}
$scope.rdConnTypeString = function(type) {
switch (type) {
case "relay":
return $translate.instant('Relay');
case "quic":
return $translate.instant('QUIC');
case "tcpwan":
return $translate.instant('TCP WAN');
case "tcplan":
return $translate.instant('TCP LAN');
default:
return $translate.instant('Disconnected');
}
}
$scope.rdConnDetails = function(type) {
switch (type) {
case "relay":
return $translate.instant('Connections via relays might be rate limited by the relay');
case "quic":
return $translate.instant('QUIC connections are in most cases considered suboptimal');
case "tcpwan":
return $translate.instant('Using a direct TCP connection over WAN');
case "tcplan":
return $translate.instant('Using a direct TCP connection over LAN');
default:
return $translate.instant('Unknown');
}
}
$scope.hasRemoteGUIAddress = function (deviceCfg) {
if (!deviceCfg.remoteGUIPort)
return false;

BIN
gui/default/vendor/bootstrap/fonts/reception-0.svg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 390 B

BIN
gui/default/vendor/bootstrap/fonts/reception-1.svg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 412 B

BIN
gui/default/vendor/bootstrap/fonts/reception-2.svg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 434 B

BIN
gui/default/vendor/bootstrap/fonts/reception-3.svg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 456 B

BIN
gui/default/vendor/bootstrap/fonts/reception-4.svg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 480 B

5
gui/light/assets/css/theme.css
View File

@ -36,3 +36,8 @@
.fancytree-focused {
background-color: #eeeeee;
}
/* Remote Devices 'connection type'-icon color set to #333 */
.reception {
filter: invert(12%) sepia(11%) saturate(20%) hue-rotate(318deg) brightness(100%) contrast(80%);
}