Working dark mode && more drawer specific changes.

This commit is contained in:
Black Hat
2018-11-17 20:52:17 +08:00
parent 08ce01473a
commit a7f62c13b0
18 changed files with 829 additions and 452 deletions

View File

@@ -6,7 +6,7 @@ import QtQuick.Controls.Material 2.2
import Spectral 0.1
import Spectral.Effect 2.0
Rectangle {
Control {
property alias paintable: headerImage.source
property alias topic: headerTopicLabel.text
property bool atTop: false
@@ -14,64 +14,65 @@ Rectangle {
id: header
color: atTop ? "transparent" : "white"
background: Rectangle {
color: Material.background
layer.enabled: !atTop
layer.effect: ElevationEffect {
elevation: 4
opacity: atTop ? 0 : 1
layer.enabled: true
layer.effect: ElevationEffect {
elevation: 2
}
}
ItemDelegate {
RowLayout {
anchors.fill: parent
anchors.margins: 12
id: roomHeader
spacing: 12
onClicked: header.clicked()
ImageItem {
Layout.preferredWidth: height
Layout.fillHeight: true
RowLayout {
anchors.fill: parent
anchors.margins: 12
id: headerImage
spacing: 12
source: currentRoom.paintable
hint: currentRoom ? currentRoom.displayName : "No name"
}
ImageItem {
Layout.preferredWidth: height
Layout.fillHeight: true
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
id: headerImage
visible: parent.width > 64
source: currentRoom.paintable
hint: currentRoom ? currentRoom.displayName : "No name"
}
ColumnLayout {
Label {
Layout.fillWidth: true
Layout.fillHeight: true
visible: parent.width > 64
text: currentRoom ? currentRoom.displayName : ""
font.pointSize: 12
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
Label {
Layout.fillWidth: true
Layout.fillHeight: true
Label {
Layout.fillWidth: true
Layout.fillHeight: true
text: currentRoom ? currentRoom.displayName : ""
color: "#1D333E"
font.pointSize: 12
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
id: headerTopicLabel
Label {
Layout.fillWidth: true
Layout.fillHeight: true
id: headerTopicLabel
color: "#5B7480"
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
color: "#5B7480"
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
}
}
RippleEffect {
anchors.fill: parent
onClicked: header.clicked()
}
}

View File

@@ -1,96 +0,0 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
import Spectral 0.1
import Spectral.Setting 0.1
import Spectral.Component 2.0
Item {
AutoMouseArea {
anchors.fill: parent
onSecondaryClicked: {
roomContextMenu.model = model
roomContextMenu.popup()
}
onPrimaryClicked: {
if (category === RoomType.Invited) {
inviteDialog.currentRoom = currentRoom
inviteDialog.open()
} else {
leaveRoom(enteredRoom)
enterRoom(currentRoom)
enteredRoom = currentRoom
}
}
}
Rectangle {
anchors.fill: parent
visible: highlightCount > 0 || currentRoom === enteredRoom
color: Material.accent
opacity: 0.1
}
Rectangle {
width: unreadCount > 0 ? 4 : 0
height: parent.height
color: Material.accent
Behavior on width {
PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
}
}
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 12
ImageItem {
id: imageItem
Layout.preferredWidth: height
Layout.fillHeight: true
source: paintable
hint: name || "No Name"
}
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter
visible: parent.width > 64
Label {
Layout.fillWidth: true
Layout.fillHeight: true
text: name || "No Name"
color: "#1D333E"
font.pointSize: 12
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
Label {
Layout.fillWidth: true
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
}
}
}
}

View File

@@ -17,7 +17,7 @@ Rectangle {
property var controller: null
readonly property var user: controller.connection ? controller.connection.localUser : null
readonly property int filter: 0
property int filter: 0
property var enteredRoom: null
property alias errorControl: errorControl
@@ -140,7 +140,7 @@ Rectangle {
background: Rectangle { color: Material.primary }
ItemDelegate {
RippleEffect {
anchors.fill: parent
}
}
@@ -172,11 +172,19 @@ Rectangle {
}
}
ItemDelegate {
Layout.fillWidth: true
text: "Add Account"
onClicked: loginDialog.open()
}
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 1
color: "#e7ebeb"
color: MSettings.darkTheme ? "#424242" : "#e7ebeb"
}
ItemDelegate {
@@ -187,6 +195,14 @@ Rectangle {
onClicked: stackView.push(settingsPage)
}
ItemDelegate {
Layout.fillWidth: true
text: "Logout"
onClicked: controller.logout(controller.connection)
}
ItemDelegate {
Layout.fillWidth: true
@@ -249,14 +265,18 @@ Rectangle {
spacing: 0
Control {
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 64
visible: stackView.depth > 1
contentItem: RowLayout {
color: Material.primary
RowLayout {
anchors.fill: parent
anchors.margins: 4
ToolButton {
Layout.preferredWidth: height
Layout.fillHeight: true
@@ -277,10 +297,6 @@ Rectangle {
elide: Label.ElideRight
}
}
background: Rectangle {
color: Material.primary
}
}
StackView {
@@ -289,6 +305,8 @@ Rectangle {
id: stackView
clip: true
initialItem: mainPage
}
}
@@ -299,8 +317,6 @@ Rectangle {
spacing: 0
Control {
readonly property bool isSearching: searchField.text
Layout.fillWidth: true
Layout.preferredHeight: 64
@@ -316,22 +332,66 @@ Rectangle {
Layout.preferredWidth: height
Layout.fillHeight: true
contentItem: MaterialIcon {
icon: roomListHeader.isSearching ? "\ue5cd" : "\ue8b6"
color: roomListHeader.isSearching ? "#1D333E" : "7F7F7F"
}
visible: !searchField.active
onClicked: {
if (searchField.focus) {
searchField.clear()
searchField.focus = false
} else {
searchField.focus = true
contentItem: MaterialIcon {
icon: {
switch (filter) {
case 0: return "\ue8b6"
case 1: return "\ue7f5"
case 2: return "\ue7ff"
case 3: return "\ue7fc"
}
}
}
Menu {
id: filterMenu
MenuItem {
text: "All"
onClicked: filter = 0
}
MenuSeparator {}
MenuItem {
text: "New"
onClicked: filter = 1
}
MenuItem {
text: "People"
onClicked: filter = 2
}
MenuItem {
text: "Group"
onClicked: filter = 3
}
}
onClicked: filterMenu.popup()
}
ItemDelegate {
Layout.preferredWidth: height
Layout.fillHeight: true
visible: searchField.active
contentItem: MaterialIcon { icon: "\ue5cd" }
onClicked: searchField.clear()
}
AutoTextField {
readonly property bool active: text
Layout.fillWidth: true
Layout.fillHeight: true
@@ -349,7 +409,7 @@ Rectangle {
Layout.fillHeight: true
Layout.alignment: Qt.AlignRight
visible: !roomListHeader.isSearching
visible: !searchField.active
source: root.user ? root.user.paintable : null
hint: root.user ? root.user.displayName : "?"
@@ -360,6 +420,17 @@ Rectangle {
}
}
}
background: Rectangle {
color: Material.background
opacity: listView.atYBeginning ? 0 : 1
layer.enabled: true
layer.effect: ElevationEffect {
elevation: 2
}
}
}
Control {
@@ -423,9 +494,93 @@ Rectangle {
ScrollBar.vertical: ScrollBar {}
delegate: RoomListDelegate {
width: parent.width
delegate: Item {
width: listView.width
height: 64
Rectangle {
anchors.fill: parent
visible: highlightCount > 0 || currentRoom === enteredRoom
color: Material.accent
opacity: 0.1
}
Rectangle {
width: unreadCount > 0 ? 4 : 0
height: parent.height
color: Material.accent
Behavior on width {
PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
}
}
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 12
ImageItem {
id: imageItem
Layout.preferredWidth: height
Layout.fillHeight: true
source: paintable
hint: name || "No Name"
}
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter
visible: parent.width > 64
Label {
Layout.fillWidth: true
Layout.fillHeight: true
text: name || "No Name"
font.pointSize: 12
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
Label {
Layout.fillWidth: true
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
}
}
}
RippleEffect {
anchors.fill: parent
onSecondaryClicked: {
roomContextMenu.model = model
roomContextMenu.popup()
}
onPrimaryClicked: {
if (category === RoomType.Invited) {
inviteDialog.currentRoom = currentRoom
inviteDialog.open()
} else {
leaveRoom(enteredRoom)
enterRoom(currentRoom)
enteredRoom = currentRoom
}
}
}
}
section.property: "display"

View File

@@ -54,7 +54,7 @@ Item {
visible: currentRoom
source: "qrc:/assets/img/roompanel.svg"
source: MSettings.darkTheme ? "qrc:/assets/img/roompanel-dark.svg" : "qrc:/assets/img/roompanel.svg"
fillMode: Image.PreserveAspectCrop
}