From 64749ba32fc5956d6580dc8862c71e513a675963 Mon Sep 17 00:00:00 2001 From: Black Hat Date: Sun, 2 Sep 2018 21:26:42 +0800 Subject: [PATCH] First UI redesign. --- qml/Room.qml | 37 ++-- qml/component/SideNavButton.qml | 36 ++-- qml/component/TextDelegate.qml | 4 +- qml/form/RoomForm.qml | 282 +++++++++++++++-------------- qml/form/RoomListForm.qml | 310 ++++++++++++++------------------ qml/main.qml | 45 ++++- qtquickcontrols2.conf | 6 +- 7 files changed, 354 insertions(+), 366 deletions(-) diff --git a/qml/Room.qml b/qml/Room.qml index 5e7217503..702f69ec3 100644 --- a/qml/Room.qml +++ b/qml/Room.qml @@ -18,28 +18,35 @@ Page { onNewMessage: if (!window.active) matriqueController.showMessage(roomName, content, icon) } - RowLayout { + Rectangle { anchors.fill: parent - spacing: 0 - RoomListForm { - id: roomListForm + color: MSettings.darkTheme ? "#363636" : "#f3f3f3" - Layout.fillHeight: true - Layout.preferredWidth: MSettings.miniMode ? 80 : page.width * 0.35 - Layout.minimumWidth: 80 - Layout.maximumWidth: 360 + RowLayout { + anchors.fill: parent - listModel: roomListModel - } + spacing: 0 - RoomForm { - id: roomForm + RoomListForm { + id: roomListForm - Layout.fillWidth: true - Layout.fillHeight: true + Layout.fillHeight: true + Layout.preferredWidth: MSettings.miniMode ? 64 : page.width * 0.35 + Layout.minimumWidth: 64 + Layout.maximumWidth: 360 - currentRoom: roomListForm.enteredRoom + listModel: roomListModel + } + + RoomForm { + id: roomForm + + Layout.fillWidth: true + Layout.fillHeight: true + + currentRoom: roomListForm.enteredRoom + } } } } diff --git a/qml/component/SideNavButton.qml b/qml/component/SideNavButton.qml index e57d1bce9..8c9bf2749 100644 --- a/qml/component/SideNavButton.qml +++ b/qml/component/SideNavButton.qml @@ -3,41 +3,29 @@ 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) { - stackView.replace(page) - } else { - stackView.clear() - stackView.push(page) - } + onClicked: { + if(page && stackView.currentItem !== page) { + if(stackView.depth === 1) { + stackView.replace(page) + } else { + stackView.clear() + stackView.push(page) } - sideNavButton.clicked() } } } diff --git a/qml/component/TextDelegate.qml b/qml/component/TextDelegate.qml index f0077324b..947017868 100644 --- a/qml/component/TextDelegate.qml +++ b/qml/component/TextDelegate.qml @@ -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 { diff --git a/qml/form/RoomForm.qml b/qml/form/RoomForm.qml index 6e9335331..92a00c7c7 100644 --- a/qml/form/RoomForm.qml +++ b/qml/form/RoomForm.qml @@ -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,152 +335,149 @@ Item { } } - Pane { - padding: 16 - + RowLayout { Layout.fillWidth: true - Layout.preferredHeight: 80 + Layout.preferredHeight: 48 + Layout.margins: 16 - Timer { - id: timeoutTimer + spacing: 0 - repeat: false - interval: 2000 - onTriggered: { - repeatTimer.stop() - currentRoom.sendTypingNotification(false) + 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 + + repeat: false + interval: 2000 + onTriggered: { + repeatTimer.stop() + currentRoom.sendTypingNotification(false) + } + } + + Timer { + id: repeatTimer + + repeat: true + interval: 5000 + triggeredOnStart: true + onTriggered: currentRoom.sendTypingNotification(true) + } + + function postMessage(text) { + if (text.trim().length === 0) { return } + if(!currentRoom) { return } + + var PREFIX_ME = '/me ' + var PREFIX_NOTICE = '/notice ' + var PREFIX_RAINBOW = '/rainbow ' + var PREFIX_HTML = '/html ' + var PREFIX_MARKDOWN = '/md ' + + if (text.indexOf(PREFIX_ME) === 0) { + text = text.substr(PREFIX_ME.length) + currentRoom.postMessage(text, RoomMessageEvent.Emote) + return + } + if (text.indexOf(PREFIX_NOTICE) === 0) { + text = text.substr(PREFIX_NOTICE.length) + currentRoom.postMessage(text, RoomMessageEvent.Notice) + return + } + if (text.indexOf(PREFIX_RAINBOW) === 0) { + text = text.substr(PREFIX_RAINBOW.length) + + var parsedText = "" + var rainbowColor = ["#ff2b00", "#ff5500", "#ff8000", "#ffaa00", "#ffd500", "#ffff00", "#d4ff00", "#aaff00", "#80ff00", "#55ff00", "#2bff00", "#00ff00", "#00ff2b", "#00ff55", "#00ff80", "#00ffaa", "#00ffd5", "#00ffff", "#00d4ff", "#00aaff", "#007fff", "#0055ff", "#002bff", "#0000ff", "#2a00ff", "#5500ff", "#7f00ff", "#aa00ff", "#d400ff", "#ff00ff", "#ff00d4", "#ff00aa", "#ff0080", "#ff0055", "#ff002b", "#ff0000"] + for (var i = 0; i < text.length; i++) { + parsedText = parsedText + "" + text.charAt(i) + "" + } + currentRoom.postHtmlMessage(text, parsedText, RoomMessageEvent.Text) + return + } + if (text.indexOf(PREFIX_HTML) === 0) { + text = text.substr(PREFIX_HTML.length) + var re = new RegExp("<.*?>") + var plainText = text.replace(re, "") + currentRoom.postHtmlMessage(plainText, text, RoomMessageEvent.Text) + return + } + if (text.indexOf(PREFIX_MARKDOWN) === 0) { + text = text.substr(PREFIX_MARKDOWN.length) + var parsedText = Markdown.markdown_parser(text) + currentRoom.postHtmlMessage(text, parsedText, RoomMessageEvent.Text) + return + } + + currentRoom.postPlainText(text) } } - Timer { - id: repeatTimer + ItemDelegate { + id: emojiButton - repeat: true - interval: 5000 - triggeredOnStart: true - onTriggered: currentRoom.sendTypingNotification(true) - } + Layout.preferredWidth: 48 + Layout.preferredHeight: 48 - RowLayout { - anchors.fill: parent - spacing: 0 + contentItem: MaterialIcon { icon: "\ue24e" } - ItemDelegate { - Layout.preferredWidth: height - Layout.fillHeight: true + background: Rectangle { color: MSettings.darkTheme ? "#242424" : "#eaeaea" } - contentItem: MaterialIcon { icon: "\ue226" } + onClicked: emojiPicker.visible ? emojiPicker.close() : emojiPicker.open() - onClicked: currentRoom.chooseAndUploadFile() - } + EmojiPicker { + id: emojiPicker - TextField { - property real progress: 0 + parent: ApplicationWindow.overlay - id: inputField - Layout.fillWidth: true - Layout.fillHeight: true - placeholderText: "Send a Message" - leftPadding: 16 - topPadding: 0 - bottomPadding: 0 - selectByMouse: true + x: window.width - 370 + y: window.height - 440 - text: currentRoom ? currentRoom.cachedInput : "" - onTextChanged: { - timeoutTimer.restart() - repeatTimer.start() - currentRoom.cachedInput = text - } + width: 360 + height: 360 - 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 } - - var PREFIX_ME = '/me ' - var PREFIX_NOTICE = '/notice ' - var PREFIX_RAINBOW = '/rainbow ' - var PREFIX_HTML = '/html ' - var PREFIX_MARKDOWN = '/md ' - - if (text.indexOf(PREFIX_ME) === 0) { - text = text.substr(PREFIX_ME.length) - currentRoom.postMessage(text, RoomMessageEvent.Emote) - return - } - if (text.indexOf(PREFIX_NOTICE) === 0) { - text = text.substr(PREFIX_NOTICE.length) - currentRoom.postMessage(text, RoomMessageEvent.Notice) - return - } - if (text.indexOf(PREFIX_RAINBOW) === 0) { - text = text.substr(PREFIX_RAINBOW.length) - - var parsedText = "" - var rainbowColor = ["#ff2b00", "#ff5500", "#ff8000", "#ffaa00", "#ffd500", "#ffff00", "#d4ff00", "#aaff00", "#80ff00", "#55ff00", "#2bff00", "#00ff00", "#00ff2b", "#00ff55", "#00ff80", "#00ffaa", "#00ffd5", "#00ffff", "#00d4ff", "#00aaff", "#007fff", "#0055ff", "#002bff", "#0000ff", "#2a00ff", "#5500ff", "#7f00ff", "#aa00ff", "#d400ff", "#ff00ff", "#ff00d4", "#ff00aa", "#ff0080", "#ff0055", "#ff002b", "#ff0000"] - for (var i = 0; i < text.length; i++) { - parsedText = parsedText + "" + text.charAt(i) + "" - } - currentRoom.postHtmlMessage(text, parsedText, RoomMessageEvent.Text) - return - } - if (text.indexOf(PREFIX_HTML) === 0) { - text = text.substr(PREFIX_HTML.length) - var re = new RegExp("<.*?>") - var plainText = text.replace(re, "") - currentRoom.postHtmlMessage(plainText, text, RoomMessageEvent.Text) - return - } - if (text.indexOf(PREFIX_MARKDOWN) === 0) { - text = text.substr(PREFIX_MARKDOWN.length) - var parsedText = Markdown.markdown_parser(text) - currentRoom.postHtmlMessage(text, parsedText, RoomMessageEvent.Text) - return - } - - currentRoom.postPlainText(text) - } - } - - ItemDelegate { - id: emojiButton - - Layout.preferredWidth: height - Layout.fillHeight: true - - contentItem: MaterialIcon { icon: "\ue24e" } - - background: Rectangle { color: MSettings.darkTheme ? "#242424" : "#eaeaea" } - - onClicked: emojiPicker.visible ? emojiPicker.close() : emojiPicker.open() - - EmojiPicker { - id: emojiPicker - - parent: ApplicationWindow.overlay - - x: window.width - 370 - y: window.height - 440 - - width: 360 - height: 360 - - textArea: inputField - } + textArea: inputField } } } diff --git a/qml/form/RoomListForm.qml b/qml/form/RoomListForm.qml index bab3097ab..f9943b593 100644 --- a/qml/form/RoomListForm.qml +++ b/qml/form/RoomListForm.qml @@ -14,215 +14,183 @@ 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 + TextField { + id: searchField Layout.fillWidth: true - Layout.preferredHeight: 80 - color: Qt.tint(Material.accent, "#20FFFFFF") + Layout.preferredHeight: 40 + Layout.margins: 12 + leftPadding: MSettings.miniMode ? 4 : 32 + topPadding: 0 + bottomPadding: 0 + placeholderText: "Search..." - TextField { - id: searchField - width: parent.width - 18 - height: 36 - color: "white" - leftPadding: MSettings.miniMode ? 4 : 32 - topPadding: 0 - bottomPadding: 0 - anchors.centerIn: parent + background: Rectangle { + color: MSettings.darkTheme ? "#242424" : "#fafafa" + } - 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 - } - } - - Shortcut { - sequence: StandardKey.Find - onActivated: searchField.forceActiveFocus() - } + Shortcut { + sequence: StandardKey.Find + onActivated: searchField.forceActiveFocus() } } - Rectangle { + SortFilterProxyModel { + id: roomListProxyModel + filters: RegExpFilter { + roleName: "name" + pattern: searchField.text + caseSensitivity: Qt.CaseInsensitive + } + proxyRoles: ExpressionRole { + name: "display" + expression: { + switch (category) { + case 1: return "Invited" + case 2: return "Favorites" + case 3: return "Rooms" + case 4: return "People" + case 5: return "Low Priorities" + } + } + } + + sorters: [ + RoleSorter { roleName: "category" }, + RoleSorter { + enabled: MSettings.rearrangeByActivity + roleName: "unreadCount" + sortOrder: Qt.DescendingOrder + }, + StringSorter { roleName: "name" } + ] + } + + ListView { Layout.fillWidth: true Layout.fillHeight: true - color: MSettings.darkTheme ? "#242424" : "#eaeaea" + id: listView - Label { - z: 10 - text: MSettings.miniMode ? "Empty" : "Here? No, not here." - anchors.centerIn: parent - visible: listView.count === 0 - } + spacing: 1 + clip: true - SortFilterProxyModel { - id: roomListProxyModel - filters: RegExpFilter { - roleName: "name" - pattern: searchField.text - caseSensitivity: Qt.CaseInsensitive - } - proxyRoles: ExpressionRole { - name: "display" - expression: { - switch (category) { - case 1: return "Invited" - case 2: return "Favorites" - case 3: return "Rooms" - case 4: return "People" - case 5: return "Low Priorities" - } - } + model: roomListProxyModel + + currentIndex: -1 + + boundsBehavior: Flickable.DragOverBounds + + ScrollBar.vertical: ScrollBar {} + + delegate: Rectangle { + readonly property bool highlighted: currentRoom === enteredRoom + + width: parent.width + height: 64 + + color: "#fafafa" + + AutoMouseArea { + anchors.fill: parent + + hoverEnabled: MSettings.miniMode + + onSecondaryClicked: Qt.createComponent("qrc:/qml/menu/RoomContextMenu.qml").createObject(this) + onPrimaryClicked: category === RoomType.Invited ? inviteDialog.open() : enteredRoom = currentRoom + + ToolTip.visible: MSettings.miniMode && containsMouse + ToolTip.text: name } - sorters: [ - RoleSorter { roleName: "category" }, - RoleSorter { - enabled: MSettings.rearrangeByActivity - roleName: "unreadCount" - sortOrder: Qt.DescendingOrder - }, - StringSorter { roleName: "name" } - ] - } + Rectangle { + width: 4 + height: parent.height + color: Material.accent + visible: unreadCount > 0 || highlighted + } - ListView { - id: listView - anchors.fill: parent + RowLayout { + anchors.fill: parent + anchors.margins: 12 + spacing: 12 - model: roomListProxyModel + ImageStatus { + Layout.preferredWidth: height + Layout.fillHeight: true - currentIndex: -1 - - boundsBehavior: Flickable.DragOverBounds - - ScrollBar.vertical: ScrollBar { id: scrollBar } - - delegate: Rectangle { - readonly property bool highlighted: currentRoom === enteredRoom - - id: swipeDelegate - width: parent.width - height: 80 - - color: highlighted ? Material.background : "transparent" - - AutoMouseArea { - anchors.fill: parent - - hoverEnabled: MSettings.miniMode - - onSecondaryClicked: Qt.createComponent("qrc:/qml/menu/RoomContextMenu.qml").createObject(this) - onPrimaryClicked: category === RoomType.Invited ? inviteDialog.open() : enteredRoom = currentRoom - - ToolTip.visible: MSettings.miniMode && containsMouse - ToolTip.text: name + source: avatar ? "image://mxc/" + avatar : "" + displayText: name } - Rectangle { - width: 4 - height: parent.height - color: Qt.tint(Material.accent, "#20FFFFFF") - visible: unreadCount > 0 || highlighted - } + ColumnLayout { + Layout.fillWidth: true + Layout.fillHeight: true + Layout.alignment: Qt.AlignHCenter - RowLayout { - anchors.fill: parent - anchors.margins: 16 - spacing: 16 + visible: parent.width > 64 - ImageStatus { - Layout.preferredWidth: height - Layout.fillHeight: true - - source: avatar ? "image://mxc/" + avatar : "" - displayText: name - } - - ColumnLayout { + Label { Layout.fillWidth: true Layout.fillHeight: true - Layout.alignment: Qt.AlignHCenter - visible: parent.width > 80 + text: name || "No Name" + font.pointSize: 12 + elide: Text.ElideRight + wrapMode: Text.NoWrap + } - Label { - Layout.fillWidth: true - Layout.fillHeight: true + Label { + Layout.fillWidth: true + Layout.fillHeight: true - text: name || "No Name" - font.pointSize: 16 - elide: Text.ElideRight - wrapMode: Text.NoWrap - } - - Label { - Layout.fillWidth: true - Layout.fillHeight: true - - text: lastEvent || topic - elide: Text.ElideRight - wrapMode: Text.NoWrap - } + text: (lastEvent || topic).replace(/(\r\n\t|\n|\r\t)/gm,""); + elide: Text.ElideRight + wrapMode: Text.NoWrap } } } + } - section.property: "display" - section.criteria: ViewSection.FullString - section.delegate: Label { - width: parent.width - height: 24 - text: section - color: "grey" - leftPadding: MSettings.miniMode ? undefined : 16 - elide: Text.ElideRight - verticalAlignment: Text.AlignVCenter - horizontalAlignment: MSettings.miniMode ? Text.AlignHCenter : undefined - background: Rectangle { - anchors.fill: parent - color: MSettings.darkTheme ? "#363636" : "#dbdbdb" - } - } + section.property: "display" + section.criteria: ViewSection.FullString + section.delegate: Label { + width: parent.width + height: 24 + text: section + color: "grey" + leftPadding: MSettings.miniMode ? undefined : 16 + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + horizontalAlignment: MSettings.miniMode ? Text.AlignHCenter : undefined + } - Dialog { - id: inviteDialog - parent: ApplicationWindow.overlay + Dialog { + id: inviteDialog + parent: ApplicationWindow.overlay - x: (window.width - width) / 2 - y: (window.height - height) / 2 - width: 360 + x: (window.width - width) / 2 + y: (window.height - height) / 2 + width: 360 - title: "Action Required" - modal: true - standardButtons: Dialog.Ok | Dialog.Cancel + title: "Action Required" + modal: true + standardButtons: Dialog.Ok | Dialog.Cancel - contentItem: Label { text: "Accept this invitation?" } + contentItem: Label { text: "Accept this invitation?" } - onAccepted: currentRoom.acceptInvitation() - onRejected: currentRoom.forget() - } + onAccepted: currentRoom.acceptInvitation() + onRejected: currentRoom.forget() } } } diff --git a/qml/main.qml b/qml/main.qml index 83d917d98..1f06ca1d0 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -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() } } diff --git a/qtquickcontrols2.conf b/qtquickcontrols2.conf index fdec96c3a..0cc53197c 100644 --- a/qtquickcontrols2.conf +++ b/qtquickcontrols2.conf @@ -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