Refactor user line

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

src/gui/tray/UserLine.qml

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