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

Add drawer on the left.

This commit is contained in:
Black Hat 2018-11-17 17:32:38 +08:00
parent aaae68a5bf
commit 08ce01473a
8 changed files with 206 additions and 455 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
imports/Spectral/Page/Room.qml
View File

@ -1,63 +0,0 @@
import QtQuick 2.9
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
import Spectral.Panel 2.0
import Spectral.Component 2.0
import Spectral.Effect 2.0
import Spectral 0.1
import Spectral.Setting 0.1
Page {
property alias connection: roomListModel.connection
property alias enteredRoom: roomListForm.enteredRoom
property alias filter: roomListForm.filter
id: page
RoomListModel {
id: roomListModel
onNewMessage: if (!window.active) spectralController.postNotification(roomId, eventId, roomName, senderName, text, icon, iconPath)
}
SplitView {
anchors.fill: parent
RoomListPanel {
width: page.width * 0.35
Layout.minimumWidth: 64
id: roomListForm
clip: true
listModel: roomListModel
onWidthChanged: {
if (width < 240) width = 64
}
onLeaveRoom: roomForm.saveReadMarker(room)
}
RoomPanel {
Layout.fillWidth: true
Layout.minimumWidth: 480
id: roomForm
clip: true
currentRoom: roomListForm.enteredRoom
}
}
function goToEvent(eventID) {
roomForm.goToEvent(eventID)
}
}

5
imports/Spectral/Page/Setting.qml
View File

@ -1,5 +0,0 @@
import QtQuick 2.9
SettingForm {
addAccountButton.onClicked: stackView.push(loginPage)
}

110
imports/Spectral/Page/SettingAccountDelegate.qml
View File

@ -1,110 +0,0 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import Spectral.Component 2.0
import Spectral 0.1
import Spectral.Setting 0.1
Column {
property bool expanded: false
spacing: 8
ItemDelegate {
width: accountSettingsListView.width
height: 64
Row {
anchors.fill: parent
anchors.margins: 8
spacing: 8
ImageItem {
width: parent.height
height: parent.height
hint: user.displayName
source: user.paintable
}
ColumnLayout {
Label {
text: user.displayName
}
Label {
text: user.id
}
}
}
onClicked: expanded = !expanded
}
ColumnLayout {
width: parent.width - 32
height: expanded ? implicitHeight : 0
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0
clip: true
RowLayout {
Layout.fillWidth: true
Label {
text: "Homeserver:"
}
AutoTextField {
Layout.fillWidth: true
text: connection.homeserver
readOnly: true
}
}
RowLayout {
Layout.fillWidth: true
spacing: 16
Label {
text: "Device ID:"
}
AutoTextField {
Layout.fillWidth: true
text: connection.deviceId
readOnly: true
}
}
RowLayout {
Layout.fillWidth: true
spacing: 16
Label {
text: "Access Token:"
}
AutoTextField {
Layout.fillWidth: true
text: connection.accessToken
readOnly: true
}
}
Button {
Layout.fillWidth: true
highlighted: true
text: "Logout"
onClicked: spectralController.logout(connection)
}
}
}

11
imports/Spectral/Page/SettingCategoryDelegate.qml
View File

@ -1,11 +0,0 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
ItemDelegate {
text: category
onClicked: {
settingStackView.clear()
settingStackView.push([accountForm, generalForm, appearanceForm, aboutForm][form])
}
}

185
imports/Spectral/Page/SettingForm.ui.qml
View File

