vcs.maemo.org Git - situare/blob - src/qmlui/DetailEditorRow.qml

   1 import Qt 4.7
   2
   3 Item {
   4     property alias image: image.source
   5     property alias text: messageEditor.text
   6
   7     property int textSingleLineHeight: 0
   8     property int animationDuration: 150
   9
  10     anchors.left: parent.left
  11     anchors.right: parent.right
  12     width: parent.width
  13 //    height: messageEditor.height > image.height ? messageEditor.height : image.height
  14     height: charactersLeftRect.height + textEditRow.height
  15
  16     Rectangle {
  17         id: charactersLeftRect
  18         height: charactersLeft.height
  19         width: charactersLeft.width
  20         anchors.top: parent.top
  21         anchors.horizontalCenter: messageEditorRect.horizontalCenter
  22         border { color: "black"; width: 1 }
  23         color: "white"
  24         radius: 5
  25         opacity: 0
  26         Behavior on opacity { NumberAnimation { duration: animationDuration } }
  27     }
  28
  29     Text {
  30         id: charactersLeft
  31         anchors.centerIn: charactersLeftRect
  32         font.pixelSize: 14
  33         opacity: 0
  34         Behavior on opacity { NumberAnimation { duration: animationDuration } }
  35     }
  36
  37     Item {
  38         id:textEditRow
  39         anchors { left: parent.left; top: charactersLeftRect.bottom; topMargin: 2; right: parent.right }
  40         height: messageEditor.height
  41     }
  42
  43     Image {
  44         id: image
  45         anchors { left: parent.left; top: textEditRow.top }
  46     }
  47
  48     Rectangle {
  49         id: messageEditorRect
  50         anchors { fill: messageEditor; margins: -2 }
  51         border { color: "black"; width: 1 }
  52         color: "white"
  53         radius: 5
  54         opacity: 0
  55
  56         Behavior on opacity { NumberAnimation { duration: animationDuration } }
  57     }
  58
  59     ExtendedTextEdit {
  60         id: messageEditor
  61         anchors { leftMargin: 5; left: image.right; right: buttonsArea.left; rightMargin: 5; top: textEditRow.top }
  62         height: paintedHeight > buttonsArea.height ? paintedHeight : buttonsArea.height
  63         onActiveFocusChanged: {
  64             if (activeFocus)
  65                 parent.state = "edit"
  66         }
  67         onCharacterCountChanged: {
  68             charactersLeft.text = 255 - characterCount + " characters left"
  69         }
  70     }
  71
  72     Button {
  73         id: sendButton
  74         text: "Send"
  75         anchors { left: cancelButton.left; right: cancelButton.right; top: messageEditor.top }
  76         visible: false
  77         scale: cancelButton.scale
  78         transformOrigin: Item.Right
  79         onButtonClicked: {
  80             locationUpdate.setMessage(messageEditor.text)
  81             locationUpdate.send()
  82             parent.state = ""
  83             sendButton.forceActiveFocus()
  84         }
  85     }
  86
  87     Button {
  88         id: cancelButton
  89         text: "Cancel"
  90         anchors { right: parent.right; rightMargin: 5; top: sendButton.bottom; topMargin: 5 }
  91         visible: false
  92         scale: 0
  93         transformOrigin: Item.TopRight
  94         onButtonClicked: {
  95             parent.state = ""
  96             cancelButton.forceActiveFocus()
  97         }
  98     }
  99
 100     Item {
 101         id: buttonsArea
 102         anchors {
 103             top: textEditRow.top
 104             right: cancelButton.right
 105             left: cancelButton.right
 106             bottom: textEditRow.top
 107         }
 108     }
 109
 110     Component.onCompleted: {
 111         textSingleLineHeight = messageEditor.height
 112     }
 113
 114     states: [
 115         State {
 116             name: "edit"
 117             PropertyChanges {
 118                 target: messageEditor
 119                 text: locationUpdate.message
 120                 height: cancelButton.y + cancelButton.height
 121             }
 122             PropertyChanges {
 123                 target: messageEditorRect
 124                 opacity: 0.3
 125             }
 126             PropertyChanges {
 127                 target: charactersLeftRect
 128                 opacity: 0.3
 129             }
 130             PropertyChanges {
 131                 target: charactersLeft
 132                 opacity: 0.8
 133             }
 134             PropertyChanges {
 135                 target: cancelButton
 136                 scale: 1
 137             }
 138             AnchorChanges {
 139                 target: buttonsArea
 140                 anchors.left: cancelButton.left
 141                 anchors.bottom: textEditRow.bottom
 142             }
 143         }
 144     ]
 145
 146     transitions: [
 147         Transition {
 148             from: ""
 149             to: "edit"
 150             SequentialAnimation {
 151                 PropertyAction { target: sendButton; property: "visible"; value: true }
 152                 PropertyAction { target: cancelButton; property: "visible"; value: true }
 153                 ParallelAnimation {
 154                     NumberAnimation { target: cancelButton; properties: "scale"; duration: animationDuration }
 155                     AnchorAnimation { targets: buttonsArea; duration: animationDuration }
 156                     NumberAnimation { target: messageEditor; properties: "height"; duration: animationDuration }
 157                 }
 158             }
 159         },
 160         Transition {
 161             from: "edit"
 162             to: ""
 163             SequentialAnimation {
 164                 ParallelAnimation {
 165                     NumberAnimation { target: cancelButton; properties: "scale"; duration: animationDuration }
 166                     AnchorAnimation { targets: buttonsArea; duration: animationDuration }
 167                     NumberAnimation { target: messageEditor; properties: "height"; duration: animationDuration }
 168                 }
 169                 PropertyAction { target: sendButton; property: "visible"; value: false }
 170                 PropertyAction { target: cancelButton; property: "visible"; value: false }
 171             }
 172         }
 173     ]
 174 }