V2

- Added option to disable router-transitions

- Improved UI

- More Settings

package.json

@@ -5,7 +5,7 @@
     "url": "https://itzik.co"
   },
   "description": "Track your office hours.",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-      <transition name="flip">
+      <transition :name="(!settings.disableAnimations)? 'flip' : ''">
         <router-view />
       </transition>
   </div>
@@ -9,8 +9,24 @@
 <script>
 
 
+    import {mapActions, mapState} from "vuex";
+    import types from "@/store/types";
+
 export default {
   name: 'App',
+  computed: {
+    ...mapState([
+        'settings',
+    ])
+  },
+  methods: {
+      ...mapActions([
+          types.GET_SETTINGS,
+      ]),
+  },
+  created() {
+       this.GET_SETTINGS();
+    }
 }
 </script>
 

src/assets/main.scss

@@ -327,13 +327,22 @@ ol {
 .settings-view {
   padding-top: 1rem;
   height: 250px;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-family: sans-serif;
   button {
     display: block;
-    margin: 2rem auto;
-
+    margin-top: 2rem;
+    margin-right: auto;
+    margin-left: auto;
   }
   .go-back {
-    top: 80%;
+    top: 25%;
+  }
+  h4 {
+    padding: 0;
+    margin: 0.5rem;
   }
 }
 .single {
@@ -392,7 +401,7 @@ body {
   //background-color: #31353D;
   overflow: hidden;
   animation: bounceInUp;
-  animation-duration: 0.8s;
+  animation-duration: 0.5s;
 }
 
 .flip-enter-active{
@@ -538,4 +547,92 @@ body {
   .active.selected::before {
     display: none;
   }
-}
+}
+
+.toggle-container {
+  display: block;
+  margin: 0 auto;
+  position: relative;
+  //right: 50%;
+  //left: 50%;
+
+  ul,
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+
+  .tgl-flip {
+    + .tgl-btn {
+      padding: 2px;
+      transition: all .2s ease;
+      font-family: sans-serif;
+      //perspective: 100px;
+
+      &:after,
+      &:before {
+        display: inline-block;
+        transition: all .4s ease;
+        width: 50%;
+        text-align: center;
+        position: absolute;
+        line-height: 2em;
+        font-weight: bold;
+        color: #fff;
+        position: absolute;
+        top: 0;
+        left: 25%;
+        backface-visibility: hidden;
+        border-radius: 4px;
+      }
+
+      &:after {
+        content: attr(data-tg-on);
+        background: #02C66F;
+        //width: 50px;
+        transform: rotateY(-180deg);
+      }
+
+      &:before {
+        background: #FF3A19;
+        //width: 50px;
+        content: attr(data-tg-off);
+      }
+
+      &:active:before {
+        transform: rotateY(-20deg);
+      }
+    }
+
+    &:checked + .tgl-btn {
+      &:before {
+        transform: rotateY(180deg);
+      }
+
+      &:after {
+        transform: rotateY(0);
+        left: 25%;
+        background: #7FC6A6;
+      }
+
+      &:active:after {
+        transform: rotateY(20deg);
+      }
+    }
+  }
+
+  .tg-list-item {
+    margin: 0 5em;
+    //margin: 0;
+    //display: flex;
+    //width: 50%;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    align-items: center;
+    //flex-direction: column;
+  }
+
+}

src/views/Settings.vue

@@ -17,9 +17,14 @@
                     </li>
                 </ul>
                 <button @click="openExport">Export data</button>
-
-
-
+                <h4>Disable transitions:</h4>
+                <div class="toggle-container">
+                <li class="tg-list-item">
+                <input class="tgl tgl-flip" type="checkbox" id="flip" :checked="settings.disableAnimations" name="disableAnimations" @click="updateCheckBox" />
+                <label class="tgl-btn" data-tg-off="Nope" data-tg-on="Yeah!" for="flip">
+                </label>
+                </li>
+                </div>
             </div>
 
 
@@ -50,6 +55,21 @@
                 this.SET_SETTINGS(["countDown" , e.target.id]);
                 // console.log(e);
             },
+            updateCheckBox(e) {
+                // console.log((this.settings[e.target.name])? !this.settings[e.target.name] : false);
+                let toggle;
+                if (this.settings[e.target.name] === "") {
+                  toggle = true;
+                } else {
+                    toggle = !this.settings[e.target.name];
+                }
+                this.SET_SETTINGS([
+                    e.target.name ,
+                    toggle
+                ]);
+                // console.log(e.target.name , e);
+                // console.log(this.settings);
+            },
             openExport() {
               window.open('app://./index.html/export');
             },