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

Make timeline more "Material design".

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
imports/Spectral/Component/SplitView.qml
View File

@@ -64,7 +64,7 @@ Item {
property Component handleDelegate: Rectangle {
width: 1
height: 1
visible: false
color: "#E1E1E1"
}
/*!

37
imports/Spectral/Component/Timeline/GenericBubble.qml
View File

@@ -1,37 +0,0 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2
import Spectral.Component 2.0
import Spectral.Effect 2.0
import Spectral.Setting 0.1
Control {
property bool highlighted: false
property bool colored: false
readonly property bool darkBackground: highlighted ? true : MSettings.darkTheme
padding: 12
AutoMouseArea {
anchors.fill: parent
onSecondaryClicked: {
messageContextMenu.row = messageRow
messageContextMenu.model = model
messageContextMenu.selectedText = contentLabel.selectedText
messageContextMenu.popup()
}
}
background: Rectangle {
color: colored ? Material.accent : highlighted ? Material.primary : Material.background
layer.enabled: true
layer.effect: ElevationEffect {
elevation: 1
}
}
}

147
imports/Spectral/Component/Timeline/MessageDelegate.qml
View File

@@ -7,6 +7,7 @@ import Spectral 0.1
import Spectral.Setting 0.1
import Spectral.Component 2.0
import Spectral.Font 0.1
RowLayout {
readonly property bool avatarVisible: !sentByMe && (aboveAuthor !== author || aboveSection !== section || aboveEventType === "state" || aboveEventType === "emote" || aboveEventType === "other")
@@ -23,71 +24,86 @@ RowLayout {
Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
spacing: 6
spacing: 4
ImageItem {
Layout.preferredWidth: 40
Layout.preferredHeight: 40
Layout.preferredWidth: 32
Layout.preferredHeight: 32
Layout.alignment: Qt.AlignTop
round: false
visible: avatarVisible
hint: author.displayName
source: author.paintable
}
Rectangle {
Layout.preferredWidth: 40
Layout.preferredHeight: 40
Layout.preferredWidth: 32
Layout.preferredHeight: 32
Layout.alignment: Qt.AlignTop
color: "transparent"
visible: !(sentByMe || avatarVisible)
}
GenericBubble {
Layout.maximumWidth: messageListView.width - (!sentByMe ? 40 + messageRow.spacing : 0)
Control {
Layout.maximumWidth: messageListView.width - (!sentByMe ? 40 + messageRow.spacing : 0) - 48
id: genericBubble
topPadding: 8
bottomPadding: 8
leftPadding: 16
rightPadding: 16
highlighted: messageRow.highlighted
colored: highlighted && (eventType === "notice" || highlight)
background: Rectangle {
color: sentByMe ? "#009DC2" : (highlighted || eventType) === "notice" ? "#4285F4" : "#673AB7"
radius: 18
AutoMouseArea {
anchors.fill: parent
onSecondaryClicked: {
messageContextMenu.row = messageRow
messageContextMenu.model = model
messageContextMenu.selectedText = contentLabel.selectedText
messageContextMenu.popup()
}
}
}
contentItem: ColumnLayout {
id: messageColumn
spacing: 0
TimelineLabel {
Layout.fillWidth: true
// TimelineLabel {
// Layout.fillWidth: true
id: authorLabel
// id: authorLabel
visible: messageRow.avatarVisible
text: author.displayName
Material.foreground: Material.accent
coloredBackground: highlighted
font.bold: true
// visible: messageRow.avatarVisible
// text: author.displayName
// Material.foreground: Material.accent
// coloredBackground: highlighted
// font.bold: true
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: roomPanelInput.insert(author.displayName)
}
}
// MouseArea {
// anchors.fill: parent
// cursorShape: Qt.PointingHandCursor
// onClicked: roomPanelInput.insert(author.displayName)
// }
// }
TextEdit {
Layout.fillWidth: true
id: contentLabel
text: (highlighted ? "<style>a{color: white;} .user-pill{color: white}</style>" : "<style>a{color: " + Material.accent + ";} .user-pill{color: " + Material.accent + "}</style>") + display
text: "<style>a{color: white;} .user-pill{color: white}</style>" + display
visible: isText
color: highlighted ? "white": Material.foreground
color: "white"
font.family: authorLabel.font.family
font.pointSize: 10
font.family: CommonFont.font.family
font.pointSize: 10.5
selectByMouse: true
readOnly: true
wrapMode: Label.Wrap
@@ -119,52 +135,53 @@ RowLayout {
active: eventType === "image" || eventType === "file" || eventType === "audio"
}
Row {
Layout.alignment: Qt.AlignRight
// Row {
// Layout.alignment: Qt.AlignRight
spacing: 4
// spacing: 4
TimelineLabel {
visible: userMarker.length > 5
text: userMarker.length - 5 + "+"
coloredBackground: highlighted
Material.foreground: "grey"
font.pointSize: 8
}
// TimelineLabel {
// visible: userMarker.length > 5
// text: userMarker.length - 5 + "+"
// coloredBackground: highlighted
// Material.foreground: "grey"
// font.pointSize: 8
// }
Repeater {
model: userMarker.length > 5 ? userMarker.slice(0, 5) : userMarker
// Repeater {
// model: userMarker.length > 5 ? userMarker.slice(0, 5) : userMarker
ImageItem {
width: parent.height
height: parent.height
// ImageItem {
// width: parent.height
// height: parent.height
hint: modelData.displayName
source: modelData.paintable
// hint: modelData.displayName
// source: modelData.paintable
MouseArea {
anchors.fill: parent
// MouseArea {
// anchors.fill: parent
cursorShape: Qt.PointingHandCursor
// cursorShape: Qt.PointingHandCursor
onClicked: {
readMarkerDialog.listModel = userMarker
readMarkerDialog.open()
}
}
}
}
// onClicked: {
// readMarkerDialog.listModel = userMarker
// readMarkerDialog.open()
// }
// }
// }
// }
TimelineLabel {
id: timeLabel
// TimelineLabel {
// id: timeLabel
// visible: Math.abs(time - aboveTime) > 600000 || index == 0
// text: Qt.formatTime(time, "hh:mm")
// coloredBackground: highlighted
// Material.foreground: "grey"
// font.pointSize: 8
// }
// }
visible: Math.abs(time - aboveTime) > 600000 || index == 0
text: Qt.formatTime(time, "hh:mm")
coloredBackground: highlighted
Material.foreground: "grey"
font.pointSize: 8
}
}
}
Component {

11
imports/Spectral/Component/Timeline/SectionDelegate.qml Normal file
View File

@@ -0,0 +1,11 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
Label {
text: section + " • " + Qt.formatTime(time, "hh:mm")
color: "#1D333E"
font.pointSize: 9.75
font.weight: Font.Medium
font.capitalization: Font.AllUppercase
verticalAlignment: Text.AlignVCenter
}

16
imports/Spectral/Component/Timeline/StateDelegate.qml
View File

@@ -6,19 +6,23 @@ import QtQuick.Controls.Material 2.2
import Spectral.Setting 0.1
Label {
Layout.alignment: Qt.AlignHCenter
text: "<b>" + author.displayName + "</b> " + display
color: "white"
color: Material.accent
padding: 8
topPadding: 8
bottomPadding: 8
leftPadding: 16
rightPadding: 16
wrapMode: Label.Wrap
linkColor: "white"
linkColor: Material.accent
textFormat: MSettings.richText ? Text.RichText : Text.StyledText
onLinkActivated: Qt.openUrlExternally(link)
background: Rectangle {
color: MSettings.darkTheme ? "#484848" : "grey"
color: "transparent"
border.color: Material.accent
border.width: 2
radius: 18
}
}

2
imports/Spectral/Component/Timeline/qmldir
View File

@@ -1,4 +1,4 @@
module Spectral.Component.Timeline
MessageDelegate 2.0 MessageDelegate.qml
StateDelegate 2.0 StateDelegate.qml
SectionDelegate 2.0 SectionDelegate.qml