Fix StocQt buttons

They're now on screen and using better componentization for the styling.

Task-number: QTBUG-28291
Change-Id: If21712e523c706ee05d257e209ed71dd61acf2dc
Reviewed-by: Jens Bache-Wiig <jens.bache-wiig@digia.com>

4 files changed, 124 insertions, 155 deletions

diff --git a/examples/quick/demos/stocqt/content/Button.qml b/examples/quick/demos/stocqt/content/Button.qml
index 0e99c52c51..2cdd187629 100644
--- a/examples/quick/demos/stocqt/content/Button.qml
+++ b/examples/quick/demos/stocqt/content/Button.qml
@@ -42,18 +42,21 @@ import QtQuick 2.0
 
 Rectangle {
   id:button
-  property bool buttonEnabled:true
+  signal clicked
+  property alias text: txt.text
+  property bool buttonEnabled:false
   radius:5
-  width:25
-  height:25
-  color:buttonEnabled ? "steelblue" : "gray"
+  width: Math.max(64,txt.width+16);
+  height: 32
+  color: buttonEnabled ? "steelblue" : "gray"
   MouseArea {
     anchors.fill:parent
-    onClicked: {
-      if (buttonEnabled)
-       buttonEnabled = false;
-      else
-       buttonEnabled = true;
-    }
+    onClicked: button.clicked();
+  }
+  Text {
+    anchors.centerIn: parent
+    font.pixelSize: 18
+    color:"#ecc089"
+    id: txt
   }
 }
