From fd0a6225aadce9cee19ab058465fa5c8658f0be9 Mon Sep 17 00:00:00 2001 From: Eric P Date: Fri, 30 Sep 2022 18:15:19 +0200 Subject: [PATCH] gui: Add connection status icons to Remote Devices (fixes #8244) (#8553) --- gui/black/assets/css/theme.css | 5 ++ gui/dark/assets/css/theme.css | 5 ++ gui/default/assets/css/overrides.css | 32 ++++++++++ gui/default/index.html | 38 ++++++++---- .../syncthing/core/syncthingController.js | 55 ++++++++++++++++++ .../vendor/bootstrap/fonts/reception-0.svg | Bin 0 -> 390 bytes .../vendor/bootstrap/fonts/reception-1.svg | Bin 0 -> 412 bytes .../vendor/bootstrap/fonts/reception-2.svg | Bin 0 -> 434 bytes .../vendor/bootstrap/fonts/reception-3.svg | Bin 0 -> 456 bytes .../vendor/bootstrap/fonts/reception-4.svg | Bin 0 -> 480 bytes gui/light/assets/css/theme.css | 5 ++ 11 files changed, 128 insertions(+), 12 deletions(-) create mode 100644 gui/default/vendor/bootstrap/fonts/reception-0.svg create mode 100644 gui/default/vendor/bootstrap/fonts/reception-1.svg create mode 100644 gui/default/vendor/bootstrap/fonts/reception-2.svg create mode 100644 gui/default/vendor/bootstrap/fonts/reception-3.svg create mode 100644 gui/default/vendor/bootstrap/fonts/reception-4.svg diff --git a/gui/black/assets/css/theme.css b/gui/black/assets/css/theme.css index 622a22a58..1e280a952 100644 --- a/gui/black/assets/css/theme.css +++ b/gui/black/assets/css/theme.css @@ -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%); +} diff --git a/gui/dark/assets/css/theme.css b/gui/dark/assets/css/theme.css index f554bb8a8..26ab0f898 100644 --- a/gui/dark/assets/css/theme.css +++ b/gui/dark/assets/css/theme.css @@ -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%); +} \ No newline at end of file diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css index 7033d8e36..5186ec5c2 100644 --- a/gui/default/assets/css/overrides.css +++ b/gui/default/assets/css/overrides.css @@ -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; diff --git a/gui/default/index.html b/gui/default/index.html index 664c8f37f..d197b0e09 100644 --- a/gui/default/index.html +++ b/gui/default/index.html @@ -24,6 +24,7 @@ + @@ -737,16 +738,25 @@

- - - - - ({{completion[deviceCfg.deviceID]._total | percent}}, {{completion[deviceCfg.deviceID]._needBytes | binary}}B) + + + + + + ({{completion[deviceCfg.deviceID]._total | percent}}, {{completion[deviceCfg.deviceID]._needBytes | binary}}B) + + + + + + + + + + + + - - - -
{{deviceName(deviceCfg)}}

@@ -823,9 +833,13 @@ - -  Connection Type - {{connections[deviceCfg.deviceID].type}} + +  Connection Type + + + {{rdConnTypeString(rdConnType(deviceCfg.deviceID))}} + +  Allowed Networks diff --git a/gui/default/syncthing/core/syncthingController.js b/gui/default/syncthing/core/syncthingController.js index de5d32659..49d9d446e 100755 --- a/gui/default/syncthing/core/syncthingController.js +++ b/gui/default/syncthing/core/syncthingController.js @@ -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; diff --git a/gui/default/vendor/bootstrap/fonts/reception-0.svg b/gui/default/vendor/bootstrap/fonts/reception-0.svg new file mode 100644 index 0000000000000000000000000000000000000000..885bf3bb34d4d07bc2a83e58873df6ee47f544bb GIT binary patch literal 390 zcmd6jJr08~3`TcOVRif@5~e zrqIN=UO7)Gu~ac1CSD35I2j1Zj?pMAY6PS0Wa4jrTIUoFuMqSS@80=AS!Uxfc$&N`T$)F9G%$YRh84))5nUFzw S&leD9@9$5Mw^{S8xBUR+gI<~d literal 0 HcmV?d00001 diff --git a/gui/default/vendor/bootstrap/fonts/reception-1.svg b/gui/default/vendor/bootstrap/fonts/reception-1.svg new file mode 100644 index 0000000000000000000000000000000000000000..3deafb6220de5bb4e07c3c8b7f61ac744299cfba GIT binary patch literal 412 zcmcJLyAHxI3`KXo!t$O+3t>P_2blSYwuB~9XsR?ch_AB0}eziKev< zTF0X4%$QslSb;D*llS4KQG$eGOM&$YpciLfrfPgWH5s(O4yeFtuhXioqD literal 0 HcmV?d00001 diff --git a/gui/default/vendor/bootstrap/fonts/reception-3.svg b/gui/default/vendor/bootstrap/fonts/reception-3.svg new file mode 100644 index 0000000000000000000000000000000000000000..b30d5fb79dee6d8bc1f35cc3ec98fcb7c6be105c GIT binary patch literal 456 zcma)(&x(UE5Qp!5iec{gqc){1#>4j9hftd}fz(LMn&Q*%EWOx8%0dp4k6*rFGWEO+ z@VNVN)@W0jK7`0Q^IY)|2T@8X1tk!&yCti!I3ZZ$2AiJsm-Aj@{~eg} BZ9D(~ literal 0 HcmV?d00001 diff --git a/gui/default/vendor/bootstrap/fonts/reception-4.svg b/gui/default/vendor/bootstrap/fonts/reception-4.svg new file mode 100644 index 0000000000000000000000000000000000000000..611bdf1b989925c9b888b10d10a3dd330c2b94e3 GIT binary patch literal 480 zcma)(O^(7a3`X~y!ty?Ug&;I)x`6c@qLfS%DKu3Y8pP?xquCUMP$e(yr_av|*VEj? z{ThbJpv!su5~7sC%a+H~i%LoF=t4V@ z?d;*~S+boSvyTJYA;(~>S@pQ?*!Fq*y>NN;gHW#)9u`+W2oI};O06?0^+3^V>c7V|zcHS2asU7T literal 0 HcmV?d00001 diff --git a/gui/light/assets/css/theme.css b/gui/light/assets/css/theme.css index 7e7212d32..8a6183d46 100644 --- a/gui/light/assets/css/theme.css +++ b/gui/light/assets/css/theme.css @@ -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%); +}