From 6037f16ebfdfae35bdb7237e2264b7610178393c Mon Sep 17 00:00:00 2001
From: PatentLobster <37775846+PatentLobster@users.noreply.github.com>
Date: Mon, 15 Jun 2020 18:01:06 +0300
Subject: [PATCH] Settings UI: slider

---
 package.json           |   2 +-
 src/assets/main.scss   | 139 +++++++++++++++++++++++++++++++++++++++++
 src/views/Settings.vue |  26 ++++++--
 3 files changed, 162 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index add738c..4500604 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "url": "https://itzik.co"
   },
   "description": "Track your office hours.",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 9e17942..558f379 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -325,7 +325,16 @@ ol {
   overflow-y: scroll;
 }
 .settings-view {
+  padding-top: 1rem;
   height: 250px;
+  button {
+    display: block;
+    margin: 2rem auto;
+
+  }
+  .go-back {
+    top: 80%;
+  }
 }
 .single {
   .today-box {
@@ -399,4 +408,134 @@ body {
   /*transition-timing-function: flip;*/
   animation: bounceOutUp;
   animation-duration: 0.5s;
+}
+
+@mixin rangeThumb {
+  width: 18px;
+  height: 18px;
+  margin: -8px 0  0;
+  border-radius: 50%;
+  background: #37adbf;
+  cursor: pointer;
+  border: 0 !important;
+}
+
+@mixin rangeTrack {
+  width: 80%;
+  height: 2px;
+  cursor: pointer;
+  background: #b2b2b2;
+}
+
+.range {
+  position: relative;
+  //width: 300px;
+  height: 5px;
+}
+
+.range input {
+  width: 80%;
+  //position: absolute;
+  //top: 20px;
+  //left: 50%;
+  //right: 50%;
+  height: 0;
+  //-webkit-appearance: none;
+  z-index: 2;
+
+  // Thumb
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none; // needed again for Chrome & Safari
+    @include rangeThumb;
+  }
+
+  &::-moz-range-thumb {
+    @include rangeThumb;
+  }
+
+  &::-ms-thumb {
+    @include rangeThumb;
+  }
+
+  // Track
+  &::-webkit-slider-runnable-track {
+    @include rangeTrack;
+  }
+
+  &::-moz-range-track {
+    @include rangeTrack;
+  }
+
+  &::-ms-track {
+    @include rangeTrack;
+  }
+
+  &:focus { // override outline/background on focus
+    background: none;
+    outline: none;
+  }
+
+  &::-ms-track { // A little somethin' somethin' for IE
+    width: 100%;
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+  }
+}
+//.settings-view {
+//  padding: 100px;
+//}
+// Labels below slider
+.range-labels {
+  margin: 20px -45px 0;
+  //margin: 0 auto;
+  padding: 0;
+  list-style: none;
+  width: 80%;
+  margin: 0;
+  padding: 0;
+  margin-block-end: 0;
+  display: inline-block;
+  padding-inline-start: 0;
+  li {
+    position: relative;
+    //float: left;
+    display: inline-block;
+    z-index: 1;
+    //left: ;
+    top: 20px;
+    //left: 50%;
+    //right: 100%;
+    width: 8.333%;
+    text-align: center;
+    color: #b2b2b2;
+    font-size: 14px;
+    cursor: pointer;
+
+    &::before {
+      position: absolute;
+      top: -15px;
+      right: 0;
+      left: 0;
+      content: "";
+      margin: 0 auto;
+      width: 9px;
+      height: 9px;
+      background: #b2b2b2;
+      border-radius: 50%;
+    }
+  }
+
+  .active {
+    color: #37adbf;
+  }
+
+  .selected::before {
+    background: #37adbf;
+  }
+
+  .active.selected::before {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 03ca6af..681eec6 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -3,13 +3,26 @@
         <div class="today-box">
             <h1 class="date-title">Settings</h1>
         </div>
-        <router-link to="/" class="go-back">Back</router-link>
         <div class="list-wrapper settings-view">
+        <router-link to="/" class="go-back">Back</router-link>
             <div class="settings-form">
                 <label for="countDown"> Hours to count: </label>
-                <input type="number" max="12" min="1" :value="settings.countDown" name="countDown" @change="updateSettings">
-                <div @click="openExport">Export data</div>
+
+                <div class="range">
+                    <input type="range" min="1" max="12" steps="1" :value="settings.countDown" name="countDown" @change="updateSettings">
+                </div>
+                <ul class="range-labels">
+                    <li v-for="i in 12" :key="i" :for="i" :id="i" name="countDown" :class="[ {'active selected': (i == (settings.countDown ? settings.countDown : 9 )) } ]" @click="updateSlider">
+                        {{i}}
+                    </li>
+                </ul>
+                <button @click="openExport">Export data</button>
+
+
+
             </div>
+
+
         </div>
 
     </div>
@@ -24,7 +37,7 @@
         computed: {
             ...mapState([
                 'settings',
-            ]),
+            ])
         },
         methods: {
             getSettings() {
@@ -33,6 +46,10 @@
             updateSettings(e) {
                 this.SET_SETTINGS([e.target.name , e.target.value]);
             },
+            updateSlider(e) {
+                this.SET_SETTINGS(["countDown" , e.target.id]);
+                // console.log(e);
+            },
             openExport() {
               window.open('app://./index.html/export');
             },
@@ -44,6 +61,7 @@
         },
         created() {
             this.getSettings();
+
         }
     }
 </script>