Fix flickr-mobile toolbar

4 files changed, 57 insertions, 49 deletions

diff --git a/demos/declarative/flickr/flickr-mobile.qml b/demos/declarative/flickr/flickr-mobile.qml
index a4692a3..a6265c9 100644
--- a/demos/declarative/flickr/flickr-mobile.qml
+++ b/demos/declarative/flickr/flickr-mobile.qml
@@ -35,17 +35,23 @@ Item {
 
         Common.ImageDetails { id: ImageDetails; width: parent.width; x: parent.width; height: parent.height }
         Mobile.TitleBar { id: TitleBar; width: parent.width; height: 40; opacity: 0.9 }
-        Mobile.ToolBar { id: ToolBar; height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9 }
 
-        states: [
-            State {
-                name: "ListView"; when: Screen.inListView == true
-                PropertyChanges { target: PhotoListView; x: 0 }
-                PropertyChanges { target: PhotoGridView; x: -(parent.width * 1.5) }
-            }
-        ]
-        transitions: [
-            Transition { NumberAnimation { properties: "x"; duration: 500; easing: "easeInOutQuad" } }
-        ]
+        Mobile.ToolBar {
+            id: ToolBar
+            height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9
+            button1Label: "Update"; button2Label: "View mode"
+            onButton1Clicked: RssModel.reload()
+            onButton2Clicked: if (Screen.inListView == true) Screen.inListView = false; else Screen.inListView = true
+        }
+
+        states: State {
+            name: "ListView"; when: Screen.inListView == true
+            PropertyChanges { target: PhotoListView; x: 0 }
+            PropertyChanges { target: PhotoGridView; x: -(parent.width * 1.5) }
+        }
+
+        transitions: Transition {
+            NumberAnimation { properties: "x"; duration: 500; easing: "easeInOutQuad" }
+        }
     }
 }
diff --git a/demos/declarative/flickr/mobile/GridDelegate.qml b/demos/declarative/flickr/mobile/GridDelegate.qml
index 30abb05..5ab4d3a 100644
--- a/demos/declarative/flickr/mobile/GridDelegate.qml
+++ b/demos/declarative/flickr/mobile/GridDelegate.qml
@@ -35,7 +35,7 @@
              }
 
              Connection {
-                 sender: ToolBar.button2; signal: "clicked()"
+                 sender: ToolBar; signal: "button2Clicked()"
                  script: if (ScaleMe.state == 'Details' ) ScaleMe.state = 'Show';
              }
 
@@ -51,6 +51,7 @@
                      PropertyChanges { target: ImageDetails; x: 0 }
                      PropertyChanges { target: Views; x: -parent.width }
                      PropertyChanges { target: ToolBar.button2; text: "Back" }
