Skip to content

Commit

Permalink
Merge pull request #4797 from nextcloud/work/user-line-refactor
Browse files Browse the repository at this point in the history 
Refactor user line
  • Loading branch information
@claucambra
claucambra authored Aug 10, 2022
2 parents e92aa62 + 387dfa9 commit cce7ed7
Showing 1 changed file with 101 additions and 125 deletions.
226 changes: 101 additions & 125 deletions src/gui/tray/UserLine.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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 {
Expand Down

0 comments on commit cce7ed7

Please sign in to comment.