From 7c277e9f93c50750898d6de542462e2f21be2ad1 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Sami=20R=C3=A4m=C3=B6?= <sami.ramo@ixonos.com>
Date: Fri, 19 Nov 2010 12:51:00 +0200
Subject: [PATCH] Re-wrote Button: is now generic and can contain text and/or
 image.

---
 src/qmlui/Button.qml          |  115 +++++++++++++++++------------------------
 src/qmlui/DetailEditorRow.qml |   19 +++----
 2 files changed, 56 insertions(+), 78 deletions(-)

diff --git a/src/qmlui/Button.qml b/src/qmlui/Button.qml
index 3083a83..16fbe55 100644
--- a/src/qmlui/Button.qml
+++ b/src/qmlui/Button.qml
@@ -1,86 +1,63 @@
 import Qt 4.7
 
 Rectangle {
-    id: border
+    id: background
     property alias image: image.source
     property alias text: text.text
-
-    property bool autoRotationEnabled: true
+    property int margins: 5
 
     signal buttonClicked()
 
-    width: 100
-    height: parent.height / 4
-    color: "black"
+    width: contents.width + margins * 2
+    height: contents.height + margins * 2
+    color: "#222222"
+    border { color: "#aaaaaa"; width: 1 }
+    smooth: true
+    radius: 10
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: buttonClicked()
+    }
 
-    Rectangle {
-        id: inner
-        color: "#222222"
-        height: parent.height - 2
-        width: parent.width - 2
+    Item {
+        id: contents
         anchors.centerIn: parent
-
-        MouseArea {
-            id: mouseArea
-            anchors.fill: parent
-            onClicked: buttonClicked()
+        height: Math.max(image.height, text.height)
+        width: text.x + text.width
+
+        Image {
+            id: image
+            smooth: true
+            anchors { left: contents.left; leftMargin: 1; verticalCenter: contents.verticalCenter; verticalCenterOffset: 1}
+            width: sourceSize.width
+            height: sourceSize.height
         }
 
-        Item {
-            id: contents
-            state: border.autoRotationEnabled ? deviceRotation.orientation : ""
-            height: parent.height > parent.width ? parent.width : parent.height
-            width: parent.height > parent.width ? parent.width : parent.height
-            anchors.centerIn: parent
-
-            Image {
-                id: image
-                smooth: true
-                anchors.centerIn: parent
-                anchors.verticalCenterOffset: -6
-                width: sourceSize.width
-                height: sourceSize.height
+        Text {
+            id: text
+            color: "#aaaaaa"
+            font.pixelSize: 18
+            smooth: true
+            height: paintedHeight
+            width: paintedWidth
+            anchors {
+                left: image.right;
+                verticalCenter: contents.verticalCenter
+                leftMargin: (image.source != "" && text.text != "") ? 5 : 0
             }
+        }
+    }
 
-            Text {
-                id: text
-                color: "#aaaaaa"
-                font.pixelSize: 18
-                smooth: true
-                anchors.bottom: parent.bottom
-                anchors.bottomMargin: 8
-                anchors.horizontalCenter: parent.horizontalCenter
+    states: [
+        State {
+            name: "highlight"
+            when: mouseArea.pressed
+            PropertyChanges {
+                target: background
+                color: palette.highlight
             }
-
-            states: [
-                State {
-                    name: "highlight"
-                    when: mouseArea.pressed
-                    PropertyChanges {
-                        target: inner
-                        color: palette.highlight
-                    }
-                },
-                State {
-                    name: "potrait"
-                    when: border.autoRotaiionEnabled && deviceRotation.orientation == "potrait"
-                    PropertyChanges {
-                        target: contents
-                        rotation: -90
-                    }
-                }
-            ]
-
-            transitions: [
-                Transition {
-                    from: ""
-                    to: "potrait"
-                    NumberAnimation { properties: "rotation"; duration: 200 }
-                    reversible: true
-                }
-            ]
         }
-
-
-    }
+    ]
 }
diff --git a/src/qmlui/DetailEditorRow.qml b/src/qmlui/DetailEditorRow.qml
index 82da8a1..7212461 100644
--- a/src/qmlui/DetailEditorRow.qml
+++ b/src/qmlui/DetailEditorRow.qml
@@ -40,10 +40,10 @@ Item {
     Button {
         id: sendButton
         text: "Send"
-        anchors { right: parent.right; rightMargin: 5; top: text.top }
-        height: 25
-        width: 0
+        anchors { left: cancelButton.left; right: cancelButton.right; top: text.top }
         visible: false
+        scale: cancelButton.scale
+        transformOrigin: Item.Right
         onButtonClicked: {
             locationUpdate.setMessage(text.text)
             locationUpdate.send()
@@ -54,9 +54,10 @@ Item {
     Button {
         id: cancelButton
         text: "Cancel"
-        anchors { left: sendButton.left; right: sendButton.right; top: sendButton.bottom; topMargin: 5 }
-        height: 25
+        anchors { right: parent.right; rightMargin: 5; top: sendButton.bottom; topMargin: 5 }
         visible: false
+        scale: 0
+        transformOrigin: Item.TopRight
         onButtonClicked: {
             parent.state = ""
         }
@@ -93,8 +94,8 @@ Item {
                 text: locationUpdate.message
             }
             PropertyChanges {
-                target: sendButton
-                width: 60
+                target: cancelButton
+                scale: 1
             }
         }
 
@@ -126,14 +127,14 @@ Item {
             SequentialAnimation {
                 PropertyAction { target: sendButton; property: "visible"; value: true }
                 PropertyAction { target: cancelButton; property: "visible"; value: true }
-                NumberAnimation { target: sendButton; properties: "width"; duration: 1500 }
+                NumberAnimation { target: cancelButton; properties: "scale"; duration: 150 }
             }
         },
         Transition {
             from: "edit"
             to: ""
             SequentialAnimation {
-                NumberAnimation { target: sendButton; properties: "width"; duration: 1500 }
+                NumberAnimation { target: sendButton; properties: "scale"; duration: 150 }
                 PropertyAction { target: sendButton; property: "visible"; value: false }
                 PropertyAction { target: cancelButton; property: "visible"; value: false }
                 PropertyAction { target: text; property: "visible"; value: text }
-- 
1.7.9.5