From faff6b460c3173d12417b492501da21b709a984c Mon Sep 17 00:00:00 2001
From: Lubos <lubos@iiteam.eu>
Date: Wed, 18 Oct 2023 16:31:09 +0200
Subject: [PATCH] Added new shadowed map buttons

---
 app/qmlV2/Style.js                  |  6 ++++
 app/qmlV2/component/MMMapButton.qml | 48 +++++++++--------------------
 app/qmlV2/component/MMShadow.qml    | 21 +++++++++++++
 gallery/qml.qrc                     |  1 +
 gallery/qml/pages/MapPage.qml       |  9 +++++-
 5 files changed, 50 insertions(+), 35 deletions(-)
 create mode 100644 app/qmlV2/component/MMShadow.qml

diff --git a/app/qmlV2/Style.js b/app/qmlV2/Style.js
index 98c8b2567..cf2bf63f0 100644
--- a/app/qmlV2/Style.js
+++ b/app/qmlV2/Style.js
@@ -75,6 +75,12 @@ const closeButtonIcon = "qrc:/CloseButton.svg"
 const uploadImage = "qrc:/UploadImage.svg"
 const ReachedDataLimitImage = "qrc:/ReachedDataLimitImage.svg"
 
+// Shadow
+const shadowVerticalOffset = 3 * __dp
+const shadowHorizontalOffset = 2 * __dp
+const shadowRadius = 7 * __dp
+const shadowColor = "#66777777"
+
 // Spacing
 const commonSpacing = 20 * __dp
 
diff --git a/app/qmlV2/component/MMMapButton.qml b/app/qmlV2/component/MMMapButton.qml
index 3507a9827..f64958612 100644
--- a/app/qmlV2/component/MMMapButton.qml
+++ b/app/qmlV2/component/MMMapButton.qml
@@ -20,48 +20,28 @@ Item {
   width: 50
   height: 50
 
-  Rectangle {
-    id: border
-
-    width: control.width + 3
-    height: control.height + 3
-    radius: width / 2
-    color: "transparent"
-
-    RadialGradient {
-      id: light
-      anchors.centerIn: parent
-
-      width: control.width * 1.2
-      height: control.height * 1.2
-
-      gradient: Gradient {
-        GradientStop { position: 0.3; color: "#80000000" }
-        GradientStop { position: 0.5; color: "transparent" }
-      }
-
-      layer.enabled: true
-      layer.effect: OpacityMask {
-        id: mask
-        maskSource: Rectangle {
-          height: light.height
-          width: light.width
-          radius: width / 2
-        }
-      }
-    }
-  }
+  signal clicked
 
   Rectangle {
-    id: rectangle
-
     width: parent.width
     height: parent.height
-    radius: 25
+    radius: control.height / 2
     color: Style.white
 
+    layer.enabled: true
+    layer.effect: MMShadow {}
+
+    MMIcon {
+      id: icon
+
+      anchors.centerIn: parent
+      source: Style.arrowLinkRightIcon
+      color: Style.forest
+    }
+
     MouseArea {
       anchors.fill: parent
+      onClicked: control.clicked()
     }
   }
 }
diff --git a/app/qmlV2/component/MMShadow.qml b/app/qmlV2/component/MMShadow.qml
new file mode 100644
index 000000000..6c1be3cd1
--- /dev/null
+++ b/app/qmlV2/component/MMShadow.qml
@@ -0,0 +1,21 @@
+/***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU General Public License as published by  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+import QtQuick
+import Qt5Compat.GraphicalEffects
+import "../Style.js" as Style
+
+DropShadow {
+  id: shadow
+  horizontalOffset: Style.shadowHorizontalOffset
+  verticalOffset: Style.shadowVerticalOffset
+  radius: Style.shadowRadius
+  color: Style.shadowColor
+  transparentBorder: true
+}
diff --git a/gallery/qml.qrc b/gallery/qml.qrc
index 74f4f5509..eb566369f 100644
--- a/gallery/qml.qrc
+++ b/gallery/qml.qrc
@@ -26,5 +26,6 @@
         <file>../app/qmlV2/component/MMProgressBar.qml</file>
         <file>qml/pages/MapPage.qml</file>
         <file>../app/qmlV2/component/MMMapButton.qml</file>
+        <file>../app/qmlV2/component/MMShadow.qml</file>
     </qresource>
 </RCC>
diff --git a/gallery/qml/pages/MapPage.qml b/gallery/qml/pages/MapPage.qml
index d6e8ec260..5e0427ef1 100644
--- a/gallery/qml/pages/MapPage.qml
+++ b/gallery/qml/pages/MapPage.qml
@@ -80,10 +80,17 @@ Page {
     }
   }
 
-  MMMapButton {
+  Column {
     anchors.right: parent.right
     anchors.bottom: parent.bottom
     anchors.rightMargin: 20
     anchors.bottomMargin: 50
+    spacing: 20
+
+    MMMapButton {
+    }
+
+    MMMapButton {
+    }
   }
 }