[vlc-devel] [PATCH 01/19] qml: reintroduce KeyNavigableListView list end fadeout & add list begin fadeout

[Fatih Uzunoglu]

---
 .../qt/widgets/qml/KeyNavigableListView.qml   | 96 +++++++++++++++++++
 .../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 8da3eff120..9ae79ed9fe 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
@@ -62,6 +64,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
 
@@ -222,6 +227,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 089a97dc23..dd2f28ae62 100644
--- a/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
+++ b/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
@@ -68,6 +68,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) {
-- 
2.25.1