qml/components/BarButton.qml

   1 import QtQuick 2.0
   2 import Sailfish.Silica 1.0
   3
   4 MouseArea {
   5     id: cycleButton
   6     property alias source: image.source
   7     property alias text: label.text
   8
   9     width: parent.width
  10     height: parent.height / 2
  11
  12     Rectangle {
  13         id: verticalback
  14         anchors.centerIn: parent
  15         width: parent.width
  16         height: parent.height
  17         color: cycleButton.pressed ? Theme.highlightColor : Theme.secondaryHighlightColor
  18     }
  19
  20     Rectangle {
  21         id: horizontalback
  22         anchors.centerIn: parent
  23         width: parent.width
  24         height: parent.height
  25         color: cycleButton.pressed ? Theme.highlightColor : Theme.secondaryHighlightColor
  26     }
  27
  28     Label {
  29         id: label
  30         text: ""
  31         color: Theme.highlightColor
  32         font.pixelSize: Theme.fontSizeLarge
  33         anchors.right: parent.right
  34         anchors.top: parent.top
  35         anchors.topMargin: Theme.paddingMedium
  36         anchors.rightMargin: Theme.horizontalPageMargin
  37         width: parent.width - image.width
  38         horizontalAlignment: Text.AlignRight
  39         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
  40     }
  41
  42     Image {
  43         id: image
  44         source: ""
  45         anchors.left: parent.left
  46         anchors.leftMargin: Theme.paddingLarge
  47         fillMode: Image.PreserveAspectFit
  48         width: parent.height
  49         height: parent.height
  50     }
  51
  52     OpacityRampEffect {
  53         id: verticalBackgroundEffect
  54         slope: 0.5
  55         offset: -1.5
  56         direction: OpacityRamp.TopToBottom
  57         sourceItem: verticalback
  58     }
  59
  60     OpacityRampEffect {
  61         id: horizontalBackgroundEffect
  62         slope: 1.2
  63         offset: -0.7
  64         direction: OpacityRamp.LeftToRight
  65         sourceItem: horizontalback
  66     }
  67
  68     OpacityRampEffect {
  69         id: imageeffect
  70         slope: 0.5
  71         offset: -0.8
  72         direction: OpacityRamp.TopToBottom
  73         sourceItem: image
  74     }
  75 }