StocQt demo: Fix text layout issues

The precision of the data received from the stock feed has changed,
and so we must round it before assigning to Text objects to avoid
overflow.

This change also rearranges the layout of the StockInfo element,
using Flow and proper word wrap and eliding for long company names
to improve the look of the stock info view on narrow screens.

Change-Id: I53aaefd1cdc984fcceae9874e5ca2f66b47a190d
Task-number: QTBUG-47207
Reviewed-by: Venugopal Shivashankar <venugopal.shivashankar@digia.com>

2 files changed, 65 insertions, 65 deletions

diff --git a/examples/quick/demos/stocqt/content/StockInfo.qml b/examples/quick/demos/stocqt/content/StockInfo.qml
index 337cc79f70..50f6b9107e 100644
--- a/examples/quick/demos/stocqt/content/StockInfo.qml
+++ b/examples/quick/demos/stocqt/content/StockInfo.qml
@@ -48,72 +48,72 @@ Rectangle {
 
     property var stock: null
 
-    Text {
-        id: stockIdText
-        anchors.left: parent.left
-        anchors.leftMargin: 5
-        anchors.top: parent.top
-        anchors.topMargin: 15
-        color: "#000000"
-        font.family: "Open Sans"
-        font.pointSize: 38
-        font.weight: Font.DemiBold
-        text: root.stock.stockId
-    }
+    Column {
+        id: stockColumn
+        anchors.fill: parent
+        spacing: 4
 
-    Text {
-        id: stockNameText
-        anchors.left: parent.left
-        anchors.leftMargin: 5
-        anchors.bottom: priceChangePercentage.bottom
-        anchors.right: priceChangePercentage.left
-        anchors.rightMargin: 15
-        color: "#000000"
-        font.family: "Open Sans"
-        font.pointSize: 16
-        elide: Text.ElideRight
-        text: root.stock.stockName
-    }
+        Flow {
+            anchors { left: parent.left; right: parent.right }
+            spacing: 12
 
-    Text {
-        id: price
-        anchors.right: parent.right
-        anchors.rightMargin: 5
-        anchors.top: parent.top
-        anchors.topMargin: 15
-        horizontalAlignment: Text.AlignRight
-        color: "#000000"
-        font.family: "Open Sans"
-        font.pointSize: 30
-        font.weight: Font.DemiBold
-        text: root.stock.stockPrice
-    }
+            Text {
+                id: stockIdText
+                color: "#000000"
+                font.family: "Open Sans"
+                font.pointSize: 28
+                font.weight: Font.DemiBold
+                text: root.stock.stockId
+            }
 
-    Text {
-        id: priceChange
-        anchors.right: parent.right
-        anchors.rightMargin: 20
-        anchors.top: price.bottom
-        anchors.topMargin: 5
-        horizontalAlignment: Text.AlignRight
-        color: root.stock.stockPriceChanged < 0 ? "#d40000" : "#328930"
-        font.family: "Open Sans"
-        font.pointSize: 20
-        font.weight: Font.Bold
-        text: root.stock.stockPriceChanged
-    }
+            Text {
+                id: price
+                color: "#6d6d6d"
+                font.family: "Open Sans"
+                font.pointSize: 28
+                font.weight: Font.DemiBold
+                text: parseFloat(Math.round(root.stock.stockPrice * 100) / 100).toFixed(2);
+            }
+        }
+
+        Text {
+            id: stockNameText
+            color: "#0c0c0c"
+            font.family: "Open Sans"
+            font.pointSize: 16
+            width: stockColumn.width
+            elide: Text.ElideRight
+            maximumLineCount: 3
+            wrapMode: Text.WordWrap
+            text: root.stock.stockName
+        }
+
+        Flow {
+            anchors { left: parent.left; right: parent.right }
+            spacing: 12
+
+            Text {
+                id: priceChange
+                horizontalAlignment: Text.AlignRight
+                color: root.stock.stockPriceChanged < 0 ? "#d40000" : "#328930"
+                font.family: "Open Sans"
+                font.pointSize: 18
+                text: parseFloat(Math.round(root.stock.stockPriceChanged * 100) / 100).toFixed(2);
+            }
 
-    Text {
-        id: priceChangePercentage
-        anchors.right: parent.right
-        anchors.rightMargin: 20
-        anchors.top: priceChange.bottom
-        anchors.topMargin: 5
-        horizontalAlignment: Text.AlignRight
-        color: root.stock.stockPriceChanged < 0 ? "#d40000" : "#328930"
-        font.family: "Open Sans"
-        font.pointSize: 18
-        font.weight: Font.Bold
-        text: Math.abs(Math.round(root.stock.stockPriceChanged/(root.stock.stockPrice - root.stock.stockPriceChanged) * 100))/100  +"%"
+            Text {
+                id: priceChangePercentage
+                horizontalAlignment: Text.AlignRight
+                color: root.stock.stockPriceChanged < 0 ? "#d40000" : "#328930"
+                font.family: "Open Sans"
+                font.pointSize: 18
+                font.weight: Font.DemiBold
+                text: "(" +
+                      Math.abs(Math.round(
+                          root.stock.stockPriceChanged /
+                          (root.stock.stockPrice - root.stock.stockPriceChanged) * 100)) / 100 +
+                      "%)"
+            }
+        }
     }
 }
diff --git a/examples/quick/demos/stocqt/content/StockListView.qml b/examples/quick/demos/stocqt/content/StockListView.qml
index 53e345db59..470531a21e 100644
--- a/examples/quick/demos/stocqt/content/StockListView.qml
+++ b/examples/quick/demos/stocqt/content/StockListView.qml
@@ -96,9 +96,9 @@ Rectangle {
                     var records = xhr.responseText.split('\n');
                     if (records.length > 0) {
                         var r = records[1].split(',');
-                        model.setProperty(index, "value", r[4]);
-
                         var today = parseFloat(r[4]);
+                        model.setProperty(index, "value", today.toFixed(2));
+
                         r = records[2].split(',');
                         var yesterday = parseFloat(r[4]);
                         var change = today - yesterday;