From 759ae2aa38b164b8eb7bc543edfc72a0b2134883 Mon Sep 17 00:00:00 2001 From: Black Hat Date: Tue, 2 Jul 2019 13:25:45 +0800 Subject: [PATCH] Add tab bar and remove filter button. --- imports/Spectral/Panel/RoomListPanel.qml | 90 +++++++++++++++--------- imports/Spectral/Panel/RoomPanel.qml | 43 +++++++---- 2 files changed, 86 insertions(+), 47 deletions(-) diff --git a/imports/Spectral/Panel/RoomListPanel.qml b/imports/Spectral/Panel/RoomListPanel.qml index 3fa248bff..646229c1d 100644 --- a/imports/Spectral/Panel/RoomListPanel.qml +++ b/imports/Spectral/Panel/RoomListPanel.qml @@ -18,7 +18,7 @@ Item { property var connection: null readonly property var user: connection ? connection.localUser : null - property int filter: 0 + property int filter: tabBar.currentIndex property var enteredRoom: null signal enterRoom(var room) @@ -128,40 +128,8 @@ Item { visible: !searchField.active contentItem: MaterialIcon { - icon: { - switch (filter) { - case 0: return "\ue8b6" - case 1: return "\ue7ff" - case 2: return "\ue7fc" - } - } + icon: "\ue8b6" } - - Menu { - id: filterMenu - - MenuItem { - text: "New" - - onClicked: filter = 0 - } - - MenuSeparator {} - - MenuItem { - text: "People" - - onClicked: filter = 1 - } - - MenuItem { - text: "Group" - - onClicked: filter = 2 - } - } - - onClicked: filterMenu.popup() } ToolButton { @@ -369,7 +337,7 @@ Item { MaterialIcon { Layout.alignment: Qt.AlignHCenter - icon: "\ue2bf" + icon: "\ue5ca" font.pixelSize: 48 color: MPalette.lighter } @@ -383,6 +351,58 @@ Item { } } } + + TabBar { + Layout.fillWidth: true + + id: tabBar + + TabButton { + contentItem: Item { + MaterialIcon { + anchors.centerIn: parent + + icon: "\ue7f5" + color: MPalette.lighter + + Rectangle { + anchors.right: parent.right + anchors.top: parent.top + + visible: roomListModel.notificationCount > 0 + + width: 12 + height: 12 + radius: 6 + + color: "white" + + Rectangle { + anchors.centerIn: parent + + width: 8 + height: 8 + radius: 4 + + color: "red" + } + } + } + } + } + TabButton { + contentItem: MaterialIcon { + icon: "\ue7ff" + color: MPalette.lighter + } + } + TabButton { + contentItem: MaterialIcon { + icon: "\ue7fc" + color: MPalette.lighter + } + } + } } Component { diff --git a/imports/Spectral/Panel/RoomPanel.qml b/imports/Spectral/Panel/RoomPanel.qml index 7951e2149..99b36ba89 100644 --- a/imports/Spectral/Panel/RoomPanel.qml +++ b/imports/Spectral/Panel/RoomPanel.qml @@ -432,26 +432,45 @@ Item { anchors.bottom: parent.bottom visible: currentRoom && currentRoom.hasUsersTyping - padding: 8 + padding: 4 contentItem: RowLayout { - spacing: 8 + spacing: 0 - Repeater { - model: currentRoom && currentRoom.hasUsersTyping ? currentRoom.usersTyping : null + RowLayout { + spacing: -8 - delegate: Avatar { - Layout.preferredWidth: 24 - Layout.preferredHeight: 24 + Repeater { + model: currentRoom && currentRoom.hasUsersTyping ? currentRoom.usersTyping : null - source: modelData.avatarMediaId - hint: modelData.displayName + delegate: Rectangle { + Layout.preferredWidth: 28 + Layout.preferredHeight: 28 + + color: "white" + radius: 14 + + Avatar { + anchors.fill: parent + anchors.margins: 2 + + source: modelData.avatarMediaId + hint: modelData.displayName + } + } } } - BusyIndicator { - Layout.preferredWidth: 32 - Layout.preferredHeight: 32 + Item { + Layout.preferredWidth: 28 + Layout.preferredHeight: 28 + + BusyIndicator { + anchors.centerIn: parent + + width: 32 + height: 32 + } } }