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 { background: Rectangle {
color: MPalette.banner color: MPalette.background
radius: 18 radius: 18
AutoMouseArea { AutoMouseArea {

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

@ -129,7 +129,7 @@ ColumnLayout {
antialiasing: true antialiasing: true
border.width: 4 border.width: 4
border.color: MPalette.banner border.color: MPalette.background
} }
Rectangle { 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.Menu.Timeline 2.0
import Spectral.Effect 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 avatarVisible: !sentByMe && (aboveAuthor !== author || aboveSection !== section || aboveEventType === "state" || aboveEventType === "emote" || aboveEventType === "other")
readonly property bool sentByMe: author === currentRoom.localUser 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 saveFileAs()
signal openExternally() signal openExternally()
Layout.alignment: sentByMe ? Qt.AlignRight : Qt.AlignLeft
id: root id: root
spacing: 0 z: -5
Label { spacing: 4
Layout.leftMargin: 48
text: author.displayName Avatar {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
Layout.alignment: Qt.AlignTop
visible: avatarVisible visible: avatarVisible
hint: author.displayName
source: author.avatarMediaId
font.pixelSize: 13 Component {
verticalAlignment: Text.AlignVCenter id: userDetailDialog
UserDetailDialog {}
}
RippleEffect {
anchors.fill: parent
circular: true
onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open()
}
} }
RowLayout { Item {
z: -5 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 { verticalPadding: 8
Layout.preferredWidth: 32 horizontalPadding: 16
Layout.preferredHeight: 32
Layout.alignment: Qt.AlignTop
visible: avatarVisible background: Rectangle {
hint: author.displayName color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
source: author.avatarMediaId radius: 18
antialiasing: true
Component { AutoMouseArea {
id: userDetailDialog
UserDetailDialog {}
}
RippleEffect {
anchors.fill: parent anchors.fill: parent
circular: true id: messageMouseArea
onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open() onSecondaryClicked: {
} var contextMenu = messageDelegateContextMenu.createObject(ApplicationWindow.overlay)
} contextMenu.viewSource.connect(function() {
messageSourceDialog.createObject(ApplicationWindow.overlay, {"sourceText": toolTip}).open()
Label { })
Layout.preferredWidth: 32 contextMenu.reply.connect(function() {
Layout.preferredHeight: 32 roomPanelInput.replyUser = author
Layout.alignment: Qt.AlignTop roomPanelInput.replyEventID = eventId
roomPanelInput.replyContent = contentLabel.selectedText || message
visible: !(sentByMe || avatarVisible) roomPanelInput.isReply = true
roomPanelInput.focus()
text: Qt.formatDateTime(time, "hh:mm") })
color: MPalette.lighter contextMenu.redact.connect(function() {
currentRoom.redactEvent(eventId)
font.pixelSize: 10 })
horizontalAlignment: Label.AlignHCenter contextMenu.popup()
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()
}
Component { Component {
id: messageDelegateContextMenu id: messageDelegateContextMenu
MessageDelegateContextMenu {} MessageDelegateContextMenu {}
} }
Component { Component {
id: messageSourceDialog id: messageSourceDialog
MessageSourceDialog {} MessageSourceDialog {}
}
} }
} }
}
contentItem: ColumnLayout { contentItem: ColumnLayout {
RowLayout { 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 Layout.fillWidth: true
visible: replyVisible padding: 0
Avatar { background: RippleEffect {
Layout.preferredWidth: 28 onClicked: goToEvent(replyEventId)
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 { contentItem: Label {
Layout.fillWidth: true 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 { wrapMode: Label.Wrap
onClicked: goToEvent(replyEventId) textFormat: Label.RichText
} }
}
}
contentItem: Label { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 1
visible: replyVisible visible: replyVisible
color: "white" color: darkBackground ? "white" : MPalette.lighter
text: "<style>a{color: white;} .user-pill{}</style>" + (replyDisplay || "") }
wrapMode: Label.Wrap TextEdit {
textFormat: Label.RichText 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 { MouseArea {
Layout.fillWidth: true anchors.fill: parent
Layout.preferredHeight: 1 acceptedButtons: Qt.NoButton
cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
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
}
} }
} }
} }

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

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

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

@ -21,6 +21,12 @@ Drawer {
anchors.fill: parent anchors.fill: parent
anchors.margins: 24 anchors.margins: 24
Component {
id: fullScreenImage
FullScreenImage {}
}
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
@ -32,6 +38,14 @@ Drawer {
hint: room ? room.displayName : "No name" hint: room ? room.displayName : "No name"
source: room ? room.avatarMediaId : null 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 { ColumnLayout {

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

@ -9,17 +9,12 @@ import Spectral.Component 2.0
import Spectral.Setting 0.1 import Spectral.Setting 0.1
Control { Control {
property alias avatar: headerImage.source
property alias topic: headerTopicLabel.text
property bool atTop: false
signal clicked() signal clicked()
id: header id: header
background: Rectangle { background: Rectangle {
color: Material.background color: MPalette.background
opacity: atTop ? 0 : 1
layer.enabled: true layer.enabled: true
layer.effect: ElevationEffect { layer.effect: ElevationEffect {
@ -29,53 +24,32 @@ Control {
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 12 anchors.leftMargin: 18
Layout.alignment: Qt.AlignVCenter
spacing: 12 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.preferredWidth: height
Layout.fillHeight: true Layout.fillHeight: true
id: headerImage contentItem: MaterialIcon {
icon: "\ue5d4"
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
color: MPalette.lighter 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 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 { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 12 anchors.margins: 12
@ -274,6 +263,7 @@ Item {
text: name || "No Name" text: name || "No Name"
color: MPalette.foreground color: MPalette.foreground
font.pixelSize: 16 font.pixelSize: 16
font.bold: unreadCount >= 0
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.NoWrap wrapMode: Text.NoWrap
} }

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

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

2
qtquickcontrols2.conf
View File

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