diff --git a/examples/quick/demos/stocqt/content/CheckBox.qml b/examples/quick/demos/stocqt/content/CheckBox.qml
new file mode 100644
index 0000000000..fb0939045a
--- /dev/null
+++ b/examples/quick/demos/stocqt/content/CheckBox.qml
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Research In Motion.
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
+**     of its contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Row {
+  id:button
+  property alias text: txt.text
+  property bool buttonEnabled:true
+  width: txt.width + 30
+  height:25
+  spacing: 5
+  x: 5
+  Text {
+    id: txt
+    text:"Close "
+    color:"#76644A"
+    font.pixelSize:18
+  }
+  Rectangle {
+    width: 25
+    height: 25
+    radius:5
+    color:buttonEnabled ? "steelblue" : "gray"
+    MouseArea {
+        anchors.fill:parent
+        onClicked: {
+          if (buttonEnabled)
+           buttonEnabled = false;
+          else
+           buttonEnabled = true;
+        }
+    }
+  }
+}
diff --git a/examples/quick/demos/stocqt/content/StockSettings.qml b/examples/quick/demos/stocqt/content/StockSettings.qml
index 600747b969..3bb4de84a6 100644
--- a/examples/quick/demos/stocqt/content/StockSettings.qml
+++ b/examples/quick/demos/stocqt/content/StockSettings.qml
@@ -128,65 +128,38 @@ Rectangle {
       spacing:2
        Row{
            spacing:10
-          Text {
-            text:"High   "
-            color:"#76644A"
-            font.pointSize:15
-          }
-
-          Button {
+           CheckBox {
              id:highButton
+             text:"High   "
              buttonEnabled:false
-          }
+           }
 
-          Text {
-            text:"Low     "
-            color:"#76644A"
-            font.pointSize:15
-          }
-
-          Button {
+           CheckBox {
              id:lowButton
+             text:"Low     "
              buttonEnabled:false
-          }
-
-          Text {
-            text:"Open "
-            color:"#76644A"
-            font.pointSize:15
-          }
-          Button {
+           }
+           CheckBox {
+             text:"Open "
              id:openButton
              buttonEnabled:false
-          }
+           }
       }
        Row{
            spacing:10
-          Text {
-            text:"Close "
-            color:"#76644A"
-            font.pointSize:15
-          }
-          Button {
+           CheckBox {
+             text:"Close "
              id:closeButton
              buttonEnabled:true
-          }
-          Text {
-            text:"Volume"
-            color:"#76644A"
-            font.pointSize:15
-          }
-          Button {
+           }
+           CheckBox {
              id:volumeButton
+             text:"Volume"
              buttonEnabled:true
-          }
-          Text {
-            text:"K Line"
-            color:"#76644A"
-            font.pointSize:15
-          }
-          Button {
+           }
+           CheckBox {
              id:klineButton
+             text:"K Line"
              buttonEnabled:false
           }
       }
@@ -195,7 +168,7 @@ Rectangle {
 
   Text {
     id:chartTypeText
-    text:"CHART TYPE:"
+    text:"SHOW PREVIOUS:"
     color:"#76644A"
     font.pointSize:15
     anchors.left:parent.left
@@ -209,109 +182,29 @@ Rectangle {
       anchors.top : chartTypeText.bottom
       anchors.topMargin: 20
       spacing:10
-      Rectangle {
-          id:yearView
-          width:70
-          height:30
-          radius:10
-          color:"steelblue"
-          Text {
-              anchors.horizontalCenter: parent.horizontalCenter
-              anchors.fill: parent
-              font.pointSize: 15
-              text:"YEAR"
-          }
-          MouseArea {
-              anchors.fill: parent
-              onClicked: {
-                  if (root.chartType != "year") {
-                      root.chartType = "year";
-                      yearView.color = "steelblue"
-                      monthView.color = "gray"
-                      weekView.color = "gray"
-                      allView.color = "gray"
-                  }
-              }
-          }
+      Button {
+        id: yearView
+        text: "YEAR"
+        buttonEnabled: root.chartType == "year"
+        onClicked: root.chartType = "year"
       }
-      Rectangle {
-          id:monthView
-          width:70
-          radius:10
-          height:30
-          color:"gray"
-          Text {
-              anchors.fill: parent
-              anchors.horizontalCenter: parent.horizontalCenter
-              font.pointSize: 15
-              color:"#ecc089"
-              text:"MONTH"
-          }
-          MouseArea {
-              anchors.fill: parent
-              onClicked: {
-                  if (root.chartType != "month") {
-                      root.chartType = "month";
-                      yearView.color = "gray"
-                      monthView.color = "steelblue"
-                      weekView.color = "gray"
-                      allView.color = "gray"
-                  }
-              }
-          }
-
+      Button {
+        id: monthView
+        text: "MONTH"
+        buttonEnabled: root.chartType == "month"
+        onClicked: root.chartType = "month"
       }
-      Rectangle {
-          id:weekView
-          height:30
-          width:70
-          radius:10
-          color:"gray"
-          Text {
-              anchors.fill: parent
-              anchors.horizontalCenter: parent.horizontalCenter
-              font.pointSize: 15
-              color:"#ecc089"
-              text:"WEEK"
-          }
-          MouseArea {
-              anchors.fill: parent
-              onClicked: {
-                  if (root.chartType != "week") {
-                      root.chartType = "week";
-                      yearView.color = "gray"
-                      monthView.color = "gray"
-                      weekView.color = "steelblue"
-                      allView.color = "gray"
-                  }
-              }
-          }
+      Button {
+        id: weekView
+        text: "WEEK"
+        buttonEnabled: root.chartType == "week"
+        onClicked: root.chartType = "week"
       }
-      Rectangle {
-          id:allView
-          width:70
-          radius:10
-          height:30
-          color:"gray"
-          Text {
-              anchors.horizontalCenter: parent.horizontalCenter
-              anchors.fill: parent
-              font.pointSize: 15
-              color:"#ecc089"
-              text:"ALL"
-          }
-          MouseArea {
-              anchors.fill: parent
-              onClicked: {
-                  if (root.chartType != "all") {
-                      root.chartType = "all";
-                      yearView.color = "gray"
-                      monthView.color = "gray"
-                      weekView.color = "gray"
-                      allView.color = "steelblue"
-                  }
-              }
-          }
+      Button {
+        id: allView
+        text: "ALL"
+        buttonEnabled: root.chartType == "all"
+        onClicked: root.chartType = "all"
       }
   }
 }
diff --git a/examples/quick/demos/stocqt/stocqt.qrc b/examples/quick/demos/stocqt/stocqt.qrc
index b2b1acaf04..2290264bb5 100644
--- a/examples/quick/demos/stocqt/stocqt.qrc
+++ b/examples/quick/demos/stocqt/stocqt.qrc
@@ -2,6 +2,7 @@
     <qresource prefix="/demos/stocqt">
         <file>stocqt.qml</file>
         <file>content/Button.qml</file>
+        <file>content/CheckBox.qml</file>
         <file>content/DatePicker.qml</file>
         <file>content/StockChart.qml</file>
         <file>content/StockListModel.qml</file>