diff --git a/assets/img/avatar.png b/assets/img/avatar.png deleted file mode 100644 index 6d355bb..0000000 Binary files a/assets/img/avatar.png and /dev/null differ diff --git a/assets/img/background.jpg b/assets/img/background.jpg deleted file mode 100644 index de559fd..0000000 Binary files a/assets/img/background.jpg and /dev/null differ diff --git a/assets/img/matrix.svg b/assets/img/matrix.svg new file mode 100644 index 0000000..eff00f2 --- /dev/null +++ b/assets/img/matrix.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/img/roompanel.svg b/assets/img/roompanel.svg new file mode 100644 index 0000000..d01c669 --- /dev/null +++ b/assets/img/roompanel.svg @@ -0,0 +1,219 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imports/Spectral/Component/SplitView.qml b/imports/Spectral/Component/SplitView.qml index fc553f9..dd43d61 100644 --- a/imports/Spectral/Component/SplitView.qml +++ b/imports/Spectral/Component/SplitView.qml @@ -64,7 +64,7 @@ Item { property Component handleDelegate: Rectangle { width: 1 height: 1 - visible: false + color: "#E1E1E1" } /*! diff --git a/imports/Spectral/Component/Timeline/GenericBubble.qml b/imports/Spectral/Component/Timeline/GenericBubble.qml deleted file mode 100644 index cc33245..0000000 --- a/imports/Spectral/Component/Timeline/GenericBubble.qml +++ /dev/null @@ -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 - } - } -} diff --git a/imports/Spectral/Component/Timeline/MessageDelegate.qml b/imports/Spectral/Component/Timeline/MessageDelegate.qml index fe4cb3c..f8f35d8 100644 --- a/imports/Spectral/Component/Timeline/MessageDelegate.qml +++ b/imports/Spectral/Component/Timeline/MessageDelegate.qml @@ -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 ? "" : "") + display + text: "" + 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 { diff --git a/imports/Spectral/Component/Timeline/SectionDelegate.qml b/imports/Spectral/Component/Timeline/SectionDelegate.qml new file mode 100644 index 0000000..2fe7dd4 --- /dev/null +++ b/imports/Spectral/Component/Timeline/SectionDelegate.qml @@ -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 +} diff --git a/imports/Spectral/Component/Timeline/StateDelegate.qml b/imports/Spectral/Component/Timeline/StateDelegate.qml index ab7272b..91bc2e7 100644 --- a/imports/Spectral/Component/Timeline/StateDelegate.qml +++ b/imports/Spectral/Component/Timeline/StateDelegate.qml @@ -6,19 +6,23 @@ import QtQuick.Controls.Material 2.2 import Spectral.Setting 0.1 Label { - Layout.alignment: Qt.AlignHCenter - text: "" + author.displayName + " " + 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 } } diff --git a/imports/Spectral/Component/Timeline/qmldir b/imports/Spectral/Component/Timeline/qmldir index 815bdd5..f77ced3 100644 --- a/imports/Spectral/Component/Timeline/qmldir +++ b/imports/Spectral/Component/Timeline/qmldir @@ -1,4 +1,4 @@ module Spectral.Component.Timeline MessageDelegate 2.0 MessageDelegate.qml StateDelegate 2.0 StateDelegate.qml - +SectionDelegate 2.0 SectionDelegate.qml diff --git a/imports/Spectral/Effect/ElevationEffect.qml b/imports/Spectral/Effect/ElevationEffect.qml index ca2a4c6..423c492 100644 --- a/imports/Spectral/Effect/ElevationEffect.qml +++ b/imports/Spectral/Effect/ElevationEffect.qml @@ -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) } } diff --git a/imports/Spectral/Font/CommonFont.qml b/imports/Spectral/Font/CommonFont.qml new file mode 100644 index 0000000..f221ef2 --- /dev/null +++ b/imports/Spectral/Font/CommonFont.qml @@ -0,0 +1,10 @@ +pragma Singleton +import QtQuick 2.9 +import QtQuick.Controls 2.2 + +Item { + property alias font: materialLabel.font + Label { + id: materialLabel + } +} diff --git a/imports/Spectral/Font/qmldir b/imports/Spectral/Font/qmldir index 57fb41f..bdd2daa 100644 --- a/imports/Spectral/Font/qmldir +++ b/imports/Spectral/Font/qmldir @@ -1,3 +1,3 @@ module Spectral.Font singleton MaterialFont 0.1 MaterialFont.qml - +singleton CommonFont 0.1 CommonFont.qml diff --git a/imports/Spectral/Page/LoginForm.ui.qml b/imports/Spectral/Page/LoginForm.ui.qml index 2099ebf..dead320 100644 --- a/imports/Spectral/Page/LoginForm.ui.qml +++ b/imports/Spectral/Page/LoginForm.ui.qml @@ -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" } } diff --git a/imports/Spectral/Page/Room.qml b/imports/Spectral/Page/Room.qml index 033555c..a61c40b 100644 --- a/imports/Spectral/Page/Room.qml +++ b/imports/Spectral/Page/Room.qml @@ -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 } } diff --git a/imports/Spectral/Page/SettingAccountDelegate.qml b/imports/Spectral/Page/SettingAccountDelegate.qml index 62441a3..5713e62 100644 --- a/imports/Spectral/Page/SettingAccountDelegate.qml +++ b/imports/Spectral/Page/SettingAccountDelegate.qml @@ -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 diff --git a/imports/Spectral/Panel/RoomHeader.qml b/imports/Spectral/Panel/RoomHeader.qml index a0a13b1..3b8f1d7 100644 --- a/imports/Spectral/Panel/RoomHeader.qml +++ b/imports/Spectral/Panel/RoomHeader.qml @@ -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 - } } diff --git a/imports/Spectral/Panel/RoomListDelegate.qml b/imports/Spectral/Panel/RoomListDelegate.qml index 8268e5d..e09726c 100644 --- a/imports/Spectral/Panel/RoomListDelegate.qml +++ b/imports/Spectral/Panel/RoomListDelegate.qml @@ -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 } diff --git a/imports/Spectral/Panel/RoomListPanelForm.ui.qml b/imports/Spectral/Panel/RoomListPanelForm.ui.qml index b0b6307..45cbba1 100644 --- a/imports/Spectral/Panel/RoomListPanelForm.ui.qml +++ b/imports/Spectral/Panel/RoomListPanelForm.ui.qml @@ -98,7 +98,7 @@ Rectangle { id: listView - spacing: 1 + spacing: 0 clip: true boundsBehavior: Flickable.DragOverBounds diff --git a/imports/Spectral/Panel/RoomPanel.qml b/imports/Spectral/Panel/RoomPanel.qml index 658d4d3..d3e5a79 100644 --- a/imports/Spectral/Panel/RoomPanel.qml +++ b/imports/Spectral/Panel/RoomPanel.qml @@ -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: { diff --git a/imports/Spectral/Panel/RoomPanelForm.ui.qml b/imports/Spectral/Panel/RoomPanelForm.ui.qml index c970db7..96e7d79 100644 --- a/imports/Spectral/Panel/RoomPanelForm.ui.qml +++ b/imports/Spectral/Panel/RoomPanelForm.ui.qml @@ -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 } } } diff --git a/imports/Spectral/Panel/RoomPanelInput.qml b/imports/Spectral/Panel/RoomPanelInput.qml index 3c875c1..37bb67b 100644 --- a/imports/Spectral/Panel/RoomPanelInput.qml +++ b/imports/Spectral/Panel/RoomPanelInput.qml @@ -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 { diff --git a/qml/main.qml b/qml/main.qml index 216b04d..1dc0d86 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -16,6 +16,8 @@ import "qrc:/js/util.js" as Util ApplicationWindow { readonly property var currentConnection: accountListView.currentConnection ? accountListView.currentConnection : null + Material.theme: MSettings.darkTheme ? Material.Dark : Material.Light + width: 960 height: 640 minimumWidth: 720 @@ -26,10 +28,6 @@ ApplicationWindow { visible: true title: qsTr("Spectral") - Material.theme: MSettings.darkTheme ? Material.Dark : Material.Light - - Material.accent: spectralController.color(currentConnection ? currentConnection.localUserId : "") - Platform.SystemTrayIcon { visible: MSettings.showTray iconSource: "qrc:/assets/img/icon.png" @@ -156,7 +154,7 @@ ApplicationWindow { source: user.paintable } - highlightColor: spectralController.color(user.id) + highlightColor: Material.accent page: roomPage diff --git a/qtquickcontrols2.conf b/qtquickcontrols2.conf index 0cc5319..cbed40a 100644 --- a/qtquickcontrols2.conf +++ b/qtquickcontrols2.conf @@ -8,6 +8,6 @@ Style=Material [Material] Theme=Light Primary=#344955 -Accent=#498882 -;Foreground=Black +Accent=#673AB7 +;Foreground=#1D333E ;Background=#161616 diff --git a/res.qrc b/res.qrc index 6f4daaa..778e88c 100644 --- a/res.qrc +++ b/res.qrc @@ -7,7 +7,6 @@ imports/Spectral/Component/Emoji/EmojiPicker.qml imports/Spectral/Component/Emoji/qmldir imports/Spectral/Component/Timeline/DownloadableContent.qml - imports/Spectral/Component/Timeline/GenericBubble.qml imports/Spectral/Component/Timeline/MessageDelegate.qml imports/Spectral/Component/Timeline/qmldir imports/Spectral/Component/Timeline/StateDelegate.qml @@ -24,8 +23,6 @@ imports/Spectral/Page/qmldir imports/Spectral/Page/Room.qml assets/font/material.ttf - assets/img/avatar.png - assets/img/background.jpg assets/img/icon.icns assets/img/icon.ico assets/img/icon.png @@ -53,5 +50,9 @@ imports/Spectral/Component/AutoTextField.qml imports/Spectral/Panel/RoomPanelInput.qml imports/Spectral/Component/SplitView.qml + imports/Spectral/Font/CommonFont.qml + imports/Spectral/Component/Timeline/SectionDelegate.qml + assets/img/roompanel.svg + assets/img/matrix.svg