From 6da0f8f5bdf54a238a2fd07fe11fdccc50316248 Mon Sep 17 00:00:00 2001
From: Nathan Parikh <ndzynes@gmail.com>
Date: Tue, 12 Sep 2017 23:32:55 -0500
Subject: [PATCH] Added icons for main and portfolio screens. More portfolio
 updates. Portfolio coin order now matches main screen order.

---
 css/app.css                               |  27 +++++++++---
 images/icons8-Home-64.png                 | Bin 0 -> 600 bytes
 images/icons8-Rebalance Portfolio-100.png | Bin 0 -> 2782 bytes
 index.html                                |   8 ++--
 js/app_common.js                          |  49 ++++++++++++++--------
 main.js                                   |   2 +-
 6 files changed, 59 insertions(+), 27 deletions(-)
 create mode 100644 images/icons8-Home-64.png
 create mode 100644 images/icons8-Rebalance Portfolio-100.png

diff --git a/css/app.css b/css/app.css
index 94dbf9f..acd0140 100644
--- a/css/app.css
+++ b/css/app.css
@@ -50,15 +50,20 @@ button {
   #min-btn:hover {
     background: #ffbd45;
   }
-#settings-btn {
-  padding: 0;
 
+.tabs button {
+  padding: 0;
 }
-#settings-btn img {
-  width: 24px;
+.tabs button,
+.tabs button.active {
+  display: inline-block;
+}
+.tabs button img {
+  width: 19px;
   opacity: 0.5;
 }
-  #settings-btn:hover img {
+  .tabs button:hover img,
+  .tabs button.active img {
     opacity: 1;
   }
 
@@ -81,6 +86,7 @@ ul {
   }
     #portfolio-list.coin-list {
       font-size: 16px;