+                     PropertyChanges { target: ToolBar; onButton2Clicked: { } }
                  }
              ]
              transitions: [
diff --git a/demos/declarative/flickr/mobile/TitleBar.qml b/demos/declarative/flickr/mobile/TitleBar.qml
index 49d670f..b74e414 100644
--- a/demos/declarative/flickr/mobile/TitleBar.qml
+++ b/demos/declarative/flickr/mobile/TitleBar.qml
@@ -2,9 +2,9 @@ import Qt 4.6
 
 Item {
     id: TitleBar
-
     property string untaggedString: "Uploads from everyone"
     property string taggedString: "Recent uploads tagged "
+
     BorderImage { source: "images/titlebar2.sci"; width: parent.width; height: parent.height + 14; y: -7 }
 
     Item {
@@ -20,12 +20,13 @@ Item {
 
         Text {
             id: CategoryText
-            anchors.left: parent.left; anchors.right: TagButton.left
-            anchors.leftMargin: 10; anchors.rightMargin: 10
-            anchors.verticalCenter: parent.verticalCenter
+            anchors {
+                left: parent.left; right: TagButton.left; leftMargin: 10; rightMargin: 10
+                verticalCenter: parent.verticalCenter
+            }
             elide: "ElideLeft"
             text: (RssModel.tags=="" ? untaggedString : taggedString + RssModel.tags)
-            font.bold: true; color: "white"; style: "Raised"; styleColor: "black"
+            font.bold: true; color: "White"; style: "Raised"; styleColor: "Black"
         }
 
         Button {
@@ -36,23 +37,27 @@ Item {
 
         Item {
             id: LineEdit
-            anchors.left: TagButton.right; anchors.leftMargin: 5; y: 4
-            anchors.right: parent.right; anchors.rightMargin: 5; height: parent.height - 9
+            y: 4; height: parent.height - 9
+            anchors { left: TagButton.right; leftMargin: 5; right: parent.right; rightMargin: 5 }
+
             BorderImage { source: "images/lineedit.sci"; anchors.fill: parent }
 
             TextInput {
                 id: Editor
-                anchors.left: parent.left; anchors.right: parent.right
-                anchors.leftMargin: 10; anchors.rightMargin: 10
-                anchors.verticalCenter: parent.verticalCenter
+                anchors {
+                    left: parent.left; right: parent.right; leftMargin: 10; rightMargin: 10
+                    verticalCenter: parent.verticalCenter
+                }
                 cursorVisible: true; font.bold: true
-                color: "#151515"; highlightColor: "green"
+                color: "#151515"; highlightColor: "Green"
             }
+
             KeyProxy {
                 id: Proxy
                 anchors.fill: parent
                 targets: [(ReturnKey), (Editor)]
             }
+
             Item {
                 id: ReturnKey
                 Keys.onReturnPressed: accept()
@@ -60,18 +65,15 @@ Item {
             }
         }
     }
-    states: [
-        State {
-            name: "Tags"
-            PropertyChanges { target: Container; x: -TagButton.x + 5 }
-            PropertyChanges { target: TagButton; text: "OK" }
-            PropertyChanges { target: Proxy; focus: true }
-        }
-    ]
-    transitions: [
-        Transition {
-            from: "*"; to: "*"
-            NumberAnimation { properties: "x"; easing: "easeInOutQuad" }
-        }
-    ]
+
+    states: State {
+        name: "Tags"
+        PropertyChanges { target: Container; x: -TagButton.x + 5 }
+        PropertyChanges { target: TagButton; text: "OK" }
+        PropertyChanges { target: Proxy; focus: true }
+    }
+
+    transitions: Transition {
+        NumberAnimation { properties: "x"; easing: "easeInOutQuad" }
+    }
 }
diff --git a/demos/declarative/flickr/mobile/ToolBar.qml b/demos/declarative/flickr/mobile/ToolBar.qml
index aa78c52..80897cc 100644
--- a/demos/declarative/flickr/mobile/ToolBar.qml
+++ b/demos/declarative/flickr/mobile/ToolBar.qml
@@ -2,22 +2,21 @@ import Qt 4.6
 
 Item {
     id: Toolbar
-    property var button2: Button2
+
+    property var button1Label
+    property var button2Label
+    signal button1Clicked
+    signal button2Clicked
 
     BorderImage { source: "images/titlebar2.sci"; width: parent.width; height: parent.height + 14; y: -7 }
 
-    Button { anchors.left: parent.left; anchors.leftMargin: 5; y: 3; width: 140; height: 32; text: "Update"; onClicked: RssModel.reload() }
+    Button {
+        anchors.left: parent.left; anchors.leftMargin: 5; y: 3; width: 140; height: 32; text: button1Label
+        onClicked: Toolbar.button1Clicked()
+    }
 
     Button {
-        id: Button2
-        anchors.right: parent.right; anchors.rightMargin: 5; y: 3; width: 140; height: 32; text: "View mode"
-        onClicked: {
-            if (Button2.text == "View mode") {
-                if (Screen.inListView == true)
-                Screen.inListView = false;
-                else
-                Screen.inListView = true
-            }
-        }
+        anchors.right: parent.right; anchors.rightMargin: 5; y: 3; width: 140; height: 32; text: button2Label
+        onClicked: Toolbar.button2Clicked()
     }
 }