Added new shadowed map buttons

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
 

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()
     }
   }
 }

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
+}

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>

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 {
+    }
   }
 }