+      padding-top: 9px;
     }
     .coin-list li {
       margin: 0px 0px 15px 0px;
@@ -309,6 +315,17 @@ ul {
         text-decoration: none;
         color: #252525;
       }
+
+    /*Portfolio*/
+    #portfolio-total-value {
+      text-align: center;
+      font-size: 1.5em;
+      font-weight: 600;
+      margin: 15px 0px;
+    }
+    #portfolioChart {
+      max-height: 480px;
+    }
     
     /*Scrollbar*/
     ::-webkit-scrollbar-corner {
diff --git a/images/icons8-Home-64.png b/images/icons8-Home-64.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f15a6d92228ca19df9e53a821c100815b8b6ad3
GIT binary patch
literal 600
zcmV-e0;m0nP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF0006XNkl<ZcwX(9
z>s16H42371Y$@7_TbbI4ooFZVfHR(1c7PC)Fpv0GAoqSrfMH>}_#a%{|KtF?0xnKq
zXbT|XTi_1>AEWXx48UyueKvj{1z`w)#Qc){ArQ;~WXunPU<#mOeh36J07UcV5KI6R
z%-?6n%VxMf3{3U}bpR#v%g#?3qjgNG0%$STGFB3X8UT(V&YWHtDgb(n^vvbJ5C<S(
zKw=Fl3{e1*!X?)#!4LzWAy{M06ov=@O`)1=$1hQ8ujIyQ3k-2JV{`$~6qW+lip2(?
zC8$)98ZlV_G=xxFQ95=r0BHeK<Lhyf8kzt|2Id&ofItSYC-Vyk2~8vb5`lU%u5}Do
z0qohlL?sjf6wHUW{3<-HtZ%K0h?t32d|AqxD4CB}$m0MAa<dRN0o2SN5I`2f697cK
zP1E#UD_?2_6iTxeBK}`E&MN?XtpiglAiUl_yxa;4%fjf0lWP71fcRTv6+rR@7W*g7
zWQQ<P=9fX-IAPwZl{d}D3afm4+yLNb2J*1Wa)mXy?`VNVA0ob_WlySrRH#%1)WBKA
z`L8f)My!Nc#c=>L0rG9mDl=AbyaK!e{s?#r_$fdnV6{0}#qmwhH$mS7{S@$H(C-0$
z5#rwjiPwjxVXf~0T5-DX0b0U(A5mMM(%9bu4uDDEur0v!yZdS67TCQLra%Y41b3Qg
mUIC{`CDVvk02AD4ru_mzLr!0R8Hif|0000<MNUMnLSTZw*Y>9X

literal 0
HcmV?d00001

diff --git a/images/icons8-Rebalance Portfolio-100.png b/images/icons8-Rebalance Portfolio-100.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f10cae8b2b87b8c607161b7df8413a016da7bd0
GIT binary patch
literal 2782
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 3447a96..10e51f3 100644
--- a/index.html
+++ b/index.html
@@ -15,9 +15,9 @@
         <button id="close-btn"></button>
       </div><!-- .controls -->
       <div class="tabs">
-        <button id="main-btn" href="#main">main</button>
+        <button id="main-btn" href="#main"><img src="images/icons8-Home-64.png"></button>
+        <button id="portfolio-btn" href="#portfolio"><img src="images/icons8-Rebalance Portfolio-100.png"></button>
         <button id="settings-btn" href="#settings"><img src="images/icons8-Settings.png"></button>
-        <button id="portfolio-btn" href="#portfolio">folio</button>
       </div><!-- .tabs -->
     </header>
 
@@ -89,7 +89,9 @@
 
       <div id="portfolio-total-value">Total Value: <span class="value"></span></div>
 
-      <canvas id="myChart" width="400" height="400"></canvas>
+      <div class="chart-container" style="position: relative; height:40vh; width:94vw">
+        <canvas id="portfolioChart" width="360" height="360"></canvas>
+      </div>
 
       <!-- show what % each coin is of portfolio -->
 
diff --git a/js/app_common.js b/js/app_common.js
index caabdca..4d7da5f 100644
--- a/js/app_common.js
+++ b/js/app_common.js
@@ -148,23 +148,27 @@ function initData() {
             append(li, span);
             append(ul, li);
             i++;
-          }
+          } //for
           //console.log(data.RAW.BTC.USD.PRICE)
 
           sortChildren(
               document.getElementById('prices'),
               function(li) { return +li.getAttribute('sortorder') }
           );
+          sortChildren(
+              document.getElementById('portfolio-list'),
+              function(li) { return +li.getAttribute('sortorder') }
+          );
 
           //sort your coins
           sortable('#prices', {
             handle: 'span'
           })[0].addEventListener('sortstop', function(e) {
             // Declare variables
-            var ul, li, i;
+            var ul, ulPortfolio, li, liPortfolio, i;
             ul = document.getElementById("prices");
+            ulPortfolio = document.getElementById("portfolio-list");
             li = ul.getElementsByTagName('li');
-
             // Loop through all list items
             for (i = 0; i < li.length; i++) {
                li[i].setAttribute("sortorder", i);
@@ -174,7 +178,7 @@ function initData() {
                 order: li[i].getAttribute('sortorder')
               });
               //alert(settings.get(elementID + '.order'));
-            }
+            } //for
             //alert(settings.get('coin.'+e+'.order'));
           }); //sortable
 
@@ -203,29 +207,31 @@ function updateData() {
             let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol
             let pricesRAW     = data.RAW; // raw to get BTC instead of bitcoin symbol
             let portfolioSum  = 0;
+
             // Chart labels
             var chartLabels = [];
             // Chart data
             var chartData = [];
-            // Chart colors
+            // Chart colors - need to match these colors to the coin in a future release
             var chartColors = [
-                '#F57C00',
-                '#AFB42B',
-                '#7B1FA2',
-                '#512DA8',
-                '#455A64',
-                '#1976D2',
+                '#FF9F1C',
+                '#2EC4B6',
+                '#E71D36',
+                '#011627',
+                '#FDFFFC',
+                '#D31EE8',
                 '#0288D1',
-                '#0288D1',
-                '#D32F2F',
+                '#5FC42D',
+                '#E64A19',
                 '#0097A7',
+                '#FBC02D',
                 '#00796B',
                 '#388E3C',
                 '#689F38',
                 '#303F9F',
-                '#FBC02D',
+                '#C2185B',
                 '#FFA000',
-                '#E64A19',
+                '#D32F2F',
                 '#C2185B',
                 '#fff'
             ];
@@ -320,10 +326,16 @@ function updateData() {
               chartData.push(quantityTotal);
               
             } //for
+
+            sortChildren(
+              document.getElementById('portfolio-list'),
+              function(li) { return +li.getAttribute('sortorder') }
+          );
+
             var newChartLabels = chartLabels;
            
             // Chart
-            var ctx = document.getElementById("myChart");
+            var ctx = document.getElementById("portfolioChart");
             var myChart = new Chart(ctx, {
               type: 'doughnut',
               data: {
@@ -331,7 +343,7 @@ function updateData() {
                       data: chartData,
                       backgroundColor: chartColors,
                       borderColor: '#000',
-                      borderWidth: 2
+                      borderWidth: 0
                   }],
 
                   labels: newChartLabels
@@ -342,7 +354,7 @@ function updateData() {
                     position: 'bottom'
                   }
               }
-            });
+            }); //myChart
 
           }); //then
         }  
@@ -382,6 +394,7 @@ for (let key of Object.keys(portfolio_list)) {
       span  = createNode('span');
       sym   = createNode('span');
   li.setAttribute("id", "coin-"+[coin]);
+  li.setAttribute("sortorder", settings.get(li.id+'.order'));
 
   append(li, span);
   append(portfolio_ul, li);
diff --git a/main.js b/main.js
index 23044ce..a98e337 100644
--- a/main.js
+++ b/main.js
@@ -31,7 +31,7 @@ function createWindow () {
     width: mainWindowState.width,
     height: mainWindowState.height,
     maxWidth: 360,
-    minWidth: 240,
+    minWidth: 280,
     minHeight: 100,
     maximizable: false,
     fullscreenable: false,