Refactor user line

Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>

diff --git a/src/gui/tray/UserLine.qml b/src/gui/tray/UserLine.qml
index 4429aaba9d0ea60fa2903fe80689c917609ed33f..6a064f5c829529de8a2de92c54d900c5d33a6af3 100644 (file)
--- a/src/gui/tray/UserLine.qml
+++ b/src/gui/tray/UserLine.qml
@@ -7,141 +7,125 @@ import QtQuick.Layouts 1.2
 import Style 1.0\r
 import com.nextcloud.desktopclient 1.0\r
 \r
-MenuItem {\r
+AbstractButton {\r
     id: userLine\r
-    height: Style.trayWindowHeaderHeight\r
 \r
-    Accessible.role: Accessible.MenuItem\r
-    Accessible.name: qsTr("Account entry")\r
+    signal showUserStatusSelector(int id)\r
 \r
     property variant dialog;\r
     property variant comp;\r
-    activeFocusOnTab: false\r
 \r
-    signal showUserStatusSelector(int id)\r
+    Accessible.role: Accessible.MenuItem\r
+    Accessible.name: qsTr("Switch to account") + " " + model.name\r
 \r
-    RowLayout {\r
-        id: userLineLayout\r
-        spacing: 0\r
-        anchors.fill: parent\r
+    height: Style.trayWindowHeaderHeight\r
 \r
-        Button {\r
-            id: accountButton\r
-            Layout.preferredWidth: (userLineLayout.width * (5/6))\r
-            Layout.preferredHeight: (userLineLayout.height)\r
-            display: AbstractButton.IconOnly\r
-            hoverEnabled: true\r
-            flat: true\r
+    background: Rectangle {\r
+        anchors.fill: parent\r
+        anchors.margins: 1\r
+        color: (userLine.hovered || userLine.visualFocus) && !(userMoreButton.hovered || userMoreButton.visualFocus) ? Style.lightHover : Style.backgroundColor\r
+    }\r
 \r
-            Accessible.role: Accessible.Button\r
-            Accessible.name: qsTr("Switch to account") + " " + name\r
+    contentItem: RowLayout {\r
+        id: userLineLayout\r
+        spacing: Style.userStatusSpacing\r
+\r
+        Image {\r
+            id: accountAvatar\r
+            Layout.leftMargin: 7\r
+            verticalAlignment: Qt.AlignCenter\r
+            cache: false\r
+            source: model.avatar !== "" ? model.avatar : Theme.darkMode ? "image://avatars/fallbackWhite" : "image://avatars/fallbackBlack"\r
+            Layout.preferredHeight: Style.accountAvatarSize\r
+            Layout.preferredWidth: Style.accountAvatarSize\r
+\r
+            Rectangle {\r
+                id: accountStatusIndicatorBackground\r
+                visible: model.isConnected && model.serverHasUserStatus\r
+                width: accountStatusIndicator.sourceSize.width + 2\r
+                height: width\r
+                anchors.bottom: accountAvatar.bottom\r
+                anchors.right: accountAvatar.right\r
+                color: accountButton.hovered || accountButton.visualFocus ? "#f6f6f6" : "white"\r
+                radius: width*0.5\r
+            }\r
 \r
-            onClicked: {\r
-                UserModel.currentUserId = id;\r
-                accountMenu.close();\r
+            Image {\r
+                id: accountStatusIndicator\r
+                visible: model.isConnected && model.serverHasUserStatus\r
+                source: model.statusIcon\r
+                cache: false\r
+                x: accountStatusIndicatorBackground.x + 1\r
+                y: accountStatusIndicatorBackground.y + 1\r
+                sourceSize.width: Style.accountAvatarStateIndicatorSize\r
+                sourceSize.height: Style.accountAvatarStateIndicatorSize\r
+\r
+                Accessible.role: Accessible.Indicator\r
+                Accessible.name: model.desktopNotificationsAllowed ? qsTr("Current account status is online") : qsTr("Current account status is do not disturb")\r
             }\r
+        }\r
 \r
-            background: Item {\r
-                height: parent.height\r
-                width: userLine.menu ? userLine.menu.width : 0\r
-                Rectangle {\r
-                    anchors.fill: parent\r
-                    anchors.margins: 1\r
-                    color: parent.parent.hovered || parent.parent.visualFocus ? Style.lightHover : Style.backgroundColor\r
-                }\r
+        ColumnLayout {\r
+            id: accountLabels\r
+            Layout.leftMargin: Style.accountLabelsSpacing\r
+            Layout.fillWidth: true\r
+            Layout.fillHeight: true\r
+\r
+            Label {\r
+                id: accountUser\r
+                Layout.fillWidth: true\r
+                Layout.alignment: Qt.AlignLeft | Qt.AlignBottom\r
+                verticalAlignment: Text.AlignBottom\r
+                text: name\r
+                elide: Text.ElideRight\r
+                color: Style.ncTextColor\r
+                font.pixelSize: Style.topLinePixelSize\r
+                font.bold: true\r
             }\r
 \r
             RowLayout {\r
-                id: accountControlRowLayout\r
-                anchors.fill: parent\r
-                spacing: Style.userStatusSpacing\r
-                Image {\r
-                    id: accountAvatar\r
-                    Layout.leftMargin: 7\r
-                    verticalAlignment: Qt.AlignCenter\r
-                    cache: false\r
-                    source: model.avatar != "" ? model.avatar : Theme.darkMode ? "image://avatars/fallbackWhite" : "image://avatars/fallbackBlack"\r
-                    Layout.preferredHeight: Style.accountAvatarSize\r
-                    Layout.preferredWidth: Style.accountAvatarSize\r
-                    Rectangle {\r
-                        id: accountStatusIndicatorBackground\r
-                        visible: model.isConnected &&\r
-                                 model.serverHasUserStatus\r
-                        width: accountStatusIndicator.sourceSize.width + 2\r
-                        height: width\r
-                        anchors.bottom: accountAvatar.bottom\r
-                        anchors.right: accountAvatar.right\r
-                        color: accountButton.hovered || accountButton.visualFocus ? "#f6f6f6" : "white"\r
-                        radius: width*0.5\r
-                    }\r
-                    Image {\r
-                        id: accountStatusIndicator\r
-                        visible: model.isConnected &&\r
-                                 model.serverHasUserStatus\r
-                        source: model.statusIcon\r
-                        cache: false\r
-                        x: accountStatusIndicatorBackground.x + 1\r
-                        y: accountStatusIndicatorBackground.y + 1\r
-                        sourceSize.width: Style.accountAvatarStateIndicatorSize\r
-                        sourceSize.height: Style.accountAvatarStateIndicatorSize\r
-\r
-                        Accessible.role: Accessible.Indicator\r
-                        Accessible.name: model.desktopNotificationsAllowed ? qsTr("Current account status is online") : qsTr("Current account status is do not disturb")\r
-                    }\r
+                id: statusLayout\r
+                Layout.fillWidth: true\r
+                height: visible ? implicitHeight : 0\r
+                visible: model.isConnected &&\r
+                         model.serverHasUserStatus &&\r
+                         (model.statusEmoji !== "" || model.statusMessage !== "")\r
+\r
+                Label {\r
+                    id: emoji\r
+                    visible: model.statusEmoji !== ""\r
+                    text: statusEmoji\r
+                    topPadding: -Style.accountLabelsSpacing\r
                 }\r
 \r
-                Column {\r
-                    id: accountLabels\r
-                    Layout.leftMargin: Style.accountLabelsSpacing\r
+                Label {\r
+                    id: message\r
                     Layout.fillWidth: true\r
-                    Layout.maximumWidth: parent.width - Style.accountLabelsSpacing\r
-                    Label {\r
-                        id: accountUser\r
-                        text: name\r
-                        elide: Text.ElideRight\r
-                        color: Style.ncTextColor\r
-                        font.pixelSize: Style.topLinePixelSize\r
-                        font.bold: true\r
-                        width: parent.width\r
-                    }\r
-                    Row {\r
-                        visible: model.isConnected &&\r
-                                 model.serverHasUserStatus\r
-                        width: parent.width\r
-                        Label {\r
-                            id: emoji\r
-                            visible: model.statusEmoji !== ""\r
-                            text: statusEmoji\r
-                            topPadding: -Style.accountLabelsSpacing\r
-                        }\r
-                        Label {\r
-                            id: message\r
-                            width: parent.width - parent.spacing - emoji.width\r
-                            visible: model.statusMessage !== ""\r
-                            text: statusMessage\r
-                            elide: Text.ElideRight\r
-                            color: Style.ncTextColor\r
-                            font.pixelSize: Style.subLinePixelSize\r
-                            leftPadding: Style.accountLabelsSpacing\r
-                        }\r
-                    }\r
-                    Label {\r
-                        id: accountServer\r
-                        width: Style.currentAccountLabelWidth\r
-                        height: Style.topLinePixelSize\r
-                        text: server\r
-                        elide: Text.ElideRight\r
-                        color: Style.ncTextColor\r
-                        font.pixelSize: Style.subLinePixelSize\r
-                    }\r
+                    visible: model.statusMessage !== ""\r
+                    text: statusMessage\r
+                    elide: Text.ElideRight\r
+                    color: Style.ncTextColor\r
+                    font.pixelSize: Style.subLinePixelSize\r
+                    leftPadding: Style.accountLabelsSpacing\r
                 }\r
             }\r
-        } // accountButton\r
+\r
+            Label {\r
+                id: accountServer\r
+                Layout.fillWidth: true\r
+                Layout.alignment: Qt.AlignLeft | Qt.AlignTop\r
+                verticalAlignment: Text.AlignTop\r
+                text: server\r
+                elide: Text.ElideRight\r
+                color: Style.ncTextColor\r
+                font.pixelSize: Style.subLinePixelSize\r
+            }\r
+        }\r
 \r
         Button {\r
             id: userMoreButton\r
-            Layout.preferredWidth: (userLineLayout.width * (1/6))\r
-            Layout.preferredHeight: userLineLayout.height\r
+            Layout.preferredWidth: Style.headerButtonIconSize\r
+            Layout.fillHeight: true\r
             flat: true\r
 \r
             icon.source: "qrc:///client/theme/more.svg"\r
@@ -151,19 +135,11 @@ MenuItem {
             Accessible.name: qsTr("Account actions")\r
             Accessible.onPressAction: userMoreButtonMouseArea.clicked()\r
 \r
-            onClicked: {\r
-                if (userMoreButtonMenu.visible) {\r
-                    userMoreButtonMenu.close()\r
-                } else {\r
-                    userMoreButtonMenu.popup()\r
-                }\r
-            }\r
-            background:\r
-                Rectangle {\r
-                color: userMoreButton.hovered || userMoreButton.visualFocus ? "grey" : "transparent"\r
-                opacity: 0.2\r
-                height: userMoreButton.height - 2\r
-                y: userMoreButton.y + 1\r
+            onClicked: userMoreButtonMenu.visible ? userMoreButtonMenu.close() : userMoreButtonMenu.popup()\r
+            background: Rectangle {\r
+                anchors.fill: parent\r
+                anchors.margins: 1\r
+                color: userMoreButton.hovered || userMoreButton.visualFocus ? Style.lightHover : "transparent"\r
             }\r
 \r
             AutoSizingMenu {\r