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