Add visual separation between accountStateIndicator and avatar

Signed-off-by: Dominique Fuchs <32204802+DominiqueFuchs@users.noreply.github.com>

diff --git a/src/gui/tray/UserLine.qml b/src/gui/tray/UserLine.qml
index 0c2025032e8086831e9450774853db51f6ae32a8..aa7d4a4228bf38bf679dede928dee08914213444 100644 (file)
--- a/src/gui/tray/UserLine.qml
+++ b/src/gui/tray/UserLine.qml
@@ -20,6 +20,10 @@ MenuItem {
                 display: AbstractButton.IconOnly\r
                 flat: true\r
 \r
+                onHoveredChanged: {\r
+                    accountStateIndicatorBackground.color = (containsMouse ? "#f6f6f6" : "white")\r
+                }\r
+\r
                 background: Rectangle {\r
                     color: "transparent"\r
                 }\r
@@ -45,12 +49,21 @@ MenuItem {
                         source: ("image://avatars/" + id)\r
                         Layout.preferredHeight: (userLineLayout.height -16)\r
                         Layout.preferredWidth: (userLineLayout.height -16)\r
+                        Rectangle {\r
+                            id: accountStateIndicatorBackground\r
+                            width: accountStateIndicator.sourceSize.width + 2\r
+                            height: width\r
+                            anchors.bottom: accountAvatar.bottom\r
+                            anchors.right: accountAvatar.right\r
+                            color: "white"\r
+                            radius: width*0.5\r
+                        }\r
                         Image {\r
                             id: accountStateIndicator\r
                             source: isConnected ? "qrc:///client/theme/colored/state-ok.svg" : "qrc:///client/theme/colored/state-offline.svg"\r
                             cache: false\r
-                            anchors.bottom: accountAvatar.bottom\r
-                            anchors.right: accountAvatar.right\r
+                            x: accountStateIndicatorBackground.x + 1\r
+                            y: accountStateIndicatorBackground.y + 1\r
                             sourceSize.width: 16\r
                             sourceSize.height: 16\r
                         }\r

diff --git a/src/gui/tray/Window.qml b/src/gui/tray/Window.qml
index d09a2709b31ffbec23d1877131cdec679efbce1e..53b813343c6a698a5febba493389f10341ebb8b6 100644 (file)
--- a/src/gui/tray/Window.qml
+++ b/src/gui/tray/Window.qml
@@ -107,6 +107,9 @@ Window {
                         id: accountBtnMouseArea\r
                         anchors.fill: parent\r
                         hoverEnabled: true\r
+                        onContainsMouseChanged: {\r
+                            currentAccountStateIndicatorBackground.color = (containsMouse ? "#009dd9" : "#0082c9")\r
+                        }\r
                         onClicked:\r
                         {\r
                             syncPauseButton.text = systrayBackend.syncIsPaused() ? qsTr("Resume sync for all") : qsTr("Pause sync for all")\r
@@ -255,12 +258,21 @@ Window {
                             source: "image://avatars/currentUser"\r
                             Layout.preferredHeight: (trayWindowHeaderBackground.height -16)\r
                             Layout.preferredWidth: (trayWindowHeaderBackground.height -16)\r
+                            Rectangle {\r
+                                id: currentAccountStateIndicatorBackground\r
+                                width: currentAccountStateIndicator.sourceSize.width + 2\r
+                                height: width\r
+                                anchors.bottom: currentAccountAvatar.bottom\r
+                                anchors.right: currentAccountAvatar.right\r
+                                color: "#0082c9"\r
+                                radius: width*0.5\r
+                            }\r
                             Image {\r
                                 id: currentAccountStateIndicator\r
                                 source: userModelBackend.isUserConnected(userModelBackend.currentUserId()) ? "qrc:///client/theme/colored/state-ok.svg" : "qrc:///client/theme/colored/state-offline.svg"\r
                                 cache: false\r
-                                anchors.bottom: currentAccountAvatar.bottom\r
-                                anchors.right: currentAccountAvatar.right\r
+                                x: currentAccountStateIndicatorBackground.x + 1\r
+                                y: currentAccountStateIndicatorBackground.y + 1\r
                                 sourceSize.width: 16\r
                                 sourceSize.height: 16\r
                             }\r