Improve SidePane auto-sizing and appearance

This commit is contained in:
miruka 2019-05-12 15:57:18 -04:00
parent 97c1dda4ba
commit f9a5902545
12 changed files with 62 additions and 23 deletions

View File

@ -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

View File

@ -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

View File

@ -52,7 +52,7 @@ HScalingBox {
onClicked: buttonCallbacks[modelData.name](button)
Layout.fillWidth: true
Layout.preferredHeight: 32
Layout.preferredHeight: HStyle.avatar.size
}
}
}

View File

@ -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
}
}

View File

@ -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
}

View File

@ -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

View File

@ -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
}
}

View File

@ -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

View File

@ -5,10 +5,6 @@ ListView {
id: accountList
clip: true
spacing: 8
topMargin: spacing
bottomMargin: topMargin
model: Backend.accounts
delegate: AccountDelegate {}
}

View File

@ -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
}
}

View File

@ -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
}
}
}

View File

@ -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 {