diff --git a/imports/Spectral/Component/Timeline/TextDelegate.qml b/imports/Spectral/Component/Timeline/TextDelegate.qml index cf8765746..56298cfec 100644 --- a/imports/Spectral/Component/Timeline/TextDelegate.qml +++ b/imports/Spectral/Component/Timeline/TextDelegate.qml @@ -6,7 +6,6 @@ Text { text: "" + display font { - pixelSize: Kirigami.Theme.defaultFont.pixelSize * 1.2 family: Kirigami.Theme.defaultFont.family } diff --git a/imports/Spectral/Dialog/InviteUserDialog.qml b/imports/Spectral/Dialog/InviteUserDialog.qml index 9735ebca9..d5a72bcd4 100644 --- a/imports/Spectral/Dialog/InviteUserDialog.qml +++ b/imports/Spectral/Dialog/InviteUserDialog.qml @@ -92,7 +92,7 @@ Dialog { Layout.fillHeight: true source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : "" - hint: name + name: name } ColumnLayout { diff --git a/imports/Spectral/Panel/RoomDrawer.qml b/imports/Spectral/Panel/RoomDrawer.qml index fc7582336..bf8149de9 100644 --- a/imports/Spectral/Panel/RoomDrawer.qml +++ b/imports/Spectral/Panel/RoomDrawer.qml @@ -3,6 +3,8 @@ import QtQuick.Controls 2.12 import QtQuick.Controls.Material 2.12 import QtQuick.Layouts 1.12 +import org.kde.kirigami 2.13 as Kirigami + import Spectral.Component 2.0 import Spectral.Dialog 2.0 import Spectral.Effect 2.0 @@ -10,16 +12,17 @@ import Spectral.Setting 0.1 import Spectral 0.1 -Drawer { +Kirigami.OverlayDrawer { property var room id: roomDrawer + enabled: true - edge: Qt.RightEdge + edge: Qt.application.layoutDirection == Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge - ColumnLayout { - anchors.fill: parent - anchors.margins: 24 + padding: 0 + contentItem: ColumnLayout { + implicitWidth: Kirigami.Units.gridUnit * 15 // TODO FIXME Component { id: fullScreenImage @@ -32,20 +35,12 @@ Drawer { spacing: 16 - Avatar { + Kirigami.Avatar { Layout.preferredWidth: 72 Layout.preferredHeight: 72 - hint: room ? room.displayName : "No name" - source: room ? room.avatarMediaId : null - - RippleEffect { - anchors.fill: parent - - circular: true - - onClicked: fullScreenImage.createObject(parent, {"filename": room.diaplayName, "localPath": room.urlToMxcUrl(room.avatarUrl)}).showFullScreen() - } + name: room ? room.displayName : "No name" + source: room ? "image://mxc/" + room.avatarMediaId : null } ColumnLayout { @@ -71,88 +66,21 @@ Drawer { } } - MenuSeparator { + Kirigami.Separator { Layout.fillWidth: true } Control { Layout.fillWidth: true - - padding: 0 - - contentItem: ColumnLayout { - RowLayout { - Layout.fillWidth: true - - visible: room && room.canonicalAlias - - spacing: 8 - - MaterialIcon { - Layout.preferredWidth: 32 - Layout.preferredHeight: 32 - Layout.alignment: Qt.AlignTop - - icon: "\ue2bc" - color: MPalette.lighter - } - - ColumnLayout { - Layout.fillWidth: true - - Label { - Layout.fillWidth: true - - wrapMode: Label.Wrap - text: room && room.canonicalAlias ? room.canonicalAlias : "No Canonical Alias" - color: MPalette.accent - } - - Label { - Layout.fillWidth: true - - wrapMode: Label.Wrap - text: "Main Alias" - color: MPalette.lighter - } - } + contentItem: Kirigami.FormLayout { + Label { + Kirigami.FormData.label: "Main Alias" + text: room && room.canonicalAlias ? room.canonicalAlias : "No Canonical Alias" } - - RowLayout { - Layout.fillWidth: true - - spacing: 8 - - MaterialIcon { - Layout.preferredWidth: 32 - Layout.preferredHeight: 32 - Layout.alignment: Qt.AlignTop - - icon: "\ue88f" - color: MPalette.lighter - } - - ColumnLayout { - Layout.fillWidth: true - - Label { - Layout.fillWidth: true - - wrapMode: Label.Wrap - text: room && room.topic ? room.topic : "No Topic" - color: MPalette.foreground - maximumLineCount: 5 - elide: Text.ElideRight - } - - Label { - Layout.fillWidth: true - - wrapMode: Label.Wrap - text: "Topic" - color: MPalette.lighter - } - } + Label { + Kirigami.FormData.label: "Topic" + text: room && room.topic ? room.topic : "No Topic" + wrapMode: Text.WordWrap } } @@ -161,7 +89,7 @@ Drawer { } } - MenuSeparator { + Kirigami.Separator { Layout.fillWidth: true } @@ -169,13 +97,10 @@ Drawer { Layout.fillWidth: true spacing: 8 - - MaterialIcon { - Layout.preferredWidth: 32 - Layout.preferredHeight: 32 - - icon: "\ue7ff" - color: MPalette.lighter + Kirigami.Icon { + Layout.preferredWidth: Kirigami.Units.gridUnit * 2 + Layout.preferredHeight: Kirigami.Units.gridUnit * 2 + source: "user-others" } Label { @@ -183,17 +108,12 @@ Drawer { wrapMode: Label.Wrap text: room ? room.totalMemberCount + " Members" : "No Member Count" - color: MPalette.lighter } ToolButton { - Layout.preferredWidth: 32 - Layout.preferredHeight: 32 - - contentItem: MaterialIcon { - icon: "\ue145" - color: MPalette.lighter - } + Layout.preferredWidth: Kirigami.Units.gridUnit + Layout.preferredHeight: Kirigami.Units.gridUnit + icon.name: "list-user-add" onClicked: inviteUserDialog.createObject(ApplicationWindow.overlay, {"controller": spectralController, "room": room}).open() } @@ -222,12 +142,12 @@ Drawer { anchors.margins: 8 spacing: 12 - Avatar { + Kirigami.Avatar { Layout.preferredWidth: height Layout.fillHeight: true - source: avatar - hint: name + source: "image://mxc/" + avatar + name: name } Label { diff --git a/imports/Spectral/Panel/RoomListPanel.qml b/imports/Spectral/Panel/RoomListPanel.qml index 082f5c9cb..1ef75e62a 100644 --- a/imports/Spectral/Panel/RoomListPanel.qml +++ b/imports/Spectral/Panel/RoomListPanel.qml @@ -1,5 +1,5 @@ import QtQuick 2.12 -import QtQuick.Controls 2.12 as Controls +import QtQuick.Controls 2.12 as QQC2 import QtQuick.Layouts 1.12 import org.kde.kirigami 2.13 as Kirigami @@ -11,6 +11,7 @@ import Spectral 0.1 Kirigami.ScrollablePage { id: page + property var roomListModel property var enteredRoom property var searchText @@ -28,17 +29,13 @@ Kirigami.ScrollablePage { onTextChanged: page.searchText = text } - ListView { id: messageListView - model: SortFilterProxyModel { - id: sortedRoomListModel - + model: SortFilterProxyModel { sourceModel: roomListModel - proxyRoles: ExpressionRole { - name: "display" + name: "categoryName" expression: { switch (category) { case 1: return "Invited" @@ -63,7 +60,7 @@ Kirigami.ScrollablePage { } }, RoleSorter { - roleName: "lastActiveTime" + roleName: "name" sortOrder: Qt.DescendingOrder } ] @@ -74,27 +71,21 @@ Kirigami.ScrollablePage { }, RegExpFilter { roleName: "name" - pattern: searchText + pattern: page.searchText caseSensitivity: Qt.CaseInsensitive } ] } - delegate: Kirigami.SwipeListItem { - padding: Kirigami.Units.largeSpacing - actions: [ - Kirigami.Action { - text:"Action for buttons" - iconName: "bookmarks" - onTriggered: print("Action 1 clicked") - }, - Kirigami.Action { - text:"Action 2" - iconName: "folder" - enabled: false - } - ] + section.property: "categoryName" + section.delegate: Kirigami.ListSectionHeader { + label: section + } + + delegate: Kirigami.AbstractListItem { + topPadding: Kirigami.Units.largeSpacing + bottomPadding: Kirigami.Units.largeSpacing contentItem: RowLayout { spacing: Kirigami.Units.largeSpacing @@ -114,24 +105,23 @@ Kirigami.ScrollablePage { spacing: Kirigami.Units.smallSpacing - Controls.Label { + QQC2.Label { Layout.fillWidth: true Layout.fillHeight: true - - text: name || "No Name" - font.pixelSize: 16 + text: name ?? "" + font.pixelSize: 15 font.bold: unreadCount >= 0 elide: Text.ElideRight wrapMode: Text.NoWrap } - Controls.Label { + QQC2.Label { Layout.fillWidth: true Layout.fillHeight: true Layout.alignment: Qt.AlignHCenter text: (lastEvent == "" ? topic : lastEvent).replace(/(\r\n\t|\n|\r\t)/gm," ") - font.pixelSize: 13 + font.pixelSize: 12 elide: Text.ElideRight wrapMode: Text.NoWrap } diff --git a/imports/Spectral/Panel/RoomPanelInput.qml b/imports/Spectral/Panel/RoomPanelInput.qml index 86c27dd3a..3e6a85324 100644 --- a/imports/Spectral/Panel/RoomPanelInput.qml +++ b/imports/Spectral/Panel/RoomPanelInput.qml @@ -37,7 +37,6 @@ Control { Rectangle { anchors.fill: parent color: Kirigami.Theme.focusColor - visible: chatTextInput.activeFocus } anchors { left: parent.left @@ -90,8 +89,6 @@ Control { text: "" + replyContent - font.family: window.font.family - font.pixelSize: 14 selectByMouse: true readOnly: true wrapMode: Label.Wrap @@ -242,9 +239,7 @@ Control { visible: isReply - contentItem: MaterialIcon { - icon: "\ue5cd" - } + icon.name: "dialog-cancel" onClicked: clearReply() } @@ -308,7 +303,6 @@ Control { height: parent.height opacity: 0.2 - color: Material.accent } Timer { diff --git a/qml/main.qml b/qml/main.qml index 468af2fd9..b72d191cf 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -1,6 +1,6 @@ -import QtQuick 2.12 -import QtQuick.Controls 2.12 as Controls -import QtQuick.Layouts 1.12 +import QtQuick 2.14 +import QtQuick.Controls 2.14 as Controls +import QtQuick.Layouts 1.14 import org.kde.kirigami 2.12 as Kirigami @@ -10,14 +10,35 @@ import Spectral.Panel 2.0 Kirigami.ApplicationWindow { id: root + property var currentRoom: null - globalDrawer: SpectralSidebar { } - - contextDrawer: Kirigami.ContextDrawer { + contextDrawer: RoomDrawer { id: contextDrawer + enabled: roomList.enteredRoom !== null + visible: enabled + room: root.currentRoom } - pageStack.initialPage: roomListPanelComponent + pageStack.initialPage: RoomListPanel { + id: roomList + roomListModel: spectralRoomListModel + + Component.onCompleted: { + applicationWindow().pageStack.push(roomPanelComponent, {"currentRoom": roomList.enteredRoom }) + } + + onEnterRoom: { + applicationWindow().pageStack.push(roomPanelComponent, {"currentRoom": room}) + root.currentRoom = room + + } + onLeaveRoom: { + var stack = applicationWindow().pageStack; + roomList.enteredRoom = null + + stack.removePage(stack.lastItem) + } + } Controller { id: spectralController @@ -46,21 +67,4 @@ Kirigami.ApplicationWindow { currentRoom: root.currentRoom } } - - Component { - id: roomListPanelComponent - - RoomListPanel { - roomListModel: spectralRoomListModel - - onEnterRoom: { - applicationWindow().pageStack.push(roomPanelComponent, {"currentRoom": room}) - } - onLeaveRoom: { - var stack = applicationWindow().pageStack; - - stack.removePage(stack.lastItem) - } - } - } }