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 Image {
   6     id: root
   7     property alias text: searchField.text
   8     property bool open: false
   9
  10     fillMode: Image.Tile
  11     height: 0
  12     width: parent.width
  13     clip: true
  14     ToolBarStyle {
  15         id: style
  16     }
  17     BorderImage {
  18         id: border
  19         anchors {
  20             bottom: root.bottom
  21         }
  22         width: root.width
  23         height: UiConstants.SearchBarDefaultHeight
  24         border {
  25             left: 10
  26             right: 10
  27             top: 10
  28             bottom: 10
  29         }
  30         source: style.background
  31         TextField {
  32             id: searchField
  33             anchors {
  34                 fill: parent
  35                 leftMargin: UiConstants.DefaultMargin
  36                 topMargin: UiConstants.DefaultMargin
  37                 rightMargin: UiConstants.DefaultMargin
  38                 bottomMargin: UiConstants.DefaultMargin
  39             }
  40             height: implicitHeight
  41             placeholderText: qsTr("Search")
  42             inputMethodHints: Qt.ImhNoPredictiveText | Qt.ImhNoAutoUppercase
  43             platformStyle: TextFieldStyle { paddingRight: clearButton.width }
  44             onTextChanged: {
  45                 if (searchField.text.length === 0) {
  46                     searchButton.visible = true
  47                     clearButton.visible = false
  48                 } else {
  49                     searchButton.visible = false
  50                     clearButton.visible = true
  51                 }
  52             }
  53             Image {
  54                 id: searchButton
  55                 visible: true
  56                 smooth: true
  57                 anchors.right: parent.right
  58                 anchors.verticalCenter: parent.verticalCenter
  59                 source: "image://theme/icon-m-common-search"
  60             }
  61             Image {
  62                 id: clearButton
  63                 visible: false
  64                 anchors.right: parent.right
  65                 anchors.verticalCenter: parent.verticalCenter
  66                 source: "image://theme/icon-m-input-clear"
  67                 MouseArea {
  68                     anchors.fill: parent
  69                     onClicked: {
  70                         inputContext.reset()
  71                         searchField.text = ""
  72                     }
  73                 }
  74             }
  75         }
  76     }
  77     states: [
  78         State {
  79             name: "open"
  80             when: root.open
  81             changes: [
  82                 PropertyChanges {
  83                     target: root
  84                     height: UiConstants.SearchBarDefaultHeight
  85                 }
  86             ]
  87         }
  88     ]
  89     transitions: Transition {
  90         PropertyAnimation {
  91             duration: style.visibilityTransitionDuration
  92             easing.type: Easing.OutBounce
  93             target: root
  94             properties: "height"
  95         }
  96     }
  97 }