From 776cd0dc8523198c52c43aabc8188201837387c8 Mon Sep 17 00:00:00 2001
From: Kirubamoh <nkirubamohan@gmail.com>
Date: Sun, 4 Nov 2018 02:47:30 +0100
Subject: [PATCH 1/2] floating buttons with icons

---
 package-lock.json                    | 88 ++++++++++++++++------------
 src/pages/Blockly/blockly.html       | 10 ++--
 src/pages/ota-wizard/ota-wizard.html |  4 +-
 3 files changed, 60 insertions(+), 42 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a9cc126..bb8dce2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -354,7 +354,7 @@
         },
         "util": {
           "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
           "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
           "dev": true,
           "requires": {
@@ -638,7 +638,7 @@
     },
     "boom": {
       "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
+      "resolved": "http://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
       "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
       "dev": true,
       "requires": {
@@ -849,9 +849,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30000893",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000893.tgz",
-      "integrity": "sha512-kOddHcTEef+NgN/fs0zmX2brHTNATVOWMEIhlZHCuwQRtXobjSw9pAECc44Op4bTBcavRjkLaPrGomknH7+Jvg==",
+      "version": "1.0.30000904",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000904.tgz",
+      "integrity": "sha512-M4sXvogCoY5Fp6fuXIaQG/MIexlEFQ3Lgwban+KlqiQUbUIkSmjAB8ZJIP79aj2cdqz2F1Lb+Z+5GwHvCrbLtg==",
       "dev": true
     },
     "caseless": {
@@ -2034,7 +2034,7 @@
     },
     "cryptiles": {
       "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+      "resolved": "http://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
       "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
       "dev": true,
       "requires": {
@@ -2071,7 +2071,7 @@
     },
     "d": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/d/-/d-1.0.0.tgz",
       "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
       "dev": true,
       "requires": {
@@ -2272,9 +2272,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.80",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.80.tgz",
-      "integrity": "sha512-WClidEWEUNx7OfwXehB0qaxCuetjbKjev2SmXWgybWPLKAThBiMTF/2Pd8GSUDtoGOavxVzdkKwfFAPRSWlkLw==",
+      "version": "1.3.83",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.83.tgz",
+      "integrity": "sha512-DqJoDarxq50dcHsOOlMLNoy+qQitlMNbYb6wwbE0oUw2veHdRkpNrhmngiUYKMErdJ8SJ48rpJsZTQgy5SoEAA==",
       "dev": true
     },
     "elliptic": {
@@ -2622,7 +2622,7 @@
     },
     "fast-deep-equal": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
       "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
       "dev": true
     },
@@ -2785,11 +2785,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2802,15 +2804,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2913,7 +2918,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2923,6 +2929,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2935,17 +2942,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -2962,6 +2972,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3034,7 +3045,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3044,6 +3056,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3149,6 +3162,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -3459,7 +3473,7 @@
     },
     "hawk": {
       "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+      "resolved": "http://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
       "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
       "dev": true,
       "requires": {
@@ -3482,7 +3496,7 @@
     },
     "hoek": {
       "version": "2.16.3",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+      "resolved": "http://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
       "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
       "dev": true
     },
@@ -3505,9 +3519,9 @@
       }
     },
     "http-parser-js": {
-      "version": "0.4.13",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.13.tgz",
-      "integrity": "sha1-O9bW/ebjFyyTNMOzO2wZPYD+ETc=",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.0.tgz",
+      "integrity": "sha512-cZdEF7r4gfRIq7ezX9J0T+kQmJNOub71dWbgAXVHDct80TKP4MCETtZQ31xyv38UwgzkWPYF/Xc0ge55dW9Z9w==",
       "dev": true
     },
     "http-signature": {
@@ -3950,9 +3964,9 @@
       }
     },
     "livereload-js": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-2.3.0.tgz",
-      "integrity": "sha512-j1R0/FeGa64Y+NmqfZhyoVRzcFlOZ8sNlKzHjh4VvLULFACZhn68XrX5DFg2FhMvSMJmROuFxRSa560ECWKBMg==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-2.4.0.tgz",
+      "integrity": "sha512-XPQH8Z2GDP/Hwz2PCDrh2mth4yFejwA1OZ/81Ti3LgKyhDcEjsSsqFWZojHG0va/duGd+WyosY7eXLDoOyqcPw==",
       "dev": true
     },
     "load-json-file": {
@@ -4127,7 +4141,7 @@
     },
     "media-typer": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
@@ -4356,7 +4370,7 @@
     },
     "next-tick": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
@@ -4880,7 +4894,7 @@
     },
     "pify": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
       "dev": true
     },
@@ -5946,7 +5960,7 @@
     },
     "sntp": {
       "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+      "resolved": "http://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
       "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
       "dev": true,
       "requires": {
@@ -6024,9 +6038,9 @@
       }
     },
     "spdx-license-ids": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.1.tgz",
-      "integrity": "sha512-TfOfPcYGBB5sDuPn3deByxPhmfegAhpDYKSOXZQN81Oyrrif8ZCodOLzK3AesELnCx03kikhyDwh0pfvvQvF8w==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.2.tgz",
+      "integrity": "sha512-qky9CVt0lVIECkEsYbNILVnPvycuEBkXoMFLRWsREkomQLevYhtRKC+R91a5TOAQ3bCMjikRwhyaRqj1VYatYg==",
       "dev": true
     },
     "split-string": {
@@ -6044,9 +6058,9 @@
       "dev": true
     },
     "sshpk": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.15.1.tgz",
