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 {

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

@ -11,36 +11,19 @@ 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
Label {
Layout.leftMargin: 48
text: author.displayName
visible: avatarVisible
font.pixelSize: 13
verticalAlignment: Text.AlignVCenter
}
RowLayout {
z: -5 z: -5
id: messageRow
spacing: 4 spacing: 4
Avatar { Avatar {
@ -67,29 +50,21 @@ ColumnLayout {
} }
} }
Label { Item {
Layout.preferredWidth: 32 Layout.preferredWidth: 32
Layout.preferredHeight: 32 Layout.preferredHeight: 32
Layout.alignment: Qt.AlignTop
visible: !(sentByMe || avatarVisible) visible: !(sentByMe || avatarVisible)
text: Qt.formatDateTime(time, "hh:mm")
color: MPalette.lighter
font.pixelSize: 10
horizontalAlignment: Label.AlignHCenter
verticalAlignment: Label.AlignVCenter
} }
Control { Control {
Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + messageRow.spacing : 0) - 48 Layout.maximumWidth: messageListView.width - (!sentByMe ? 32 + root.spacing : 0) - 48
verticalPadding: 8 verticalPadding: 8
horizontalPadding: 16 horizontalPadding: 16
background: Rectangle { background: Rectangle {
color: sentByMe ? "#009DC2" : eventType === "notice" ? "#4285F4" : "#673AB7" color: sentByMe ? MPalette.background : eventType === "notice" ? MPalette.primary : MPalette.accent
radius: 18 radius: 18
antialiasing: true antialiasing: true
@ -167,8 +142,8 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
visible: replyVisible visible: replyVisible
color: "white" color: darkBackground ? "white" : MPalette.lighter
text: "<style>a{color: white;} .user-pill{}</style>" + (replyDisplay || "") text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + (replyDisplay || "")
wrapMode: Label.Wrap wrapMode: Label.Wrap
textFormat: Label.RichText textFormat: Label.RichText
@ -181,7 +156,7 @@ ColumnLayout {
Layout.preferredHeight: 1 Layout.preferredHeight: 1
visible: replyVisible visible: replyVisible
color: "white" color: darkBackground ? "white" : MPalette.lighter
} }
TextEdit { TextEdit {
@ -189,17 +164,17 @@ ColumnLayout {
id: contentLabel id: contentLabel
text: "<style>a{color: white;} .user-pill{}</style>" + display text: "<style>a{color: " + (darkBackground ? "white" : MPalette.foreground) + ";} .user-pill{}</style>" + display
color: "white" color: darkBackground ? "white" : MPalette.foreground
font.family: window.font.family font.family: window.font.family
font.pixelSize: 14 font.pixelSize: 14
selectByMouse: true selectByMouse: true
readOnly: true readOnly: true
wrapMode: Label.Wrap wrapMode: Label.Wrap
selectedTextColor: Material.accent selectedTextColor: darkBackground ? MPalette.accent : "white"
selectionColor: "white" selectionColor: darkBackground ? "white" : MPalette.accent
textFormat: Text.RichText textFormat: Text.RichText
onLinkActivated: { onLinkActivated: {
@ -222,5 +197,4 @@ ColumnLayout {
} }
} }
} }
}
} }

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 {

46
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 {
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 { Label {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true
text: currentRoom ? currentRoom.displayName : "" text: currentRoom ? currentRoom.displayName : ""
color: MPalette.foreground color: MPalette.foreground
font.pixelSize: 16 font.pixelSize: 18
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.NoWrap wrapMode: Text.NoWrap
} }
Label { ToolButton {
Layout.fillWidth: true Layout.preferredWidth: height
Layout.fillHeight: true Layout.fillHeight: true
id: headerTopicLabel contentItem: MaterialIcon {
icon: "\ue5d4"
color: MPalette.lighter color: MPalette.lighter
elide: Text.ElideRight
wrapMode: Text.NoWrap
} }
}
}
RippleEffect {
anchors.fill: parent
onClicked: header.clicked() 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
} }

110
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,115 +153,49 @@ 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
spacing: 4
SectionDelegate {
Layout.alignment: Qt.AlignHCenter
Layout.margins: 16
visible: section !== aboveSection || Math.abs(time - aboveTime) > 600000
}
ImageDelegate {
Layout.maximumWidth: parent.width Layout.maximumWidth: parent.width
} }
} }
}
DelegateChoice { DelegateChoice {
roleValue: "file" roleValue: "file"
delegate: ColumnLayout { delegate: FileDelegate {
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 Layout.maximumWidth: parent.width
} }
} }
}
DelegateChoice { DelegateChoice {
roleValue: "other" roleValue: "other"
@ -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