From 08fcd432e682239e71d5d01152ff172886384209 Mon Sep 17 00:00:00 2001
From: Jan Kuri <jkuri88@gmail.com>
Date: Sat, 29 Apr 2017 05:06:31 +0200
Subject: [PATCH] feat(demo): new demo page

---
 package.json                                  |   2 +-
 .../app-home/app-home.component.html          |  90 ++-----
 src/styles/app.sass                           | 240 +++++++++---------
 yarn.lock                                     |  17 +-
 4 files changed, 147 insertions(+), 202 deletions(-)

diff --git a/package.json b/package.json
index 6a9662bf..61afaaa1 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,6 @@
     "add-asset-html-webpack-plugin": "^2.0.1",
     "angular2-template-loader": "^0.6.2",
     "awesome-typescript-loader": "^3.1.2",
-    "bulma": "^0.4.1",
     "codelyzer": "^3.0.1",
     "compression-webpack-plugin": "^0.4.0",
     "copy-webpack-plugin": "^4.0.1",
@@ -77,6 +76,7 @@
     "nodemon": "^1.11.0",
     "portfinder": "^1.0.13",
     "protractor": "^5.1.1",
+    "rash": "^0.1.2",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.6.1",
     "rxjs": "^5.3.0",
diff --git a/src/app/components/app-home/app-home.component.html b/src/app/components/app-home/app-home.component.html
index 0cf3c0c2..e42b8901 100644
--- a/src/app/components/app-home/app-home.component.html
+++ b/src/app/components/app-home/app-home.component.html
@@ -1,13 +1,8 @@
 <div class="hero">
-  <div class="hero-head">
-    <div class="container has-text-centered">
-      <h1>ngx-uploader</h1>
-    </div>
-  </div>
   <div class="hero-body">
     <div class="container">
       <div class="columns is-multiline">
-        <div class="column is-8 is-offset-2">
+        <div class="column is-6 is-offset-3">
           <div class="drop-container">
             <h1>Drag & Drop</h1>
             <label class="upload-button">
@@ -16,67 +11,38 @@ <h1>Drag & Drop</h1>
             </label>
           </div>
         </div>
-        <div class="column is-8 is-offset-2">
+        <div class="column is-6 is-offset-3">
           <div class="columns">
-            <div class="column is-12">
-              <label class="label">Concurrent Uploads</label>
-              <input class="input" type="text" name="concurrency" [(ngModel)]="formData.concurrency">
-              <label class="checkbox">
-                <input type="checkbox" name="autoUpload" [(ngModel)]="formData.autoUpload">
-                Auto Upload
-              </label>
-              <label class="checkbox">
-                <input type="checkbox" name="verbose" [(ngModel)]="formData.verbose">
-                Show Live Data
-              </label>
+            <div class="column is-4 centered">
+              <label class="label">Concurrent</label>
+              <input class="input input-field" type="text" name="concurrency" [(ngModel)]="formData.concurrency">
+            </div>
+            <div class="column is-4 centered">
+              <label class="label">Auto Upload</label>
+              <div class="slideOne">
+                <input type="checkbox" value="None" id="autoUpload" name="autoUpload" [(ngModel)]="formData.autoUpload" />
+                <label for="autoUpload"></label>
+              </div>
+            </div>
+            <div class="column is-4 centered">
+              <label class="label">Verbose</label>
+              <div class="slideOne">
+                <input type="checkbox" value="None" id="verbose" name="check" [(ngModel)]="formData.verbose" />
+                <label for="verbose"></label>
+              </div>
             </div>
           </div>
         </div>
-        <div class="column is-8 is-offset-2" *ngIf="formData.verbose">
-          <p class="verbose-data">{{ files | json }}</p>
+        <div class="column is-6 is-offset-3" *ngIf="files && files.length">
+          <div class="upload-file" *ngFor="let f of files; let i = index;">
+            <div class="progress-bar-container">
+              <span>{{ f.name }}</span>
+              <div class="bar" [style.width]="f.progress.data.percentage + '%'" [ngClass]="{ 'green': f.progress.data.percentage === 100 }"></div>
+            </div>
+          </div>
         </div>