-      "integrity": "sha512-mSdgNUaidk+dRU5MhYtN9zebdzF2iG0cNPWy8HG+W8y+fT1JnSkh0fzzpjOa0L7P8i1Rscz38t0h4gPcKz43xA==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.15.2.tgz",
+      "integrity": "sha512-Ra/OXQtuh0/enyl4ETZAfTaeksa6BXks5ZcjpSUNrjBr0DvrJKX+1fsKDPpT9TBXgHAFsa4510aNVgI8g/+SzA==",
       "dev": true,
       "requires": {
         "asn1": "~0.2.3",
@@ -6168,7 +6182,7 @@
     },
     "strip-eof": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
       "dev": true
     },
diff --git a/src/pages/Blockly/blockly.html b/src/pages/Blockly/blockly.html
index 49e214b..c365bc5 100644
--- a/src/pages/Blockly/blockly.html
+++ b/src/pages/Blockly/blockly.html
@@ -16,10 +16,12 @@
 
 <ion-content padding>
 
-  <ion-buttons>
-    <button ion-button (click)="launchOtaWizard()">OTA Wizard</button>
-  </ion-buttons>
-
+  
+ <!-- Real floating action button, fixed. It will not scroll with the content -->
+ <ion-fab top right edge>
+    <button ion-fab mini (click)="launchOtaWizard()" color ="light"><ion-icon name="wifi"></ion-icon></button>
+        
+  </ion-fab>
   <div>
     Blockly should be displayed here !
   </div>
diff --git a/src/pages/ota-wizard/ota-wizard.html b/src/pages/ota-wizard/ota-wizard.html
index 86dfd15..fb471e1 100644
--- a/src/pages/ota-wizard/ota-wizard.html
+++ b/src/pages/ota-wizard/ota-wizard.html
@@ -18,7 +18,9 @@
         To program your senseBox wirelessly, please follow these steps.
         We will help you connect to your senseBox via WiFi.
         <br/>
-        Please make sure that your senseBox..
+        Please make sure that your senseBox..            
+            
+        
       </p>
 
       <ul style="text-align: left">

From b623d53971a3a284bfc140c3489fd03565b1cbfc Mon Sep 17 00:00:00 2001
From: Norwin Roosen <github@nroo.de>
Date: Wed, 7 Nov 2018 01:41:57 +0100
Subject: [PATCH 2/2] ota-wizard: nice layout for first step

---
 src/pages/ota-wizard/ota-wizard.html | 44 ++++++++++++++++------------
 src/pages/ota-wizard/ota-wizard.scss | 29 ++++++++++++++++++
 2 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/src/pages/ota-wizard/ota-wizard.html b/src/pages/ota-wizard/ota-wizard.html
index fb471e1..d8275ec 100644
--- a/src/pages/ota-wizard/ota-wizard.html
+++ b/src/pages/ota-wizard/ota-wizard.html
@@ -8,26 +8,34 @@
 </ion-header>
 
 <ion-content padding="false"> <!-- FIXME: remove padding -->
-  <ion-slides pager>
-    <ion-slide>
-      <h1>Welcome</h1>
-
-      <img src="TODO-nice-wifi-sensebox-pictrogram>" />
+  <ion-slides #slides pager (ionSlideDidChange)="onSlideChange()">
 
-      <p>
-        To program your senseBox wirelessly, please follow these steps.
-        We will help you connect to your senseBox via WiFi.
-        <br/>
-        Please make sure that your senseBox..            
-            
-        
-      </p>
+    <!-- intro -->
+    <ion-slide>
+      <ion-grid>
+        <ion-row>
+          <ion-col col-lg-6>
+            <ion-icon name="wifi" style="font-size: 160px"></ion-icon>
+            <h2>Welcome</h2>
+            <p>
+              To <b>program your senseBox</b> wirelessly, please follow these steps.
+              We will help you connect to your senseBox via <b>WiFi</b>.
+            </p>
+          </ion-col>
 
-      <ul style="text-align: left">
-        <li>has the WiFi shield plugged in</li>
-        <li>has the initial OTA sketch installed</li>
-        <li>TODO review this list foo bar lorem ipsum</li>
-      </ul>
+          <ion-col col-lg-6>
+            <p>First, please make sure that your senseBox...</p>
+            <ul style="text-align: left">
+              <li>has the <b>WiFi shield</b> plugged in</li>
+              <li>has the initial <b>OTA sketch</b> installed</li>
+            </ul>
+            <button ion-button large clear icon-end color="primary" (click)="slides.slideNext()">
+              Continue
+              <ion-icon name="arrow-forward"></ion-icon>
+            </button>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
     </ion-slide>
 
     <ion-slide>
diff --git a/src/pages/ota-wizard/ota-wizard.scss b/src/pages/ota-wizard/ota-wizard.scss
index 8b5358c..8c17c18 100644
--- a/src/pages/ota-wizard/ota-wizard.scss
+++ b/src/pages/ota-wizard/ota-wizard.scss
@@ -4,4 +4,33 @@ page-ota-wizard {
   .swiper-pagination-bullet-active {
     background: map-get($colors, primary);
   }
+
+  ion-slide {
+    img {
+      max-height: 50%;
+      max-width: 60%;
+      margin: 18px 0;
+
+      & ~ h2 {
+        margin-top: 2.8rem;
+      }
+    }
+
+    p, ul {
+      padding: 0 20px;
+      font-size: 16px;
+      line-height: 1.4;
+      color: #60646B;
+
+      b {
+        color: #000000;
+        font-weight: 500;
+      }
+    }
+
+    ul {
+      margin-left: 3%;
+      list-style-type: disc;
+    }
+  }
 }