Settings UI: slider

PatentLobster · Jun 15, 2020 · 6037f16 · 6037f16
1 parent 1e5d0f9
commit 6037f16
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 5 deletions.
diff --git 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
@@ -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;
+  }
 }
diff --git 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>