@ -1,185 +0,0 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2
import QtQuick.Layouts 1.3
import Spectral.Component 2.0
import Spectral.Effect 2.0
import Spectral 0.1
import Spectral.Setting 0.1
Page {
property alias listModel: accountSettingsListView.model
property alias addAccountButton: addAccountButton
implicitWidth: 400
implicitHeight: 300
Page {
id: accountForm
parent: null
padding: 64
ColumnLayout {
anchors.fill: parent
AutoListView {
Layout.fillWidth: true
Layout.fillHeight: true
id: accountSettingsListView
boundsBehavior: Flickable.DragOverBounds
clip: true
delegate: SettingAccountDelegate {}
}
Button {
Layout.fillWidth: true
id: addAccountButton
text: "Add Account"
flat: true
highlighted: true
}
}
}
Page {
id: generalForm
parent: null
padding: 64
Column {
Switch {
text: "Use press and hold instead of right click"
checked: MSettings.pressAndHold
onCheckedChanged: MSettings.pressAndHold = checked
}
Switch {
text: "Show tray icon"
checked: MSettings.showTray
onCheckedChanged: MSettings.showTray = checked
}
Switch {
text: "Confirm on Exit"
checked: MSettings.confirmOnExit
onCheckedChanged: MSettings.confirmOnExit = checked
}
}
}
Page {
id: appearanceForm
parent: null
padding: 64
Column {
Switch {
text: "Dark theme"
checked: MSettings.darkTheme
onCheckedChanged: MSettings.darkTheme = checked
}
}
}
Page {
id: aboutForm
parent: null
padding: 64
ColumnLayout {
spacing: 16
Image {
Layout.preferredWidth: 64
Layout.preferredHeight: 64
source: "qrc:/assets/img/icon.png"
}
Label {
text: "Spectral, an IM client for the Matrix protocol."
}
Label {
text: "Released under GNU General Public License, version 3."
}
}
}
Rectangle {
width: 240
height: parent.height
z: 10
id: settingDrawer
color: MSettings.darkTheme ? "#323232" : "#f3f3f3"
layer.enabled: true
layer.effect: ElevationEffect {
elevation: 4
}
Column {
anchors.fill: parent
Repeater {
model: ListModel {
ListElement {
category: "Accounts"
form: 0
}
ListElement {
category: "General"
form: 1
}
ListElement {
category: "Appearance"
form: 2
}
ListElement {
category: "About"
form: 3
}
}
delegate: SettingCategoryDelegate {
width: parent.width
}
}
}
}
StackView {
anchors.fill: parent
anchors.leftMargin: settingDrawer.width
id: settingStackView
initialItem: aboutForm
}
}
/*##^## Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

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

@ -6,6 +6,7 @@ import QtQuick.Controls.Material 2.2
import Spectral.Component 2.0
import Spectral.Menu 2.0
import Spectral.Effect 2.0
import Spectral 0.1
import Spectral.Setting 0.1
@ -90,70 +91,205 @@ Rectangle {
edge: Qt.LeftEdge
Component {
id: mainPage
ColumnLayout {
readonly property string title: "Main"
id: mainColumn
spacing: 0
Control {
Layout.fillWidth: true
Layout.preferredHeight: 330
padding: 24
contentItem: ColumnLayout {
spacing: 4
ImageItem {
Layout.preferredWidth: 200
Layout.preferredHeight: 200
Layout.margins: 12
Layout.alignment: Qt.AlignHCenter
source: root.user ? root.user.paintable : null
hint: root.user ? root.user.displayName : "?"
}
Label {
Layout.alignment: Qt.AlignHCenter
text: root.user ? root.user.displayName : "No Name"
color: "white"
font.pointSize: 16.5
}
Label {
Layout.alignment: Qt.AlignHCenter
text: root.user ? root.user.id : "@example:matrix.org"
color: "white"
opacity: 0.7
font.pointSize: 9.75
}
}
background: Rectangle { color: Material.primary }
ItemDelegate {
anchors.fill: parent
}
}
ScrollView {
Layout.fillWidth: true
Layout.fillHeight: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ColumnLayout {
width: mainColumn.width
spacing: 0
Repeater {
model: AccountListModel {
controller: spectralController
}
delegate: ItemDelegate {
Layout.fillWidth: true
text: user.displayName
onClicked: {
controller.connection = connection
drawer.close()
}
}
}
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 1
color: "#e7ebeb"
}
ItemDelegate {
Layout.fillWidth: true
text: "Settings"
onClicked: stackView.push(settingsPage)
}
ItemDelegate {
Layout.fillWidth: true
text: "Exit"
onClicked: Qt.quit()
}
}
}
}
}
Component {
id: settingsPage
ScrollView {
readonly property string title: "Settings"
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
padding: 16
ColumnLayout {
width: parent.width
spacing: 0
Switch {
text: "Dark theme"
checked: MSettings.darkTheme
onCheckedChanged: MSettings.darkTheme = checked
}
Switch {
text: "Use press and hold instead of right click"
checked: MSettings.pressAndHold
onCheckedChanged: MSettings.pressAndHold = checked
}
Switch {
text: "Show tray icon"
checked: MSettings.showTray
onCheckedChanged: MSettings.showTray = checked
}
Switch {
text: "Confirm on Exit"
checked: MSettings.confirmOnExit
onCheckedChanged: MSettings.confirmOnExit = checked
}
}
}
}
ColumnLayout {
width: parent.width
anchors.fill: parent
spacing: 0
Control {
Layout.fillWidth: true
Layout.preferredHeight: 330
Layout.preferredHeight: 64
padding: 24
visible: stackView.depth > 1
contentItem: ColumnLayout {
spacing: 4
contentItem: RowLayout {
anchors.fill: parent
ToolButton {
Layout.preferredWidth: height
Layout.fillHeight: true
ImageItem {
Layout.preferredWidth: 200
Layout.preferredHeight: 200
Layout.margins: 12
Layout.alignment: Qt.AlignHCenter
contentItem: MaterialIcon {
icon: "\ue5c4"
color: "white"
}
source: root.user ? root.user.paintable : null
hint: root.user ? root.user.displayName : "?"
onClicked: stackView.pop()
}
Label {
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
text: root.user ? root.user.displayName : "No Name"
text: stackView.currentItem.title
color: "white"
font.pointSize: 16.5
}
Label {
Layout.alignment: Qt.AlignHCenter
text: root.user ? root.user.id : "@example:matrix.org"
color: "white"
opacity: 0.7
font.pointSize: 9.75
font.pointSize: 13.5
elide: Label.ElideRight
}
}
background: Rectangle { color: "#455A64" }
}
Repeater {
model: AccountListModel {
controller: spectralController
}
delegate: ItemDelegate {
Layout.fillWidth: true
text: user.displayName
onClicked: controller.connection = connection
background: Rectangle {
color: Material.primary
}
}
ItemDelegate {
StackView {
Layout.fillWidth: true
Layout.fillHeight: true
text: "Exit"
id: stackView
onClicked: Qt.quit()
initialItem: mainPage
}
}
}
@ -163,9 +299,13 @@ Rectangle {
spacing: 0
Control {
readonly property bool isSearching: searchField.text
Layout.fillWidth: true
Layout.preferredHeight: 64
id: roomListHeader
topPadding: 12
bottomPadding: 12
leftPadding: 12
@ -177,13 +317,17 @@ Rectangle {
Layout.fillHeight: true
contentItem: MaterialIcon {
icon: searchField.visible ? "\ue5cd" : "\ue8b6"
color: searchField.visible ? "#1D333E" : "#7F7F7F"
icon: roomListHeader.isSearching ? "\ue5cd" : "\ue8b6"
color: roomListHeader.isSearching ? "#1D333E" : "7F7F7F"
}
onClicked: {
if (searchField.visible) searchField.clear()
searchField.visible = !searchField.visible
if (searchField.focus) {
searchField.clear()
searchField.focus = false
} else {
searchField.focus = true
}
}
}
@ -193,7 +337,6 @@ Rectangle {
id: searchField
visible: false
topPadding: 0
bottomPadding: 0
placeholderText: "Search..."
@ -201,25 +344,12 @@ Rectangle {
background: Item {}
}
Label {
Layout.fillWidth: true
Layout.fillHeight: true
visible: !searchField.visible
text: root.user ? root.user.displayName : "No Name"
elide: Text.ElideRight
wrapMode: Text.NoWrap
font.pointSize: 12
color: "#7F7F7F"
verticalAlignment: Text.AlignVCenter
}
ImageItem {
Layout.preferredWidth: height
Layout.fillHeight: true
Layout.alignment: Qt.AlignRight
visible: !searchField.visible
visible: !roomListHeader.isSearching
source: root.user ? root.user.paintable : null
hint: root.user ? root.user.displayName : "?"
@ -265,17 +395,17 @@ Rectangle {
opacity: 0.6
wrapMode: Text.Wrap
}
ItemDelegate {
Layout.preferredHeight: 32
Layout.alignment: Qt.AlignRight
text: "Dismiss"
Material.foreground: "white"
onClicked: errorControl.visible = false
}
}
background: Rectangle { color: "#273338" }
background: Rectangle {
color: "#273338"
}
ItemDelegate {
anchors.fill: parent
onClicked: errorControl.visible = false
}
}
AutoListView {

10
qml/main.qml
View File

@ -112,9 +112,9 @@ ApplicationWindow {
}
Component.onCompleted: {
spectralController.initiated.connect(function() {
if (spectralController.accountCount == 0) stackView.push(loginPage)
})
}
// Component.onCompleted: {
// spectralController.initiated.connect(function() {
// if (spectralController.accountCount == 0) stackView.push(loginPage)
// })
// }
}

5
res.qrc
View File

@ -21,7 +21,6 @@
<file>imports/Spectral/Menu/RoomContextMenu.qml</file>
<file>imports/Spectral/Page/Login.qml</file>
<file>imports/Spectral/Page/qmldir</file>
<file>imports/Spectral/Page/Room.qml</file>
<file>assets/font/material.ttf</file>
<file>assets/img/icon.icns</file>
<file>assets/img/icon.ico</file>
@ -30,10 +29,6 @@
<file>imports/Spectral/Font/MaterialFont.qml</file>
<file>imports/Spectral/Font/qmldir</file>
<file>imports/Spectral/Setting/qmldir</file>
<file>imports/Spectral/Page/Setting.qml</file>
<file>imports/Spectral/Page/SettingForm.ui.qml</file>
<file>imports/Spectral/Page/SettingCategoryDelegate.qml</file>
<file>imports/Spectral/Page/SettingAccountDelegate.qml</file>
<file>imports/Spectral/Page/LoginForm.ui.qml</file>
<file>imports/Spectral/Panel/qmldir</file>
<file>imports/Spectral/Panel/RoomDrawer.qml</file>