[vlc-devel] [PATCH 10/14] qml: add shadows to GridItems

[Prince Gupta]

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

diff --git a/modules/gui/qt/widgets/qml/GridItem.qml b/modules/gui/qt/widgets/qml/GridItem.qml
index 9d7c23cd0a..9f1b95c7d7 100644
--- a/modules/gui/qt/widgets/qml/GridItem.qml
+++ b/modules/gui/qt/widgets/qml/GridItem.qml
@@ -1,3 +1,4 @@
+
 /*****************************************************************************
  * Copyright (C) 2019 VLC authors and VideoLAN
  *
@@ -58,6 +59,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
@@ -99,6 +138,43 @@ Item {
                 color: VLCStyle.colors.bgAlt
                 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
-- 
2.25.1