Improve Room Drawer
This fix the bug of it not getting the right data and improve the look signically.
This commit is contained in:
Carl Schwan
@@ -19,16 +19,20 @@ import NeoChat.Setting 1.0
|
|||||||
import org.kde.neochat 1.0
|
import org.kde.neochat 1.0
|
||||||
|
|
||||||
Kirigami.OverlayDrawer {
|
Kirigami.OverlayDrawer {
|
||||||
|
id: roomDrawer
|
||||||
property var room
|
property var room
|
||||||
|
|
||||||
id: roomDrawer
|
|
||||||
enabled: true
|
enabled: true
|
||||||
|
|
||||||
edge: Qt.application.layoutDirection == Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge
|
edge: Qt.application.layoutDirection == Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge
|
||||||
|
|
||||||
padding: 0
|
topPadding: 0
|
||||||
|
leftPadding: 0
|
||||||
|
rightPadding: 0
|
||||||
|
width: 400
|
||||||
|
implicitWidth: 400
|
||||||
contentItem: ColumnLayout {
|
contentItem: ColumnLayout {
|
||||||
implicitWidth: Kirigami.Units.gridUnit * 15 // TODO FIXME
|
implicitWidth: Kirigami.Units.gridUnit * 20
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: fullScreenImage
|
id: fullScreenImage
|
||||||
@@ -36,169 +40,168 @@ Kirigami.OverlayDrawer {
|
|||||||
FullScreenImage {}
|
FullScreenImage {}
|
||||||
}
|
}
|
||||||
|
|
||||||
RowLayout {
|
ToolBar {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
implicitHeight: infoLayout.implicitHeight
|
||||||
spacing: 16
|
bottomPadding: Kirigami.Units.largeSpacing
|
||||||
|
contentItem: ColumnLayout {
|
||||||
Kirigami.Avatar {
|
id: infoLayout
|
||||||
Layout.preferredWidth: 72
|
|
||||||
Layout.preferredHeight: 72
|
|
||||||
|
|
||||||
name: room ? room.displayName : "No name"
|
|
||||||
source: room ? "image://mxc/" + room.avatarMediaId : null
|
|
||||||
}
|
|
||||||
|
|
||||||
ColumnLayout {
|
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
|
||||||
Label {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
|
|
||||||
font.pixelSize: 18
|
|
||||||
font.bold: true
|
|
||||||
wrapMode: Label.Wrap
|
|
||||||
text: room ? room.displayName : "No Name"
|
|
||||||
color: MPalette.foreground
|
|
||||||
}
|
|
||||||
|
|
||||||
Label {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
|
|
||||||
wrapMode: Label.Wrap
|
|
||||||
text: room ? room.totalMemberCount + " Members" : "No Member Count"
|
|
||||||
color: MPalette.lighter
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Kirigami.Separator {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
|
|
||||||
Control {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
contentItem: Kirigami.FormLayout {
|
|
||||||
Label {
|
|
||||||
Kirigami.FormData.label: "Main Alias"
|
|
||||||
text: room && room.canonicalAlias ? room.canonicalAlias : "No Canonical Alias"
|
|
||||||
}
|
|
||||||
Label {
|
|
||||||
Kirigami.FormData.label: "Topic"
|
|
||||||
text: room && room.topic ? room.topic : "No Topic"
|
|
||||||
wrapMode: Text.WordWrap
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
background: AutoMouseArea {
|
|
||||||
onPrimaryClicked: roomSettingDialog.createObject(ApplicationWindow.overlay, {"room": room}).open()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Kirigami.Separator {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
}
|
|
||||||
|
|
||||||
RowLayout {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
|
|
||||||
spacing: 8
|
|
||||||
Kirigami.Icon {
|
|
||||||
Layout.preferredWidth: Kirigami.Units.gridUnit * 2
|
|
||||||
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
|
|
||||||
source: "user-others"
|
|
||||||
}
|
|
||||||
|
|
||||||
Label {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
|
|
||||||
wrapMode: Label.Wrap
|
|
||||||
text: room ? room.totalMemberCount + " Members" : "No Member Count"
|
|
||||||
}
|
|
||||||
|
|
||||||
ToolButton {
|
|
||||||
Layout.preferredWidth: Kirigami.Units.gridUnit
|
|
||||||
Layout.preferredHeight: Kirigami.Units.gridUnit
|
|
||||||
icon.name: "list-add-user"
|
|
||||||
|
|
||||||
onClicked: inviteUserDialog.createObject(ApplicationWindow.overlay, {"room": room}).open()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
AutoListView {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.fillHeight: true
|
|
||||||
|
|
||||||
id: userListView
|
|
||||||
|
|
||||||
clip: true
|
|
||||||
|
|
||||||
boundsBehavior: Flickable.DragOverBounds
|
|
||||||
|
|
||||||
model: UserListModel {
|
|
||||||
room: roomDrawer.room
|
|
||||||
}
|
|
||||||
|
|
||||||
delegate: Item {
|
|
||||||
width: userListView.width
|
|
||||||
height: 48
|
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
anchors.fill: parent
|
Layout.fillWidth: true
|
||||||
anchors.margins: 8
|
Layout.margins: Kirigami.Units.largeSpacing
|
||||||
spacing: 12
|
|
||||||
|
spacing: Kirigami.Units.largeSpacing
|
||||||
|
|
||||||
Kirigami.Avatar {
|
Kirigami.Avatar {
|
||||||
Layout.preferredWidth: height
|
Layout.preferredWidth: Kirigami.Units.gridUnit * 3.5
|
||||||
Layout.fillHeight: true
|
Layout.preferredHeight: Kirigami.Units.gridUnit * 3.5
|
||||||
|
|
||||||
source: "image://mxc/" + avatar
|
name: room ? room.displayName : i18n("No name")
|
||||||
name: name
|
source: room ? "image://mxc/" + room.avatarMediaId : undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
Kirigami.Heading {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
level: 1
|
||||||
|
font.bold: true
|
||||||
|
wrapMode: Label.Wrap
|
||||||
|
text: room ? room.displayName : i18n("No name")
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Label {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
wrapMode: Label.Wrap
|
||||||
|
text: room ? i18np("%1 Member", "%1 Members", room.totalMemberCount) : i18n("No Member Count")
|
||||||
|
color: Kirigami.Theme.disabledTextColor
|
||||||
|
}
|
||||||
|
Button {
|
||||||
|
icon.name: 'settings-configure'
|
||||||
|
text: i18n("Room setting")
|
||||||
|
onClicked: {
|
||||||
|
roomSettingDialog.createObject(ApplicationWindow.overlay, {"room": room}).open()
|
||||||
|
roomDrawer.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Kirigami.Separator {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
}
|
||||||
|
|
||||||
|
Kirigami.FormLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Label {
|
||||||
|
Kirigami.FormData.label: i18n("Main Alias")
|
||||||
|
text: room && room.canonicalAlias ? room.canonicalAlias :i18n("No Canonical Alias")
|
||||||
|
}
|
||||||
|
Label {
|
||||||
|
Kirigami.FormData.label: i18n("Topic")
|
||||||
|
text: room && room.topic ? room.topic : i18n("No Topic")
|
||||||
|
elide: Text.ElideRight
|
||||||
|
wrapMode: Text.WordWrap
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
RowLayout {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
spacing: 8
|
||||||
|
Kirigami.Icon {
|
||||||
|
source: "user-others"
|
||||||
}
|
}
|
||||||
|
|
||||||
Label {
|
Label {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
|
||||||
text: name
|
wrapMode: Label.Wrap
|
||||||
color: MPalette.foreground
|
text: room ? i18np("%1 Member", "%1 Members", room.totalMemberCount) : i18n("No Member Count")
|
||||||
textFormat: Text.PlainText
|
|
||||||
elide: Text.ElideRight
|
|
||||||
wrapMode: Text.NoWrap
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Label {
|
ToolButton {
|
||||||
visible: perm != UserType.Member
|
icon.name: "list-add-user"
|
||||||
|
text: i18n("Invite")
|
||||||
text: {
|
onClicked: inviteUserDialog.createObject(ApplicationWindow.overlay, {"room": room}).open()
|
||||||
if (perm == UserType.Owner) {
|
|
||||||
return "Owner"
|
|
||||||
}
|
|
||||||
if (perm == UserType.Admin) {
|
|
||||||
return "Admin"
|
|
||||||
}
|
|
||||||
if (perm == UserType.Moderator) {
|
|
||||||
return "Mod"
|
|
||||||
}
|
|
||||||
if (perm == UserType.Muted) {
|
|
||||||
return "Muted"
|
|
||||||
}
|
|
||||||
return ""
|
|
||||||
}
|
|
||||||
color: perm == UserType.Muted ? MPalette.lighter : MPalette.accent
|
|
||||||
font.pixelSize: 12
|
|
||||||
textFormat: Text.PlainText
|
|
||||||
wrapMode: Text.NoWrap
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
RippleEffect {
|
|
||||||
anchors.fill: parent
|
|
||||||
|
|
||||||
onPrimaryClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": room, "user": user}).open()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ScrollBar.vertical: ScrollBar {}
|
ScrollView {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.fillHeight: true
|
||||||
|
|
||||||
|
ListView {
|
||||||
|
id: userListView
|
||||||
|
clip: true
|
||||||
|
headerPositioning: ListView.OverlayHeader
|
||||||
|
boundsBehavior: Flickable.DragOverBounds
|
||||||
|
|
||||||
|
model: UserListModel {
|
||||||
|
room: roomDrawer.room
|
||||||
|
}
|
||||||
|
|
||||||
|
delegate: Kirigami.AbstractListItem {
|
||||||
|
width: userListView.width
|
||||||
|
implicitHeight: Kirigami.Units.gridUnit * 2
|
||||||
|
|
||||||
|
contentItem: RowLayout {
|
||||||
|
Kirigami.Avatar {
|
||||||
|
Layout.preferredWidth: height
|
||||||
|
Layout.fillHeight: true
|
||||||
|
|
||||||
|
source: "image://mxc/" + avatar
|
||||||
|
name: name
|
||||||
|
}
|
||||||
|
|
||||||
|
Label {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
text: name
|
||||||
|
textFormat: Text.PlainText
|
||||||
|
elide: Text.ElideRight
|
||||||
|
wrapMode: Text.NoWrap
|
||||||
|
}
|
||||||
|
|
||||||
|
Label {
|
||||||
|
visible: perm != UserType.Member
|
||||||
|
|
||||||
|
text: {
|
||||||
|
if (perm == UserType.Owner) {
|
||||||
|
return i18n("Owner")
|
||||||
|
}
|
||||||
|
if (perm == UserType.Admin) {
|
||||||
|
return i18n("Admin")
|
||||||
|
}
|
||||||
|
if (perm == UserType.Moderator) {
|
||||||
|
return i18n("Mod")
|
||||||
|
}
|
||||||
|
if (perm == UserType.Muted) {
|
||||||
|
return i18n("Muted")
|
||||||
|
}
|
||||||
|
return ""
|
||||||
|
}
|
||||||
|
color: perm == UserType.Muted ? Kirigami.Theme.disabledTextColor : Kirigami.Theme.textColor
|
||||||
|
font.pixelSize: 12
|
||||||
|
textFormat: Text.PlainText
|
||||||
|
wrapMode: Text.NoWrap
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
action: Kirigami.Action {
|
||||||
|
onTriggered: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": room, "user": user}).open()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
19
qml/main.qml
19
qml/main.qml
@@ -15,7 +15,6 @@ import NeoChat.Component 1.0
|
|||||||
import NeoChat.Panel 1.0
|
import NeoChat.Panel 1.0
|
||||||
import NeoChat.Dialog 1.0
|
import NeoChat.Dialog 1.0
|
||||||
import NeoChat.Page 1.0
|
import NeoChat.Page 1.0
|
||||||
import NeoChat.Page 1.0
|
|
||||||
|
|
||||||
Kirigami.ApplicationWindow {
|
Kirigami.ApplicationWindow {
|
||||||
id: root
|
id: root
|
||||||
@@ -24,7 +23,7 @@ Kirigami.ApplicationWindow {
|
|||||||
/**
|
/**
|
||||||
* Manage opening and close rooms
|
* Manage opening and close rooms
|
||||||
*/
|
*/
|
||||||
Item {
|
QtObject {
|
||||||
id: roomManager
|
id: roomManager
|
||||||
|
|
||||||
property var currentRoom: null
|
property var currentRoom: null
|
||||||
@@ -43,18 +42,12 @@ Kirigami.ApplicationWindow {
|
|||||||
pageStack.push(roomPage, { 'currentRoom': room, });
|
pageStack.push(roomPage, { 'currentRoom': room, });
|
||||||
currentRoom = room;
|
currentRoom = room;
|
||||||
}
|
}
|
||||||
|
|
||||||
Component {
|
|
||||||
id: roomPage
|
|
||||||
|
|
||||||
RoomPage {}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
contextDrawer: RoomDrawer {
|
contextDrawer: RoomDrawer {
|
||||||
id: contextDrawer
|
id: contextDrawer
|
||||||
enabled: root.currentRoomm !== null
|
enabled: roomManager.hasOpenRoom
|
||||||
room: root.currentRoom
|
room: roomManager.currentRoom
|
||||||
handleVisible: enabled && (pageStack.currentItem instanceof RoomPage)
|
handleVisible: enabled && (pageStack.currentItem instanceof RoomPage)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -130,4 +123,10 @@ Kirigami.ApplicationWindow {
|
|||||||
|
|
||||||
connection: Controller.activeConnection
|
connection: Controller.activeConnection
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: roomPage
|
||||||
|
|
||||||
|
RoomPage {}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user