Harmattan font size changes testing

diff --git a/src/qml/Library/js/Common.js b/src/qml/Library/js/Common.js
index d781a0f..56ce2a9 100644 (file)
--- a/src/qml/Library/js/Common.js
+++ b/src/qml/Library/js/Common.js
@@ -6,6 +6,52 @@
 
 function isTodayAWeekDay(){
     var dayOfWeek = (new Date()).getDay();
-    var isWeekDay = (dayOfWeek == 0 || dayOfWeek == 6)? false : true;
+    var isWeekDay = (dayOfWeek === 0 || dayOfWeek === 6)? false : true;
     return isWeekDay;
 }
+
+
+
+/**
+* Enforce a specific amount of decimal digits and also fix floating
+* point rounding issues.
+* @example `enforcePrecision(0.615, 2) -> 0.62`, `(0.615).toFixed(2) ->
+* 0.61`
+*/
+function enforcePrecision(val, nDecimalDigits){
+    var pow = Math.pow(10, nDecimalDigits);
+    return +(Math.round(val * pow) / pow).toFixed(nDecimalDigits);
+}
+
+var _defaultDict = {
+    thousand : 'K',
+    million : 'M',
+    billion : 'B'
+};
+
+
+/**
+* Abbreviate number if bigger than 1000. (eg: 2.5K, 17.5M, 3.4B, ...)
+*/
+function abbreviateNumber(val, nDecimals, dict){
+    nDecimals = nDecimals !== null? nDecimals : 1;
+    dict = dict || _defaultDict;
+    val = enforcePrecision(val, nDecimals);
+
+    var str, mod;
+
+    if (val < 1000){
+        str = val;
+    } else if (val < 1000000) {
+        mod = enforcePrecision(val / 1000, nDecimals);
+        // might overflow to next scale during rounding
+        str = mod < 1000? mod + dict.thousand : 1 + dict.million;
+    } else if (val < 1000000000) {
+        mod = enforcePrecision(val / 1000000, nDecimals);
+        str = mod < 1000? mod + dict.million : 1 + dict.billion;
+    } else {
+        str = enforcePrecision(val / 1000000000, nDecimals) + dict.billion;
+    }
+
+    return str;
+}

