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

First UI redesign.

This commit is contained in:
Black Hat 2018-09-02 21:26:42 +08:00
parent 2c10b2272c
commit 64749ba32f
7 changed files with 354 additions and 366 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
qml/Room.qml
View File

@ -18,16 +18,22 @@ Page {
onNewMessage: if (!window.active) matriqueController.showMessage(roomName, content, icon)
}
Rectangle {
anchors.fill: parent
color: MSettings.darkTheme ? "#363636" : "#f3f3f3"
RowLayout {
anchors.fill: parent
spacing: 0
RoomListForm {
id: roomListForm
Layout.fillHeight: true
Layout.preferredWidth: MSettings.miniMode ? 80 : page.width * 0.35
Layout.minimumWidth: 80
Layout.preferredWidth: MSettings.miniMode ? 64 : page.width * 0.35
Layout.minimumWidth: 64
Layout.maximumWidth: 360
listModel: roomListModel
@ -42,4 +48,5 @@ Page {
currentRoom: roomListForm.enteredRoom
}
}
}
}

22
qml/component/SideNavButton.qml
View File

@ -3,31 +3,21 @@ import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
Item {
ItemDelegate {
property var page
property alias contentItem: buttonDelegate.contentItem
signal clicked
id: sideNavButton
Layout.fillWidth: true
Layout.preferredHeight: width
readonly property bool selected: stackView.currentItem === page
Rectangle {
width: stackView.currentItem === page ? parent.width : 0
width: selected ? 4 : 0
height: parent.height
anchors.bottom: buttonDelegate.bottom
color: Qt.lighter(Material.accent)
color: Material.accent
Behavior on width {
PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
}
}
ItemDelegate {
id: buttonDelegate
anchors.fill: parent
onClicked: {
if(page && stackView.currentItem !== page) {
if(stackView.depth === 1) {
@ -37,7 +27,5 @@ Item {
stackView.push(page)
}
}
sideNavButton.clicked()
}
}
}

4
qml/component/TextDelegate.qml
View File

@ -20,8 +20,8 @@ Rectangle {
width: Math.min(Math.max(messageText.implicitWidth, (timeText.visible ? timeText.implicitWidth : 0), (authorLabelVisible ? authorText.implicitWidth : 0)) + 24, maximumWidth)
height: (authorText.visible ? authorText.implicitHeight : 0) + messageText.implicitHeight + (timeText.visible ? timeText.implicitHeight : 0) + 24
color: flat ? "transparent" : highlighted ? Material.accent : background
border.color: Material.accent
color: flat ? "transparent" : highlighted ? Material.primary : background
border.color: Material.primary
border.width: flat ? 2 : 0
ColumnLayout {

126
qml/form/RoomForm.qml
View File

@ -39,7 +39,6 @@ Item {
ColumnLayout {
anchors.fill: parent
anchors.margins: 32
spacing: 16
ImageStatus {
Layout.preferredWidth: 64
@ -116,7 +115,7 @@ Item {
RowLayout {
anchors.fill: parent
anchors.margins: 8
spacing: 16
spacing: 12
ImageStatus {
Layout.preferredWidth: height
@ -159,9 +158,9 @@ Item {
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 80
Layout.preferredHeight: 64
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
color: Material.accent
ItemDelegate {
anchors.fill: parent
@ -170,9 +169,9 @@ Item {
RowLayout {
anchors.fill: parent
anchors.margins: 16
anchors.margins: 12
spacing: 16
spacing: 12
ImageStatus {
Layout.preferredWidth: height
@ -186,14 +185,15 @@ Item {
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter
visible: parent.width > 80
visible: parent.width > 64
Label {
Layout.fillWidth: true
Layout.fillHeight: true
text: currentRoom ? currentRoom.displayName : ""
font.pointSize: 16
color: "white"
font.pointSize: 12
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
@ -203,6 +203,7 @@ Item {
Layout.fillHeight: true
text: currentRoom ? currentRoom.topic : ""
color: "white"
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
@ -304,7 +305,7 @@ Item {
RoundButton {
id: goTopFab
width: height
width: 64
height: 64
visible: !parent.atYEnd
@ -313,12 +314,12 @@ Item {
contentItem: MaterialIcon {
anchors.fill: parent
icon: "\ue313"
color: "white"
}
opacity: pressed ? 1 : hovered ? 0.7 : 0.4
Material.background: Qt.lighter(Material.accent)
Material.background: Material.accent
onClicked: parent.positionViewAtBeginning()
@ -334,11 +335,55 @@ Item {
}
}
Pane {
padding: 16
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: 80
Layout.preferredHeight: 48
Layout.margins: 16
spacing: 0
ItemDelegate {
Layout.preferredWidth: 48
Layout.preferredHeight: 48
contentItem: MaterialIcon { icon: "\ue226" }
onClicked: currentRoom.chooseAndUploadFile()
}
TextField {
property real progress: 0
id: inputField
Layout.fillWidth: true
Layout.preferredHeight: 48
placeholderText: "Send a Message"
leftPadding: 16
topPadding: 0
bottomPadding: 0
selectByMouse: true
text: currentRoom ? currentRoom.cachedInput : ""
onTextChanged: {
timeoutTimer.restart()
repeatTimer.start()
currentRoom.cachedInput = text
}
Keys.onReturnPressed: {
if (inputField.text) {
inputField.postMessage(inputField.text)
inputField.text = ""
}
}
background: Rectangle {
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
}
ToolTip.visible: currentRoom && currentRoom.hasUsersTyping
ToolTip.text: currentRoom ? currentRoom.usersTyping : ""
Timer {
id: timeoutTimer
@ -360,52 +405,6 @@ Item {
onTriggered: currentRoom.sendTypingNotification(true)
}
RowLayout {
anchors.fill: parent
spacing: 0
ItemDelegate {
Layout.preferredWidth: height
Layout.fillHeight: true
contentItem: MaterialIcon { icon: "\ue226" }
onClicked: currentRoom.chooseAndUploadFile()
}
TextField {
property real progress: 0
id: inputField
Layout.fillWidth: true
Layout.fillHeight: true
placeholderText: "Send a Message"
leftPadding: 16
topPadding: 0
bottomPadding: 0
selectByMouse: true
text: currentRoom ? currentRoom.cachedInput : ""
onTextChanged: {
timeoutTimer.restart()
repeatTimer.start()
currentRoom.cachedInput = text
}
Keys.onReturnPressed: {
if (inputField.text) {
inputField.postMessage(inputField.text)
inputField.text = ""
}
}
background: Rectangle {
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
}
ToolTip.visible: currentRoom && currentRoom.hasUsersTyping
ToolTip.text: currentRoom ? currentRoom.usersTyping : ""
function postMessage(text) {
if (text.trim().length === 0) { return }
if(!currentRoom) { return }
@ -458,8 +457,8 @@ Item {
ItemDelegate {
id: emojiButton
Layout.preferredWidth: height
Layout.fillHeight: true
Layout.preferredWidth: 48
Layout.preferredHeight: 48
contentItem: MaterialIcon { icon: "\ue24e" }
@ -484,7 +483,6 @@ Item {
}
}
}
}
onCurrentRoomChanged: if (currentRoom && currentRoom.timelineSize === 0) currentRoom.getPreviousContent(20)
}

88
qml/form/RoomListForm.qml
View File

@ -14,46 +14,29 @@ Item {
property alias listModel: roomListProxyModel.sourceModel
property var enteredRoom: null
Label {
z: 10
text: MSettings.miniMode ? "Empty" : "Here? No, not here."
anchors.centerIn: parent
visible: listView.count === 0
}
ColumnLayout {
anchors.fill: parent
spacing: 0
Rectangle {
z: 10
Layout.fillWidth: true
Layout.preferredHeight: 80
color: Qt.tint(Material.accent, "#20FFFFFF")
TextField {
id: searchField
width: parent.width - 18
height: 36
color: "white"
Layout.fillWidth: true
Layout.preferredHeight: 40
Layout.margins: 12
leftPadding: MSettings.miniMode ? 4 : 32
topPadding: 0
bottomPadding: 0
anchors.centerIn: parent
placeholderText: "Search..."
background: Row {
visible: !parent.text
MaterialIcon {
icon: "\ue8b6"
color: "white"
width: MSettings.miniMode ? parent.width : parent.height
height: parent.height
}
Label {
height: parent.height
visible: !MSettings.miniMode
text: "Search"
color: "white"
font.pointSize: 12
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
background: Rectangle {
color: MSettings.darkTheme ? "#242424" : "#fafafa"
}
Shortcut {
@ -61,20 +44,6 @@ Item {
onActivated: searchField.forceActiveFocus()
}
}
}
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
Label {
z: 10
text: MSettings.miniMode ? "Empty" : "Here? No, not here."
anchors.centerIn: parent
visible: listView.count === 0
}
SortFilterProxyModel {
id: roomListProxyModel
@ -108,8 +77,13 @@ Item {
}
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
id: listView
anchors.fill: parent
spacing: 1
clip: true
model: roomListProxyModel
@ -117,16 +91,15 @@ Item {
boundsBehavior: Flickable.DragOverBounds
ScrollBar.vertical: ScrollBar { id: scrollBar }
ScrollBar.vertical: ScrollBar {}
delegate: Rectangle {
readonly property bool highlighted: currentRoom === enteredRoom
id: swipeDelegate
width: parent.width
height: 80
height: 64
color: highlighted ? Material.background : "transparent"
color: "#fafafa"
AutoMouseArea {
anchors.fill: parent
@ -143,14 +116,14 @@ Item {
Rectangle {
width: 4
height: parent.height
color: Qt.tint(Material.accent, "#20FFFFFF")
color: Material.accent
visible: unreadCount > 0 || highlighted
}
RowLayout {
anchors.fill: parent
anchors.margins: 16
spacing: 16
anchors.margins: 12
spacing: 12
ImageStatus {
Layout.preferredWidth: height
@ -165,14 +138,14 @@ Item {
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter
visible: parent.width > 80
visible: parent.width > 64
Label {
Layout.fillWidth: true
Layout.fillHeight: true
text: name || "No Name"
font.pointSize: 16
font.pointSize: 12
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
@ -181,7 +154,7 @@ Item {
Layout.fillWidth: true
Layout.fillHeight: true
text: lastEvent || topic
text: (lastEvent || topic).replace(/(\r\n\t|\n|\r\t)/gm,"");
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
@ -200,10 +173,6 @@ Item {
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
horizontalAlignment: MSettings.miniMode ? Text.AlignHCenter : undefined
background: Rectangle {
anchors.fill: parent
color: MSettings.darkTheme ? "#363636" : "#dbdbdb"
}
}
Dialog {
@ -225,5 +194,4 @@ Item {
}
}
}
}
}

45
qml/main.qml
View File

@ -82,19 +82,21 @@ ApplicationWindow {
Rectangle {
id: sideNav
Layout.preferredWidth: 80
Layout.preferredWidth: 64
Layout.fillHeight: true
color: Material.accent
color: Material.primary
ColumnLayout {
anchors.fill: parent
spacing: 0
SideNavButton {
id: statusNavButton
contentItem: ImageStatus {
Layout.fillWidth: true
Layout.preferredHeight: width
ImageStatus {
anchors.fill: parent
anchors.margins: 15
anchors.margins: 12
source: matriqueController.isLogin ? connection.localUser && connection.localUser.avatarUrl ? "image://mxc/" + connection.localUser.avatarUrl : "" : "qrc:/asset/img/avatar.png"
displayText: matriqueController.isLogin && connection.localUser.displayName ? connection.localUser.displayName : ""
@ -109,7 +111,16 @@ ApplicationWindow {
}
SideNavButton {
contentItem: MaterialIcon { icon: "\ue145"; color: "white" }
Layout.fillWidth: true
Layout.preferredHeight: width
MaterialIcon {
anchors.fill: parent
icon: "\ue145"
color: "white"
}
onClicked: addRoomMenu.popup()
Menu {
@ -171,6 +182,7 @@ ApplicationWindow {
onAccepted: matriqueController.joinRoom(joinRoomDialogTextField.text)
}
}
MenuItem {
text: "Direct Chat"
onTriggered: directChatDialog.open()
@ -199,12 +211,29 @@ ApplicationWindow {
}
SideNavButton {
contentItem: MaterialIcon { icon: "\ue8b8"; color: "white" }
Layout.fillWidth: true
Layout.preferredHeight: width
MaterialIcon {
anchors.fill: parent
icon: "\ue8b8"
color: parent.highlighted ? Material.accent : "white"
}
page: settingPage
}
SideNavButton {
contentItem: MaterialIcon { icon: "\ue879"; color: "white" }
Layout.fillWidth: true
Layout.preferredHeight: width
MaterialIcon {
anchors.fill: parent
icon: "\ue879"
color: "white"
}
onClicked: Qt.quit()
}
}

6
qtquickcontrols2.conf
View File

@ -7,9 +7,7 @@ Style=Material
[Material]
Theme=Light
Primary=#00695c
Accent=#00695c
;Primary=#1565c0
;Accent=#1565c0
Primary=#344955
Accent=#498882
;Foreground=Black
;Background=#161616