vcs.maemo.org Git - quandoparte/blob - application/resources/harmattan/qml/SearchBar.qml

   1 import QtQuick 1.0
   2 import com.nokia.meego 1.0
   3 import "uiconstants.js" as UiConstants
   4
   5
   6 BorderImage {
   7     property alias text: searchField.text
   8     width: parent.width
   9     border.left: 10
  10     border.right: 10
  11     border.top: 10
  12     border.bottom: 10
  13     height:  UiConstants.SearchBarDefaultHeight
  14     source: style.background
  15
  16     ToolBarStyle {
  17         id: style
  18     }
  19     Item {
  20         id: spacerTop
  21         width: parent.width
  22         height: UiConstants.DefaultMargin
  23     }
  24     Item {
  25         id: spacerLeft
  26         anchors.left: parent.left
  27         width: UiConstants.DefaultMargin
  28         height: searchField.height
  29     }
  30     Item {
  31         id: spacerRight
  32         anchors.right: parent.right
  33         width: UiConstants.DefaultMargin
  34         height: searchField.height
  35     }
  36
  37     TextField {
  38         id: searchField
  39         anchors.top: spacerTop.bottom
  40         anchors.left: spacerLeft.right
  41         anchors.right: spacerRight.left
  42         placeholderText: qsTr("Search")
  43         inputMethodHints: Qt.ImhNoPredictiveText | Qt.ImhNoAutoUppercase
  44         platformStyle: TextFieldStyle { paddingRight: clearButton.width }
  45         onTextChanged: {
  46             if (searchField.text.length === 0) {
  47                 searchButton.visible = true
  48                 clearButton.visible = false
  49             } else {
  50                 searchButton.visible = false
  51                 clearButton.visible = true
  52             }
  53         }
  54         Image {
  55             id: searchButton
  56             visible: true
  57             smooth: true
  58             anchors.right: parent.right
  59             anchors.verticalCenter: parent.verticalCenter
  60             source: "image://theme/icon-m-common-search"
  61         }
  62         Image {
  63             id: clearButton
  64             visible: false
  65             anchors.right: parent.right
  66             anchors.verticalCenter: parent.verticalCenter
  67             source: "image://theme/icon-m-input-clear"
  68             MouseArea {
  69                 anchors.fill: parent
  70                 onClicked: {
  71                     inputContext.reset()
  72                     searchField.text = ""
  73                 }
  74             }
  75         }
  76     }
  77     Item {
  78         id: spacerBottom
  79         width: parent.width
  80         anchors.top: searchField.bottom
  81         height: UiConstants.DefaultMargins
  82     }
  83 }