Rewrite SidePane using QQC Drawer
Cleaner approach, gets rid of the HPage swipe view hack, better performances, a lot less complex
This commit is contained in:
miruka
72
src/qml/Base/HDrawer.qml
Normal file
72
src/qml/Base/HDrawer.qml
Normal file
@@ -0,0 +1,72 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
import "../utils.js" as Utils
|
||||
|
||||
Drawer {
|
||||
id: drawer
|
||||
implicitWidth: calculatedWidth
|
||||
implicitHeight: parent.height
|
||||
|
||||
// FIXME: https://bugreports.qt.io/browse/QTBUG-59141
|
||||
// dragMargin: parent.width / 2
|
||||
|
||||
interactive: collapse
|
||||
position: 1
|
||||
visible: ! collapse
|
||||
modal: false
|
||||
closePolicy: Popup.CloseOnEscape
|
||||
|
||||
background: Rectangle { id: bg; color: theme.colors.strongBackground }
|
||||
|
||||
|
||||
signal userResized(int newWidth)
|
||||
|
||||
property int normalWidth: 300
|
||||
property int minNormalWidth: resizeAreaWidth
|
||||
property int maxNormalWidth: parent.width
|
||||
|
||||
property bool collapse: window.width < 400
|
||||
property int collapseExpandedWidth: parent.width
|
||||
|
||||
property alias color: bg.color
|
||||
property alias resizeAreaWidth: resizeArea.width
|
||||
|
||||
readonly property int calculatedWidth:
|
||||
collapse ?
|
||||
collapseExpandedWidth :
|
||||
Math.max(minNormalWidth, Math.min(normalWidth, maxNormalWidth))
|
||||
|
||||
|
||||
Behavior on width {
|
||||
enabled: ! resizeMouseHandler.drag.active
|
||||
NumberAnimation { duration: 100 }
|
||||
}
|
||||
|
||||
Item {
|
||||
id: resizeArea
|
||||
anchors.right: parent.right
|
||||
width: theme.spacing / 2
|
||||
height: parent.height
|
||||
z: 9999
|
||||
|
||||
MouseArea {
|
||||
id: resizeMouseHandler
|
||||
anchors.fill: parent
|
||||
enabled: ! drawer.collapse
|
||||
acceptedButtons: Qt.LeftButton
|
||||
hoverEnabled: true
|
||||
cursorShape:
|
||||
containsMouse || drag.active ?
|
||||
Qt.SizeHorCursor : Qt.ArrowCursor
|
||||
|
||||
onPressed: canResize = true
|
||||
onReleased: { canResize = false; userResized(drawer.normalWidth) }
|
||||
|
||||
onMouseXChanged:
|
||||
if (canResize)
|
||||
drawer.normalWidth = drawer.calculatedWidth + mouseX
|
||||
|
||||
property bool canResize: false
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,14 +3,13 @@ import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import "../SidePane"
|
||||
|
||||
SwipeView {
|
||||
Page {
|
||||
id: innerPage
|
||||
|
||||
|
||||
default property alias columnChildren: contentColumn.children
|
||||
|
||||
property alias page: innerPage
|
||||
property alias header: innerPage.header
|
||||
property alias footer: innerPage.header
|
||||
property alias flickable: innerFlickable
|
||||
|
||||
property alias headerLabel: innerHeaderLabel
|
||||
property var hideHeaderUnderHeight: null
|
||||
|
||||
@@ -19,72 +18,56 @@ SwipeView {
|
||||
|
||||
property bool becomeKeyboardFlickableTarget: true
|
||||
|
||||
id: swipeView
|
||||
clip: true
|
||||
interactive: sidePane.reduce
|
||||
currentIndex: 1
|
||||
|
||||
SidePane {
|
||||
implicitWidth: swipeView.width
|
||||
animateWidth: false // Without this, the SidePane gets auto-focused
|
||||
collapse: false
|
||||
reduce: false
|
||||
visible: swipeView.interactive
|
||||
onVisibleChanged: if (currentIndex != 1) swipeView.setCurrentIndex(1)
|
||||
background: null
|
||||
|
||||
header: Rectangle {
|
||||
implicitWidth: parent ? parent.width : 0
|
||||
color: theme.controls.header.background
|
||||
|
||||
height: innerHeaderLabel.text && (
|
||||
! hideHeaderUnderHeight ||
|
||||
window.height >=
|
||||
hideHeaderUnderHeight +
|
||||
theme.baseElementsHeight +
|
||||
currentSpacing * 2
|
||||
) ? theme.baseElementsHeight : 0
|
||||
|
||||
Behavior on height { HNumberAnimation {} }
|
||||
visible: height > 0
|
||||
|
||||
HLabel {
|
||||
id: innerHeaderLabel
|
||||
anchors.fill: parent
|
||||
textFormat: Text.StyledText
|
||||
font.pixelSize: theme.fontSize.big
|
||||
elide: Text.ElideRight
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
leftPadding: currentSpacing
|
||||
rightPadding: leftPadding
|
||||
}
|
||||
}
|
||||
|
||||
Page {
|
||||
id: innerPage
|
||||
background: null
|
||||
leftPadding: currentSpacing < theme.spacing ? 0 : currentSpacing
|
||||
rightPadding: leftPadding
|
||||
Behavior on leftPadding { HNumberAnimation {} }
|
||||
|
||||
header: Rectangle {
|
||||
implicitWidth: parent ? parent.width : 0
|
||||
color: theme.controls.header.background
|
||||
HFlickable {
|
||||
id: innerFlickable
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
contentWidth: parent.width
|
||||
contentHeight: contentColumn.childrenRect.height
|
||||
|
||||
height: innerHeaderLabel.text && (
|
||||
! hideHeaderUnderHeight ||
|
||||
window.height >=
|
||||
hideHeaderUnderHeight +
|
||||
theme.baseElementsHeight +
|
||||
currentSpacing * 2
|
||||
) ? theme.baseElementsHeight : 0
|
||||
Component.onCompleted:
|
||||
if (becomeKeyboardFlickableTarget) shortcuts.flickTarget = this
|
||||
|
||||
Behavior on height { HNumberAnimation {} }
|
||||
visible: height > 0
|
||||
|
||||
HLabel {
|
||||
id: innerHeaderLabel
|
||||
anchors.fill: parent
|
||||
textFormat: Text.StyledText
|
||||
font.pixelSize: theme.fontSize.big
|
||||
elide: Text.ElideRight
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
leftPadding: currentSpacing
|
||||
rightPadding: leftPadding
|
||||
}
|
||||
}
|
||||
|
||||
leftPadding: currentSpacing < theme.spacing ? 0 : currentSpacing
|
||||
rightPadding: leftPadding
|
||||
Behavior on leftPadding { HNumberAnimation {} }
|
||||
|
||||
HFlickable {
|
||||
id: innerFlickable
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
contentWidth: parent.width
|
||||
contentHeight: contentColumn.childrenRect.height
|
||||
|
||||
Component.onCompleted:
|
||||
if (becomeKeyboardFlickableTarget) shortcuts.flickTarget = this
|
||||
|
||||
HColumnLayout {
|
||||
id: contentColumn
|
||||
width: innerFlickable.width
|
||||
height: innerFlickable.height
|
||||
}
|
||||
HColumnLayout {
|
||||
id: contentColumn
|
||||
width: innerFlickable.width
|
||||
height: innerFlickable.height
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user