-        <div class="column is-8 is-offset-2">
-          <table class="table" *ngIf="files && files.length">
-            <thead>
-              <tr>
-                <th>File name</th>
-                <th>Size</th>
-                <th>Progress</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr *ngFor="let f of files; let i = index;">
-                <td>{{ f.name }}</td>
-                <td>{{ humanizeBytes(f.size) }}</td>
-                <td>
-                  <div class="progress-bar-container">
-                    <div class="bar" [style.width]="f.progress.data.percentage + '%'" [ngClass]="{ 'green': f.progress.data.percentage === 100 }"></div>
-                  </div>
-                </td>
-                <td *ngIf="f.progress.data">
-                  <span class="circle cancel" *ngIf="f.progress.data.percentage !== 100">
-                    <svg width="20px" height="20px" viewBox="0 0 42 42" (click)="cancelUpload(f.id)">
-                      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                        <g transform="translate(-29.000000, 0.000000)" fill-rule="nonzero" fill="#000000">
-                          <path d="M70,37.2 C71.1,38.3 71.1,40.1 70,41.2 C68.9,42.3 67.1,42.3 66,41.2 L50,25.2 L34,41.2 C32.9,42.3 31.1,42.3 30,41.2 C28.9,40.1 28.9,38.3 30,37.2 L46.1,21.1 L30,5 C28.9,3.9 28.9,2.1 30,1 C31.1,-0.1 32.9,-0.1 34,1 L50,17 L66,1 C67.1,-0.1 68.9,-0.1 70,1 C71.1,2.1 71.1,3.9 70,5 L53.9,21.1 L70,37.2 Z" id="Shape"></path>
-                        </g>
-                      </g>
-                    </svg>
-                  </span>
-                  <span class="circle green" *ngIf="f.progress.data.percentage === 100">
-                    <svg width="5121px" height="3848px" viewBox="0 0 5121 3848" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-                      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                        <g id="noun_950960_cc" transform="translate(-853.000000, 0.000000)" fill="#000000">
-                          <path d="M2638,2531 L1829,1722 C1564,1457 1343,1396 1182,1447 C1117,1467 1060,1506 1013,1556 C964,1608 926,1673 899,1744 C825,1938 838,2171 968,2301 L2169,3502 C2399,3732 2555,3848 2698,3848 L2698,3848 C2842,3848 2997,3733 3227,3503 L5859,871 C5989,741 6002,509 5928,314 C5901,243 5862,178 5814,126 C5767,76 5710,38 5645,17 C5483,-34 5263,27 4998,292 L2759,2531 L2699,2591 L2639,2531 L2638,2531 Z" id="Shape"></path>
-                        </g>
-                      </g>
-                    </svg>
-                  </span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+        <div class="column is-6 is-offset-3" *ngIf="formData.verbose">
+          <div class="verbose-data"><pre><code>{{ files | json }}</code></pre></div>
         </div>
         <div class="column is-6 is-offset-3" *ngIf="files.length">
           <button type="button" class="start-upload-btn" (click)="startUpload()">
diff --git a/src/styles/app.sass b/src/styles/app.sass
index f32fb258..b5f59c69 100644
--- a/src/styles/app.sass
+++ b/src/styles/app.sass
@@ -1,173 +1,159 @@
 @charset 'utf8'
 
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600,700')
-@import '../../node_modules/bulma/sass/base/minireset'
-@import '../../node_modules/bulma/sass/utilities/all'
-@import '../../node_modules/bulma/sass/base/all'
-@import '../../node_modules/bulma/sass/grid/columns'
-@import '../../node_modules/bulma/sass/layout/hero'
-@import '../../node_modules/bulma/sass/components/nav'
-
-$blue: #96D3ED
-$red: #ed145b
-$green: #14ec84
-$grey: #7e9494
-$light: #9cb7be
-$text: #efeff0
-$background: #303143
+@import '../../node_modules/rash/rash'
 
 html, body
   width: 100%
-  background: $background
   font-family: 'Open Sans', sans-serif
+  -webkit-font-smoothing: antialiased
 
-.label, .checkbox
-  font-size: 16px
-  font-weight: $weight-normal
-  color: $white
-  margin: 0 10px
-  &:hover
-    color: $white
-
-.label
-  display: block
-  float: left
+.drop-container
+  padding: 20px 0 60px 0
+  border: 2px dashed $blue
+  border-radius: 10px
+  margin-bottom: 50px
+  margin-top: 20px
+  background: lighten($blue, 50)
+  h1
+    color: $text
+    font-size: 28px
+    padding: 20px 0 40px 0
+    text-align: center
+    font-weight: 600
+
+  &.is-drop-over
+    background: lighten($blue, 45)
 
-input[type="text"]
-  height: 50px
-  background: $background
-  border: 1px solid $grey
-  width: 50px
-  color: $white
+.upload-button, .start-upload-btn
+  width: 200px
   display: block
-  float: left
-  margin: -10px 15px 0 15px
-  text-align: center
-  border-radius: 4px
+  margin: 10px auto
+  border-radius: 30px
+  background: $blue
   outline: none
-  font-size: 16px
-
-  &:hover, &:focus
-    border: 1px solid $grey
-
-.verbose-data
+  font-size: 18px
+  text-align: center
+  padding: 10px 30px
+  cursor: pointer
   color: $white
-  font-size: 12px
-
-.hero
-  background: $background
+  border: none
+  font-weight: 200
+  transition: all 250ms linear
+  input
+    display: none
 
-  .hero-head
-    h1
-      color: $grey
-      font-size: 24px
-      margin-top: 50px
+  &:hover
+    background: $blue-dark
 
