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
|
||||
|
||||
Kirigami.OverlayDrawer {
|
||||
id: roomDrawer
|
||||
property var room
|
||||
|
||||
id: roomDrawer
|
||||
enabled: true
|
||||
|
||||
edge: Qt.application.layoutDirection == Qt.RightToLeft ? Qt.LeftEdge : Qt.RightEdge
|
||||
|
||||
padding: 0
|
||||
topPadding: 0
|
||||
leftPadding: 0
|
||||
rightPadding: 0
|
||||
width: 400
|
||||
implicitWidth: 400
|
||||
contentItem: ColumnLayout {
|
||||
implicitWidth: Kirigami.Units.gridUnit * 15 // TODO FIXME
|
||||
implicitWidth: Kirigami.Units.gridUnit * 20
|
||||
|
||||
Component {
|
||||
id: fullScreenImage
|
||||
@@ -36,169 +40,168 @@ Kirigami.OverlayDrawer {
|
||||
FullScreenImage {}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
ToolBar {
|
||||
Layout.fillWidth: true
|
||||
|
||||
spacing: 16
|
||||
|
||||
Kirigami.Avatar {
|
||||
Layout.preferredWidth: 72
|
||||
Layout.preferredHeight: 72
|
||||
|
||||
name: room ? room.displayName : "No name"
|
||||
source: room ? "image://mxc/" + room.avatarMediaId : null
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
implicitHeight: infoLayout.implicitHeight
|
||||
bottomPadding: Kirigami.Units.largeSpacing
|
||||
contentItem: ColumnLayout {
|
||||
id: infoLayout
|
||||
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 {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 8
|
||||
spacing: 12
|
||||
Layout.fillWidth: true
|
||||
Layout.margins: Kirigami.Units.largeSpacing
|
||||
|
||||
spacing: Kirigami.Units.largeSpacing
|
||||
|
||||
Kirigami.Avatar {
|
||||
Layout.preferredWidth: height
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredWidth: Kirigami.Units.gridUnit * 3.5
|
||||
Layout.preferredHeight: Kirigami.Units.gridUnit * 3.5
|
||||
|
||||
source: "image://mxc/" + avatar
|
||||
name: name
|
||||
name: room ? room.displayName : i18n("No 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 {
|
||||
Layout.fillWidth: true
|
||||
|
||||
text: name
|
||||
color: MPalette.foreground
|
||||
textFormat: Text.PlainText
|
||||
elide: Text.ElideRight
|
||||
wrapMode: Text.NoWrap
|
||||
wrapMode: Label.Wrap
|
||||
text: room ? i18np("%1 Member", "%1 Members", room.totalMemberCount) : i18n("No Member Count")
|
||||
}
|
||||
|
||||
Label {
|
||||
visible: perm != UserType.Member
|
||||
|
||||
text: {
|
||||
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
|
||||
ToolButton {
|
||||
icon.name: "list-add-user"
|
||||
text: i18n("Invite")
|
||||
onClicked: inviteUserDialog.createObject(ApplicationWindow.overlay, {"room": room}).open()
|
||||
}
|
||||
}
|
||||
|
||||
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.Dialog 1.0
|
||||
import NeoChat.Page 1.0
|
||||
import NeoChat.Page 1.0
|
||||
|
||||
Kirigami.ApplicationWindow {
|
||||
id: root
|
||||
@@ -24,7 +23,7 @@ Kirigami.ApplicationWindow {
|
||||
/**
|
||||
* Manage opening and close rooms
|
||||
*/
|
||||
Item {
|
||||
QtObject {
|
||||
id: roomManager
|
||||
|
||||
property var currentRoom: null
|
||||
@@ -43,18 +42,12 @@ Kirigami.ApplicationWindow {
|
||||
pageStack.push(roomPage, { 'currentRoom': room, });
|
||||
currentRoom = room;
|
||||
}
|
||||
|
||||
Component {
|
||||
id: roomPage
|
||||
|
||||
RoomPage {}
|
||||
}
|
||||
}
|
||||
|
||||
contextDrawer: RoomDrawer {
|
||||
id: contextDrawer
|
||||
enabled: root.currentRoomm !== null
|
||||
room: root.currentRoom
|
||||
enabled: roomManager.hasOpenRoom
|
||||
room: roomManager.currentRoom
|
||||
handleVisible: enabled && (pageStack.currentItem instanceof RoomPage)
|
||||
}
|
||||
|
||||
@@ -130,4 +123,10 @@ Kirigami.ApplicationWindow {
|
||||
|
||||
connection: Controller.activeConnection
|
||||
}
|
||||
|
||||
Component {
|
||||
id: roomPage
|
||||
|
||||
RoomPage {}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user