[vlc-commits] qml: use HorizontalResizeHandle to make playlist horizontally resizable
Prince Gupta
git at videolan.org
Thu Aug 27 12:44:28 CEST 2020
vlc | branch: master | Prince Gupta <guptaprince8832 at gmail.com> | Sun Aug 23 23:11:36 2020 +0530| [b846c65a985831dd439d0af5dbd4201610ddf2e1] | committer: Pierre Lamot
qml: use HorizontalResizeHandle to make playlist horizontally resizable
Signed-off-by: Pierre Lamot <pierre at videolabs.io>
> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=b846c65a985831dd439d0af5dbd4201610ddf2e1
---
modules/gui/qt/medialibrary/qml/MainDisplay.qml | 139 +++++++++---------------
1 file changed, 49 insertions(+), 90 deletions(-)
diff --git a/modules/gui/qt/medialibrary/qml/MainDisplay.qml b/modules/gui/qt/medialibrary/qml/MainDisplay.qml
index cfd6f12189..e61a2bfe51 100644
--- a/modules/gui/qt/medialibrary/qml/MainDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MainDisplay.qml
@@ -46,16 +46,6 @@ Widgets.NavigableFocusScope {
medialib.reload()
}
- /// playlist width properties used for binding after resize:
- // Binding allows playlist to scale when root width changes *even after playlist is resized*
- // New supposed width of the playlist = root.width / playlistColumn.__widthFactor
- // Playlist width difference after playlist resize event: (playlistColumn.__newWidth - playlistColumn.__oldRootWidth / playlistColumn.__widthFactor)
- // Width factor of the width difference for root width changes: (root.width / playlistColumn.__oldRootWidth)
- readonly property real playlistDefaultWidth: root.width / playlistColumn.__widthFactor
- readonly property real playlistBindingWidth: playlistDefaultWidth + ((playlistColumn.__newWidth - playlistColumn.__oldRootWidth / playlistColumn.__widthFactor) * root.width / playlistColumn.__oldRootWidth)
- readonly property real playlistMinWidth: VLCStyle.dp(225)
- readonly property real playlistMaxWidth: root.width / 2
-
function loadView() {
var found = stackView.loadView(root.pageModel, root.view, root.viewProperties)
@@ -223,61 +213,54 @@ Widgets.NavigableFocusScope {
right: parent.right
bottom: parent.bottom
}
- width: root.width / __widthFactor
- visible: false
focus: false
property bool expanded: mainInterface.playlistDocked && mainInterface.playlistVisible
- property double __widthFactor : mainInterface.playlistWidthFactor ? mainInterface.playlistWidthFactor : 4.0
- property int __newWidth : root.width / __widthFactor
- property int __oldRootWidth : root.width
-
- onExpandedChanged: {
- if (expanded) {
- animateExpand.start()
- playlistColumn.forceActiveFocus()
- }
- else {
- animateRetract.start()
- stackView.forceActiveFocus()
- }
- }
- PropertyAnimation {
- id: animateExpand;
- easing.type: Easing.InSine
- target: playlistColumn;
- properties: "width"
- duration: 150
- from: 0
- to: playlistBindingWidth
- onStarted: {
- playlistColumn.visible = true
+ state: playlistColumn.expanded ? "expanded" : "collapsed"
+
+ states: [
+ State {
+ name: "expanded"
+ PropertyChanges {
+ target: playlistColumn
+ width: resizeHandle.clamp(root.width / resizeHandle.widthFactor,
+ VLCStyle.dp(225),
+ root.width / 2)
+ visible: true
+ }
+ },
+ State {
+ name: "collapsed"
+ PropertyChanges {
+ target: playlistColumn
+ width: 0
+ visible: false
+ }
}
+ ]
- onStopped: {
- playlistColumn.width = Qt.binding(function() {
- if (playlistBindingWidth < playlistMinWidth)
- return playlistMinWidth
- else if (playlistBindingWidth > playlistMaxWidth)
- return playlistMaxWidth
- else
- return playlistBindingWidth
- })
- }
- }
+ transitions: [
+ Transition {
+ from: "*"
+ to: "collapsed"
- PropertyAnimation {
- id: animateRetract;
- easing.type: Easing.OutSine
- target: playlistColumn;
- properties: "width"
- duration: 150
- to: 0
- onStopped: {
- playlistColumn.visible = false
+ SequentialAnimation {
+ SmoothedAnimation { target: playlistColumn; property: "width"; easing.type: Easing.OutSine; duration: 150; }
+ PropertyAction { target: playlistColumn; property: "visible" }
+ }
+ },
+
+ Transition {
+ from: "*"
+ to: "expanded"
+
+ SequentialAnimation {
+ PropertyAction { target: playlistColumn; property: "visible" }
+ SmoothedAnimation { target: playlistColumn; property: "width"; easing.type: Easing.OutSine; duration: 150; }
+ }
}
- }
+ ]
ColumnLayout {
anchors.fill: parent
@@ -333,44 +316,20 @@ Widgets.NavigableFocusScope {
color: VLCStyle.colors.glowColor
}
- MouseArea {
- id: dragArea
+ Widgets.HorizontalResizeHandle {
+ id: resizeHandle
anchors {
top: parent.top
bottom: parent.bottom
- horizontalCenter: parent.horizontalCenter
+ left: parent.left
}
- width: VLCStyle.dp(8)
- property var _initialPos : playlistColumn.x
- drag { target: parent; axis: Drag.XAxis }
- onPositionChanged: {
- if(drag.active){
- var delta = mouseX - _initialPos
- var newWidth = playlistColumn.width - delta
- if (newWidth < playlistMaxWidth && newWidth > playlistMinWidth)
- playlistColumn.width -= delta
- }
- }
- onPressed: {
- // This is needed to break binding upon resizing, otherwise sizing glitches occur.
- playlistColumn.width = Number(playlistColumn.width)
- dragArea._initialPos = mouseX
- playlistColumn.__oldRootWidth = root.width
- }
- onReleased: {
- playlistColumn.__newWidth = playlistColumn.width
- playlistColumn.width = Qt.binding(function() {
- if (playlistBindingWidth < playlistMinWidth)
- return playlistMinWidth
- else if (playlistBindingWidth > playlistMaxWidth)
- return playlistMaxWidth
- else
- return playlistBindingWidth
- })
- mainInterface.setPlaylistWidthFactor(root.width / playlistColumn.width)
- }
- cursorShape: Qt.SizeHorCursor
+ atRight: false
+ targetWidth: playlistColumn.width
+ sourceWidth: root.width
+ widthFactor: mainInterface.playlistWidthFactor
+
+ onWidthFactorChanged: mainInterface.setPlaylistWidthFactor(widthFactor)
}
}
}
More information about the vlc-commits
mailing list