From 410befa4bf95d9e6498c3f9e17693c98842cf2fd Mon Sep 17 00:00:00 2001 From: Carl Schwan Date: Fri, 21 Jul 2023 11:17:15 +0200 Subject: [PATCH] Port most Avatar usage to new KirigamiAddons Avatar (cherry picked from commit 847f41e1ada38e6b29c096f50a07a5d6073eadba) --- src/qml/Component/AvatarTabButton.qml | 3 +- src/qml/Component/ChatBox/CompletionMenu.qml | 41 ++++-- src/qml/Component/ChatBox/ReplyPane.qml | 5 +- src/qml/Component/LocationMapItem.qml | 3 +- src/qml/Component/Timeline/AvatarFlow.qml | 11 +- src/qml/Component/Timeline/ReplyComponent.qml | 3 +- src/qml/Component/Timeline/StateComponent.qml | 12 +- src/qml/Component/Timeline/StateDelegate.qml | 62 ++++++--- .../Component/Timeline/TimelineContainer.qml | 10 +- src/qml/Dialog/UserDetailDialog.qml | 3 +- .../Timeline/MessageDelegateContextMenu.qml | 7 +- src/qml/Page/InviteUserPage.qml | 67 ++++++---- src/qml/Page/JoinRoomPage.qml | 3 +- .../Page/RoomList/CollapsedRoomDelegate.qml | 3 +- src/qml/Page/RoomList/ContextMenu.qml | 3 +- src/qml/Page/RoomList/RoomDelegate.qml | 3 +- .../Page/RoomList/SpaceListContextMenu.qml | 3 +- src/qml/Page/RoomList/UserInfo.qml | 118 ++++++++++-------- src/qml/Panel/DirectChatDrawerHeader.qml | 63 +++++----- src/qml/Panel/GroupChatDrawerHeader.qml | 11 +- src/qml/Panel/RoomDrawer.qml | 3 +- 21 files changed, 263 insertions(+), 174 deletions(-) diff --git a/src/qml/Component/AvatarTabButton.qml b/src/qml/Component/AvatarTabButton.qml index 7850b28e9..437ae9e41 100644 --- a/src/qml/Component/AvatarTabButton.qml +++ b/src/qml/Component/AvatarTabButton.qml @@ -8,6 +8,7 @@ import QtQuick.Controls 2.15 as QQC2 import QtQuick.Templates 2.15 as T import org.kde.kirigami 2.20 as Kirigami import org.kde.kirigamiaddons.delegates 1.0 as Delegates +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents Delegates.RoundedItemDelegate { id: root @@ -30,7 +31,7 @@ Delegates.RoundedItemDelegate { onTapped: root.contextMenuRequested() } - contentItem: Kirigami.Avatar { + contentItem: KirigamiComponents.Avatar { source: root.source name: root.text } diff --git a/src/qml/Component/ChatBox/CompletionMenu.qml b/src/qml/Component/ChatBox/CompletionMenu.qml index 22e8eb37e..bc1de4a07 100644 --- a/src/qml/Component/ChatBox/CompletionMenu.qml +++ b/src/qml/Component/ChatBox/CompletionMenu.qml @@ -8,6 +8,8 @@ import QtQuick.Controls 2.15 as QQC2 import Qt.labs.qmlmodels 1.0 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.delegates 1.0 as Delegates +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -43,6 +45,7 @@ QQC2.Popup { rightPadding: 0 topPadding: 0 bottomPadding: 0 + implicitHeight: Math.min(completions.contentHeight, Kirigami.Units.gridUnit * 10) contentItem: ListView { @@ -53,23 +56,35 @@ QQC2.Popup { currentIndex: 0 keyNavigationWraps: true highlightMoveDuration: 100 - delegate: Kirigami.BasicListItem { - text: model.text - subtitle: model.subtitle ?? "" - labelItem.textFormat: Text.PlainText - subtitleItem.textFormat: Text.PlainText - leading: RowLayout { - Kirigami.Avatar { - visible: model.icon !== "invalid" - Layout.preferredWidth: height - Layout.fillHeight: true - source: model.icon === "invalid" ? "" : ("image://mxc/" + model.icon) - name: model.text + delegate: Delegates.RoundedItemDelegate { + id: completionDelegate + + required property int index + required property string displayName + required property string subtitle + required property string iconName + + text: displayName + + contentItem: RowLayout { + KirigamiComponents.Avatar { + visible: completionDelegate.iconName !== "invalid" + Layout.preferredWidth: Kirigami.Units.iconSizes.medium + Layout.preferredHeight: Kirigami.Units.iconSizes.medium + source: completionDelegate.iconName === "invalid" ? "" : ("image://" + completionDelegate.iconName) + name: completionDelegate.text + } + Delegates.SubtitleContentItem { + itemDelegate: completionDelegate + labelItem.textFormat: Text.PlainText + subtitle: completionDelegate.subtitle ?? "" + subtitleItem.textFormat: Text.PlainText } } - onClicked: completionMenu.chatDocumentHandler.complete(model.index) + onClicked: completionMenu.chatDocumentHandler.complete(completionDelegate.index) } } + background: Rectangle { color: Kirigami.Theme.backgroundColor } diff --git a/src/qml/Component/ChatBox/ReplyPane.qml b/src/qml/Component/ChatBox/ReplyPane.qml index 16ed5cc5c..5c268608e 100644 --- a/src/qml/Component/ChatBox/ReplyPane.qml +++ b/src/qml/Component/ChatBox/ReplyPane.qml @@ -6,7 +6,8 @@ import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 as QQC2 -import org.kde.kirigami 2.14 as Kirigami +import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -40,7 +41,7 @@ GridLayout { implicitWidth: Kirigami.Units.smallSpacing color: userColor } - Kirigami.Avatar { + KirigamiComponents.Avatar { id: replyAvatar implicitWidth: Kirigami.Units.iconSizes.small diff --git a/src/qml/Component/LocationMapItem.qml b/src/qml/Component/LocationMapItem.qml index be59d27d8..f069e34ee 100644 --- a/src/qml/Component/LocationMapItem.qml +++ b/src/qml/Component/LocationMapItem.qml @@ -9,6 +9,7 @@ import QtLocation 5.15 import QtPositioning 5.15 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -44,7 +45,7 @@ MapQuickItem { isMask: true color: parent.color } - Kirigami.Avatar { + KirigamiComponents.Avatar { anchors.centerIn: parent anchors.verticalCenterOffset: -parent.height / 8 visible: root.asset === "m.self" diff --git a/src/qml/Component/Timeline/AvatarFlow.qml b/src/qml/Component/Timeline/AvatarFlow.qml index df63da4cb..86c93d61f 100644 --- a/src/qml/Component/Timeline/AvatarFlow.qml +++ b/src/qml/Component/Timeline/AvatarFlow.qml @@ -5,6 +5,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 as QQC2 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents Flow { id: root @@ -17,11 +18,11 @@ Flow { spacing: -avatarSize / 2 Repeater { id: avatarFlowRepeater - delegate: Kirigami.Avatar { - topInset: Kirigami.Units.smallSpacing / 2 - topPadding: Kirigami.Units.smallSpacing / 2 - implicitWidth: avatarSize - implicitHeight: avatarSize + Kirigami.Units.smallSpacing / 2 + delegate: KirigamiComponents.Avatar { + required property var modelData + + implicitWidth: root.avatarSize + implicitHeight: root.avatarSize name: modelData.displayName source: modelData.avatarSource diff --git a/src/qml/Component/Timeline/ReplyComponent.qml b/src/qml/Component/Timeline/ReplyComponent.qml index b402b3f46..708098024 100644 --- a/src/qml/Component/Timeline/ReplyComponent.qml +++ b/src/qml/Component/Timeline/ReplyComponent.qml @@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -93,7 +94,7 @@ Item { implicitWidth: Kirigami.Units.smallSpacing color: root.author.color } - Kirigami.Avatar { + KirigamiComponents.Avatar { id: replyAvatar implicitWidth: Kirigami.Units.iconSizes.small diff --git a/src/qml/Component/Timeline/StateComponent.qml b/src/qml/Component/Timeline/StateComponent.qml index f6df3e455..fd59cc973 100644 --- a/src/qml/Component/Timeline/StateComponent.qml +++ b/src/qml/Component/Timeline/StateComponent.qml @@ -6,6 +6,7 @@ import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -21,14 +22,23 @@ RowLayout { implicitHeight: Math.max(label.contentHeight, stateAvatar.implicitHeight) - Kirigami.Avatar { + KirigamiComponents.Avatar { id: stateAvatar + Layout.preferredWidth: Kirigami.Units.iconSizes.small Layout.preferredHeight: Kirigami.Units.iconSizes.small name: root.name color: root.color + Rectangle { + radius: height + height: 4 + width: 4 + color: root.color + anchors.centerIn: parent + } + MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor diff --git a/src/qml/Component/Timeline/StateDelegate.qml b/src/qml/Component/Timeline/StateDelegate.qml index 84748c50a..1cd0fc6b7 100644 --- a/src/qml/Component/Timeline/StateDelegate.qml +++ b/src/qml/Component/Timeline/StateDelegate.qml @@ -6,6 +6,7 @@ import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -71,34 +72,61 @@ QQC2.Control { Flow { visible: columnLayout.folded spacing: -Kirigami.Units.iconSizes.small / 2 + Repeater { model: authorList - delegate: Kirigami.Avatar { - topInset: Kirigami.Units.smallSpacing / 2 - topPadding: Kirigami.Units.smallSpacing / 2 + delegate: Item { + id: avatarDelegate + + required property var modelData + implicitWidth: Kirigami.Units.iconSizes.small implicitHeight: Kirigami.Units.iconSizes.small + Kirigami.Units.smallSpacing / 2 - name: modelData.displayName - source: modelData.avatarSource - color: modelData.color + KirigamiComponents.Avatar { + y: Kirigami.Units.smallSpacing / 2 + + implicitWidth: Kirigami.Units.iconSizes.small + implicitHeight: Kirigami.Units.iconSizes.small + + name: parent.modelData.displayName + source: parent.modelData.avatarSource + color: parent.modelData.color + + Rectangle { + radius: height + height: 4 + width: 4 + color: avatarDelegate.modelData.color + anchors.centerIn: parent + } + } } } + QQC2.Label { id: excessAuthorsLabel + text: model.excessAuthors visible: model.excessAuthors !== "" color: Kirigami.Theme.textColor horizontalAlignment: Text.AlignHCenter background: Kirigami.ShadowedRectangle { - color: Kirigami.Theme.backgroundColor Kirigami.Theme.inherit: false Kirigami.Theme.colorSet: Kirigami.Theme.View + + color: Kirigami.Theme.backgroundColor radius: height / 2 - shadow.size: Kirigami.Units.smallSpacing - shadow.color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10) - border.color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15) - border.width: 1 + + shadow { + size: Kirigami.Units.smallSpacing + color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.10) + } + + border { + color: Kirigami.ColorUtils.tintWithAlpha(color, Kirigami.Theme.textColor, 0.15) + width: 1 + } } height: Kirigami.Units.iconSizes.small + Kirigami.Units.smallSpacing @@ -125,13 +153,13 @@ QQC2.Control { visible: !columnLayout.folded } QQC2.ToolButton { - icon.name: (!columnLayout.folded ? "go-up" : "go-down") - icon.width: Kirigami.Units.iconSizes.small - icon.height: Kirigami.Units.iconSizes.small - - onClicked: { - columnLayout.toggleFolded() + icon { + name: (!columnLayout.folded ? "go-up" : "go-down") + width: Kirigami.Units.iconSizes.small + height: Kirigami.Units.iconSizes.small } + + onClicked: columnLayout.toggleFolded() } } Repeater { diff --git a/src/qml/Component/Timeline/TimelineContainer.qml b/src/qml/Component/Timeline/TimelineContainer.qml index b06fdf216..b30411b7e 100644 --- a/src/qml/Component/Timeline/TimelineContainer.qml +++ b/src/qml/Component/Timeline/TimelineContainer.qml @@ -6,6 +6,7 @@ import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -353,15 +354,10 @@ ColumnLayout { } } - Kirigami.Avatar { + KirigamiComponents.Avatar { id: avatar - width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 + Kirigami.Units.smallSpacing * 2 : 0 + width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2: 0 height: width - padding: Kirigami.Units.smallSpacing - topInset: Kirigami.Units.smallSpacing - bottomInset: Kirigami.Units.smallSpacing - leftInset: Kirigami.Units.smallSpacing - rightInset: Kirigami.Units.smallSpacing anchors { left: parent.left leftMargin: Kirigami.Units.smallSpacing diff --git a/src/qml/Dialog/UserDetailDialog.qml b/src/qml/Dialog/UserDetailDialog.qml index bc916de3d..7303cd05e 100644 --- a/src/qml/Dialog/UserDetailDialog.qml +++ b/src/qml/Dialog/UserDetailDialog.qml @@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.20 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -37,7 +38,7 @@ Kirigami.OverlaySheet { Layout.bottomMargin: Kirigami.Units.largeSpacing spacing: Kirigami.Units.largeSpacing - Kirigami.Avatar { + KirigamiComponents.Avatar { Layout.preferredWidth: Kirigami.Units.iconSizes.huge Layout.preferredHeight: Kirigami.Units.iconSizes.huge diff --git a/src/qml/Menu/Timeline/MessageDelegateContextMenu.qml b/src/qml/Menu/Timeline/MessageDelegateContextMenu.qml index 8b8d5576c..f9c072901 100644 --- a/src/qml/Menu/Timeline/MessageDelegateContextMenu.qml +++ b/src/qml/Menu/Timeline/MessageDelegateContextMenu.qml @@ -6,6 +6,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -222,11 +223,11 @@ Loader { Layout.fillWidth: true Layout.margins: Kirigami.Units.largeSpacing spacing: Kirigami.Units.largeSpacing - Kirigami.Avatar { + KirigamiComponents.Avatar { id: avatar source: author.avatarSource - Layout.preferredWidth: Kirigami.Units.gridUnit * 3 - Layout.preferredHeight: Kirigami.Units.gridUnit * 3 + Layout.preferredWidth: Kirigami.Units.gridUnit * 2 + Layout.preferredHeight: Kirigami.Units.gridUnit * 2 Layout.alignment: Qt.AlignTop } ColumnLayout { diff --git a/src/qml/Page/InviteUserPage.qml b/src/qml/Page/InviteUserPage.qml index 398a286c8..4c17ecd15 100644 --- a/src/qml/Page/InviteUserPage.qml +++ b/src/qml/Page/InviteUserPage.qml @@ -6,6 +6,8 @@ import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.delegates 1.0 as Delegates +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -68,38 +70,51 @@ Kirigami.ScrollablePage { text: i18n("No users available") } - delegate: Kirigami.BasicListItem { + delegate: Delegates.RoundedItemDelegate { id: delegate + + required property string userID + required property string name + required property string avatar + property bool inRoom: room && room.containsUser(userID) - label: model.name - subtitle: model.userID + text: name - leading: Kirigami.Avatar { - implicitWidth: height - source: model.avatar ? ("image://mxc/" + model.avatar) : "" - name: model.name - } - trailing: QQC2.ToolButton { - id: inviteButton - icon.name: "document-send" - text: i18n("Send invitation") - checkable: true - checked: inRoom - opacity: inRoom ? 0.5 : 1 - - onToggled: { - if (inRoom) { - checked = true - } else { - room.inviteToRoom(model.userID); - applicationWindow().pageStack.layers.pop(); - } + contentItem: RowLayout { + KirigamiComponents.Avatar { + Layout.preferredWidth: Kirigami.Units.iconSizes.medium + Layout.preferredHeight: Kirigami.Units.iconSizes.medium + source: delegate.avatar ? ("image://mxc/" + delegate.avatar) : "" + name: delegate.name } - QQC2.ToolTip.text: !inRoom ? text : i18n("User is either already a member or has been invited") - QQC2.ToolTip.visible: inviteButton.hovered - QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay + Delegates.SubtitleContentItem { + itemDelegate: delegate + subtitle: delegate.userID + } + + QQC2.ToolButton { + id: inviteButton + icon.name: "document-send" + text: i18n("Send invitation") + checkable: true + checked: inRoom + opacity: inRoom ? 0.5 : 1 + + onToggled: { + if (inRoom) { + checked = true + } else { + room.inviteToRoom(delegate.userID); + applicationWindow().pageStack.layers.pop(); + } + } + + QQC2.ToolTip.text: !inRoom ? text : i18n("User is either already a member or has been invited") + QQC2.ToolTip.visible: inviteButton.hovered + QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay + } } } } diff --git a/src/qml/Page/JoinRoomPage.qml b/src/qml/Page/JoinRoomPage.qml index 1be0d6eee..1e7574f01 100644 --- a/src/qml/Page/JoinRoomPage.qml +++ b/src/qml/Page/JoinRoomPage.qml @@ -8,6 +8,7 @@ import QtQuick.Layouts 1.15 import Qt.labs.qmlmodels 1.0 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -202,7 +203,7 @@ Kirigami.ScrollablePage { applicationWindow().pageStack.layers.pop(); } contentItem: RowLayout { - Kirigami.Avatar { + KirigamiComponents.Avatar { Layout.preferredWidth: Kirigami.Units.gridUnit * 2 Layout.preferredHeight: Kirigami.Units.gridUnit * 2 diff --git a/src/qml/Page/RoomList/CollapsedRoomDelegate.qml b/src/qml/Page/RoomList/CollapsedRoomDelegate.qml index f0e3acc87..df6e530d0 100644 --- a/src/qml/Page/RoomList/CollapsedRoomDelegate.qml +++ b/src/qml/Page/RoomList/CollapsedRoomDelegate.qml @@ -7,6 +7,7 @@ import QtQuick.Layouts 1.15 import QtQml.Models 2.15 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.kitemmodels 1.0 import org.kde.neochat 1.0 @@ -32,7 +33,7 @@ QQC2.ItemDelegate { visible: root.categoryVisible || filterText.length > 0 || Config.mergeRoomList - contentItem: Kirigami.Avatar { + contentItem: KirigamiComponents.Avatar { source: root.avatar ? `image://mxc/${root.avatar}` : "" name: root.displayName diff --git a/src/qml/Page/RoomList/ContextMenu.qml b/src/qml/Page/RoomList/ContextMenu.qml index 700ef6e99..20b259176 100644 --- a/src/qml/Page/RoomList/ContextMenu.qml +++ b/src/qml/Page/RoomList/ContextMenu.qml @@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.19 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -157,7 +158,7 @@ Loader { Layout.fillWidth: true Layout.margins: Kirigami.Units.largeSpacing spacing: Kirigami.Units.largeSpacing - Kirigami.Avatar { + KirigamiComponents.Avatar { id: avatar source: room.avatarMediaId ? ("image://mxc/" + room.avatarMediaId) : "" name: room.displayName diff --git a/src/qml/Page/RoomList/RoomDelegate.qml b/src/qml/Page/RoomList/RoomDelegate.qml index dab851d80..768bcb495 100644 --- a/src/qml/Page/RoomList/RoomDelegate.qml +++ b/src/qml/Page/RoomList/RoomDelegate.qml @@ -8,6 +8,7 @@ import QtQml.Models 2.15 import org.kde.kirigami 2.15 as Kirigami import org.kde.kirigamiaddons.delegates 1.0 as Delegates +import org.kde.kirigamiaddons.labs.components 1.0 as Components import org.kde.kitemmodels 1.0 import org.kde.neochat 1.0 @@ -39,7 +40,7 @@ Delegates.RoundedItemDelegate { } contentItem: RowLayout { - Kirigami.Avatar { + Components.Avatar { source: root.avatar ? "image://mxc/" + root.avatar : "" name: root.displayName implicitWidth: visible ? height : 0 diff --git a/src/qml/Page/RoomList/SpaceListContextMenu.qml b/src/qml/Page/RoomList/SpaceListContextMenu.qml index 322256c59..40334c227 100644 --- a/src/qml/Page/RoomList/SpaceListContextMenu.qml +++ b/src/qml/Page/RoomList/SpaceListContextMenu.qml @@ -7,6 +7,7 @@ import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.19 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -78,7 +79,7 @@ Loader { Layout.fillWidth: true Layout.margins: Kirigami.Units.largeSpacing spacing: Kirigami.Units.largeSpacing - Kirigami.Avatar { + KirigamiComponents.Avatar { id: avatar source: room.avatarMediaId ? ("image://mxc/" + room.avatarMediaId) : "" Layout.preferredWidth: Kirigami.Units.gridUnit * 3 diff --git a/src/qml/Page/RoomList/UserInfo.qml b/src/qml/Page/RoomList/UserInfo.qml index 6510497d2..8c5d529ac 100644 --- a/src/qml/Page/RoomList/UserInfo.qml +++ b/src/qml/Page/RoomList/UserInfo.qml @@ -5,6 +5,8 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.20 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents +import org.kde.kirigamiaddons.delegates 1.0 as Delegates import org.kde.neochat 1.0 @@ -27,34 +29,28 @@ QQC2.ToolBar { header: Kirigami.Separator {} - footer: Kirigami.BasicListItem { + footer: Delegates.RoundedItemDelegate { + id: addButton width: parent.width - highlighted: focus - background: Rectangle { - id: background - color: addAccount.backgroundColor - - Rectangle { - anchors.fill: parent - visible: !Kirigami.Settings.tabletMode && addAccount.hoverEnabled - color: addAccount.activeBackgroundColor - opacity: { - if ((addAccount.highlighted || addAccount.ListView.isCurrentItem) && !addAccount.pressed) { - return .6 - } else if (addAccount.hovered && !addAccount.pressed) { - return .3 - } else { - return 0 - } - } - } - } + highlighted: focus || (addAccount.highlighted || addAccount.ListView.isCurrentItem) && !addAccount.pressed Component.onCompleted: userInfo.addAccount = this - icon: "list-add" + icon { + name: "list-add" + width: Kirigami.Units.iconSizes.smallMedium + height: Kirigami.Units.iconSizes.smallMedium + } text: i18n("Add Account") - subtitle: i18n("Log in to an existing account") + contentItem: Delegates.SubtitleContentItem { + itemDelegate: parent + subtitle: i18n("Log in to an existing account") + labelItem.textFormat: Text.PlainText + subtitleItem.textFormat: Text.PlainText + } + onClicked: { - pageStack.pushDialogLayer("qrc:/WelcomePage.qml", {}, {title: i18nc("@title:window", "Login")}) + pageStack.pushDialogLayer("qrc:/WelcomePage.qml", {}, { + title: i18nc("@title:window", "Login"), + }); if (switchUserButton.checked) { switchUserButton.checked = false } @@ -101,26 +97,36 @@ QQC2.ToolBar { width: parent.width Layout.preferredHeight: contentHeight - delegate: Kirigami.BasicListItem { - leftPadding: topPadding - leading: Kirigami.Avatar { - implicitWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing - implicitHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing - sourceSize { - width: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing - height: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing - } - source: model.connection.localUser.avatarMediaId ? ("image://mxc/" + model.connection.localUser.avatarMediaId) : "" - name: model.connection.localUser.displayName ?? model.connection.localUser.id - } + delegate: Delegates.RoundedItemDelegate { + id: userDelegate + + required property var connection + width: parent.width - text: model.connection.localUser.displayName - labelItem.textFormat: Text.PlainText - subtitleItem.textFormat: Text.PlainText - subtitle: model.connection.localUser.id + text: connection.localUser.displayName + + contentItem: RowLayout { + KirigamiComponents.Avatar { + implicitWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing + implicitHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing + sourceSize { + width: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing + height: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing + } + source: userDelegate.connection.localUser.avatarMediaId ? ("image://mxc/" + userDelegate.connection.localUser.avatarMediaId) : "" + name: userDelegate.connection.localUser.displayName ?? userDelegate.connection.localUser.id + } + + Delegates.SubtitleContentItem { + itemDelegate: userDelegate + subtitle: userDelegate.connection.localUser.id + labelItem.textFormat: Text.PlainText + subtitleItem.textFormat: Text.PlainText + } + } onClicked: { - Controller.activeConnection = model.connection + Controller.activeConnection = userDelegate.connection if (switchUserButton.checked) { switchUserButton.checked = false } @@ -139,29 +145,31 @@ QQC2.ToolBar { Layout.bottomMargin: Kirigami.Units.smallSpacing Layout.minimumHeight: Kirigami.Units.gridUnit * 2 - 2 // HACK: -2 here is to ensure the ChatBox and the UserInfo have the same height - Kirigami.Avatar { - readonly property string mediaId: Controller.activeConnection.localUser.avatarMediaId - + QQC2.AbstractButton { Layout.preferredWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing Layout.preferredHeight: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing Layout.leftMargin: Kirigami.Units.largeSpacing - source: mediaId ? ("image://mxc/" + mediaId) : "" - name: Controller.activeConnection.localUser.displayName ?? Controller.activeConnection.localUser.id - actions.main: Kirigami.Action { - text: i18n("Edit this account") - icon.name: "document-edit" - onTriggered: pageStack.pushDialogLayer(Qt.resolvedUrl('qrc:/AccountEditorPage.qml'), { - connection: Controller.activeConnection - }, { - title: i18n("Account editor") - }); - } TapHandler { acceptedButtons: Qt.RightButton acceptedDevices: PointerDevice.Mouse onTapped: accountMenu.open() } + + text: i18n("Edit this account") + + onClicked: pageStack.pushDialogLayer(Qt.resolvedUrl('qrc:/AccountEditorPage.qml'), { + connection: Controller.activeConnection + }, { + title: i18n("Account editor") + }); + + contentItem: KirigamiComponents.Avatar { + readonly property string mediaId: Controller.activeConnection.localUser.avatarMediaId + + source: mediaId ? ("image://mxc/" + mediaId) : "" + name: Controller.activeConnection.localUser.displayName ?? Controller.activeConnection.localUser.id + } } ColumnLayout { diff --git a/src/qml/Panel/DirectChatDrawerHeader.qml b/src/qml/Panel/DirectChatDrawerHeader.qml index 3dd153f86..a2eb4ca9e 100644 --- a/src/qml/Panel/DirectChatDrawerHeader.qml +++ b/src/qml/Panel/DirectChatDrawerHeader.qml @@ -6,6 +6,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.15 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -18,43 +19,45 @@ ColumnLayout { Layout.fillWidth: true Layout.preferredHeight: Kirigami.Units.largeSpacing * 2 } - Kirigami.Avatar { + + QQC2.AbstractButton { Layout.preferredWidth: Math.round(Kirigami.Units.gridUnit * 3.5) Layout.preferredHeight: Math.round(Kirigami.Units.gridUnit * 3.5) Layout.alignment: Qt.AlignHCenter - name: room ? room.displayName : "" - source: room ? ("image://mxc/" + room.avatarMediaId) : "" - - Rectangle { - visible: room.usesEncryption - color: Kirigami.Theme.backgroundColor - - width: Kirigami.Units.gridUnit - height: Kirigami.Units.gridUnit - anchors.bottom: parent.bottom - anchors.right: parent.right - - radius: Math.round(width / 2) - - Kirigami.Icon { - source: "channel-secure-symbolic" - anchors.fill: parent + onClicked: { + const popup = userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, { + room: room, + user: room.getUser(room.directChatRemoteUser.id), + }) + popup.closed.connect(() => { + userListItem.highlighted = false + }) + if (roomDrawer.modal) { + roomDrawer.close() } + popup.open() } - actions.main: Kirigami.Action { - onTriggered: { - const popup = userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, { - room: room, - user: room.getUser(room.directChatRemoteUser.id), - }) - popup.closed.connect(() => { - userListItem.highlighted = false - }) - if (roomDrawer.modal) { - roomDrawer.close() + + contentItem: KirigamiComponents.Avatar { + name: room ? room.displayName : "" + source: room ? ("image://mxc/" + room.avatarMediaId) : "" + + Rectangle { + visible: room.usesEncryption + color: Kirigami.Theme.backgroundColor + + width: Kirigami.Units.gridUnit + height: Kirigami.Units.gridUnit + anchors.bottom: parent.bottom + anchors.right: parent.right + + radius: Math.round(width / 2) + + Kirigami.Icon { + source: "channel-secure-symbolic" + anchors.fill: parent } - popup.open() } } } diff --git a/src/qml/Panel/GroupChatDrawerHeader.qml b/src/qml/Panel/GroupChatDrawerHeader.qml index a6c14fd0a..c0e443604 100644 --- a/src/qml/Panel/GroupChatDrawerHeader.qml +++ b/src/qml/Panel/GroupChatDrawerHeader.qml @@ -6,6 +6,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 as QQC2 import QtQuick.Layouts 1.15 import org.kde.kirigami 2.20 as Kirigami +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.neochat 1.0 @@ -19,9 +20,9 @@ ColumnLayout { Layout.leftMargin: Kirigami.Units.largeSpacing spacing: Kirigami.Units.largeSpacing - Kirigami.Avatar { - Layout.preferredWidth: Kirigami.Units.gridUnit * 3.5 - Layout.preferredHeight: Kirigami.Units.gridUnit * 3.5 + KirigamiComponents.Avatar { + Layout.preferredWidth: Kirigami.Units.iconSizes.large + Layout.preferredHeight: Kirigami.Units.iconSizes.large name: room ? room.displayName : "" source: room && room.avatarMediaId ? ("image://mxc/" + room.avatarMediaId) : "" @@ -47,6 +48,7 @@ ColumnLayout { } } + ColumnLayout { Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter @@ -54,14 +56,13 @@ ColumnLayout { Kirigami.Heading { Layout.fillWidth: true - type: Kirigami.Heading.Type.Primary - wrapMode: QQC2.Label.Wrap text: room ? room.displayName : i18n("No name") textFormat: Text.PlainText } Kirigami.SelectableLabel { Layout.fillWidth: true + font: Kirigami.Theme.smallFont textFormat: TextEdit.PlainText text: room && room.canonicalAlias ? room.canonicalAlias : i18n("No Canonical Alias") } diff --git a/src/qml/Panel/RoomDrawer.qml b/src/qml/Panel/RoomDrawer.qml index f0da03f7a..9aa6f1363 100644 --- a/src/qml/Panel/RoomDrawer.qml +++ b/src/qml/Panel/RoomDrawer.qml @@ -8,6 +8,7 @@ import QtQuick.Layouts 1.15 import org.kde.kirigami 2.20 as Kirigami import org.kde.kirigamiaddons.delegates 1.0 as Delegates +import org.kde.kirigamiaddons.labs.components 1.0 as KirigamiComponents import org.kde.kitemmodels 1.0 import org.kde.neochat 1.0 @@ -302,7 +303,7 @@ Kirigami.OverlayDrawer { } contentItem: RowLayout { - Kirigami.Avatar { + KirigamiComponents.Avatar { implicitWidth: height sourceSize { height: Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing * 2.5