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 @@
../app/qmlV2/component/MMProgressBar.qml
qml/pages/MapPage.qml
../app/qmlV2/component/MMMapButton.qml
+ ../app/qmlV2/component/MMShadow.qml
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 {
+ }
}
}