From 104fade463efe18d40a7885a15829ced07e9723c Mon Sep 17 00:00:00 2001
From: Skylar Ittner <admin@netsyms.com>
Date: Fri, 13 Oct 2017 22:41:02 -0600
Subject: [PATCH] Adjust app bar to material design specs, add more animations,
 add background to app icons while loading from server

---
 www/css/app.css         |  15 +++++-
 www/css/sidemenu.css    |  16 ++++++
 www/img/app-icon-bg.svg | 108 ++++++++++++++++++++++++++++++++++++++++
 www/js/app.js           |  29 ++++++-----
 www/views/home.html     |   2 +-
 5 files changed, 155 insertions(+), 15 deletions(-)
 create mode 100644 www/img/app-icon-bg.svg

diff --git a/www/css/app.css b/www/css/app.css
index ba16f8e..3b8cdd2 100644
--- a/www/css/app.css
+++ b/www/css/app.css
@@ -38,7 +38,11 @@ html, body {
 
 .app-dock-item p img {
     width: 80px;
+    height: 80px;
     display: block;
+    background: url(../img/app-icon-bg.svg) no-repeat;
+    background-size: 90%;
+    background-position: 50%;
     margin: 0 auto;
 }
 
@@ -49,20 +53,29 @@ html, body {
 
 span.navbar-brand {
     color: white;
+    margin-right: 0px;
+    height: 30px;
+    margin-top: -4px;
+    font-size: 20px;
+    margin-left: 5px;
 }
 
 .navbar-brand.pull-left img {
     margin-right: -10px;
     height: 30px;
     margin-top: -4px;
+    margin-left: -4px;
 }
 
 .navbar-brand.pull-right img {
-    margin-right: 6px;
     height: 30px;
     margin-top: -4px;
 }
 
 #manual_setup {
     margin-top: 15px;
+}
+
+#navbar {
+    min-height: 56px;
 }
\ No newline at end of file
diff --git a/www/css/sidemenu.css b/www/css/sidemenu.css
index 2e668c9..acbc65a 100644
--- a/www/css/sidemenu.css
+++ b/www/css/sidemenu.css
@@ -21,6 +21,22 @@
     display: initial;
 }
 
