tan
/
Spectral
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Some more UI fine tuning in timeline and room list. 

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

2
imports/Spectral/Component/Timeline/FileDelegate.qml
View File

@ -118,7 +118,7 @@ ColumnLayout {
}
background: Rectangle {
color: MPalette.banner
color: MPalette.background
radius: 18
AutoMouseArea {

2
imports/Spectral/Component/Timeline/ImageDelegate.qml
View File

@ -129,7 +129,7 @@ ColumnLayout {
antialiasing: true
border.width: 4
border.color: MPalette.banner
border.color: MPalette.background
}
Rectangle {

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

@ -11,214 +11,188 @@ import Spectral.Dialog 2.0
import Spectral.Menu.Timeline 2.0
import Spectral.Effect 2.0
ColumnLayout {
RowLayout {
readonly property bool avatarVisible: !sentByMe && (aboveAuthor !== author || aboveSection !== section || aboveEventType === "state" || aboveEventType === "emote" || aboveEventType === "other")
readonly property bool sentByMe: author === currentRoom.localUser
property bool replyVisible: replyEventId || ""
readonly property bool darkBackground: !sentByMe
readonly property bool replyVisible: replyEventId || false
signal saveFileAs()
signal openExternally()
Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
id: root
spacing: 0
z: -5
Label {
Layout.leftMargin: 48
spacing: 4
text: author.displayName
Avatar {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
Layout.alignment: Qt.AlignTop
visible: avatarVisible
hint: author.displayName
source: author.avatarMediaId
font.pixelSize: 13
verticalAlignment: Text.AlignVCenter
Component {
id: userDetailDialog
UserDetailDialog {}
}
RippleEffect {
anchors.fill: parent
circular: true
onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open()
}
}
RowLayout {
z: -5
Item {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
id: messageRow
visible: !(sentByMe || avatarVisible)
}
spacing: 4
Control {
Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + root.spacing : 0) - 48
Avatar {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
Layout.alignment: Qt.AlignTop
verticalPadding: 8
horizontalPadding: 16
visible: avatarVisible
hint: author.displayName
source: author.avatarMediaId
background: Rectangle {
color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
radius: 18
antialiasing: true
Component {
id: userDetailDialog
UserDetailDialog {}
}
RippleEffect {
AutoMouseArea {
anchors.fill: parent
circular: true
id: messageMouseArea
onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open()
}
}
Label {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
Layout.alignment: Qt.AlignTop
visible: !(sentByMe || avatarVisible)
text: Qt.formatDateTime(time, "hh:mm")
color: MPalette.lighter
font.pixelSize: 10
horizontalAlignment: Label.AlignHCenter
verticalAlignment: Label.AlignVCenter
}
Control {
Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + messageRow.spacing : 0) - 48
verticalPadding: 8
horizontalPadding: 16
background: Rectangle {
color: sentByMe ? "#009DC2" : eventType === "notice" ? "#4285F4" : "#673AB7"
radius: 18
antialiasing: true
AutoMouseArea {
anchors.fill: parent
id: messageMouseArea
onSecondaryClicked: {
var contextMenu = messageDelegateContextMenu.createObject(ApplicationWindow.overlay)
contextMenu.viewSource.connect(function() {
messageSourceDialog.createObject(ApplicationWindow.overlay, {"sourceText": toolTip}).open()
})
contextMenu.reply.connect(function() {
roomPanelInput.replyUser = author
roomPanelInput.replyEventID = eventId
roomPanelInput.replyContent = contentLabel.selectedText || message
roomPanelInput.isReply = true
roomPanelInput.focus()
})
contextMenu.redact.connect(function() {
currentRoom.redactEvent(eventId)
})
contextMenu.popup()
}
onSecondaryClicked: {
var contextMenu = messageDelegateContextMenu.createObject(ApplicationWindow.overlay)
contextMenu.viewSource.connect(function() {
messageSourceDialog.createObject(ApplicationWindow.overlay, {"sourceText": toolTip}).open()
})
contextMenu.reply.connect(function() {
roomPanelInput.replyUser = author
roomPanelInput.replyEventID = eventId
roomPanelInput.replyContent = contentLabel.selectedText || message
roomPanelInput.isReply = true
roomPanelInput.focus()
})
contextMenu.redact.connect(function() {
currentRoom.redactEvent(eventId)
})
contextMenu.popup()
}
Component {
id: messageDelegateContextMenu
Component {
id: messageDelegateContextMenu
MessageDelegateContextMenu {}
}
MessageDelegateContextMenu {}
}
Component {
id: messageSourceDialog
Component {
id: messageSourceDialog
MessageSourceDialog {}
}
MessageSourceDialog {}
}
}
}
contentItem: ColumnLayout {
RowLayout {
contentItem: ColumnLayout {
RowLayout {
Layout.fillWidth: true
visible: replyVisible
Avatar {
Layout.preferredWidth: 28
Layout.preferredHeight: 28
Layout.alignment: Qt.AlignTop
source: replyVisible ? replyAuthor.avatarMediaId : ""
hint: replyVisible ? replyAuthor.displayName : "H"
RippleEffect {
anchors.fill: parent
circular: true
onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": replyAuthor}).open()
}
}
Control {
Layout.fillWidth: true
visible: replyVisible
padding: 0
Avatar {
Layout.preferredWidth: 28
Layout.preferredHeight: 28
Layout.alignment: Qt.AlignTop
source: replyVisible ? replyAuthor.avatarMediaId : ""
hint: replyVisible ? replyAuthor.displayName : "H"
RippleEffect {
anchors.fill: parent
circular: true
onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": replyAuthor}).open()
}
background: RippleEffect {
onClicked: goToEvent(replyEventId)
}
Control {
contentItem: Label {
Layout.fillWidth: true
padding: 0
visible: replyVisible
color: darkBackground ? "white" : MPalette.lighter
text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + (replyDisplay || "")
background: RippleEffect {
onClicked: goToEvent(replyEventId)
}
wrapMode: Label.Wrap
textFormat: Label.RichText
}
}
}
contentItem: Label {
Layout.fillWidth: true
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 1
visible: replyVisible
color: "white"
text: "<style>a{color: white;} .user-pill{}</style>" + (replyDisplay || "")
visible: replyVisible
color: darkBackground ? "white" : MPalette.lighter
}
wrapMode: Label.Wrap
textFormat: Label.RichText
}
TextEdit {
Layout.fillWidth: true
id: contentLabel
text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + display
color: darkBackground ? "white" : MPalette.foreground
font.family: window.font.family
font.pixelSize: 14
selectByMouse: true
readOnly: true
wrapMode: Label.Wrap
selectedTextColor: darkBackground ? MPalette.accent : "white"
selectionColor: darkBackground ? "white" : MPalette.accent
textFormat: Text.RichText
onLinkActivated: {
if (link.startsWith("https://matrix.to/")) {
var result = link.replace(/\?.*/, "").match("https://matrix.to/#/(!.*:.*)/(\\$.*:.*)")
if (!result || result.length < 3) return
if (result[1] != currentRoom.id) return
if (!result[2]) return
goToEvent(result[2])
} else {
Qt.openUrlExternally(link)
}
}
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 1
visible: replyVisible
color: "white"
}
TextEdit {
Layout.fillWidth: true
id: contentLabel
text: "<style>a{color: white;} .user-pill{}</style>" + display
color: "white"
font.family: window.font.family
font.pixelSize: 14
selectByMouse: true
readOnly: true
wrapMode: Label.Wrap
selectedTextColor: Material.accent
selectionColor: "white"
textFormat: Text.RichText
onLinkActivated: {
if (link.startsWith("https://matrix.to/")) {
var result = link.replace(/\?.*/, "").match("https://matrix.to/#/(!.*:.*)/(\\$.*:.*)")
if (!result || result.length < 3) return
if (result[1] != currentRoom.id) return
if (!result[2]) return
goToEvent(result[2])
} else {
Qt.openUrlExternally(link)
}
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.NoButton
cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.NoButton
cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
}
}
}

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

@ -21,7 +21,7 @@ Label {
onLinkActivated: Qt.openUrlExternally(link)
background: Rectangle {
color: MPalette.banner
color: MPalette.background
radius: 4
antialiasing: true
}

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
}
}

2
imports/Spectral/Setting/Palette.qml
View File

@ -6,7 +6,7 @@ QtObject {
readonly property int theme: MSettings.darkTheme ? Material.Dark : Material.Light
readonly property color primary: "#344955"
readonly property color accent: "#673AB7"
readonly property color accent: "#4286F5"
readonly property color foreground: MSettings.darkTheme ? "#FFFFFF" : "#1D333E"
readonly property color background: MSettings.darkTheme ? "#303030" : "#FFFFFF"
readonly property color lighter: MSettings.darkTheme ? "#FFFFFF" : "#5B7480"

2
qtquickcontrols2.conf
View File

@ -9,4 +9,4 @@ Style=Material
Theme=Light
Variant=Dense
Primary=#344955
Accent=#673AB7
Accent=#4286F5