Zergling_man/moment
Zergling_man/moment
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change toolbar model

Browse Source
This commit is contained in:
miruka 2019-03-25 18:29:46 -04:00
parent 12f14a6a7d
commit 16aa6142bb
14 changed files with 164 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
harmonyqml/AccountDelegate.qml
View File

@ -2,50 +2,52 @@ import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.4
Column {
Row {
readonly property string displayName:
Backend.getUser(section).display_name
id: row
width: roomListView.width
height: paddingItem.height + row.height
height: Math.max(accountLabel.height + statusEdit.height, avatar.height)
Item { id: paddingItem; width: 1; height: row.height / 2 }
Avatar { id: avatar; username: displayName; dimmension: 32 }
Row {
id: row
width: parent.width
height: avatar.height
Rectangle {
color: "#111"
width: parent.width - avatar.width
height: parent.height
Avatar { id: avatar; username: displayName }
ColumnLayout {
anchors.fill: parent
spacing: 1
Rectangle {
color: "#111"
width: parent.width - avatar.width
height: parent.height
PlainLabel {
id: accountLabel
text: displayName
color: "#CCC"
elide: Text.ElideRight
maximumLineCount: 1
Layout.fillWidth: true
ColumnLayout {
anchors.fill: parent
spacing: 1
topPadding: -2
bottomPadding: -2
leftPadding: 5
rightPadding: 5
}
TextField {
id: statusEdit
placeholderText: qsTr("Set status message")
background: Rectangle { color: "#333" }
color: "#CCC"
selectByMouse: true
font.family: "Roboto"
font.pixelSize: 12
Layout.fillWidth: true
PlainLabel {
id: accountLabel
text: displayName
horizontalAlignment: Qt.AlignHCenter
color: "#CCC"
elide: Text.ElideRight
maximumLineCount: 1
Layout.fillWidth: true
}
TextField {
id: statusEdit
placeholderText: qsTr("Set status message")
background: Rectangle { color: "#333" }
color: "#CCC"
selectByMouse: true
font.family: "Roboto"
font.pixelSize: 12
Layout.fillWidth: true
}
topPadding: 0
bottomPadding: 0
leftPadding: 5
rightPadding: 5
}
}
}

36
harmonyqml/ActionBar.qml
View File

@ -1,36 +0,0 @@
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.4
Row {
id: "root"
width: parent.width
height: 31
spacing: 0
ActionButton {
iconName: "home";
tooltip: "Home page"
targetPage: "HomePage"
}
ActionButton {
iconName: "add_account";
tooltip: "Add new account"
targetPage: "AddAccountPage"
}
ActionButton {
iconName: "add_room";
tooltip: "Create or join chat room"
targetPage: "AddRoomPage"
}
ActionButton {
iconName: "set_status";
tooltip: "Set status for all accounts"
}
ActionButton {
iconName: "settings";
tooltip: "Settings"
targetPage: "SettingsPage"
}
}

18
harmonyqml/ActionButton.qml
View File

@ -7,13 +7,21 @@ ToolButton {
property string iconName: ""
property string targetPage: ""
id: "root"
width: parent.width / parent.children.length
height: parent.height
function toolBarIsBig() {
return roomPane.width >
Layout.minimumWidth * (toolBar.children.length - 2)
}
id: "button"
display: ToolButton.IconOnly
icon.source: "icons/" + iconName + ".svg"
background: Rectangle { color: "transparent" }
visible: toolBarIsBig()
Layout.fillHeight: true
Layout.fillWidth: true
Layout.minimumWidth: height
onClicked: { toolTip.hide(); pageStack.show_page(targetPage) }
ToolTip {
@ -28,7 +36,7 @@ ToolButton {
hoverEnabled: true
acceptedButtons: Qt.NoButton // Make button receive clicks normally
onEntered: root.background.color = "#656565"
onExited: root.background.color = "transparent"
onEntered: button.background.color = "#656565"
onExited: button.background.color = "transparent"
}
}

2
harmonyqml/PlainLabel.qml
View File

@ -2,7 +2,7 @@ import QtQuick 2.7
import QtQuick.Controls 2.0
Label {
property int bigSize: 22
property int bigSize: 24
property int normalSize: 16
property int smallSize: 12

19
harmonyqml/RoomDelegate.qml
View File

@ -3,15 +3,16 @@ import QtQuick.Controls 2.0
import QtQuick.Layouts 1.4
Item {
id: "root"
width: roomListView.width
height: avatar.height
height: Math.max(roomLabel.height + subtitleLabel.height, avatar.height)
RowLayout {
anchors.fill: parent
id: row
spacing: 1
Avatar { id: avatar; username: display_name }
Avatar { id: avatar; username: display_name; dimmension: 32 }
ColumnLayout {
spacing: 0
@ -19,23 +20,29 @@ Item {
PlainLabel {
id: roomLabel
text: display_name
padding: 5
bottomPadding: subtitleLabel.visible ? 0 : padding
elide: Text.ElideRight
maximumLineCount: 1
Layout.maximumWidth: row.width - row.spacing - avatar.width
verticalAlignment: Qt.AlignVCenter
topPadding: -2
bottomPadding: subtitleLabel.visible ? 0 : topPadding
leftPadding: 5
rightPadding: leftPadding
}
PlainLabel {
id: subtitleLabel
visible: text !== ""
text: subtitle
padding: roomLabel.padding
topPadding: 0
font.pixelSize: smallSize
elide: Text.ElideRight
maximumLineCount: 1
Layout.maximumWidth: roomLabel.Layout.maximumWidth
topPadding: -2
bottomPadding: topPadding
leftPadding: 5
rightPadding: leftPadding
}
}

54
harmonyqml/RoomHeader.qml
View File

@ -5,36 +5,40 @@ import QtQuick.Layouts 1.4
Rectangle {
id: root
Layout.fillWidth: true
Layout.minimumHeight: avatar.height
Layout.minimumHeight: 32
Layout.maximumHeight: Layout.minimumHeight
color: "#BBB"
Row {
RowLayout {
id: "row"
spacing: 8
spacing: 12
anchors.fill: parent
Avatar { id: "avatar"; username: chatPage.room.display_name }
Column {
PlainLabel {
height: subtitleLabel.visible ? implicitHeight : row.height
id: "roomName"
text: chatPage.room.display_name
font.pixelSize: bigSize
elide: Text.ElideRight
maximumLineCount: 1
width: root.width - avatar.width - row.spacing * 2
verticalAlignment: Qt.AlignVCenter
}
PlainLabel {
id: subtitleLabel
text: chatPage.room.subtitle
visible: text !== ""
font.pixelSize: smallSize
elide: Text.ElideRight
maximumLineCount: 1
width: roomName.width
}
Avatar {
id: "avatar"
Layout.alignment: Qt.AlignTop
dimmension: root.Layout.minimumHeight
username: chatPage.room.display_name
}
PlainLabel {
id: "roomName"
text: chatPage.room.display_name
font.pixelSize: bigSize
elide: Text.ElideRight
maximumLineCount: 1
Layout.maximumWidth: row.width - row.spacing * (row.children.length - 1) - avatar.width
}
PlainLabel {
id: "roomSubtitle"
text: chatPage.room.subtitle
font.pixelSize: smallSize
elide: Text.ElideRight
maximumLineCount: 1
Layout.maximumWidth: row.width - row.spacing * (row.children.length - 1) - avatar.width - roomName.width
}
Item { Layout.fillWidth: true }
}
}

22
harmonyqml/RoomPane.qml
View File

@ -4,21 +4,21 @@ import QtQuick.Layouts 1.4
Rectangle {
id: roomPane
width: 180
Layout.minimumWidth: 48
Layout.fillHeight: true
color: "gray"
clip: true // Avoid artifacts when resizing pane width to minimum
Column {
x: parent.x
y: parent.y - 48 / 2
width: parent.width
height: parent.height + 48 / 2
ColumnLayout {
anchors.fill: parent
spacing: 0
TopBar {}
ListView {
width: parent.width
height: parent.height - actionBar.height
Layout.fillWidth: true
Layout.fillHeight: true
id: roomListView
spacing: 0
model: Backend.roomsModel
delegate: RoomDelegate {}
//highlight: Rectangle {color: "lightsteelblue"; radius: 5}
@ -26,7 +26,5 @@ Rectangle {
section.property: "account_id"
section.delegate: AccountDelegate {}
}
ActionBar { id: "actionBar" }
}
}

3
harmonyqml/SendBox.qml
View File

@ -7,7 +7,8 @@ Rectangle {
id: "root"
Layout.fillWidth: true
Layout.minimumHeight: textArea.implicitHeight
Layout.minimumHeight: 32
Layout.preferredHeight: textArea.implicitHeight
// parent.height / 2 causes binding loop?
Layout.maximumHeight: pageStack.height / 2
color: "#BBB"

50
harmonyqml/TopBar.qml Normal file
View File

@ -0,0 +1,50 @@
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.4
RowLayout {
id: "toolBar"
Layout.fillWidth: true
Layout.maximumHeight: 32
spacing: 0
ActionButton {
visible: ! toolBarIsBig()
iconName: "reduced_menu"
tooltip: "Menu"
}
ActionButton {
iconName: "settings"
tooltip: "Settings"
targetPage: "SettingsPage"
}
ActionButton {
iconName: "add_account"
tooltip: "Add new account"
targetPage: "AddAccountPage"
}
ActionButton {
iconName: "set_status"
tooltip: "Set status for all accounts"
}
ActionButton {
iconName: "search"
tooltip: "Filter rooms and people"
}
TextField {
id: filterField
visible: false
placeholderText: qsTr("Filter rooms")
selectByMouse: true
font.family: "Roboto"
Layout.fillWidth: true
Layout.fillHeight: true
background: Rectangle { color: "lightgray" }
}
}

9
harmonyqml/UI.qml
View File

@ -2,10 +2,14 @@ import QtQuick.Controls 1.4 as Controls1
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.4
//https://doc.qt.io/qt-5/qml-qtquick-controls-splitview.html
Controls1.SplitView {
anchors.fill: parent
RoomPane {}
RoomPane {
Layout.minimumWidth: 32
width: 180
}
StackView {
function show_page(componentName) {
@ -16,9 +20,6 @@ Controls1.SplitView {
}
id: "pageStack"
Layout.fillWidth: true
Layout.fillHeight: true
//initialItem: HomePage {}
initialItem: ChatPage { room: Backend.roomsModel.get(0) }
onCurrentItemChanged: currentItem.forceActiveFocus()

3
harmonyqml/backend/dummy.py
View File

@ -18,7 +18,8 @@ class DummyBackend(Backend):
self.rooms.extend([
Room("@renko:matrix.org", "!test:matrix.org", "Test", "Test room"),
Room("@renko:matrix.org", "!mary:matrix.org", "Mary",
"Lorem ipsum sit dolor amet", 2),
"Lorem ipsum sit dolor amet this is a long text to test "
"wrapping of room subtitle etc 1234 example foo bar abc", 2),
Room("@renko:matrix.org", "!foo:matrix.org", "Another room"),
Room("@mary:matrix.org", "!test:matrix.org", "Test", "Test room"),

1
harmonyqml/icons/expand.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 146 B

1
harmonyqml/icons/reduced_menu.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 153 B

1
harmonyqml/icons/search.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 446 B