+.navbar, .navbar-brand {
+    min-height: 56px;
+    height: 56px;
+}
+
+.navbar-brand {
+    font-size: 20px;
+    margin-top: -4px;
+}
+
+.navbar-toggle {
+    border: 0px solid white;
+    margin-top: 11px;
+    margin-bottom: 11px;
+}
+
 @media screen and (max-width: 767px) {
     #navbar-collapse {
         display: none;
diff --git a/www/img/app-icon-bg.svg b/www/img/app-icon-bg.svg
new file mode 100644
index 0000000..cc09bf3
--- /dev/null
+++ b/www/img/app-icon-bg.svg
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="512"
+   height="512"
+   viewBox="0 0 512.00001 512.00001"
+   id="svg2"
+   version="1.1">
+  <defs
+     id="defs4">
+    <pattern
+       height="8.15625"
+       patternTransform="translate(201.25 133.47)"
+       patternUnits="userSpaceOnUse"
+       width="8.6875"
+       id="pattern6179">
+      <path
+         d="m1.9375 0.5c-0.8781 0.7454-1.4375 1.8526-1.4375 3.0938 0 2.2424 1.82 4.0624 4.0625 4.0624 1.5819 0 2.9541-0.9292 3.625-2.25-0.7084 0.6014-1.6237 1-2.625 1-2.2425 0-4.0625-1.82-4.0625-4.0624 0-0.6607 0.1573-1.2922 0.4375-1.8438z"
+         style="opacity:.32394;stroke-opacity:0;fill:#eeeeec"
+         id="path6174" />
+    </pattern>
+  </defs>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     transform="translate(0,-540.36216)">
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:20;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.74509804"
+       id="rect4726"
+       width="512"
+       height="512"
+       x="0"
+       y="540.36218"
+       rx="50"
+       ry="50" />
+    <g
+       transform="translate(0,-2.2617187e-5)"
+       id="layer1-9">
+      <g
+         transform="translate(0.61384869,9.1476514)"
+         id="g4610">
+        <g
+           style="fill:#dcdcdc;fill-opacity:1"
+           id="g4528">
+          <rect
+             y="726.60608"
+             x="145.6884"
+             height="296.34189"
+             width="100.27342"
+             id="rect4194-3"
+             style="fill:#dcdcdc;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:5, 5;stroke-dashoffset:0;stroke-opacity:1"
+             rx="15"
+             ry="15" />
+          <rect
+             y="797.948"
+             x="263.57608"
+             height="225"
+             width="100.27342"
+             id="rect4194-6"
+             style="fill:#dcdcdc;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:5, 5;stroke-dashoffset:0;stroke-opacity:1"
+             rx="15"
+             ry="15" />
+          <rect
+             y="858.0174"
+             x="30.26951"
+             height="164.93059"
+             width="100.27342"
+             id="rect4194-6-7"
+             style="fill:#dcdcdc;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:5, 5;stroke-dashoffset:0;stroke-opacity:1"
+             rx="15"
+             ry="15" />
+          <rect
+             y="551.48108"
+             x="380.22937"
+             height="471.46692"
+             width="100.27342"
+             id="rect4194"
+             style="fill:#dcdcdc;fill-opacity:1;stroke:none;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:5, 5;stroke-dashoffset:0;stroke-opacity:1"
+             rx="15"
+             ry="15" />
+        </g>
+        <g
+           id="g4568">
+          <path
+             style="fill:#bce0fc;fill-opacity:1;stroke:#ffffff;stroke-width:7;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+             d="m 195.89258,55.101562 a 24.748737,24.748737 0 0 0 -24.81641,24.681641 24.748737,24.748737 0 0 0 3.02344,11.867188 L 76.679688,335.07617 a 24.748737,24.748737 0 0 0 -21.021485,24.38281 24.748737,24.748737 0 0 0 24.679688,24.81641 24.748737,24.748737 0 0 0 24.816409,-24.68164 24.748737,24.748737 0 0 0 -5.242191,-15.28711 l 94.437501,-235.9707 100.24609,303.2539 a 24.748737,24.748737 0 0 0 -5.63086,15.625 24.748737,24.748737 0 0 0 24.67969,24.81641 24.748737,24.748737 0 0 0 24.81641,-24.67969 24.748737,24.748737 0 0 0 -7.86328,-18.11914 L 432.16602,180.64453 a 24.748737,24.748737 0 0 0 22.94921,-24.60937 24.748737,24.748737 0 0 0 -24.68164,-24.81641 24.748737,24.748737 0 0 0 -24.8164,24.67969 24.748737,24.748737 0 0 0 4.10547,13.68945 L 312.93359,387.41602 215.99609,94.166016 a 24.748737,24.748737 0 0 0 4.57813,-14.248047 24.748737,24.748737 0 0 0 -24.68164,-24.816407 z"
+             transform="translate(0,540.36219)"
+             id="circle4572" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/www/js/app.js b/www/js/app.js
index 98815da..405419b 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -123,19 +123,22 @@ function setnavbar(type, title, returnscreen) {
         } else {
             _returnscreen = returnscreen;
         }
-        switch (type) {
-            case "home":
-                navbar.html('<span class="navbar-brand" style="color: white;">Business</span><span class="navbar-brand pull-right" onclick="openscreen(\'settings\', \'FADE\')"><img src="icons/ic_settings.svg" alt="" /></span>');
-                break;
-            case "settings":
-                navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'home\', \'FADE\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand" style="color: white;" onclick="openscreen(\'home\')">Settings</span>');
-                break;
-            case "app":
-                navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'home\', \'FADE\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand" style="color: white;" onclick="openscreen(\'' + returnscreen + '\')">' + title + '</span>');
-                break;
-            default:
-                navbar.html('<span class="navbar-brand" style="color: white;">Business</span>');
-        }
+        navbar.fadeOut(150, function () {
+            switch (type) {
+                case "home":
+                    navbar.html('<span class="navbar-brand" style="color: white;">Business</span><span class="navbar-brand pull-right" onclick="openscreen(\'settings\', \'FADE\')"><img src="icons/ic_settings.svg" alt="" /></span>');
+                    break;
+                case "settings":
+                    navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'home\', \'FADE\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand navbar-title" style="color: white;" onclick="openscreen(\'home\', \'FADE\')">Settings</span>');
+                    break;
+                case "app":
+                    navbar.html('<span class="navbar-brand pull-left" style="color: white;" onclick="openscreen(\'' + returnscreen + '\', \'FADE\')"><img src="icons/ic_arrow-back.svg" /></span><span class="navbar-brand navbar-title" style="color: white;" onclick="openscreen(\'' + returnscreen + '\', \'FADE\')">' + title + '</span>');
+                    break;
+                default:
+                    navbar.html('<span class="navbar-brand" style="color: white;">Business</span>');
+            }
+            navbar.fadeIn(150);
+        });
     }
 }
 
diff --git a/www/views/home.html b/www/views/home.html
index 04fa760..8f6bb96 100644
--- a/www/views/home.html
+++ b/www/views/home.html
@@ -23,7 +23,7 @@
                     if (!app.icon.startsWith("http")) {
                         iconurl = app.url + app.icon;
                     }
-                    $('#app-dock').append("<div class=\"app-dock-item\" onclick=\"openapp('" + k + "', '" + app.mobileapi + "', '" + app.url + "', '" + iconurl + "', '" + app.title + "')\"><p><img src=\"" + iconurl + "\" class=\"img-responsive app-icon\" /><span>" + app.title + "</span></p></div>");
+                    $("<div class=\"app-dock-item\" onclick=\"openapp('" + k + "', '" + app.mobileapi + "', '" + app.url + "', '" + iconurl + "', '" + app.title + "')\"><p><img src=\"" + iconurl + "\" class=\"img-responsive app-icon\" /><span>" + app.title + "</span></p></div>").hide().appendTo("#app-dock").fadeIn(200);
                 });
             } else {
                 navigator.notification.alert(data.msg, null, "Error", 'Dismiss');