Make timeline more "Material design".

This commit is contained in:
Black Hat
2018-11-16 20:30:42 +08:00
parent 25ac3f7f5c
commit a296fffd91
25 changed files with 435 additions and 240 deletions

View File

@@ -4,15 +4,22 @@ import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
import Spectral 0.1
import Spectral.Effect 2.0
Rectangle {
property alias paintable: headerImage.source
property alias topic: headerTopicLabel.text
property bool atTop: false
signal clicked()
id: header
color: Material.accent
color: atTop ? "transparent" : "white"
layer.enabled: !atTop
layer.effect: ElevationEffect {
elevation: 4
}
ItemDelegate {
anchors.fill: parent
@@ -48,7 +55,7 @@ Rectangle {
Layout.fillHeight: true
text: currentRoom ? currentRoom.displayName : ""
color: "white"
color: "#1D333E"
font.pointSize: 12
elide: Text.ElideRight
wrapMode: Text.NoWrap
@@ -60,21 +67,11 @@ Rectangle {
id: headerTopicLabel
color: "white"
color: "#5B7480"
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
}
}
}
ProgressBar {
width: parent.width
z: 10
anchors.bottom: parent.bottom
Material.accent: "white"
visible: currentRoom && currentRoom.busy
indeterminate: true
}
}

View File

@@ -82,6 +82,7 @@ Rectangle {
Layout.fillHeight: true
text: name || "No Name"
color: "#1D333E"
font.pointSize: 12
elide: Text.ElideRight
wrapMode: Text.NoWrap
@@ -92,6 +93,8 @@ Rectangle {
Layout.fillHeight: true
text: (lastEvent == "" ? topic : lastEvent).replace(/(\r\n\t|\n|\r\t)/gm,"")
color: "#5B7480"
font.pointSize: 9.75
elide: Text.ElideRight
wrapMode: Text.NoWrap
}

View File

@@ -98,7 +98,7 @@ Rectangle {
id: listView
spacing: 1
spacing: 0
clip: true
boundsBehavior: Flickable.DragOverBounds

View File

@@ -3,6 +3,7 @@ import QtQuick 2.9
RoomPanelForm {
roomHeader.paintable: currentRoom ? currentRoom.paintable : null
roomHeader.topic: currentRoom ? (currentRoom.topic).replace(/(\r\n\t|\n|\r\t)/gm,"") : ""
roomHeader.atTop: messageListView.atYBeginning
roomHeader.onClicked: roomDrawer.open()
sortedMessageEventModel.onModelReset: {

View File

@@ -49,6 +49,15 @@ Item {
text: "Please choose a room."
}
Image {
anchors.fill: parent
visible: currentRoom
source: "qrc:/assets/img/roompanel.svg"
fillMode: Image.Pad
}
ColumnLayout {
anchors.fill: parent
spacing: 0
@@ -65,16 +74,18 @@ Item {
AutoListView {
Layout.fillWidth: true
Layout.maximumWidth: 960
Layout.fillHeight: true
Layout.leftMargin: 16
Layout.rightMargin: 16
Layout.alignment: Qt.AlignHCenter
id: messageListView
displayMarginBeginning: 40
displayMarginEnd: 40
displayMarginBeginning: 100
displayMarginEnd: 100
verticalLayoutDirection: ListView.BottomToTop
spacing: 8
spacing: 4
boundsBehavior: Flickable.DragOverBounds
@@ -84,7 +95,7 @@ Item {
sourceModel: messageEventModel
filters: ExpressionFilter {
expression: marks !== 0x08 && marks !== 0x10
expression: marks !== 0x08 && marks !== 0x10 && eventType !== "other"
}
}
@@ -93,24 +104,13 @@ Item {
id: delegateColumn
spacing: 8
spacing: 4
Label {
SectionDelegate {
Layout.alignment: Qt.AlignHCenter
Layout.margins: 4
visible: section !== aboveSection
text: section
color: "white"
verticalAlignment: Text.AlignVCenter
leftPadding: 8
rightPadding: 8
topPadding: 4
bottomPadding: 4
background: Rectangle {
color: MSettings.darkTheme ? "#484848" : "grey"
}
visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
}
MessageDelegate {
@@ -120,7 +120,8 @@ Item {
}
StateDelegate {
Layout.maximumWidth: messageListView.width * 0.8
Layout.maximumWidth: parent.width
Layout.alignment: Qt.AlignHCenter
visible: eventType === "emote" || eventType === "state"
}
@@ -290,27 +291,16 @@ Item {
}
}
Item {
RoomPanelInput {
Layout.fillWidth: true
Layout.preferredHeight: 40
}
Layout.margins: 16
Layout.maximumWidth: 960
Layout.alignment: Qt.AlignHCenter
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 40
Layout.leftMargin: 16
Layout.rightMargin: 16
id: roomPanelInput
color: Material.background
RoomPanelInput {
anchors.verticalCenter: parent.top
id: roomPanelInput
width: parent.width
height: 48
}
width: parent.width
height: 48
}
}
}

View File

@@ -25,9 +25,11 @@ Rectangle {
color: MSettings.darkTheme ? "#303030" : "#fafafa"
radius: height / 2
layer.enabled: true
layer.effect: ElevationEffect {
elevation: 2
elevation: 1
}
Popup {
@@ -113,10 +115,7 @@ Rectangle {
spacing: 0
ItemDelegate {
Layout.preferredWidth: 48
Layout.preferredHeight: 48
ToolButton {
id: uploadButton
visible: !isReply
@@ -133,10 +132,7 @@ Rectangle {
}
}
ItemDelegate {
Layout.preferredWidth: 48
Layout.preferredHeight: 48
ToolButton {
id: cancelReplyButton
visible: isReply
@@ -304,10 +300,7 @@ Rectangle {
}
}
ItemDelegate {
Layout.preferredWidth: 48
Layout.preferredHeight: 48
ToolButton {
id: emojiButton
contentItem: MaterialIcon {