From e1141c858c397d2c27e4a6681b9300f65cf396f2 Mon Sep 17 00:00:00 2001
From: Topi Reinio <topi.reinio@digia.com>
Date: Wed, 15 Jul 2015 12:18:57 +0200
Subject: 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>
---
 examples/quick/demos/stocqt/content/StockInfo.qml  | 126 ++++++++++-----------
 .../quick/demos/stocqt/content/StockListView.qml   |   4 +-
 2 files changed, 65 insertions(+), 65 deletions(-)

(limited to 'examples/quick')

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;
-- 
cgit v1.2.3