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

5
imports/Spectral/Effect/ElevationEffect.qml
View File

@@ -7,7 +7,8 @@ import QtGraphicalEffects 1.0
Item {
id: effect
property variant source
property var source
readonly property Item sourceItem: source.sourceItem
property int elevation: 0
@@ -134,7 +135,7 @@ Item {
glowRadius: modelData.blur/2
spread: 0.05
color: _shadowColors[index]
cornerRadius: modelData.blur + (effect.source.radius || 0)
cornerRadius: modelData.blur + (effect.sourceItem.radius || 0)
}
}

10
imports/Spectral/Font/CommonFont.qml Normal file
View File

@@ -0,0 +1,10 @@
pragma Singleton
import QtQuick 2.9
import QtQuick.Controls 2.2
Item {
property alias font: materialLabel.font
Label {
id: materialLabel
}
}

2
imports/Spectral/Font/qmldir
View File

@@ -1,3 +1,3 @@
module Spectral.Font
singleton MaterialFont 0.1 MaterialFont.qml
singleton CommonFont 0.1 CommonFont.qml

25
imports/Spectral/Page/LoginForm.ui.qml
View File

@@ -20,41 +20,28 @@ Page {
Row {
anchors.fill: parent
Pane {
Rectangle {
width: parent.width / 2
height: parent.height
background: Item {
Image {
id: background
anchors.fill: parent
source: "qrc:/assets/img/background.jpg"
fillMode: Image.PreserveAspectCrop
cache: false
}
ColorOverlay {
anchors.fill: background
source: background
color: Material.accent
opacity: 0.7
}
}
color: Material.accent
Column {
x: 32
anchors.verticalCenter: parent.verticalCenter
Label {
text: "MATRIX LOGIN."
text: "Matrix Login."
font.pointSize: 28
font.bold: true
font.capitalization: Font.AllUppercase
color: "white"
}
Label {
text: "A NEW METHOD OF MESSAGING"
text: "A new method of messaging."
font.pointSize: 12
font.capitalization: Font.AllUppercase
color: "white"
}
}

12
imports/Spectral/Page/Room.qml
View File

@@ -34,20 +34,14 @@ Page {
id: roomListForm
clip: true
listModel: roomListModel
onWidthChanged: {
if (width < 240) width = 64
}
ElevationEffect {
anchors.fill: source
z: source.z - 1
source: parent
elevation: 4
}
onLeaveRoom: roomForm.saveReadMarker(room)
}
@@ -57,6 +51,8 @@ Page {
id: roomForm
clip: true
currentRoom: roomListForm.enteredRoom
}
}

25
imports/Spectral/Page/SettingAccountDelegate.qml
View File

@@ -52,31 +52,6 @@ Column {
clip: true
AutoListView {
Layout.fillWidth: true
Layout.preferredHeight: 24
orientation: ListView.Horizontal
spacing: 8
model: ["#498882", "#42a5f5", "#5c6bc0", "#7e57c2", "#ab47bc", "#ff7043"]
delegate: Rectangle {
width: parent.height
height: parent.height
radius: width / 2
color: modelData
MouseArea {
anchors.fill: parent
onClicked: spectralController.setColor(connection.localUserId, modelData)
}
}
}
RowLayout {
Layout.fillWidth: true

23
imports/Spectral/Panel/RoomHeader.qml
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
}
}

3
imports/Spectral/Panel/RoomListDelegate.qml
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
}

2
imports/Spectral/Panel/RoomListPanelForm.ui.qml
View File

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

1
imports/Spectral/Panel/RoomPanel.qml
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: {

66
imports/Spectral/Panel/RoomPanelForm.ui.qml
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
}
}
}

19
imports/Spectral/Panel/RoomPanelInput.qml
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 {