ESCA111/neochat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve tabbar in room list.

Browse Source
This commit is contained in:
Black Hat
2019-07-12 15:30:57 +08:00
parent 7b4e2cbb7f
commit 7f05c67534
1 changed files with 165 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
imports/Spectral/Panel/RoomListPanel.qml
View File

@@ -18,7 +18,7 @@ Item {
property var connection: null property var connection: null
readonly property var user: connection ? connection.localUser : null readonly property var user: connection ? connection.localUser : null
property int filter: tabBar.currentIndex property int filter: 0
property var enteredRoom: null property var enteredRoom: null
signal enterRoom(var room) signal enterRoom(var room)
@@ -178,8 +178,6 @@ Item {
background: Rectangle { background: Rectangle {
color: Material.background color: Material.background
opacity: listView.atYBeginning ? 0 : 1
layer.enabled: true layer.enabled: true
layer.effect: ElevationEffect { layer.effect: ElevationEffect {
elevation: 2 elevation: 2
@@ -193,8 +191,9 @@ Item {
id: listView id: listView
z: -1
spacing: 0 spacing: 0
clip: true
model: sortedRoomListModel model: sortedRoomListModel
@@ -352,18 +351,46 @@ Item {
} }
} }
TabBar { Control {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 48
Layout.margins: 16
padding: 8
contentItem: RowLayout {
id: tabBar id: tabBar
TabButton { spacing: 8
contentItem: Item {
Control {
readonly property bool highlighted: filter === 0
Layout.fillWidth: highlighted
Layout.fillHeight: true
id: newTabControl
horizontalPadding: 8
background: Rectangle {
visible: newTabControl.highlighted
color: Material.accent
border.color: Material.accent
border.width: 2
radius: height / 2
}
contentItem: RowLayout {
spacing: 0
MaterialIcon { MaterialIcon {
anchors.centerIn: parent Layout.preferredWidth: 32
Layout.preferredHeight: 32
icon: "\ue7f5" icon: "\ue7f5"
color: MPalette.lighter color: newTabControl.highlighted ? "white" : MPalette.lighter
Rectangle { Rectangle {
anchors.right: parent.right anchors.right: parent.right
@@ -388,18 +415,121 @@ Item {
} }
} }
} }
Label {
Layout.alignment: Qt.AlignVCenter
visible: newTabControl.highlighted
text: "New"
color: "white"
} }
} }
TabButton {
contentItem: MaterialIcon { MouseArea {
anchors.fill: parent
onClicked: filter = 0
}
}
Control {
readonly property bool highlighted: filter === 1
Layout.fillWidth: highlighted
Layout.fillHeight: true
id: peopleTabControl
horizontalPadding: 8
background: Rectangle {
visible: peopleTabControl.highlighted
color: Material.accent
border.color: Material.accent
border.width: 2
radius: height / 2
}
contentItem: RowLayout {
spacing: 0
MaterialIcon {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
icon: "\ue7ff" icon: "\ue7ff"
color: MPalette.lighter color: peopleTabControl.highlighted ? "white" : MPalette.lighter
}
Label {
Layout.alignment: Qt.AlignVCenter
visible: peopleTabControl.highlighted
text: "People"
color: "white"
} }
} }
TabButton {
contentItem: MaterialIcon { MouseArea {
anchors.fill: parent
onClicked: filter = 1
}
}
Control {
readonly property bool highlighted: filter === 2
Layout.fillWidth: highlighted
Layout.fillHeight: true
id: groupTabControl
horizontalPadding: 8
background: Rectangle {
visible: groupTabControl.highlighted
color: Material.accent
border.color: Material.accent
border.width: 2
radius: height / 2
}
contentItem: RowLayout {
spacing: 0
MaterialIcon {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
icon: "\ue7fc" icon: "\ue7fc"
color: MPalette.lighter color: groupTabControl.highlighted ? "white" : MPalette.lighter
}
Label {
Layout.alignment: Qt.AlignVCenter
visible: groupTabControl.highlighted
text: "Group"
color: "white"
}
}
MouseArea {
anchors.fill: parent
onClicked: filter = 2
}
}
}
background: Rectangle {
color: MSettings.darkTheme ? "#303030" : "#fafafa"
radius: 24
layer.enabled: true
layer.effect: ElevationEffect {
elevation: 1
} }
} }
} }