[vlc-commits] qml: add shadows to GridItems

[Prince Gupta]

vlc | branch: master | Prince Gupta <guptaprince8832 at gmail.com> | Mon Jun 15 19:03:14 2020 +0530| [973dd7ad565d921f5bf38919642f793fd7a70878] | committer: Pierre Lamot

qml: add shadows to GridItems

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

 modules/gui/qt/widgets/qml/GridItem.qml | 75 +++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/modules/gui/qt/widgets/qml/GridItem.qml b/modules/gui/qt/widgets/qml/GridItem.qml
index 9d7c23cd0a..19d3dacf4d 100644
--- a/modules/gui/qt/widgets/qml/GridItem.qml
+++ b/modules/gui/qt/widgets/qml/GridItem.qml
@@ -58,6 +58,44 @@ Item {
 
     readonly property int _selectedBorderWidth: VLCStyle.column_margin_width - ( VLCStyle.margin_small * 2 )
 
+    property alias _primaryShadowVerticalOffset: primaryShadow.verticalOffset
+    property alias _primaryShadowRadius: primaryShadow.radius
+    property alias _secondaryShadowVerticalOffset: secondaryShadow.verticalOffset
+    property alias _secondaryShadowRadius: secondaryShadow.radius
+
+    states: [
+        State {
+            name: "unselected"
+            when: !root._highlighted
+            PropertyChanges {
+                target: root
+                _primaryShadowVerticalOffset: VLCStyle.dp(6, VLCStyle.scale)
+                _primaryShadowRadius: VLCStyle.dp(14, VLCStyle.scale)
+                _secondaryShadowVerticalOffset: VLCStyle.dp(1, VLCStyle.scale)
+                _secondaryShadowRadius: VLCStyle.dp(3, VLCStyle.scale)
+            }
+        },
+        State {
+            name: "selected"
+            when: root._highlighted
+            PropertyChanges {
+                target: root
+                _primaryShadowVerticalOffset: VLCStyle.dp(32, VLCStyle.scale)
+                _primaryShadowRadius: VLCStyle.dp(72, VLCStyle.scale)
+                _secondaryShadowVerticalOffset: VLCStyle.dp(6, VLCStyle.scale)
+                _secondaryShadowRadius: VLCStyle.dp(8, VLCStyle.scale)
+            }
+        }
+    ]
+
+    transitions: Transition {
+        to: "*"
+        SmoothedAnimation {
+          duration: 64
+          properties: "_primaryShadowVerticalOffset,_primaryShadowRadius,_secondaryShadowVerticalOffset,_secondaryShadowRadius"
+       }
+    }
+
     MouseArea {
         id: mouseArea
         hoverEnabled: true
@@ -100,6 +138,43 @@ Item {
                 visible: root.selected || root._highlighted
             }
 
+            Rectangle {
+                id: baseRect
+
+                x: 1 // this rect is set such that it hides behind picture component
+                y: 1
+                width: pictureWidth - 2
+                height: pictureHeight - 2
+                radius: picture.radius
+                color: VLCStyle.colors.bg
+            }
+
+            DropShadow {
+                id: primaryShadow
+
+                anchors.fill: baseRect
+                source: baseRect
+                horizontalOffset: 0
+                verticalOffset: VLCStyle.dp(6, VLCStyle.scale)
+                radius: VLCStyle.dp(14, scale)
+                spread: 0
+                samples: ( radius * 2 ) + 1
+                color: Qt.rgba(0, 0, 0, .22)
+            }
+
+            DropShadow {
+                id: secondaryShadow
+
+                anchors.fill: baseRect
+                source: baseRect
+                horizontalOffset: 0
+                verticalOffset: VLCStyle.dp(1, VLCStyle.scale)
+                radius: VLCStyle.dp(3, VLCStyle.scale)
+                spread: 0
+                samples: ( radius * 2 ) + 1
+                color: Qt.rgba(0, 0, 0, .18)
+            }
+
             ColumnLayout {
                 id: layout