Fill main screen with buttons

[harbour-pedalo.git] / qml / components / BarButton.qml

diff --git a/qml/components/BarButton.qml b/qml/components/BarButton.qml
new file mode 100644 (file)
index 0000000..052f2e2
--- /dev/null
+++ b/qml/components/BarButton.qml
@@ -0,0 +1,73 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+MouseArea {
+    id: cycleButton
+    property alias source: image.source
+    property alias text: label.text
+
+    width: parent.width
+    height: parent.height / 2
+
+    Rectangle {
+        id: verticalback
+        anchors.centerIn: parent
+        width: parent.width
+        height: parent.height
+        color: cycleButton.pressed ? Theme.highlightColor : Theme.secondaryHighlightColor
+    }
+
+    Rectangle {
+        id: horizontalback
+        anchors.centerIn: parent
+        width: parent.width
+        height: parent.height
+        color: cycleButton.pressed ? Theme.highlightColor : Theme.secondaryHighlightColor
+    }
+
+    Label {
+        id: label
+        text: ""
+        font.pixelSize: Theme.fontSizeLarge
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.topMargin: Theme.paddingMedium
+        anchors.rightMargin: Theme.horizontalPageMargin
+        width: parent.width - image.width
+        horizontalAlignment: Text.AlignRight
+        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+    }
+
+    Image {
+        id: image
+        source: ""
+        anchors.left: parent.left
+        fillMode: Image.PreserveAspectFit
+        width: parent.height
+        height: parent.height
+    }
+
+    OpacityRampEffect {
+        id: verticalBackgroundEffect
+        slope: 0.5
+        offset: -1.0
+        direction: OpacityRamp.TopToBottom
+        sourceItem: verticalback
+    }
+
+    OpacityRampEffect {
+        id: horizontalBackgroundEffect
+        slope: 1.2
+        offset: -0.7
+        direction: OpacityRamp.LeftToRight
+        sourceItem: horizontalback
+    }
+
+    OpacityRampEffect {
+        id: imageeffect
+        slope: 1.0
+        offset: 0.0
+        direction: OpacityRamp.TopToBottom
+        sourceItem: image
+    }
+}