Start working on the RoomDrawer port
This commit is contained in:
@@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
52
qml/main.qml
52
qml/main.qml
@@ -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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user