ESCA111/neochat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some more UI fine tuning in timeline and room list.

Browse Source 
This is a work-in-progress.
This commit is contained in:
Black Hat
2019-05-08 21:15:09 +08:00
parent 1f6eb335d2
commit 927a0aa017
10 changed files with 203 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
imports/Spectral/Panel/RoomDrawer.qml
View File

@@ -21,6 +21,12 @@ Drawer {
anchors.fill: parent
anchors.margins: 24
Component {
id: fullScreenImage
FullScreenImage {}
}
RowLayout {
Layout.fillWidth: true
@@ -32,6 +38,14 @@ Drawer {
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)}).show()
}
}
ColumnLayout {

64
imports/Spectral/Panel/RoomHeader.qml
View File

@@ -9,17 +9,12 @@ import Spectral.Component 2.0
import Spectral.Setting 0.1
Control {
property alias avatar: headerImage.source
property alias topic: headerTopicLabel.text
property bool atTop: false
signal clicked()
id: header
background: Rectangle {
color: Material.background
opacity: atTop ? 0 : 1
color: MPalette.background
layer.enabled: true
layer.effect: ElevationEffect {
@@ -29,53 +24,32 @@ Control {
RowLayout {
anchors.fill: parent
anchors.margins: 12
anchors.leftMargin: 18
Layout.alignment: Qt.AlignVCenter
spacing: 12
Avatar {
Label {
Layout.fillWidth: true
text: currentRoom ? currentRoom.displayName : ""
color: MPalette.foreground
font.pixelSize: 18
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
ToolButton {
Layout.preferredWidth: height
Layout.fillHeight: true
id: headerImage
source: currentRoom.avatarMediaId
hint: currentRoom ? currentRoom.displayName : "No name"
}
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
visible: parent.width > 64
Label {
Layout.fillWidth: true
Layout.fillHeight: true
text: currentRoom ? currentRoom.displayName : ""
color: MPalette.foreground
font.pixelSize: 16
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
Label {
Layout.fillWidth: true
Layout.fillHeight: true
id: headerTopicLabel
contentItem: MaterialIcon {
icon: "\ue5d4"
color: MPalette.lighter
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
onClicked: header.clicked()
}
}
RippleEffect {
anchors.fill: parent
onClicked: header.clicked()
}
}

12
imports/Spectral/Panel/RoomListPanel.qml
View File

@@ -237,17 +237,6 @@ Item {
opacity: 0.1
}
Rectangle {
width: unreadCount >= 0 ? 4 : 0
height: parent.height
color: Material.accent
Behavior on width {
PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
}
}
RowLayout {
anchors.fill: parent
anchors.margins: 12
@@ -274,6 +263,7 @@ Item {
text: name || "No Name"
color: MPalette.foreground
font.pixelSize: 16
font.bold: unreadCount >= 0
elide: Text.ElideRight
wrapMode: Text.NoWrap
}

114
imports/Spectral/Panel/RoomPanel.qml
View File

@@ -62,6 +62,14 @@ Item {
fillMode: Image.PreserveAspectCrop
}
Rectangle {
anchors.fill: parent
visible: currentRoom && !MSettings.timelineBackground
color: MSettings.darkTheme ? "#242424" : "#EBEFF2"
}
ColumnLayout {
anchors.fill: parent
spacing: 0
@@ -75,10 +83,6 @@ Item {
id: roomHeader
avatar: currentRoom ? currentRoom.avatarMediaId : ""
topic: currentRoom ? (currentRoom.topic).replace(/(\r\n\t|\n|\r\t)/gm,"") : ""
atTop: messageListView.atYBeginning
onClicked: roomDrawer.visible ? roomDrawer.close() : roomDrawer.open()
}
@@ -86,10 +90,12 @@ Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: 960
Layout.alignment: Qt.AlignHCenter
Layout.leftMargin: 16
Layout.rightMargin: 16
Layout.bottomMargin: 16
Layout.alignment: Qt.AlignHCenter
width: Math.min(parent.width - 32, 960)
spacing: 16
@@ -147,113 +153,47 @@ Item {
DelegateChoice {
roleValue: "state"
delegate: ColumnLayout {
width: messageListView.width
spacing: 4
delegate: StateDelegate {
anchors.horizontalCenter: parent.horizontalCenter
SectionDelegate {
Layout.alignment: Qt.AlignHCenter
Layout.margins: 16
visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
}
StateDelegate {
Layout.maximumWidth: parent.width
Layout.alignment: Qt.AlignHCenter
}
width: Math.min(implicitWidth, parent.width)
}
}
DelegateChoice {
roleValue: "emote"
delegate: ColumnLayout {
width: messageListView.width
spacing: 4
delegate: StateDelegate {
anchors.horizontalCenter: parent.horizontalCenter
SectionDelegate {
Layout.alignment: Qt.AlignHCenter
Layout.margins: 16
visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
}
StateDelegate {
Layout.maximumWidth: parent.width
Layout.alignment: Qt.AlignHCenter
}
width: Math.min(implicitWidth, parent.width)
}
}
DelegateChoice {
roleValue: "message"
delegate: ColumnLayout {
width: messageListView.width
spacing: 4
SectionDelegate {
Layout.alignment: Qt.AlignHCenter
Layout.margins: 16
visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
}
MessageDelegate {}
delegate: MessageDelegate {
anchors.right: sentByMe ? parent.right : undefined
}
}
DelegateChoice {
roleValue: "notice"
delegate: ColumnLayout {
width: messageListView.width
spacing: 4
SectionDelegate {
Layout.alignment: Qt.AlignHCenter
Layout.margins: 16
visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
}
MessageDelegate {}
delegate: MessageDelegate {
anchors.right: sentByMe ? parent.right : undefined
}
}
DelegateChoice {
roleValue: "image"
delegate: ColumnLayout {
width: messageListView.width
spacing: 4
SectionDelegate {
Layout.alignment: Qt.AlignHCenter
Layout.margins: 16
visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
}
ImageDelegate {
Layout.maximumWidth: parent.width
}
delegate: ImageDelegate {
Layout.maximumWidth: parent.width
}
}
DelegateChoice {
roleValue: "file"
delegate: ColumnLayout {
width: messageListView.width
spacing: 4
SectionDelegate {
Layout.alignment: Qt.AlignHCenter
Layout.margins: 16
visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
}
FileDelegate {
Layout.maximumWidth: parent.width
}
delegate: FileDelegate {
Layout.maximumWidth: parent.width
}
}
@@ -275,7 +215,7 @@ Item {
rightPadding: 24
Material.foreground: MPalette.foreground
Material.background: MPalette.banner
Material.background: MPalette.background
text: "Go to read marker"
@@ -333,7 +273,7 @@ Item {
}
background: Rectangle {
color: MPalette.banner
color: MPalette.background
radius: height / 2
}
}