-  .drop-container
-    padding: 20px 0 60px 0
-    border: 3px dashed $grey
-    border-radius: 10px
-    margin-bottom: 50px
-    margin-top: 20px
-    h1
-      color: $text
-      font-size: 40px
-      padding: 20px 0 40px 0
-      text-align: center
-      font-weight: 600
-
-.folder-icon
-  display: block
-  width: 300px
-  margin: 0 auto
-  g
-    g
-      fill: $light
-
-.table
-  background: transparent
-  color: $light
-  thead
-    th
-      font-size: 28px
-      color: $text
-      border-bottom: 2px solid $light
-      padding: 10px 0
-  tbody
-    tr
-      border-bottom: 1px solid $light
-      td
-        padding: 20px 0
-        font-size: 20px
+  &.start-upload-btn
+    background: $blue-dark
+    padding: 10px
+    width: 200px
+    font-size: 18px
 
 .progress-bar-container
   width: 100%
-  height: 10px
+  height: 40px
   border-radius: 10px
-  background: $grey
+  background: $white
   margin: 10px 0
   position: relative
+  border: 1px dashed $blue
+  display: flex
+  justify-content: center
+  align-items: center
+  color: $text
+  font-size: 14px
+  text-align: center
   .bar
+    z-index: 1
+    padding: 0
+    margin: 0
     border-radius: 10px
     position: absolute
     top: 0
     left: 0
-    height: 10px
-    width: 65%
+    height: 38px
     background: $red
     &.green
-      background: $green
+      background: lighten($blue, 45)
+  span
+    z-index: 2
 
 .circle
   display: flex
   justify-content: center
   align-items: center
-  width: 40px
-  height: 40px
-  background: $grey
+  width: 20px
+  height: 20px
+  background: $blue
   border-radius: 50%
-  margin: -5px auto 0 auto
+  margin: 5px auto 0 auto
   cursor: pointer
   svg
     display: block
     margin: 8px auto
-    height: 16px
+    height: 8px
     g
       g
-        fill: #303143
+        fill: $white
   &.green
-    background: $green
+    background: $blue
 
+.verbose-data
+  color: $text
+  padding-bottom: 20px
+  pre
+    code
+      background: lighten($blue, 50)
+      border: 2px dashed $blue
+      border-radius: 5px
+      font-size: 11px
 
-.file-over
-  background: rgba($white, 0.4)
+.label
+  margin: 5px 10px 0 0
 
-.upload-button, .start-upload-btn
-  width: 300px
-  display: block
-  margin: 10px auto
-  border-radius: 40px
-  background: $blue
-  outline: none
-  font-size: 26px
+.input-field
+  width: 60px
+  height: 30px
+  font-size: 12px
+  padding: 3px
   text-align: center
-  padding: 10px 30px
-  cursor: pointer
-  color: #303143
-  border: none
-  font-weight: 200
-  input
-    display: none
-
-  &.start-upload-btn
-    background: $green
-    padding: 10px
-    width: 200px
-    font-size: 18px
+  border: 1px solid #333
+  font-weight: $weight-semibold
 
+  &:hover, &:focus
+    border: 1px solid #333
 
-.log
-  font-size: 10px
-  color: $light
-  text-align: center
-  padding-bottom: 50px
+.slideOne
+  border: 1px solid #333
+  width: 50px
+  height: 10px
+  background: $light
+  margin: 20px 0
+  position: relative
+  border-radius: 50px
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2)
+  label
+    display: block
+    width: 16px
+    height: 16px
+    position: absolute
+    top: -3px
+    left: -3px
+    cursor: pointer
+    background: #fcfff4
+    background: linear-gradient(to bottom, $black 0%, $grey-darker 40%, $grey-dark 100%)
+    border-radius: 50px
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3)
+    transition: all 0.4s ease
+
+  input[type=checkbox]
+    visibility: hidden
+    &:checked + label
+      left: 37px;
+
+.centered
+  display: flex
+  align-items: center
diff --git a/yarn.lock b/yarn.lock
index 93f52535..027e6ea4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -736,10 +736,6 @@ builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
 
-bulma@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.4.1.tgz#620b7986bc552311358aa9393c10905c55648864"
-
 busboy@^0.2.11:
   version "0.2.14"
   resolved "https://registry.yarnpkg.com/busboy/-/busboy-0.2.14.tgz#6c2a622efcf47c57bbbe1e2a9c37ad36c7925453"
@@ -3884,6 +3880,10 @@ range-parser@^1.0.3, range-parser@^1.2.0, range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
 
+rash@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/rash/-/rash-0.1.2.tgz#578f3e55d573356a9f1a150ba6f6a8a1fb0ba406"
+
 raw-body@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.2.0.tgz#994976cf6a5096a41162840492f0bdc5d6e7fb96"
@@ -5227,20 +5227,13 @@ write-file-atomic@^1.1.2:
     imurmurhash "^0.1.4"
     slide "^1.1.5"
 
-ws@1.1.2:
+ws@1.1.2, ws@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.2.tgz#8a244fa052401e08c9886cf44a85189e1fd4067f"
   dependencies:
     options ">=0.0.5"
     ultron "1.0.x"
 
-ws@^1.0.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.4.tgz#57f40d036832e5f5055662a397c4de76ed66bf61"
-  dependencies:
-    options ">=0.0.5"
-    ultron "1.0.x"
-
 wtf-8@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a"