Improved cosmetics for StockQt

This will not get us any design awards but it looks
a bit more professional than the original.

Change-Id: Ib01a20ebad5888af44c174cbd493ce8d99dcf7b6
Reviewed-by: Alan Alpert (Personal) <416365416c@gmail.com>

8 files changed, 76 insertions, 45 deletions

diff --git a/examples/quick/demos/stocqt/content/Button.qml b/examples/quick/demos/stocqt/content/Button.qml
index 0051d814aa..436adf3116 100644
--- a/examples/quick/demos/stocqt/content/Button.qml
+++ b/examples/quick/demos/stocqt/content/Button.qml
@@ -45,10 +45,11 @@ Rectangle {
     signal clicked
     property alias text: txt.text
     property bool buttonEnabled: false
-    radius: 5
     width: Math.max(64, txt.width + 16)
     height: 32
-    color: buttonEnabled ? "steelblue" : "gray"
+    color: buttonEnabled ? "#76644A" : "transparent"
+    border.color: "#76644A"
+    border.width: 1
     MouseArea {
         anchors.fill: parent
         onClicked: button.clicked()
diff --git a/examples/quick/demos/stocqt/content/CheckBox.qml b/examples/quick/demos/stocqt/content/CheckBox.qml
index 1f21cc21c4..9c429d65dc 100644
--- a/examples/quick/demos/stocqt/content/CheckBox.qml
+++ b/examples/quick/demos/stocqt/content/CheckBox.qml
@@ -44,29 +44,45 @@ Row {
     id: button
     property alias text: txt.text
     property bool buttonEnabled: true
-    width: txt.width + 30
+    width: 140
     height: 25
     spacing: 5
     x: 5
-    Text {
-        id: txt
-        text: "Close "
-        color: "#76644A"
-        font.pixelSize: 18
+    MouseArea {
+        id: mouse
+        anchors.fill: parent
+        onClicked: {
+            if (buttonEnabled)
+                buttonEnabled = false;
+            else
+                buttonEnabled = true;
+        }
     }
     Rectangle {
-        width: 25
-        height: 25
-        radius: 5
-        color: buttonEnabled ? "steelblue" : "gray"
-        MouseArea {
+        id: checkbox
+        width: 23
+        height: 23
+        anchors.left: parent.left
+        border.color: "#76644A"
+        border.width: 1
+        antialiasing: true
+        radius: 2
+        color: "transparent"
+        Rectangle {
             anchors.fill: parent
-            onClicked: {
-                if (buttonEnabled)
-                    buttonEnabled = false;
-                else
-                    buttonEnabled = true;
-            }
+            anchors.margins: 4
+            antialiasing: true
+            radius: 1
+            color: mouse.pressed || buttonEnabled ? "#76644A" : "transparent"
+        }
+        Text {
+            id: txt
+            anchors.left: checkbox.right
+            anchors.leftMargin: 4
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Close "
+            color: "#ecc089"
+            font.pixelSize: 18
         }
     }
 }
diff --git a/examples/quick/demos/stocqt/content/DatePicker.qml b/examples/quick/demos/stocqt/content/DatePicker.qml
index d045d12d5e..490132fdbc 100644
--- a/examples/quick/demos/stocqt/content/DatePicker.qml
+++ b/examples/quick/demos/stocqt/content/DatePicker.qml
@@ -44,7 +44,7 @@ Rectangle {
     id: root
     color: "transparent"
     width: 300
-    height: 45
+    height: 40
     property var _monthNames: [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN","JUL", "AUG", "SEP", "OCT", "NOV", "DEC" ];
     property var date: new Date()
 
@@ -54,14 +54,17 @@ Rectangle {
         year.text = date.getFullYear();
     }
     Row {
-        spacing: 20
+        spacing: 4
         anchors.fill: parent
 
         Rectangle {
             height: root.height
             width: root.width/3 - 20
             color: "#272822"
-            radius: 5
+            border.color: "#76644A"
+            border.width: 1
+            radius: 2
+            antialiasing: true
 
             TextInput {
                 id: month
@@ -87,7 +90,10 @@ Rectangle {
             height: root.height
             width: root.width/3 - 20
             color: "#272822"
-            radius: 5
+            border.color: "#76644A"
+            border.width: 1
+            radius: 2
+            antialiasing: true
 
             TextInput {
                 id: day
@@ -105,7 +111,10 @@ Rectangle {
             height: root.height
             width: root.width/3 - 20
             color: "#272822"
-            radius: 5
+            border.color: "#76644A"
+            border.width: 1
+            radius: 2
+            antialiasing: true
 
             TextInput {
                 id: year
diff --git a/examples/quick/demos/stocqt/content/StockChart.qml b/examples/quick/demos/stocqt/content/StockChart.qml
index 97f6b47535..ea2d54db9c 100644
--- a/examples/quick/demos/stocqt/content/StockChart.qml
+++ b/examples/quick/demos/stocqt/content/StockChart.qml
@@ -95,6 +95,7 @@ Rectangle {
         anchors.top: toDate.bottom
         anchors.bottom: parent.bottom
         renderTarget: Canvas.FramebufferObject
+        antialiasing: true
         property int frames: first
         property int mouseX: 0
         property int mouseY: 0
@@ -106,6 +107,8 @@ Rectangle {
         property int first: 0
         property int last: 0
 
+        property int pixelSkip: 1
+
         function drawBackground(ctx) {
             ctx.save();
             ctx.fillStyle = "#272822";
@@ -142,7 +145,7 @@ Rectangle {
 
             var w = canvas.width/points.length;
             var end = points.length;
-            for (var i = 0; i < end; i++) {
+            for (var i = 0; i < end; i+=pixelSkip) {
                 var x = points[i].x;
                 var y = points[i][price];
                 y = canvas.height * y/highest;
@@ -162,7 +165,7 @@ Rectangle {
             ctx.globalAlpha = 0.4;
             ctx.lineWidth = 2;
             var end = points.length;
-            for (var i = 0; i < end; i++) {
+            for (var i = 0; i < end; i+=pixelSkip) {
                 var x = points[i].x;
                 var open = canvas.height * points[i].open/highest - canvas.movedY;
                 var close = canvas.height * points[i].close/highest - canvas.movedY;
@@ -204,7 +207,7 @@ Rectangle {
             ctx.lineWidth = 1;
 
             var end = points.length;
-            for (var i = 0; i < end; i++) {
+            for (var i = 0; i < end; i+=pixelSkip) {
                 var x = points[i].x;
                 var y = points[i][price];
                 y = canvas.height * (1 - y/highest);
@@ -231,7 +234,7 @@ Rectangle {
             var highestVolume = stockModel.highestVolume;
             console.log("highest price:" + highestPrice + ", highest volume:" + highestVolume)
             var points = [];
-            for (var i = 0; i <= last - first; i++) {
+            for (var i = 0; i <= last - first; i+=pixelSkip) {
                 var price = stockModel.get(i + first);
                 points.push({
                                 x: i*canvas.width/(last-first+1),
diff --git a/examples/quick/demos/stocqt/content/StockListView.qml b/examples/quick/demos/stocqt/content/StockListView.qml
index f4ac6cb1a2..2a2df10d56 100644
--- a/examples/quick/demos/stocqt/content/StockListView.qml
+++ b/examples/quick/demos/stocqt/content/StockListView.qml
@@ -82,10 +82,9 @@ Rectangle {
             }
         }
 
-        highlight: Image {
-            height:30
-            width:parent.width
-            source:"images/stock-selected.png"
+        highlight: Rectangle {
+            width: parent.width
+            color: "#662"
         }
     }
 }
diff --git a/examples/quick/demos/stocqt/content/StockSettings.qml b/examples/quick/demos/stocqt/content/StockSettings.qml
index ec7c20ea51..60e6bef3d0 100644
--- a/examples/quick/demos/stocqt/content/StockSettings.qml
+++ b/examples/quick/demos/stocqt/content/StockSettings.qml
@@ -87,7 +87,7 @@ Rectangle {
         anchors.left: parent.left
         anchors.leftMargin: 30
         anchors.top: startDateText.bottom
-        anchors.topMargin: 15
+        anchors.topMargin: 8
         date: new Date(1995, 3, 25)
     }
 
@@ -107,7 +107,7 @@ Rectangle {
         anchors.left: parent.left
         anchors.leftMargin: 30
         anchors.top: endDateText.bottom
-        anchors.topMargin: 15
+        anchors.topMargin: 8
     }
 
     Text {
@@ -123,7 +123,7 @@ Rectangle {
     Column {
         id: drawOptions
         anchors.top: drawOptionsText.bottom
-        anchors.topMargin: 20
+        anchors.topMargin: 8
         anchors.left: parent.left
         anchors.leftMargin: 30
         spacing: 2
@@ -133,27 +133,31 @@ Rectangle {
 
             CheckBox {
                 id: highButton
-                text: "High   "
+                text: "High"
                 buttonEnabled: false
             }
             CheckBox {
                 id: lowButton
-                text: "Low     "
+                text: "Low"
                 buttonEnabled: false
             }
+        }
+        Row {
+            spacing: 10
             CheckBox {
                 id: openButton
-                text: "Open "
+                text: "Open"
                 buttonEnabled: false
             }
-        }
-        Row {
-            spacing: 10
             CheckBox {
-                text: "Close "
+                text: "Close"
                 id: closeButton
                 buttonEnabled: true
             }
+
+        }
+        Row {
+            spacing: 10
             CheckBox {
                 id: volumeButton
                 text: "Volume"
@@ -181,8 +185,8 @@ Rectangle {
         anchors.left: parent.left
         anchors.leftMargin: 20
         anchors.top: chartTypeText.bottom
-        anchors.topMargin: 20
-        spacing: 10
+        anchors.topMargin: 8
+        spacing: -1
         Button {
             id: yearView
             text: "YEAR"
diff --git a/examples/quick/demos/stocqt/content/images/stock-selected.png b/examples/quick/demos/stocqt/content/images/stock-selected.png
deleted file mode 100644
index 5629796b9c..0000000000
--- a/examples/quick/demos/stocqt/content/images/stock-selected.png
+++ /dev/null
diff --git a/examples/quick/demos/stocqt/stocqt.qrc b/examples/quick/demos/stocqt/stocqt.qrc
index 2290264bb5..8885aaa807 100644
--- a/examples/quick/demos/stocqt/stocqt.qrc
+++ b/examples/quick/demos/stocqt/stocqt.qrc
@@ -15,7 +15,6 @@
         <file>content/images/icon-items.png</file>
         <file>content/images/icon-settings.png</file>
         <file>content/images/logo.png</file>
-        <file>content/images/stock-selected.png</file>
         <file>content/images/wheel-touch.png</file>
         <file>content/images/wheel.png</file>
     </qresource>