Change toolbar model
This commit is contained in:
parent
12f14a6a7d
commit
16aa6142bb
|
@ -2,21 +2,15 @@ import QtQuick 2.7
|
||||||
import QtQuick.Controls 2.0
|
import QtQuick.Controls 2.0
|
||||||
import QtQuick.Layouts 1.4
|
import QtQuick.Layouts 1.4
|
||||||
|
|
||||||
Column {
|
Row {
|
||||||
readonly property string displayName:
|
readonly property string displayName:
|
||||||
Backend.getUser(section).display_name
|
Backend.getUser(section).display_name
|
||||||
|
|
||||||
width: roomListView.width
|
|
||||||
height: paddingItem.height + row.height
|
|
||||||
|
|
||||||
Item { id: paddingItem; width: 1; height: row.height / 2 }
|
|
||||||
|
|
||||||
Row {
|
|
||||||
id: row
|
id: row
|
||||||
width: parent.width
|
width: roomListView.width
|
||||||
height: avatar.height
|
height: Math.max(accountLabel.height + statusEdit.height, avatar.height)
|
||||||
|
|
||||||
Avatar { id: avatar; username: displayName }
|
Avatar { id: avatar; username: displayName; dimmension: 32 }
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
color: "#111"
|
color: "#111"
|
||||||
|
@ -30,11 +24,15 @@ Column {
|
||||||
PlainLabel {
|
PlainLabel {
|
||||||
id: accountLabel
|
id: accountLabel
|
||||||
text: displayName
|
text: displayName
|
||||||
horizontalAlignment: Qt.AlignHCenter
|
|
||||||
color: "#CCC"
|
color: "#CCC"
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
maximumLineCount: 1
|
maximumLineCount: 1
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
|
||||||
|
topPadding: -2
|
||||||
|
bottomPadding: -2
|
||||||
|
leftPadding: 5
|
||||||
|
rightPadding: 5
|
||||||
}
|
}
|
||||||
TextField {
|
TextField {
|
||||||
id: statusEdit
|
id: statusEdit
|
||||||
|
@ -45,7 +43,11 @@ Column {
|
||||||
font.family: "Roboto"
|
font.family: "Roboto"
|
||||||
font.pixelSize: 12
|
font.pixelSize: 12
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
}
|
|
||||||
|
topPadding: 0
|
||||||
|
bottomPadding: 0
|
||||||
|
leftPadding: 5
|
||||||
|
rightPadding: 5
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -7,13 +7,21 @@ ToolButton {
|
||||||
property string iconName: ""
|
property string iconName: ""
|
||||||
property string targetPage: ""
|
property string targetPage: ""
|
||||||
|
|
||||||
id: "root"
|
function toolBarIsBig() {
|
||||||
width: parent.width / parent.children.length
|
return roomPane.width >
|
||||||
height: parent.height
|
Layout.minimumWidth * (toolBar.children.length - 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
id: "button"
|
||||||
display: ToolButton.IconOnly
|
display: ToolButton.IconOnly
|
||||||
icon.source: "icons/" + iconName + ".svg"
|
icon.source: "icons/" + iconName + ".svg"
|
||||||
background: Rectangle { color: "transparent" }
|
background: Rectangle { color: "transparent" }
|
||||||
|
|
||||||
|
visible: toolBarIsBig()
|
||||||
|
Layout.fillHeight: true
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.minimumWidth: height
|
||||||
|
|
||||||
onClicked: { toolTip.hide(); pageStack.show_page(targetPage) }
|
onClicked: { toolTip.hide(); pageStack.show_page(targetPage) }
|
||||||
|
|
||||||
ToolTip {
|
ToolTip {
|
||||||
|
@ -28,7 +36,7 @@ ToolButton {
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
acceptedButtons: Qt.NoButton // Make button receive clicks normally
|
acceptedButtons: Qt.NoButton // Make button receive clicks normally
|
||||||
|
|
||||||
onEntered: root.background.color = "#656565"
|
onEntered: button.background.color = "#656565"
|
||||||
onExited: root.background.color = "transparent"
|
onExited: button.background.color = "transparent"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@ import QtQuick 2.7
|
||||||
import QtQuick.Controls 2.0
|
import QtQuick.Controls 2.0
|
||||||
|
|
||||||
Label {
|
Label {
|
||||||
property int bigSize: 22
|
property int bigSize: 24
|
||||||
property int normalSize: 16
|
property int normalSize: 16
|
||||||
property int smallSize: 12
|
property int smallSize: 12
|
||||||
|
|
||||||
|
|
|
@ -3,15 +3,16 @@ import QtQuick.Controls 2.0
|
||||||
import QtQuick.Layouts 1.4
|
import QtQuick.Layouts 1.4
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
|
id: "root"
|
||||||
width: roomListView.width
|
width: roomListView.width
|
||||||
height: avatar.height
|
height: Math.max(roomLabel.height + subtitleLabel.height, avatar.height)
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
id: row
|
id: row
|
||||||
spacing: 1
|
spacing: 1
|
||||||
|
|
||||||
Avatar { id: avatar; username: display_name }
|
Avatar { id: avatar; username: display_name; dimmension: 32 }
|
||||||
|
|
||||||
ColumnLayout {
|
ColumnLayout {
|
||||||
spacing: 0
|
spacing: 0
|
||||||
|
@ -19,23 +20,29 @@ Item {
|
||||||
PlainLabel {
|
PlainLabel {
|
||||||
id: roomLabel
|
id: roomLabel
|
||||||
text: display_name
|
text: display_name
|
||||||
padding: 5
|
|
||||||
bottomPadding: subtitleLabel.visible ? 0 : padding
|
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
maximumLineCount: 1
|
maximumLineCount: 1
|
||||||
Layout.maximumWidth: row.width - row.spacing - avatar.width
|
Layout.maximumWidth: row.width - row.spacing - avatar.width
|
||||||
verticalAlignment: Qt.AlignVCenter
|
verticalAlignment: Qt.AlignVCenter
|
||||||
|
|
||||||
|
topPadding: -2
|
||||||
|
bottomPadding: subtitleLabel.visible ? 0 : topPadding
|
||||||
|
leftPadding: 5
|
||||||
|
rightPadding: leftPadding
|
||||||
}
|
}
|
||||||
PlainLabel {
|
PlainLabel {
|
||||||
id: subtitleLabel
|
id: subtitleLabel
|
||||||
visible: text !== ""
|
visible: text !== ""
|
||||||
text: subtitle
|
text: subtitle
|
||||||
padding: roomLabel.padding
|
|
||||||
topPadding: 0
|
|
||||||
font.pixelSize: smallSize
|
font.pixelSize: smallSize
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
maximumLineCount: 1
|
maximumLineCount: 1
|
||||||
Layout.maximumWidth: roomLabel.Layout.maximumWidth
|
Layout.maximumWidth: roomLabel.Layout.maximumWidth
|
||||||
|
|
||||||
|
topPadding: -2
|
||||||
|
bottomPadding: topPadding
|
||||||
|
leftPadding: 5
|
||||||
|
rightPadding: leftPadding
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,36 +5,40 @@ import QtQuick.Layouts 1.4
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: root
|
id: root
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.minimumHeight: avatar.height
|
Layout.minimumHeight: 32
|
||||||
Layout.maximumHeight: Layout.minimumHeight
|
Layout.maximumHeight: Layout.minimumHeight
|
||||||
color: "#BBB"
|
color: "#BBB"
|
||||||
|
|
||||||
Row {
|
RowLayout {
|
||||||
id: "row"
|
id: "row"
|
||||||
spacing: 8
|
spacing: 12
|
||||||
|
anchors.fill: parent
|
||||||
|
|
||||||
Avatar { id: "avatar"; username: chatPage.room.display_name }
|
Avatar {
|
||||||
|
id: "avatar"
|
||||||
|
Layout.alignment: Qt.AlignTop
|
||||||
|
dimmension: root.Layout.minimumHeight
|
||||||
|
username: chatPage.room.display_name
|
||||||
|
}
|
||||||
|
|
||||||
Column {
|
|
||||||
PlainLabel {
|
PlainLabel {
|
||||||
height: subtitleLabel.visible ? implicitHeight : row.height
|
|
||||||
id: "roomName"
|
id: "roomName"
|
||||||
text: chatPage.room.display_name
|
text: chatPage.room.display_name
|
||||||
font.pixelSize: bigSize
|
font.pixelSize: bigSize
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
maximumLineCount: 1
|
maximumLineCount: 1
|
||||||
width: root.width - avatar.width - row.spacing * 2
|
Layout.maximumWidth: row.width - row.spacing * (row.children.length - 1) - avatar.width
|
||||||
verticalAlignment: Qt.AlignVCenter
|
|
||||||
}
|
}
|
||||||
|
|
||||||
PlainLabel {
|
PlainLabel {
|
||||||
id: subtitleLabel
|
id: "roomSubtitle"
|
||||||
text: chatPage.room.subtitle
|
text: chatPage.room.subtitle
|
||||||
visible: text !== ""
|
|
||||||
font.pixelSize: smallSize
|
font.pixelSize: smallSize
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
maximumLineCount: 1
|
maximumLineCount: 1
|
||||||
width: roomName.width
|
Layout.maximumWidth: row.width - row.spacing * (row.children.length - 1) - avatar.width - roomName.width
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Item { Layout.fillWidth: true }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,21 +4,21 @@ import QtQuick.Layouts 1.4
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: roomPane
|
id: roomPane
|
||||||
width: 180
|
|
||||||
Layout.minimumWidth: 48
|
|
||||||
Layout.fillHeight: true
|
|
||||||
color: "gray"
|
color: "gray"
|
||||||
clip: true // Avoid artifacts when resizing pane width to minimum
|
clip: true // Avoid artifacts when resizing pane width to minimum
|
||||||
|
|
||||||
Column {
|
ColumnLayout {
|
||||||
x: parent.x
|
anchors.fill: parent
|
||||||
y: parent.y - 48 / 2
|
spacing: 0
|
||||||
width: parent.width
|
|
||||||
height: parent.height + 48 / 2
|
TopBar {}
|
||||||
|
|
||||||
ListView {
|
ListView {
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: parent.height - actionBar.height
|
Layout.fillHeight: true
|
||||||
|
|
||||||
id: roomListView
|
id: roomListView
|
||||||
|
spacing: 0
|
||||||
model: Backend.roomsModel
|
model: Backend.roomsModel
|
||||||
delegate: RoomDelegate {}
|
delegate: RoomDelegate {}
|
||||||
//highlight: Rectangle {color: "lightsteelblue"; radius: 5}
|
//highlight: Rectangle {color: "lightsteelblue"; radius: 5}
|
||||||
|
@ -26,7 +26,5 @@ Rectangle {
|
||||||
section.property: "account_id"
|
section.property: "account_id"
|
||||||
section.delegate: AccountDelegate {}
|
section.delegate: AccountDelegate {}
|
||||||
}
|
}
|
||||||
|
|
||||||
ActionBar { id: "actionBar" }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,8 @@ Rectangle {
|
||||||
|
|
||||||
id: "root"
|
id: "root"
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.minimumHeight: textArea.implicitHeight
|
Layout.minimumHeight: 32
|
||||||
|
Layout.preferredHeight: textArea.implicitHeight
|
||||||
// parent.height / 2 causes binding loop?
|
// parent.height / 2 causes binding loop?
|
||||||
Layout.maximumHeight: pageStack.height / 2
|
Layout.maximumHeight: pageStack.height / 2
|
||||||
color: "#BBB"
|
color: "#BBB"
|
||||||
|
|
50
harmonyqml/TopBar.qml
Normal file
50
harmonyqml/TopBar.qml
Normal 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" }
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,10 +2,14 @@ import QtQuick.Controls 1.4 as Controls1
|
||||||
import QtQuick.Controls 2.2
|
import QtQuick.Controls 2.2
|
||||||
import QtQuick.Layouts 1.4
|
import QtQuick.Layouts 1.4
|
||||||
|
|
||||||
|
//https://doc.qt.io/qt-5/qml-qtquick-controls-splitview.html
|
||||||
Controls1.SplitView {
|
Controls1.SplitView {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|
||||||
RoomPane {}
|
RoomPane {
|
||||||
|
Layout.minimumWidth: 32
|
||||||
|
width: 180
|
||||||
|
}
|
||||||
|
|
||||||
StackView {
|
StackView {
|
||||||
function show_page(componentName) {
|
function show_page(componentName) {
|
||||||
|
@ -16,9 +20,6 @@ Controls1.SplitView {
|
||||||
}
|
}
|
||||||
|
|
||||||
id: "pageStack"
|
id: "pageStack"
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.fillHeight: true
|
|
||||||
//initialItem: HomePage {}
|
|
||||||
initialItem: ChatPage { room: Backend.roomsModel.get(0) }
|
initialItem: ChatPage { room: Backend.roomsModel.get(0) }
|
||||||
|
|
||||||
onCurrentItemChanged: currentItem.forceActiveFocus()
|
onCurrentItemChanged: currentItem.forceActiveFocus()
|
||||||
|
|
|
@ -18,7 +18,8 @@ class DummyBackend(Backend):
|
||||||
self.rooms.extend([
|
self.rooms.extend([
|
||||||
Room("@renko:matrix.org", "!test:matrix.org", "Test", "Test room"),
|
Room("@renko:matrix.org", "!test:matrix.org", "Test", "Test room"),
|
||||||
Room("@renko:matrix.org", "!mary:matrix.org", "Mary",
|
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("@renko:matrix.org", "!foo:matrix.org", "Another room"),
|
||||||
|
|
||||||
Room("@mary:matrix.org", "!test:matrix.org", "Test", "Test room"),
|
Room("@mary:matrix.org", "!test:matrix.org", "Test", "Test room"),
|
||||||
|
|
1
harmonyqml/icons/expand.svg
Normal file
1
harmonyqml/icons/expand.svg
Normal 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>
|
After Width: | Height: | Size: 146 B |
1
harmonyqml/icons/reduced_menu.svg
Normal file
1
harmonyqml/icons/reduced_menu.svg
Normal 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>
|
After Width: | Height: | Size: 153 B |
1
harmonyqml/icons/search.svg
Normal file
1
harmonyqml/icons/search.svg
Normal 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>
|
After Width: | Height: | Size: 446 B |
Loading…
Reference in New Issue
Block a user