[vlc-commits] qml: add frosted glass blur effect to Playlist overlay menu

[Fatih Uzunoglu]

vlc | branch: master | Fatih Uzunoglu <fuzun54 at outlook.com> | Fri Oct  9 19:56:42 2020 +0300| [c84e59fca69f17de1b12725b62382376900f7976] | committer: Pierre Lamot

qml: add frosted glass blur effect to Playlist overlay menu

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

 modules/gui/qt/playlist/qml/PlaylistMenu.qml | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/modules/gui/qt/playlist/qml/PlaylistMenu.qml b/modules/gui/qt/playlist/qml/PlaylistMenu.qml
index 9a58edea5c..a19de35b65 100644
--- a/modules/gui/qt/playlist/qml/PlaylistMenu.qml
+++ b/modules/gui/qt/playlist/qml/PlaylistMenu.qml
@@ -81,17 +81,28 @@ Widgets.NavigableFocusScope {
         opacity: 0.4
     }
 
+    Item {
+        id: parentItem
 
-    Rectangle {
-        color: "black"
         anchors {
             right: parent.right
             top: parent.top
             bottom: parent.bottom
         }
         width: parent.width * drawerRatio
-        opacity: 0.9
 
+        Widgets.FrostedGlassEffect {
+            id: glassEffect
+            source: view
+
+            anchors.fill: parent
+
+            readonly property point overlayLocalPos: view.mapFromItem(overlayMenu, parentItem.x, parentItem.y)
+            sourceRect: Qt.rect(overlayLocalPos.x, overlayLocalPos.y, glassEffect.width, glassEffect.height)
+
+            tint: VLCStyle.colors.blendColors(VLCStyle.colors.black, VLCStyle.colors.banner, 0.85)
+            tintStrength: 0.6
+        }
 
         //avoid mouse event to be propagated to the widget below
         MouseArea {
@@ -99,7 +110,6 @@ Widgets.NavigableFocusScope {
             hoverEnabled: true
         }
 
-
         Widgets.KeyNavigableListView {
             id: playlistMenu
             anchors.fill: parent
@@ -168,7 +178,8 @@ Widgets.NavigableFocusScope {
                 background: Rectangle {
                     implicitWidth: 100
                     implicitHeight: VLCStyle.fontHeight_normal
-                    color: control.activeFocus ? "orange" : "transparent"
+                    color: control.activeFocus ? VLCStyle.colors.accent : "transparent"
+                    opacity: 0.8
 
                     Item {
                         id: leftSide