diff options
| author | Claudio Cambra <claudio.cambra@gmail.com> | 2022-08-01 14:56:50 +0300 |
|---|---|---|
| committer | Claudio Cambra <claudio.cambra@gmail.com> | 2022-08-01 14:56:50 +0300 |
| commit | 52866c973232e51956ee42d66a408b89d223a311 (patch) | |
| tree | 7fcaa998780ad4a8db49fb6aed740a7ce471d5c9 | |
| parent | d856e86e64759cb844dc97dbd767cdcee4ffe728 (diff) | |
Refactor user linework/user-line-refactor
Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>
| -rw-r--r-- | src/gui/tray/UserLine.qml | 226 | ||||
| -rw-r--r-- | src/gui/tray/Window.qml | 4 |
2 files changed, 105 insertions, 125 deletions
diff --git a/src/gui/tray/UserLine.qml b/src/gui/tray/UserLine.qml index e3d88888d..5c68d1029 100644 --- 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
import com.nextcloud.desktopclient 1.0
-MenuItem {
+AbstractButton {
id: userLine
- height: Style.trayWindowHeaderHeight
- Accessible.role: Accessible.MenuItem
- Accessible.name: qsTr("Account entry")
+ signal showUserStatusSelectorDialog(int id)
property variant dialog;
property variant comp;
- activeFocusOnTab: false
- signal showUserStatusSelectorDialog(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 {
diff --git a/src/gui/tray/Window.qml b/src/gui/tray/Window.qml index 7d4041f33..7ad5a873f 100644 --- a/src/gui/tray/Window.qml +++ b/src/gui/tray/Window.qml @@ -233,6 +233,10 @@ Window { id: userLineInstantiator
model: UserModel
delegate: UserLine {
+ onClicked: {
+ UserModel.currentUserId = id;
+ accountMenu.close();
+ }
onShowUserStatusSelectorDialog: {
userStatusSelectorDialogLoader.openDialog(model.index);
accountMenu.close();
|