Start working on the RoomDrawer port

This commit is contained in:
Carl Schwan
2020-10-04 17:32:11 +02:00
parent 81563c056f
commit 68f509d582
6 changed files with 80 additions and 173 deletions

View File

@@ -6,7 +6,6 @@ Text {
text: "<style>pre {white-space: pre-wrap} a{color: " + Kirigami.Theme.linkColor + ";} .user-pill{}</style>" + display text: "<style>pre {white-space: pre-wrap} a{color: " + Kirigami.Theme.linkColor + ";} .user-pill{}</style>" + display
font { font {
pixelSize: Kirigami.Theme.defaultFont.pixelSize * 1.2
family: Kirigami.Theme.defaultFont.family family: Kirigami.Theme.defaultFont.family
} }

View File

@@ -92,7 +92,7 @@ Dialog {
Layout.fillHeight: true Layout.fillHeight: true
source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : "" source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
hint: name name: name
} }
ColumnLayout { ColumnLayout {

View File

@@ -3,6 +3,8 @@ import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12 import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12 import QtQuick.Layouts 1.12
import org.kde.kirigami 2.13 as Kirigami
import Spectral.Component 2.0 import Spectral.Component 2.0
import Spectral.Dialog 2.0 import Spectral.Dialog 2.0
import Spectral.Effect 2.0 import Spectral.Effect 2.0
@@ -10,16 +12,17 @@ import Spectral.Setting 0.1
import Spectral 0.1 import Spectral 0.1
Drawer { Kirigami.OverlayDrawer {
property var room property var room
id: roomDrawer id: roomDrawer
enabled: true
edge: Qt.RightEdge edge: Qt.application.layoutDirection == Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge
ColumnLayout { padding: 0
anchors.fill: parent contentItem: ColumnLayout {
anchors.margins: 24 implicitWidth: Kirigami.Units.gridUnit * 15 // TODO FIXME
Component { Component {
id: fullScreenImage id: fullScreenImage
@@ -32,20 +35,12 @@ Drawer {
spacing: 16 spacing: 16
Avatar { Kirigami.Avatar {
Layout.preferredWidth: 72 Layout.preferredWidth: 72
Layout.preferredHeight: 72 Layout.preferredHeight: 72
hint: room ? room.displayName : "No name" name: room ? room.displayName : "No name"
source: room ? room.avatarMediaId : null source: room ? "image://mxc/" + room.avatarMediaId : null
RippleEffect {
anchors.fill: parent
circular: true
onClicked: fullScreenImage.createObject(parent, {"filename": room.diaplayName, "localPath": room.urlToMxcUrl(room.avatarUrl)}).showFullScreen()
}
} }
ColumnLayout { ColumnLayout {
@@ -71,88 +66,21 @@ Drawer {
} }
} }
MenuSeparator { Kirigami.Separator {
Layout.fillWidth: true Layout.fillWidth: true
} }
Control { Control {
Layout.fillWidth: true Layout.fillWidth: true
contentItem: Kirigami.FormLayout {
padding: 0 Label {
Kirigami.FormData.label: "Main Alias"
contentItem: ColumnLayout { text: room && room.canonicalAlias ? room.canonicalAlias : "No Canonical Alias"
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
}
}
} }
Label {
RowLayout { Kirigami.FormData.label: "Topic"
Layout.fillWidth: true text: room && room.topic ? room.topic : "No Topic"
wrapMode: Text.WordWrap
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
}
}
} }
} }
@@ -161,7 +89,7 @@ Drawer {
} }
} }
MenuSeparator { Kirigami.Separator {
Layout.fillWidth: true Layout.fillWidth: true
} }
@@ -169,13 +97,10 @@ Drawer {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 8 spacing: 8
Kirigami.Icon {
MaterialIcon { Layout.preferredWidth: Kirigami.Units.gridUnit * 2
Layout.preferredWidth: 32 Layout.preferredHeight: Kirigami.Units.gridUnit * 2
Layout.preferredHeight: 32 source: "user-others"
icon: "\ue7ff"
color: MPalette.lighter
} }
Label { Label {
@@ -183,17 +108,12 @@ Drawer {
wrapMode: Label.Wrap wrapMode: Label.Wrap
text: room ? room.totalMemberCount + " Members" : "No Member Count" text: room ? room.totalMemberCount + " Members" : "No Member Count"
color: MPalette.lighter
} }
ToolButton { ToolButton {
Layout.preferredWidth: 32 Layout.preferredWidth: Kirigami.Units.gridUnit
Layout.preferredHeight: 32 Layout.preferredHeight: Kirigami.Units.gridUnit
icon.name: "list-user-add"
contentItem: MaterialIcon {
icon: "\ue145"
color: MPalette.lighter
}
onClicked: inviteUserDialog.createObject(ApplicationWindow.overlay, {"controller": spectralController, "room": room}).open() onClicked: inviteUserDialog.createObject(ApplicationWindow.overlay, {"controller": spectralController, "room": room}).open()
} }
@@ -222,12 +142,12 @@ Drawer {
anchors.margins: 8 anchors.margins: 8
spacing: 12 spacing: 12
Avatar { Kirigami.Avatar {
Layout.preferredWidth: height Layout.preferredWidth: height
Layout.fillHeight: true Layout.fillHeight: true
source: avatar source: "image://mxc/" + avatar
hint: name name: name
} }
Label { Label {

View File

@@ -1,5 +1,5 @@
import QtQuick 2.12 import QtQuick 2.12
import QtQuick.Controls 2.12 as Controls import QtQuick.Controls 2.12 as QQC2
import QtQuick.Layouts 1.12 import QtQuick.Layouts 1.12
import org.kde.kirigami 2.13 as Kirigami import org.kde.kirigami 2.13 as Kirigami
@@ -11,6 +11,7 @@ import Spectral 0.1
Kirigami.ScrollablePage { Kirigami.ScrollablePage {
id: page id: page
property var roomListModel property var roomListModel
property var enteredRoom property var enteredRoom
property var searchText property var searchText
@@ -28,17 +29,13 @@ Kirigami.ScrollablePage {
onTextChanged: page.searchText = text onTextChanged: page.searchText = text
} }
ListView { ListView {
id: messageListView id: messageListView
model: SortFilterProxyModel { model: SortFilterProxyModel {
id: sortedRoomListModel
sourceModel: roomListModel sourceModel: roomListModel
proxyRoles: ExpressionRole { proxyRoles: ExpressionRole {
name: "display" name: "categoryName"
expression: { expression: {
switch (category) { switch (category) {
case 1: return "Invited" case 1: return "Invited"
@@ -63,7 +60,7 @@ Kirigami.ScrollablePage {
} }
}, },
RoleSorter { RoleSorter {
roleName: "lastActiveTime" roleName: "name"
sortOrder: Qt.DescendingOrder sortOrder: Qt.DescendingOrder
} }
] ]
@@ -74,27 +71,21 @@ Kirigami.ScrollablePage {
}, },
RegExpFilter { RegExpFilter {
roleName: "name" roleName: "name"
pattern: searchText pattern: page.searchText
caseSensitivity: Qt.CaseInsensitive caseSensitivity: Qt.CaseInsensitive
} }
] ]
} }
delegate: Kirigami.SwipeListItem {
padding: Kirigami.Units.largeSpacing
actions: [ section.property: "categoryName"
Kirigami.Action { section.delegate: Kirigami.ListSectionHeader {
text:"Action for buttons" label: section
iconName: "bookmarks" }
onTriggered: print("Action 1 clicked")
}, delegate: Kirigami.AbstractListItem {
Kirigami.Action { topPadding: Kirigami.Units.largeSpacing
text:"Action 2" bottomPadding: Kirigami.Units.largeSpacing
iconName: "folder"
enabled: false
}
]
contentItem: RowLayout { contentItem: RowLayout {
spacing: Kirigami.Units.largeSpacing spacing: Kirigami.Units.largeSpacing
@@ -114,24 +105,23 @@ Kirigami.ScrollablePage {
spacing: Kirigami.Units.smallSpacing spacing: Kirigami.Units.smallSpacing
Controls.Label { QQC2.Label {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
text: name ?? ""
text: name || "No Name" font.pixelSize: 15
font.pixelSize: 16
font.bold: unreadCount >= 0 font.bold: unreadCount >= 0
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.NoWrap wrapMode: Text.NoWrap
} }
Controls.Label { QQC2.Label {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
text: (lastEvent == "" ? topic : lastEvent).replace(/(\r\n\t|\n|\r\t)/gm," ") text: (lastEvent == "" ? topic : lastEvent).replace(/(\r\n\t|\n|\r\t)/gm," ")
font.pixelSize: 13 font.pixelSize: 12
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.NoWrap wrapMode: Text.NoWrap
} }

View File

@@ -37,7 +37,6 @@ Control {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: Kirigami.Theme.focusColor color: Kirigami.Theme.focusColor
visible: chatTextInput.activeFocus
} }
anchors { anchors {
left: parent.left left: parent.left
@@ -90,8 +89,6 @@ Control {
text: "<style>a{color: " + color + ";} .user-pill{}</style>" + replyContent text: "<style>a{color: " + color + ";} .user-pill{}</style>" + replyContent
font.family: window.font.family
font.pixelSize: 14
selectByMouse: true selectByMouse: true
readOnly: true readOnly: true
wrapMode: Label.Wrap wrapMode: Label.Wrap
@@ -242,9 +239,7 @@ Control {
visible: isReply visible: isReply
contentItem: MaterialIcon { icon.name: "dialog-cancel"
icon: "\ue5cd"
}
onClicked: clearReply() onClicked: clearReply()
} }
@@ -308,7 +303,6 @@ Control {
height: parent.height height: parent.height
opacity: 0.2 opacity: 0.2
color: Material.accent
} }
Timer { Timer {

View File

@@ -1,6 +1,6 @@
import QtQuick 2.12 import QtQuick 2.14
import QtQuick.Controls 2.12 as Controls import QtQuick.Controls 2.14 as Controls
import QtQuick.Layouts 1.12 import QtQuick.Layouts 1.14
import org.kde.kirigami 2.12 as Kirigami import org.kde.kirigami 2.12 as Kirigami
@@ -10,14 +10,35 @@ import Spectral.Panel 2.0
Kirigami.ApplicationWindow { Kirigami.ApplicationWindow {
id: root id: root
property var currentRoom: null
globalDrawer: SpectralSidebar { } contextDrawer: RoomDrawer {
contextDrawer: Kirigami.ContextDrawer {
id: contextDrawer 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 { Controller {
id: spectralController id: spectralController
@@ -46,21 +67,4 @@ Kirigami.ApplicationWindow {
currentRoom: root.currentRoom 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)
}
}
}
} }