Improve SidePane auto-sizing and appearance
This commit is contained in:
parent
97c1dda4ba
commit
f9a5902545
2
TODO.md
2
TODO.md
@ -4,7 +4,6 @@
|
||||
|
||||
- Bug fixes
|
||||
- dataclass-like `default_factory` for ListItem
|
||||
- Dragging SidePane to max size makes messages disappear
|
||||
- Local echo messages all have the same time
|
||||
- Prevent briefly seeing login screen if there are accounts to
|
||||
resumeSession for but they take time to appear
|
||||
@ -15,7 +14,6 @@
|
||||
|
||||
- UI
|
||||
- "the tree arrows could be smaller"
|
||||
- Improve SidePane appearance when at min width
|
||||
- Accounts delegates background
|
||||
- Server selection
|
||||
- Register/Forgot? for SignIn dialog
|
||||
|
@ -4,7 +4,7 @@ import "../Base"
|
||||
Rectangle {
|
||||
property var name: null
|
||||
property var imageUrl: null
|
||||
property int dimension: 36
|
||||
property int dimension: HStyle.avatar.size
|
||||
property bool hidden: false
|
||||
|
||||
width: dimension
|
||||
|
@ -52,7 +52,7 @@ HScalingBox {
|
||||
onClicked: buttonCallbacks[modelData.name](button)
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 32
|
||||
Layout.preferredHeight: HStyle.avatar.size
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -3,5 +3,22 @@ import QtQuick.Controls 1.4 as Controls1
|
||||
|
||||
//https://doc.qt.io/qt-5/qml-qtquick-controls-splitview.html
|
||||
Controls1.SplitView {
|
||||
handleDelegate: Item {}
|
||||
id: splitView
|
||||
|
||||
property bool anyHovered: false
|
||||
property bool anyPressed: false
|
||||
property bool anyResizing: false
|
||||
|
||||
property bool canAutoSize: true
|
||||
onAnyPressedChanged: canAutoSize = false
|
||||
|
||||
handleDelegate: Item {
|
||||
readonly property bool hovered: styleData.hovered
|
||||
readonly property bool pressed: styleData.pressed
|
||||
readonly property bool resizing: styleData.resizing
|
||||
|
||||
onHoveredChanged: splitView.anyHovered = hovered
|
||||
onPressedChanged: splitView.anyPressed = pressed
|
||||
onResizingChanged: splitView.anyResizing = resizing
|
||||
}
|
||||
}
|
||||
|
@ -115,6 +115,7 @@ QtObject {
|
||||
}
|
||||
|
||||
readonly property QtObject avatar: QtObject {
|
||||
property int size: 36
|
||||
property int radius: style.radius
|
||||
property color letter: "white"
|
||||
|
||||
@ -130,4 +131,6 @@ QtObject {
|
||||
property real saturation: 0.32
|
||||
property real lightness: 0.3
|
||||
}
|
||||
|
||||
property int bottomElementsHeight: 32
|
||||
}
|
||||
|
@ -5,7 +5,7 @@ import "../../Base"
|
||||
HRectangle {
|
||||
id: banner
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 32
|
||||
Layout.preferredHeight: HStyle.avatar.size
|
||||
|
||||
property alias avatar: bannerAvatar
|
||||
property alias icon: bannerIcon
|
||||
|
@ -38,7 +38,7 @@ HColumnLayout {
|
||||
topic: roomInfo.topic || ""
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 32
|
||||
Layout.preferredHeight: HStyle.avatar.size
|
||||
}
|
||||
|
||||
|
||||
@ -82,7 +82,7 @@ HColumnLayout {
|
||||
property int referenceWidth: roomHeader.buttonsWidth
|
||||
onReferenceWidthChanged: width = referenceWidth
|
||||
|
||||
Layout.minimumWidth: 36
|
||||
Layout.minimumWidth: HStyle.avatar.size
|
||||
Layout.maximumWidth: parent.width
|
||||
}
|
||||
}
|
||||
|
@ -7,7 +7,7 @@ HRectangle {
|
||||
|
||||
id: root
|
||||
Layout.fillWidth: true
|
||||
Layout.minimumHeight: 32
|
||||
Layout.minimumHeight: HStyle.bottomElementsHeight
|
||||
Layout.preferredHeight: textArea.implicitHeight
|
||||
// parent.height / 2 causes binding loop?
|
||||
Layout.maximumHeight: pageStack.height / 2
|
||||
|
@ -5,10 +5,6 @@ ListView {
|
||||
id: accountList
|
||||
clip: true
|
||||
|
||||
spacing: 8
|
||||
topMargin: spacing
|
||||
bottomMargin: topMargin
|
||||
|
||||
model: Backend.accounts
|
||||
delegate: AccountDelegate {}
|
||||
}
|
||||
|
@ -5,7 +5,7 @@ HRowLayout {
|
||||
id: toolBar
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 32
|
||||
Layout.preferredHeight: HStyle.bottomElementsHeight
|
||||
|
||||
HButton {
|
||||
iconName: "settings"
|
||||
@ -20,6 +20,6 @@ HRowLayout {
|
||||
onTextChanged: Backend.setRoomFilter(text)
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 32
|
||||
Layout.preferredHeight: parent.height
|
||||
}
|
||||
}
|
||||
|
@ -1,9 +1,13 @@
|
||||
import QtQuick 2.7
|
||||
import QtQuick.Layouts 1.3
|
||||
import "../Base"
|
||||
|
||||
HRectangle {
|
||||
id: sidePane
|
||||
|
||||
property int normalSpacing: 8
|
||||
property bool collapsed: false
|
||||
|
||||
HColumnLayout {
|
||||
anchors.fill: parent
|
||||
|
||||
@ -11,11 +15,23 @@ HRectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
Layout.leftMargin:
|
||||
sidePane.width <= (sidePane.Layout.minimumWidth + spacing) ?
|
||||
0 : spacing
|
||||
spacing: collapsed ? 0 : normalSpacing
|
||||
topMargin: spacing
|
||||
bottomMargin: spacing
|
||||
Layout.leftMargin: spacing
|
||||
|
||||
Behavior on spacing {
|
||||
NumberAnimation { duration: 150 }
|
||||
}
|
||||
}
|
||||
|
||||
PaneToolBar {}
|
||||
}
|
||||
|
||||
Behavior on width {
|
||||
NumberAnimation {
|
||||
// Don't slow down the user manually resizing
|
||||
duration: uiSplitView.canAutoSize ? 150 : 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -20,15 +20,24 @@ Item {
|
||||
property bool accountsLoggedIn: Backend.clients.count > 0
|
||||
|
||||
HSplitView {
|
||||
id: uiSplitView
|
||||
anchors.fill: parent
|
||||
|
||||
SidePane {
|
||||
property int parentWidth: parent.width
|
||||
onParentWidthChanged: width = Math.min(parent.width * 0.3, 300)
|
||||
|
||||
Layout.minimumWidth: 36
|
||||
Layout.maximumWidth: parent.width
|
||||
visible: accountsLoggedIn
|
||||
collapsed: width < Layout.minimumWidth + normalSpacing
|
||||
|
||||
function set_width() {
|
||||
width = parent.width * 0.3 < 120 ?
|
||||
Layout.minimumWidth : Math.min(parent.width * 0.3, 300)
|
||||
}
|
||||
|
||||
property int parentWidth: parent.width
|
||||
onParentWidthChanged: if (uiSplitView.canAutoSize) { set_width() }
|
||||
|
||||
width: set_width() // Initial width
|
||||
Layout.minimumWidth: HStyle.avatar.size
|
||||
Layout.maximumWidth: parent.width
|
||||
}
|
||||
|
||||
StackView {
|
||||
|
Loading…
Reference in New Issue
Block a user