ProfileView: Edit vs normal mode animations, rect around editor.

diff --git a/src/qmlui/DetailEditorRow.qml b/src/qmlui/DetailEditorRow.qml
index 7212461..eb67755 100644 (file)
--- a/src/qmlui/DetailEditorRow.qml
+++ b/src/qmlui/DetailEditorRow.qml
@@ -2,52 +2,65 @@ import Qt 4.7
 
 Item {
     property alias image: image.source
-    property alias text: text.text
+    property alias text: messageEditor.text
 
     property int textSingleLineHeight: 0
+    property int animationDuration: 150
 
     anchors.left: parent.left
     anchors.right: parent.right
-    width: childrenRect.width
-    height: text.height > image.height ? text.height : image.height
-
-    state: parent.state
+    width: parent.width
+//    height: messageEditor.height > image.height ? messageEditor.height : image.height
+    height: messageEditor.height
 
     Image {
         id: image
         anchors { left: parent.left; top: parent.top }
     }
 
+    Rectangle {
+        id: messageEditorRect
+        anchors { fill: messageEditor; margins: -2 }
+        border { color: "black"; width: 1 }
+        color: "white"
+        radius: 5
+        opacity: 0
+
+        Behavior on opacity { NumberAnimation { duration: animationDuration } }
+    }
+
     TextEdit {
-        id: text
-        anchors { leftMargin: 5; left: image.right; right: sendButton.left; top: parent.top }
+        id: messageEditor
+        anchors { leftMargin: 5; left: image.right; right: buttonsArea.left; rightMargin: 5; top: parent.top }
+        height: paintedHeight > buttonsArea.height ? paintedHeight : buttonsArea.height
         focus: true
         selectByMouse: true
         font.pixelSize: image.height * 0.7
         clip: true;
-//        elide: Text.ElideRight
-        state: parent.state
-        Behavior on height {
-            id: textHeightBehavior
-            NumberAnimation { duration: 150 }
-        }
+        wrapMode: TextEdit.Wrap
         onActiveFocusChanged: {
-            if (activeFocus)
+            if (activeFocus) {
+                console.log("messageEditor got focus")
                 parent.state = "edit"
+            } else {
+                console.log("messageEditor lost focus")
+            }
+
         }
     }
 
     Button {
         id: sendButton
         text: "Send"
-        anchors { left: cancelButton.left; right: cancelButton.right; top: text.top }
+        anchors { left: cancelButton.left; right: cancelButton.right; top: messageEditor.top }
         visible: false
         scale: cancelButton.scale
         transformOrigin: Item.Right
         onButtonClicked: {
-            locationUpdate.setMessage(text.text)
+            locationUpdate.setMessage(messageEditor.text)
             locationUpdate.send()
             parent.state = ""
+            sendButton.forceActiveFocus()
         }
     }
 
@@ -60,84 +73,74 @@ Item {
         transformOrigin: Item.TopRight
         onButtonClicked: {
             parent.state = ""
+            cancelButton.forceActiveFocus()
         }
     }
 
-    onStateChanged: {
-        console.log("onStateChanged, state: " + state)
+    Item {
+        id: buttonsArea
+        anchors {
+            top: parent.top
+            right: cancelButton.right
+            left: cancelButton.right
+            bottom: parent.top
+        }
     }
 
     Component.onCompleted: {
-        textSingleLineHeight = text.height
+        textSingleLineHeight = messageEditor.height
     }
 
     states: [
         State {
-            name: "expanded"
-                PropertyChanges {
-                    target: text
-                    height: paintedHeight
-                }
-        },
-        State {
-            name: ""
-            PropertyChanges {
-                target: text
-                explicit: true
-                height: textSingleLineHeight
-            }
-        },
-        State {
             name: "edit"
             PropertyChanges {
-                target: text
+                target: messageEditor
                 text: locationUpdate.message
+                height: cancelButton.y + cancelButton.height
+            }
+            PropertyChanges {
+                target: messageEditorRect
+                opacity: 0.3
             }
             PropertyChanges {
                 target: cancelButton
                 scale: 1
             }
+            AnchorChanges {
+                target: buttonsArea
+                anchors.left: cancelButton.left
+                anchors.bottom: cancelButton.bottom
+            }
         }
-
     ]
 
     transitions: [
         Transition {
             from: ""
-            to: "expanded"
-            SequentialAnimation {
-                PropertyAction { target: textHeightBehavior; property: "enabled"; value: true }
-                PropertyAction { target: text; property: "wrapMode"; value: Text.Wrap }
-                PropertyAction { target: text; property: "elide"; value: Text.ElideNone }
-            }
-        },
-        Transition {
-            from: "expanded"
-            to: ""
-            SequentialAnimation {
-                PropertyAction { target: textHeightBehavior; property: "enabled"; value: false }
-                NumberAnimation { target: text; properties: "height"; duration: 150 }
-                PropertyAction { target: text; property: "wrapMode"; value: Text.NoWrap }
-                PropertyAction { target: text; property: "elide"; value: Text.ElideRight }
-            }
-        },
-        Transition {
-            from: ""
             to: "edit"
             SequentialAnimation {
                 PropertyAction { target: sendButton; property: "visible"; value: true }
                 PropertyAction { target: cancelButton; property: "visible"; value: true }
-                NumberAnimation { target: cancelButton; properties: "scale"; duration: 150 }
+                ParallelAnimation {
+                    NumberAnimation { target: cancelButton; properties: "scale"; duration: animationDuration }
+                    AnchorAnimation { targets: buttonsArea; duration: animationDuration }
+                    NumberAnimation { target: messageEditor; properties: "height"; duration: animationDuration }
+                }
+
             }
         },
         Transition {
             from: "edit"
             to: ""
             SequentialAnimation {
-                NumberAnimation { target: sendButton; properties: "scale"; duration: 150 }
+                ParallelAnimation {
+                    NumberAnimation { target: cancelButton; properties: "scale"; duration: animationDuration }
+                    AnchorAnimation { targets: buttonsArea; duration: animationDuration }
+                    NumberAnimation { target: messageEditor; properties: "height"; duration: animationDuration }
+                }
                 PropertyAction { target: sendButton; property: "visible"; value: false }
                 PropertyAction { target: cancelButton; property: "visible"; value: false }
-                PropertyAction { target: text; property: "visible"; value: text }
             }
         }
     ]

diff --git a/src/qmlui/DetailRow.qml b/src/qmlui/DetailRow.qml
index 3d92bf6..6f1968e 100644 (file)
--- a/src/qmlui/DetailRow.qml
+++ b/src/qmlui/DetailRow.qml
@@ -8,7 +8,7 @@ Item {
 
     anchors.left: parent.left
     anchors.right: parent.right
-    width: childrenRect.width
+    width: parent.width
     height: text.height > image.height ? text.height : image.height
 
     state: parent.state

diff --git a/src/qmlui/ListBase.qml b/src/qmlui/ListBase.qml
index cc96105..893d4af 100644 (file)
--- a/src/qmlui/ListBase.qml
+++ b/src/qmlui/ListBase.qml
@@ -2,7 +2,6 @@ import Qt 4.7
 
 ListView {
     anchors.fill: parent
-    anchors.margins: 5
     spacing: 5
     focus: true
     clip: true

diff --git a/src/qmlui/LoginWidget.qml b/src/qmlui/LoginWidget.qml
index 12ecd6d..a309dbb 100644 (file)
--- a/src/qmlui/LoginWidget.qml
+++ b/src/qmlui/LoginWidget.qml
@@ -38,7 +38,7 @@ Dialog {
                     url: facebookAuthenticator.url
 
                     onUrlChanged: {
-                        console.log("URL CHANGED: ", url)
+//                        console.log("URL CHANGED: ", url)
                         facebookAuthenticator.urlChanged(url)
                     }
                 }

diff --git a/src/qmlui/Panel.qml b/src/qmlui/Panel.qml
index d959aa3..b25ebbd 100644 (file)
--- a/src/qmlui/Panel.qml
+++ b/src/qmlui/Panel.qml
@@ -4,7 +4,6 @@ Rectangle {
     id: panel
     height: parent.height
     color: "#222222"
-//    state: "opened"
     clip: true
 
     function setView(view) {
@@ -37,12 +36,12 @@ Rectangle {
 
             front: Loader {
                 id: frontLoader
-                anchors.fill: parent
+                anchors { fill: parent; leftMargin: 5; rightMargin: 5 }
             }
 
             back: Loader {
                 id: backLoader
-                anchors.fill: parent
+                anchors { fill: parent; leftMargin: 5; rightMargin: 5 }
             }
 
             transform: Rotation {

diff --git a/src/qmlui/ProfileView.qml b/src/qmlui/ProfileView.qml
index 94f9a84..02c5f63 100644 (file)
--- a/src/qmlui/ProfileView.qml
+++ b/src/qmlui/ProfileView.qml
@@ -5,8 +5,9 @@ Item {
 
     property int textSingleLineHeight: 0
 
-    height: buttons.y + buttons.height + 5
-    anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter; margins: 10 }
+    height: details.item.y + details.item.height + 5
+//    anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter; margins: 10 }
+    anchors.fill: parent
     clip: true
 
     Rectangle {
@@ -75,14 +76,14 @@ Item {
         anchors { left: primaryText.left; right: primaryText.right; top: primaryText.bottom }
     }
 
-    Loader {
-        id: buttons
-        height: 0
-        anchors { horizontalCenter: parent.horizontalCenter; top: details.bottom }
-        onLoaded: {
-            item.visible = false
-        }
-    }
+//    Loader {
+//        id: buttons
+//        height: 0
+//        anchors { horizontalCenter: parent.horizontalCenter; top: details.bottom }
+//        onLoaded: {
+//            item.visible = false
+//        }
+//    }
 
     Component {
         id: detailsComponent
@@ -91,8 +92,8 @@ Item {
             height: messageRow.height + addressRow.height + timeRow.height
             width: parent.width
             DetailEditorRow { id: messageRow; image: "qrc:/res/images/envelope.png"; text: userProfile.message }
-            DetailRow { id: addressRow; anchors.top: messageRow.bottom; image: "qrc:/res/images/compass.png"; text: userProfile.address }
-            DetailRow { id: timeRow; anchors.top: addressRow.bottom; image: "qrc:/res/images/clock.png"; text: userProfile.time }
+            DetailRow { id: addressRow; state: "expanded"; anchors.top: messageRow.bottom; image: "qrc:/res/images/compass.png"; text: userProfile.address }
+            DetailRow { id: timeRow; state: "expanded"; anchors.top: addressRow.bottom; image: "qrc:/res/images/clock.png"; text: userProfile.time }
         }
     }