New Setting/Account page.
This commit is contained in:
Black Hat
parent
0f3d7db0d1
commit
647a2cdbf2
110
qml/Setting.qml
110
qml/Setting.qml
|
|
@ -7,31 +7,84 @@ import Matrique.Settings 0.1
|
|||
|
||||
import "component"
|
||||
import "form"
|
||||
import "qrc:/js/util.js" as Util
|
||||
|
||||
Page {
|
||||
property alias listModel: accountSettingsListView.model
|
||||
|
||||
Page {
|
||||
id: accountForm
|
||||
|
||||
parent: null
|
||||
|
||||
padding: 64
|
||||
|
||||
ListView {
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
|
||||
id: accountSettingsListView
|
||||
ListView {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
spacing: 0
|
||||
id: accountSettingsListView
|
||||
|
||||
delegate: RowLayout{
|
||||
Label {
|
||||
text: accountID
|
||||
}
|
||||
ItemDelegate {
|
||||
text: "Logout"
|
||||
onClicked: matriqueController.logout(connection);
|
||||
delegate: SwipeDelegate {
|
||||
width: accountSettingsListView.width
|
||||
height: 64
|
||||
|
||||
clip: true
|
||||
|
||||
Row {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 8
|
||||
|
||||
spacing: 8
|
||||
|
||||
ImageItem {
|
||||
width: parent.height
|
||||
height: parent.height
|
||||
|
||||
hint: name
|
||||
defaultColor: Util.stringToColor(name)
|
||||
image: avatar
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Label {
|
||||
text: name
|
||||
}
|
||||
Label {
|
||||
text: accountID
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
swipe.right: Rectangle {
|
||||
width: parent.height
|
||||
height: parent.height
|
||||
anchors.right: parent.right
|
||||
|
||||
color: Material.accent
|
||||
|
||||
MaterialIcon {
|
||||
anchors.fill: parent
|
||||
|
||||
icon: "\ue879"
|
||||
color: "white"
|
||||
}
|
||||
|
||||
SwipeDelegate.onClicked: matriqueController.logout(connection)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "Add Account"
|
||||
flat: true
|
||||
highlighted: true
|
||||
|
||||
onClicked: Util.pushToStack(stackView, loginPage)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,6 +93,8 @@ Page {
|
|||
|
||||
parent: null
|
||||
|
||||
padding: 64
|
||||
|
||||
Column {
|
||||
Switch {
|
||||
text: "Lazy load at initial sync"
|
||||
|
|
@ -69,6 +124,8 @@ Page {
|
|||
|
||||
parent: null
|
||||
|
||||
padding: 64
|
||||
|
||||
Column {
|
||||
Switch {
|
||||
text: "Dark theme"
|
||||
|
|
@ -95,6 +152,7 @@ Page {
|
|||
|
||||
Page {
|
||||
id: aboutForm
|
||||
|
||||
parent: null
|
||||
|
||||
padding: 64
|
||||
|
|
@ -112,48 +170,52 @@ Page {
|
|||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
ColumnLayout {
|
||||
Layout.preferredWidth: 240
|
||||
Layout.fillHeight: true
|
||||
Rectangle {
|
||||
width: 240
|
||||
height: parent.height
|
||||
|
||||
spacing: 0
|
||||
id: settingDrawer
|
||||
|
||||
color: MSettings.darkTheme ? "#323232" : "#f3f3f3"
|
||||
|
||||
Column {
|
||||
anchors.fill: parent
|
||||
|
||||
ItemDelegate {
|
||||
Layout.fillWidth: true
|
||||
width: parent.width
|
||||
|
||||
text: "Account"
|
||||
onClicked: pushToStack(accountForm)
|
||||
}
|
||||
|
||||
ItemDelegate {
|
||||
Layout.fillWidth: true
|
||||
width: parent.width
|
||||
|
||||
text: "General"
|
||||
onClicked: pushToStack(generalForm)
|
||||
}
|
||||
|
||||
ItemDelegate {
|
||||
Layout.fillWidth: true
|
||||
width: parent.width
|
||||
|
||||
text: "Appearance"
|
||||
onClicked: pushToStack(appearanceForm)
|
||||
}
|
||||
|
||||
ItemDelegate {
|
||||
Layout.fillWidth: true
|
||||
width: parent.width
|
||||
|
||||
text: "About"
|
||||
onClicked: pushToStack(aboutForm)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StackView {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
StackView {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: settingDrawer.width
|
||||
|
||||
id: settingStackView
|
||||
}
|
||||
id: settingStackView
|
||||
}
|
||||
|
||||
function pushToStack(item) {
|
||||
|
|
|
|||
|
|
@ -1,79 +0,0 @@
|
|||
import QtQuick 2.9
|
||||
import QtQuick.Controls 2.2
|
||||
import QtGraphicalEffects 1.0
|
||||
import QtQuick.Controls.Material 2.2
|
||||
|
||||
Item {
|
||||
property bool round: true
|
||||
property string source: ""
|
||||
property string displayText: ""
|
||||
readonly property bool showImage: source
|
||||
readonly property bool showInitial: !showImage && displayText || avatar.status != Image.Ready
|
||||
|
||||
id: item
|
||||
|
||||
Image {
|
||||
width: item.width
|
||||
height: item.width
|
||||
|
||||
id: avatar
|
||||
|
||||
visible: showImage
|
||||
source: item.source
|
||||
|
||||
mipmap: true
|
||||
layer.enabled: true
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
sourceSize.width: item.width
|
||||
|
||||
layer.effect: OpacityMask {
|
||||
maskSource: Item {
|
||||
width: avatar.width
|
||||
height: avatar.width
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
width: avatar.width
|
||||
height: avatar.width
|
||||
radius: round? avatar.width / 2 : 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Label {
|
||||
anchors.fill: parent
|
||||
|
||||
color: "white"
|
||||
visible: showInitial
|
||||
text: showInitial ? getInitials(displayText)[0] : ""
|
||||
font.pixelSize: 22
|
||||
font.bold: true
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
background: Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: round? width / 2 : 0
|
||||
color: showInitial ? stringToColor(displayText) : Material.accent
|
||||
}
|
||||
}
|
||||
|
||||
function getInitials(text) {
|
||||
if (!text) return "N"
|
||||
var initial = text.toUpperCase().replace(/[^a-zA-Z- ]/g, "").match(/\b\w/g);
|
||||
if (!initial) return "N"
|
||||
return initial
|
||||
}
|
||||
|
||||
function stringToColor(str) {
|
||||
var hash = 0;
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
||||
}
|
||||
var colour = '#';
|
||||
for (var j = 0; j < 3; j++) {
|
||||
var value = (hash >> (j * 8)) & 0xFF;
|
||||
colour += ('00' + value.toString(16)).substr(-2);
|
||||
}
|
||||
return colour;
|
||||
}
|
||||
}
|
||||
13
qml/main.qml
13
qml/main.qml
|
|
@ -242,19 +242,6 @@ ApplicationWindow {
|
|||
}
|
||||
}
|
||||
|
||||
SideNavButton {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: width
|
||||
|
||||
MaterialIcon {
|
||||
anchors.fill: parent
|
||||
|
||||
icon: "\ue8b8"
|
||||
color: "white"
|
||||
}
|
||||
page: loginPage
|
||||
}
|
||||
|
||||
SideNavButton {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: width
|
||||
|
|
|
|||
1
res.qrc
1
res.qrc
|
|
@ -6,7 +6,6 @@
|
|||
<file>asset/font/material.ttf</file>
|
||||
<file>qml/Login.qml</file>
|
||||
<file>qml/main.qml</file>
|
||||
<file>qml/component/ImageStatus.qml</file>
|
||||
<file>qml/form/RoomForm.qml</file>
|
||||
<file>qml/Room.qml</file>
|
||||
<file>qml/component/SideNavButton.qml</file>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ class MatriqueUser : public User {
|
|||
QImage getAvatar() { return avatar(64); }
|
||||
|
||||
signals:
|
||||
void inheritedAvatarChanged(User* user, const Room* roomContext);
|
||||
void inheritedAvatarChanged(User* user, const Room* roomContext); // https://bugreports.qt.io/browse/QTBUG-7684
|
||||
};
|
||||
|
||||
#endif // MATRIQUEUSER_H
|
||||
|
|
|
|||
Loading…
Reference in New Issue