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