[vlc-commits] qml: reintroduce KeyNavigableListView list end fadeout & add list begin fadeout

[Fatih Uzunoglu]

vlc | branch: master | Fatih Uzunoglu <fuzun54 at outlook.com> | Sun Jul 12 20:15:01 2020 +0300| [8e8b77fa74e2e3ee03bd9f2818441e8242ba94ef] | committer: Pierre Lamot

qml: reintroduce KeyNavigableListView list end fadeout & add list begin fadeout

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=8e8b77fa74e2e3ee03bd9f2818441e8242ba94ef
---

 .../gui/qt/widgets/qml/KeyNavigableListView.qml    | 96 ++++++++++++++++++++++
 .../gui/qt/widgets/qml/KeyNavigableTableView.qml   |  7 ++
 2 files changed, 103 insertions(+)

diff --git a/modules/gui/qt/widgets/qml/KeyNavigableListView.qml b/modules/gui/qt/widgets/qml/KeyNavigableListView.qml
index 10fde64220..e7bf1c77ed 100644
--- a/modules/gui/qt/widgets/qml/KeyNavigableListView.qml
+++ b/modules/gui/qt/widgets/qml/KeyNavigableListView.qml
@@ -30,6 +30,8 @@ NavigableFocusScope {
     signal selectAll()
     signal actionAtIndex( int index )
 
+    property alias listView: view
+
     //forward view properties
     property alias spacing: view.spacing
     property alias interactive: view.interactive
@@ -67,6 +69,9 @@ NavigableFocusScope {
     property alias displaced: view.displaced
 
     property int highlightMargin: VLCStyle.margin_large
+    property var fadeColor: undefined
+    property alias fadeRectBottomHovered: fadeRectBottom.isHovered
+    property alias fadeRectTopHovered: fadeRectTop.isHovered
 
     property int scrollBarWidth: scroll_id.visible ? scroll_id.width : 0
 
@@ -227,6 +232,97 @@ NavigableFocusScope {
                 actionAtIndex(currentIndex)
             }
         }
+
+        Rectangle {
+            id: fadeRectTop
+            anchors {
+                top: parent.top
+                left: parent.left
+                right: parent.right
+                topMargin: headerItem && (headerPositioning === ListView.OverlayHeader) ? headerItem.height : 0
+            }
+            height: highlightMargin * 2
+            visible: !!fadeColor && fadeRectTop.opacity !== 0.0
+
+            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
+                    }
+                }
+            ]
+
+            transitions: Transition {
+                NumberAnimation {
+                    property: "opacity"
+                    duration: 150
+                    easing.type: Easing.InOutSine
+                }
+            }
+
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: fadeColor }
+                GradientStop { position: 1.0; color: "transparent" }
+            }
+        }
+
+        Rectangle {
+            id: fadeRectBottom
+            anchors {
+                bottom: parent.bottom
+                left: parent.left
+                right: parent.right
+            }
+            height: highlightMargin * 2
+            visible: !!fadeColor && fadeRectBottom.opacity !== 0.0
+
+            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
+                    }
+                }
+            ]
+
+            transitions: Transition {
+                NumberAnimation {
+                    property: "opacity"
+                    duration: 150
+                    easing.type: Easing.InOutSine
+                }
+            }
+
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "transparent" }
+                GradientStop { position: 1.0; color: fadeColor }
+            }
+        }
     }
 
     RoundButton{
diff --git a/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml b/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
index f7cc768548..bfe3342ea6 100644
--- a/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
+++ b/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
@@ -69,6 +69,13 @@ NavigableFocusScope {
     property alias spacing: view.spacing
     property int horizontalSpacing: VLCStyle.column_margin_width
 
+    property alias fadeColor:             view.fadeColor
+    property alias fadeRectBottomHovered: view.fadeRectBottomHovered
+    property alias fadeRectTopHovered:    view.fadeRectTopHovered
+
+    property alias add:       view.add
+    property alias displaced: view.displaced
+
     Accessible.role: Accessible.Table
 
     function positionViewAtIndex(index, mode) {