diff --git a/src/qml/Library/js/CoreLogic.js b/src/qml/Library/js/CoreLogic.js
index a843efd..630f894 100644 (file)
--- a/src/qml/Library/js/CoreLogic.js
+++ b/src/qml/Library/js/CoreLogic.js
@@ -112,10 +112,10 @@ function refreshDataModel(response){
                 symbol = quoteDetails[i][0];
                 stockName = quoteDetails[i][1];
                 lastTradedPrice = quoteDetails[i][2];
-                change = quoteDetails[i][3];
-                changePercentage = quoteDetails[i][4];
-                volume = quoteDetails[i][5];
-                marketCap = quoteDetails[i][6];
+                change = (quoteDetails[i][3] !== 'N/A')? quoteDetails[i][3]:'';
+                changePercentage = (quoteDetails[i][4] !== 'N/A')? quoteDetails[i][4]:'';
+                volume = (quoteDetails[i][5] !== 'N/A')? quoteDetails[i][5]:'';
+                marketCap = (quoteDetails[i][6] !== 'N/A')? quoteDetails[i][6]:'';
 
                 stockQuoteDataModel.append({"symbol":symbol,"stockName":stockName,"lastTradedPrice":lastTradedPrice,"change":change,"changePercentage":changePercentage,"volume":volume,"marketCap":marketCap});
                 //logUtility.logMessage("Symbol: "+stockQuoteDataModel.get(i).symbol+", Name: "+ stockQuoteDataModel.get(i).stockName+", LastTraded: "+stockQuoteDataModel.get(i).lastTradedPrice+", Change: "+stockQuoteDataModel.get(i).change+", ChangePercent: "+stockQuoteDataModel.get(i).changePercentage+", Volume: "+stockQuoteDataModel.get(i).volume+", MarketCap: "+stockQuoteDataModel.get(i).marketCap);

diff --git a/src/qml/MarketsTodayApp.qml b/src/qml/MarketsTodayApp.qml
index 8542773..f3ac3e8 100644 (file)
--- a/src/qml/MarketsTodayApp.qml
+++ b/src/qml/MarketsTodayApp.qml
@@ -43,9 +43,12 @@ PageStackWindow {
     Page {
         id: mainPage
 
-        property int itemHeight: 50
+        property int itemHeight: 75
         property int titleBarHeight: 60
         property int toolBarHeight: 40
+        property int fontSizeMed: 24
+        property int fontSizeSmall: 20
+        property int colSpacing: 4
         property int componentWidth: mainPage.width
 
         function reloadData(){
@@ -128,16 +131,16 @@ PageStackWindow {
                         }
 
                         Row {
-                            x: 30;y: 15;
+                            x: 30;y: (wrapper.height - mainPage.fontSizeMed)/2;
                             width: mainPage.componentWidth - 60;
                             spacing: 5
 
-                            Text { text: stockName; width: parent.width * 30/100; font.pixelSize: 18; font.bold: true; elide: Text.ElideRight; color: "white"; style: Text.Raised; styleColor: "black" }
-                            Text { text: lastTradedPrice; width: parent.width * 15/100; font.pixelSize: 18; horizontalAlignment: Text.AlignLeft; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
-                            Text { text: change !== ""? (change + " ("+changePercentage+")"):""; width: parent.width * 25/100; font.pixelSize: 18; horizontalAlignment: Text.AlignLeft; elide: Text.ElideRight
+                            Text { text: stockName; width: parent.width * 30/100; font.pixelSize: mainPage.fontSizeMed; font.bold: true; elide: Text.ElideRight; color: "white"; style: Text.Raised; styleColor: "black" }
+                            Text { text: lastTradedPrice; width: parent.width * 15/100; font.pixelSize: mainPage.fontSizeMed; horizontalAlignment: Text.AlignLeft; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
+                            Text { text: change !== ""? (change + " ("+changePercentage+")"):""; width: parent.width * 25/100; font.pixelSize: mainPage.fontSizeMed; horizontalAlignment: Text.AlignLeft; elide: Text.ElideRight
                                 color: change >= 0 ? "#00ff00":"#ff0000"; style: Text.Raised; styleColor: "black"}
-                            Text { text: volume; width: parent.width * 15/100; font.pixelSize: 18; horizontalAlignment: Text.AlignLeft; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
-                            Text { text: marketCap; width: parent.width * 15/100; font.pixelSize: 18; horizontalAlignment: Text.AlignLeft; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
+                            Text { text: volume; width: parent.width * 18/100; font.pixelSize: mainPage.fontSizeMed; horizontalAlignment: Text.AlignLeft; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
+                            Text { text: marketCap; width: parent.width * 12/100; font.pixelSize: mainPage.fontSizeMed; horizontalAlignment: Text.AlignLeft; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
                         }
                     }
                 }
@@ -163,24 +166,24 @@ PageStackWindow {
                         }
 
                         Row {
-                            x: 10;y: 15;
+                            x: 10;y: (wrapperItem.height - mainPage.fontSizeMed)/2;
                             width: mainPage.componentWidth - 5;
                             spacing: 3
 
-                            Text { text: stockName; width: parent.width * 42/100; font.pixelSize: 18; font.bold: true; elide: Text.ElideRight; color: "white"; style: Text.Raised; styleColor: "black" }
-                            Text { text: lastTradedPrice; width: parent.width * 20/100; font.pixelSize: 18; horizontalAlignment: Text.AlignLeft; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
+                            Text { text: stockName; width: parent.width * 42/100; font.pixelSize: mainPage.fontSizeMed; font.bold: true; elide: Text.ElideRight; color: "white"; style: Text.Raised; styleColor: "black"}
+                            Text { text: lastTradedPrice; width: parent.width * 20/100; font.pixelSize: mainPage.fontSizeMed; horizontalAlignment: Text.AlignLeft; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black"}
                             Column {
-                                y: -15;
+                                y: (wrapperItem.height - mainPage.colSpacing - mainPage.fontSizeSmall*2)/2 - (wrapperItem.height - mainPage.fontSizeMed)/2;
                                 width: parent.width * 18/100; height: parent.height
-                                spacing: 2
-                                Text { text: change; font.pixelSize: 16; horizontalAlignment: Text.AlignLeft; elide: Text.ElideRight
+                                spacing: mainPage.colSpacing
+                                Text { text: change; font.pixelSize: mainPage.fontSizeSmall; horizontalAlignment: Text.AlignLeft; elide: Text.ElideRight
                                     color: change >= 0 ? "#00ff00":"#ff0000";
                                         style: Text.Raised; styleColor: "black" }
-                                Text { text: changePercentage; font.pixelSize: 16; horizontalAlignment: Text.AlignLeft; elide: Text.ElideRight;
+                                Text { text: changePercentage; font.pixelSize: mainPage.fontSizeSmall; horizontalAlignment: Text.AlignLeft; elide: Text.ElideRight;
                                     color: change >= 0 ? "#00ff00":"#ff0000";
                                         style: Text.Raised; styleColor: "black" }
                             }
-                            Text { text: volume; width: parent.width * 20/100; font.pixelSize: 18; horizontalAlignment: Text.AlignLeft; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
+                            Text { text: volume !== ''? Common.abbreviateNumber(volume,2) :''; width: parent.width * 20/100; font.pixelSize: mainPage.fontSizeMed; horizontalAlignment: Text.AlignLeft; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black"}
                         }
                     }
                 }
@@ -199,7 +202,7 @@ PageStackWindow {
                             anchors.left: parent.left
                             anchors.leftMargin: 10
                             anchors.right: parent.right
-                            text: title; font.pixelSize: 18
+                            text: title; font.pixelSize: mainPage.fontSizeSmall
                             font.bold: false;
                             verticalAlignment: Text.AlignVCenter
                             horizontalAlignment: Text.AlignLeft