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>

diff --git a/examples/quick/demos/stocqt/content/StockInfo.qml b/examples/quick/demos/stocqt/content/StockInfo.qml
index 337cc79f70b31046cac6e976dd2e8cd9eb80743f..50f6b9107e059404606604ffe899aa46c8c37e53 100644 (file)
--- 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 53e345db5966ed03d1c45eba1ed6c9d88549306a..470531a21ea230c33ef65b59432002361d1d8798 100644 (file)
--- 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;