[vlc-commits] [Git][videolan/vlc][master] 3 commits: qml: improve list view fading
Jean-Baptiste Kempf (@jbk)
gitlab at videolan.org
Sat Jan 8 17:07:35 UTC 2022
Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC
Commits:
1e284cc6 by Fatih Uzunoglu at 2022-01-08T16:25:38+00:00
qml: improve list view fading
- - - - -
17daf1c0 by Fatih Uzunoglu at 2022-01-08T16:25:38+00:00
qml: enable fading in base table view
- - - - -
b0a2c8ae by Fatih Uzunoglu at 2022-01-08T16:25:38+00:00
qml: enable fading in recent videos view
- - - - -
5 changed files:
- modules/gui/qt/medialibrary/qml/VideoDisplayRecentVideos.qml
- modules/gui/qt/playlist/qml/PlaylistDelegate.qml
- modules/gui/qt/playlist/qml/PlaylistListView.qml
- modules/gui/qt/widgets/qml/KeyNavigableListView.qml
- modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
Changes:
=====================================
modules/gui/qt/medialibrary/qml/VideoDisplayRecentVideos.qml
=====================================
@@ -124,6 +124,8 @@ FocusScope {
model: root.model
+ fadeColor: VLCStyle.colors.bg
+
Navigation.parentItem: root
header: Item {
=====================================
modules/gui/qt/playlist/qml/PlaylistDelegate.qml
=====================================
@@ -214,22 +214,6 @@ T.Control {
acceptedButtons: Qt.LeftButton | Qt.RightButton
- onContainsMouseChanged: {
- if (containsMouse) {
- var bottomItemIndex = listView.listView.indexAt(delegate.width / 2, (listView.listView.contentY + listView.height) + 1)
- var topItemIndex = listView.listView.indexAt(delegate.width / 2, listView.listView.contentY - 1)
-
- if(bottomItemIndex !== -1 && model.index >= bottomItemIndex - 1)
- {
- listView.fadeRectBottomHovered = Qt.binding(function() {return delegate.hovered})
- }
- if(model.index <= topItemIndex + 1)
- {
- listView.fadeRectTopHovered = Qt.binding(function() {return delegate.hovered})
- }
- }
- }
-
onClicked: {
/* to receive keys events */
listView.forceActiveFocus()
=====================================
modules/gui/qt/playlist/qml/PlaylistListView.qml
=====================================
@@ -190,10 +190,6 @@ Control {
running: dragItem._scrollingDirection === -1 && dragItem.visible && !target.listView.atYBeginning
velocity: VLCStyle.dp(225, VLCStyle.scale)
-
- onRunningChanged: {
- target.fadeRectTopHovered = running
- }
}
SmoothedAnimation {
@@ -204,10 +200,6 @@ Control {
running: dragItem._scrollingDirection === 1 && dragItem.visible && !target.listView.atYEnd
velocity: VLCStyle.dp(225, VLCStyle.scale)
-
- onRunningChanged: {
- target.fadeRectBottomHovered = running
- }
}
}
@@ -339,6 +331,11 @@ Control {
fadeColor: background.usingAcrylic ? undefined
: background.alternativeColor
+ Binding on fadeColor {
+ when: downAnimation.running || upAnimation.running
+ value: undefined
+ }
+
property int shiftIndex: -1
property PlaylistDelegate delegateContainsDrag: null
@@ -363,26 +360,6 @@ Control {
if (listView.currentIndex === -1 && root.model.count > 0)
listView.currentIndex = 0
}
-
- onSelectedCountChanged: {
- var selectedIndexes = listView.model.getSelection()
-
- if (listView.modelCount === 0 || selectedIndexes.length === 0)
- return
-
- var bottomItemIndex = listView.listView.indexAt(listView.width / 2, (listView.listView.contentY + listView.height) + 1)
- var topItemIndex = listView.listView.indexAt(listView.width / 2, listView.listView.contentY - 1)
-
- if (listView.model.isSelected(topItemIndex) || (listView.model.isSelected(topItemIndex + 1)))
- listView.fadeRectTopHovered = true
- else
- listView.fadeRectTopHovered = false
-
- if (listView.model.isSelected(bottomItemIndex) || (bottomItemIndex !== -1 && listView.model.isSelected(bottomItemIndex - 1)))
- listView.fadeRectBottomHovered = true
- else
- listView.fadeRectBottomHovered = false
- }
}
footer: Item {
=====================================
modules/gui/qt/widgets/qml/KeyNavigableListView.qml
=====================================
@@ -17,6 +17,8 @@
*****************************************************************************/
import QtQuick 2.11
import QtQuick.Controls 2.4
+import QtGraphicalEffects 1.0
+
import org.videolan.vlc 0.1
import "qrc:///style/"
@@ -28,18 +30,20 @@ FocusScope {
// Properties
- property int modelCount: view.count
+ property alias modelCount: view.count
property alias listView: view
- property int highlightMargin: VLCStyle.margin_large
+ property int fadeSize: view.delegateItem ? (orientation === Qt.Vertical ? view.delegateItem.height
+ : view.delegateItem.width) / 2
+ : (VLCStyle.margin_large * 2)
- property var fadeColor: undefined
+ property var fadeColor: undefined // fading will only work when fade color is defined
// NOTE: We want buttons to be centered vertically but configurable.
property int buttonMargin: height / 2 - buttonLeft.height / 2
- property int scrollBarWidth: scroll_id.visible ? scroll_id.width : 0
+ readonly property int scrollBarWidth: scroll_id.visible ? scroll_id.width : 0
property bool keyNavigationWraps : false
@@ -89,9 +93,6 @@ FocusScope {
property alias displayMarginBeginning: view.displayMarginBeginning
property alias displayMarginEnd: view.displayMarginEnd
- property alias fadeRectBottomHovered: fadeRectBottom.isHovered
- property alias fadeRectTopHovered: fadeRectTop.isHovered
-
property alias flickableDirection: view.flickableDirection
property alias listScrollBar: scroll_id
@@ -219,6 +220,53 @@ FocusScope {
section.criteria: ViewSection.FullString
section.delegate: sectionHeading
+ // TODO: Use itemAtIndex(0) Qt >= 5.13
+ // FIXME: Delegate with variable size
+ readonly property Item delegateItem: view.contentItem.children.length > 0 ? view.contentItem.children[view.contentItem.children.length - 1]
+ : null
+
+ readonly property bool transitionsRunning: ((view.add ? view.add.running : false) ||
+ (view.addDisplaced ? view.addDisplaced.running : false) ||
+ (view.populate ? view.populate.running : false) ||
+ (view.remove ? view.remove.running : false) ||
+ (view.removeDisplaced ? view.removeDisplaced.running : false))
+
+ readonly property Item firstVisibleItem: {
+ if (transitionsRunning || !delegateItem)
+ null
+
+ var margin = -listview_id.displayMarginBeginning
+ if (orientation === Qt.Vertical) {
+ if (headerItem && headerItem.visible && headerPositioning === ListView.OverlayHeader)
+ margin += headerItem.height
+
+ itemAt(contentX + (delegateItem.x + delegateItem.width / 2), contentY + margin)
+ } else {
+ if (headerItem && headerItem.visible && headerPositioning === ListView.OverlayHeader)
+ margin += headerItem.width
+
+ itemAt(contentX + margin, contentY + (delegateItem.y + delegateItem.height / 2))
+ }
+ }
+
+ readonly property Item lastVisibleItem: {
+ if (transitionsRunning || !delegateItem)
+ null
+
+ var margin = -listview_id.displayMarginEnd
+ if (orientation === Qt.Vertical) {
+ if (footerItem && footerItem.visible && footerPositioning === ListView.OverlayFooter)
+ margin += footerItem.height
+
+ itemAt(contentX + (delegateItem.x + delegateItem.width / 2), contentY + height - margin - 1)
+ } else {
+ if (footerItem && footerItem.visible && footerPositioning === ListView.OverlayFooter)
+ margin += footerItem.width
+
+ itemAt(contentX + width - margin - 1, contentY + (delegateItem.y + delegateItem.height / 2))
+ }
+ }
+
MouseEventFilter {
target: view
@@ -319,41 +367,59 @@ FocusScope {
}
}
- readonly property bool _fadeRectsOverlap: fadeRectTop.y + fadeRectTop.height > fadeRectBottom.y
+ readonly property bool _fadeRectEnoughSize: (view.orientation === Qt.Vertical ? view.height : view.width) > (fadeSize * 2 + VLCStyle.dp(25))
+
+ // TODO: Make fade rectangle inline component when Qt >= 5.15
+ LinearGradient {
+ id: fadeRectStart
- Rectangle {
- id: fadeRectTop
anchors {
top: parent.top
left: parent.left
- right: parent.right
- topMargin: headerItem && (headerPositioning === ListView.OverlayHeader) ? headerItem.height : 0
+ right: view.orientation === Qt.Vertical ? parent.right : undefined
+ bottom: view.orientation === Qt.Horizontal ? view.bottom : undefined
+ topMargin: view.orientation === Qt.Vertical ? ((view.headerItem &&
+ view.headerItem.visible &&
+ (view.headerPositioning === ListView.OverlayHeader)) ? view.headerItem.height
+ : 0) - listview_id.displayMarginBeginning
+ : 0
+ leftMargin: view.orientation === Qt.Horizontal ? ((view.headerItem &&
+ view.headerItem.visible &&
+ (view.headerPositioning === ListView.OverlayHeader)) ? view.headerItem.width
+ : 0) - listview_id.displayMarginBeginning
+ : 0
}
- height: highlightMargin * 2
- visible: !!fadeColor && fadeRectTop.opacity !== 0.0 && !view._fadeRectsOverlap
-
- property bool isHovered: false
- property bool _stateVisible: ((orientation === ListView.Vertical && !view.atYBeginning)
- && !isHovered)
-
- states: [
- State {
- when: fadeRectTop._stateVisible;
- PropertyChanges {
- target: fadeRectTop
- opacity: 1.0
- }
- },
- State {
- when: !fadeRectTop._stateVisible;
- PropertyChanges {
- target: fadeRectTop
- opacity: 0.0
- }
+
+ implicitHeight: fadeSize
+ implicitWidth: fadeSize
+
+ visible: (opacity !== 0.0)
+ opacity: 0.0
+
+ readonly property bool requestShow: !view.firstVisibleItem ||
+ (!view.firstVisibleItem.activeFocus &&
+ // TODO: Qt >5.12 use HoverHandler within the fade:
+ !Helpers.get(view.firstVisibleItem, "hovered", false))
+
+ state: (!!listview_id.fadeColor &&
+ view._fadeRectEnoughSize &&
+ requestShow &&
+ (orientation === ListView.Vertical ? !view.atYBeginning
+ : !view.atXBeginning)) ? "shown"
+ : ""
+
+ states: State {
+ name: "shown"
+ PropertyChanges {
+ target: fadeRectStart
+ opacity: 1.0
}
- ]
+ }
transitions: Transition {
+ from: ""; to: "shown"
+ reversible: true
+
NumberAnimation {
property: "opacity"
duration: VLCStyle.duration_fast
@@ -361,44 +427,73 @@ FocusScope {
}
}
+ start: Qt.point(0, 0)
+
+ end: {
+ if (view.orientation === ListView.Vertical) {
+ return Qt.point(0, fadeRectStart.height)
+ } else {
+ return Qt.point(fadeRectStart.width, 0)
+ }
+ }
+
gradient: Gradient {
GradientStop { position: 0.0; color: !!fadeColor ? fadeColor : "transparent" }
GradientStop { position: 1.0; color: "transparent" }
}
}
- Rectangle {
- id: fadeRectBottom
+ LinearGradient {
+ id: fadeRectEnd
+
anchors {
- bottom: parent.bottom
- left: parent.left
+ top: view.orientation === Qt.Horizontal ? parent.top : undefined
+ left: view.orientation === Qt.Vertical ? parent.left : undefined
right: parent.right
+ bottom: parent.bottom
+
+ bottomMargin: view.orientation === Qt.Vertical ? ((view.footerItem &&
+ view.footerItem.visible &&
+ (view.footerPositioning === ListView.OverlayFooter)) ? view.footerItem.height
+ : 0) - listview_id.displayMarginEnd
+ : 0
+ rightMargin: view.orientation === Qt.Horizontal ? ((view.footerItem &&
+ view.footerItem.visible &&
+ (view.headerPositioning === ListView.OverlayFooter)) ? view.footerItem.width
+ : 0) - listview_id.displayMarginEnd
+ : 0
}
- height: highlightMargin * 2
- visible: !!fadeColor && fadeRectBottom.opacity !== 0.0 && !view._fadeRectsOverlap
-
- property bool isHovered: false
- property bool _stateVisible: ((orientation === ListView.Vertical && !view.atYEnd)
- && !isHovered)
-
- states: [
- State {
- when: fadeRectBottom._stateVisible;
- PropertyChanges {
- target: fadeRectBottom
- opacity: 1.0
- }
- },
- State {
- when: !fadeRectBottom._stateVisible;
- PropertyChanges {
- target: fadeRectBottom
- opacity: 0.0
- }
+
+ implicitHeight: fadeSize
+ implicitWidth: fadeSize
+
+ visible: opacity !== 0.0
+ opacity: 0.0
+
+ readonly property bool requestShow: !view.lastVisibleItem ||
+ (!view.lastVisibleItem.activeFocus &&
+ // TODO: Qt >5.12 use HoverHandler within the fade:
+ !Helpers.get(view.lastVisibleItem, "hovered", false))
+
+ state: (!!listview_id.fadeColor &&
+ view._fadeRectEnoughSize &&
+ requestShow &&
+ (orientation === ListView.Vertical ? !view.atYEnd
+ : !view.atXEnd)) ? "shown"
+ : ""
+
+ states: State {
+ name: "shown"
+ PropertyChanges {
+ target: fadeRectEnd
+ opacity: 1.0
}
- ]
+ }
transitions: Transition {
+ from: ""; to: "shown"
+ reversible: true
+
NumberAnimation {
property: "opacity"
duration: VLCStyle.duration_fast
@@ -406,6 +501,16 @@ FocusScope {
}
}
+ start: Qt.point(0, 0)
+
+ end: {
+ if (view.orientation === ListView.Vertical) {
+ return Qt.point(0, fadeRectEnd.height)
+ } else {
+ return Qt.point(fadeRectEnd.width, 0)
+ }
+ }
+
gradient: Gradient {
GradientStop { position: 0.0; color: "transparent" }
GradientStop { position: 1.0; color: !!fadeColor ? fadeColor : "transparent" }
=====================================
modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
=====================================
@@ -94,9 +94,8 @@ FocusScope {
property alias footerItem: view.footerItem
property alias footer: view.footer
- property alias fadeColor: view.fadeColor
- property alias fadeRectBottomHovered: view.fadeRectBottomHovered
- property alias fadeRectTopHovered: view.fadeRectTopHovered
+ property alias fadeColor: view.fadeColor
+ property alias fadeSize: view.fadeSize
property alias add: view.add
property alias displaced: view.displaced
@@ -232,6 +231,8 @@ FocusScope {
headerPositioning: ListView.OverlayHeader
+ fadeColor: VLCStyle.colors.bg
+
onDeselectAll: {
if (selectionDelegateModel) {
selectionDelegateModel.clear()
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/b8e1ef211c8cfbc0d7681decc905b1e267563491...b0a2c8ae8b1f68a3a14573f0644d0a7e2222488d
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/b8e1ef211c8cfbc0d7681decc905b1e267563491...b0a2c8ae8b1f68a3a14573f0644d0a7e2222488d
You're receiving this email because of your account on code.videolan.org.
More information about the vlc-commits
mailing list