Add time component

Exauthor · May 2, 2019 · 3e39054 · 3e39054
1 parent 420f35e
commit 3e39054
Show file tree

Hide file tree

Showing 12 changed files with 244 additions and 118 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-do-expressions": "^7.0.0-beta.53",
+    "moment": "^2.24.0",
     "pug": "2.0.3",
     "pug-plain-loader": "^1.0.0",
     "stylus": "^0.54.5",

diff --git a/src/assets/images/themes/time/index.png b/src/assets/images/themes/time/index.png
diff --git a/src/assets/style/index.styl b/src/assets/style/index.styl
@@ -147,7 +147,7 @@ a
 .menu-popover-enter,
 .menu-popover-leave-to 
   opacity 0
-  transform: perspective(900px) rotate3d(70, 0, 0, -60deg);
+  transform: perspective(900px) rotate3d(70, 0, 0, -50deg);
 
 .menu-popover-enter-to,
 .menu-popover-leave 
@@ -156,7 +156,10 @@ a
 
 .menu-popover-enter-active,
 .menu-popover-leave-active 
-  transition opacity, transform .3s ease-out
+  transition .4s ease-out
+
+.menu-popover-leave-active 
+  transition .15s ease-out
 
 @keyframes slideOut {
   to {

diff --git a/src/components/BackgroundImage.vue b/src/components/BackgroundImage.vue
@@ -5,27 +5,29 @@
 </template> 
 
 <script>
-  import fire from '@/components/themes/fire';
-  import osmos from '@/components/themes/osmos';
-  import mars from '@/components/themes/mars';
-  import space from '@/components/themes/space';
-  import { mapState, mapGetters } from 'vuex'
+import fire from '@/components/themes/fire';
+import mars from '@/components/themes/mars';
+import { mapState, mapGetters } from 'vuex';
+import osmos from '@/components/themes/osmos';
+import space from '@/components/themes/space';
+import timeComponent from '@/components/themes/time';
 
-  export default {
-    name: 'background-image',
-    components: {
-      fire,
-      osmos,
-      mars,
-      space
-    },
-    computed: {
-      ...mapState(['themes', 'openLogin']),
-      ...mapState('system', {
-        theme: state => state.settings.theme
-      }),
-    },
-  }
+export default {
+  name: 'background-image',
+  components: {
+    timeComponent,
+    fire,
+    osmos,
+    mars,
+    space
+  },
+  computed: {
+    ...mapState(['themes', 'openLogin']),
+    ...mapState('system', {
+      theme: state => state.settings.theme
+    }),
+  },
+}
 </script>
 
 <style lang='stylus'>

diff --git a/src/components/LoginComponent.vue b/src/components/LoginComponent.vue
@@ -67,7 +67,7 @@
       keyPress(event) {
         if (event.which === 13) {
           if (!this.openLogin) {
-            this.SET({type: 'openLogin', items: true})
+            this.SET({type: 'openLogin', items: true});
           } else if (this.openLogin) {
             this.$nextTick(() => {
               this.$refs.password.focus();
@@ -91,7 +91,7 @@
       submit() {
   
         if (!this.password) {
-          return
+          return;
         }
   
         this.logging = true;

diff --git a/src/components/SelectItem.vue b/src/components/SelectItem.vue
@@ -16,86 +16,85 @@
 </template>
 
 <script>
-  import { mapState, mapMutations } from 'vuex'
-  
-  export default {
-    name: 'select-item',
-    props: ['mode'],
-    computed: {
-      ...mapState(['openUsers', 'openDesktops']),
-      ...mapState('system', ['settings']),
-      item:  {
-        get() {
-          return this.settings[this.mode]
-        },
-        set(value) {
-          return value
-        }
+import { mapState, mapMutations } from 'vuex'
+
+export default {
+  name: 'select-item',
+  props: ['mode'],
+  computed: {
+    ...mapState(['openUsers', 'openDesktops']),
+    ...mapState('system', ['settings']),
+    item:  {
+      get() {
+        return this.settings[this.mode]
       },
-      items() {
-        return this.settings[this.mode + 's']
+      set(value) {
+        return value
       }
     },
-    methods: {
-      ...mapMutations(['SET']),
-      ...mapMutations('system', ['CHANGE_SETTINGS']),
-      changeItem(item) {
-        this.CHANGE_SETTINGS({key: this.mode, value: item})
-        this.item = item;
-      },
-      openList() {
-        if (this.mode === 'user') {
-          this.SET({type: 'openUsers', items: !this.openUsers})
-        } else {
-          this.SET({type: 'openDesktops', items: !this.openDesktops})
-        }
-      },
+    items() {
+      return this.settings[this.mode + 's']
     }
-  };
+  },
+  methods: {
+    ...mapMutations(['SET']),
+    ...mapMutations('system', ['CHANGE_SETTINGS']),
+    changeItem(item) {
+      this.CHANGE_SETTINGS({key: this.mode, value: item})
+      this.item = item;
+    },
+    openList() {
+      if (this.mode === 'user') {
+        this.SET({type: 'openUsers', items: !this.openUsers})
+      } else {
+        this.SET({type: 'openDesktops', items: !this.openDesktops})
+      }
+    },
+  }
+};
 </script>
 
 <style lang="stylus" scoped>
-
-  .item
-    position relative
-    text-align left
+.item
+  position relative
+  text-align left
+  .item_icon
+    width 20px
+    height 20px
+    border-radius 15%
+    background var(--color-active)
+    float right
+    &::before
+      content ""
+      display block
+      width 60%
+      height 0
+      border-left: 7px solid transparent;
+      border-right: 7px solid transparent;
+      border-bottom: 7px solid var(--color-bg);
+      transition .4s
+      transform translate(3px, 5px)
+  &.selected
     .item_icon
-      width 20px
-      height 20px
-      border-radius 15%
-      background var(--color-active)
-      float right
       &::before
-        content ""
-        display block
-        width 60%
-        height 0
-        border-left: 7px solid transparent;
-        border-right: 7px solid transparent;
-        border-bottom: 7px solid var(--color-bg);
-        transition .4s
-        transform translate(3px, 5px)
-    &.selected
-      .item_icon
-        &::before
-          transform translate(3px, 7px) rotate(180deg)
-  
-  .username 
-    text-align left
-    font-size 1.2rem
-  .item-list
-    ul 
-      position absolute
-      width 100%
-      text-align center
-      left 0
-      z-index 1
-      border-radius 7px
-      overflow hidden
-      & li
-        padding 4px 5px
-        background rgba(0,0,0,.4)
-        &:hover
-          text-shadow 0 0 6px currentColor
-          background rgba(0,0,0,.7)
+        transform translate(3px, 7px) rotate(180deg)
+
+.username 
+  text-align left
+  font-size 1.2rem
+.item-list
+  ul 
+    position absolute
+    width 100%
+    text-align center
+    left 0
+    z-index 1
+    border-radius 7px
+    overflow hidden
+    & li
+      padding 4px 5px
+      background rgba(0,0,0,.4)
+      &:hover
+        text-shadow 0 0 6px currentColor
+        background rgba(0,0,0,.7)
 </style>
diff --git a/src/components/SettingsWindow.vue b/src/components/SettingsWindow.vue
@@ -9,7 +9,7 @@
         .settings-themes-item(
           v-for='(theme, i) in themes' 
           :key='i' 
-          :style='`background: url(${setImage(theme.component)}) no-repeat center/cover`'
+          :style='`background: url(${setImage(theme.name.toLowerCase())}) no-repeat center/cover`'
           @click='changeTheme(theme)')
           h4 {{theme.name}}
 </template>
@@ -31,7 +31,6 @@
       ...mapMutations('system', ['CHANGE_SETTINGS']),
       ...mapGetters(['CONVERT_TO_HSL', 'CHANGE_HSL']),
       closeSettings() {
-        console.log("CLICK")
         this.SET({type: 'openSettings', items: false});
         this.SET({type: 'openLogin', items: true});
       },

diff --git a/src/components/themes/time.vue b/src/components/themes/time.vue
@@ -0,0 +1,84 @@
+<template lang="pug">
+  <div class="body">
+    <div class="time center-position">
+      <h1 class="time-format"> {{currentTime.format("H:mm")}} </h1>
+      <h3> {{currentTime.format("D ddd, YY MMM")}} </h3>
+    </div>
+    <svg id="svg-time" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 530 530" width="530" height="530">
+      <path d=" M 264.272 15 C 402.25 15 514.597 127.021 514.999 265 C 515.401 402.979 403.706 515 265.728 515 C 127.75 515 15.403 402.979 15.001 265 C 14.599 127.021 126.294 15 264.272 15 Z " fill="none" stroke-width="30" stroke="rgb(10,170,162)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="3"/>
+      <path d=" M 265 52.501 C 382.282 52.843 477.5 148.338 477.5 265.619 C 477.5 382.9 382.282 477.841 265 477.499 C 147.718 477.157 52.5 381.662 52.5 264.381 C 52.5 147.1 147.718 52.159 265 52.501 Z " fill="none" stroke-width="30" stroke="rgb(145,230,10)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="3"/>
+      <path d="M 265 90.001 C 361.585 90.293 440 168.945 440 265.529 C 440 362.114 361.585 440.291 265 439.999 C 168.415 439.707 90 361.055 90 264.471 C 90 167.886 168.415 89.709 265 90.001 Z " fill="none" stroke-width="30" stroke="rgb(255,28,118)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="3"/>
+    </svg>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+
+export default {
+  name: 'Time',
+  data() {
+    return {
+      currentTime: moment(),
+    }
+  },
+  methods: {
+    updatePath(path, time) {
+      let length = path.getTotalLength();
+
+      path.style.transition = `3s`;
+      path.style.strokeDasharray = length + ' ' + length;
+      path.style.strokeDashoffset = length - 1;
+      this.currentTime = moment();
+
+      setTimeout(() => {
+        path.style.transition = `${time - (time / 20)}s linear`;
+        path.style.strokeDashoffset = 0;
+      }, 3000)
+    }
+  },
+  mounted() {
+    let momentArray = moment().format('H-m-s').split('-');
+
+    var svgNode = document.querySelector('#svg-time')
+
+    svgNode.childNodes.forEach((path, i, arr) => {
+      let length = path.getTotalLength();
+      let vm = this;
+      //let startPosition = ;
+      path.getBoundingClientRect();
+      let part = (i != 0) ? 60 : 24;
+
+      path.style.transition = '0s';
+      path.style.strokeDasharray = length + ' ' + length;
+      path.style.strokeDashoffset = length - (length / part * momentArray[i]);
+
+      setTimeout(() => {
+        let time = 60 ** (arr.length - i);
+        let timeLeft = (60 ** (arr.length - i)) - (momentArray[i] * (60 ** (arr.length - i - 1)));
+
+        path.style.transition = `${timeLeft}s linear`;
+
+        setTimeout(() => {
+          this.updatePath(path, time)
+          setInterval(() => {
+            this.updatePath(path, time)
+          }, time * 1000)
+        }, timeLeft * 1000);
+        path.style.strokeDashoffset = 0;
+      }, 200)
+    })
+  }
+}
+</script>
+
+<style lang="stylus">
+.time-format
+  font-size 8vmin
+  text-align center
+  text-shadow 0 0 2vmin var(--color-active)
+
+#svg-time
+  position relative
+
+</style>
diff --git a/src/store/index.js b/src/store/index.js
@@ -14,7 +14,7 @@ export default new Vuex.Store({
     openSettings: false,
     openUsers: false,
     openDesktops: false,
-    openLogin: true,
+    openLogin: false,
     themes: [
       {
         name: 'Fire',
@@ -48,7 +48,16 @@ export default new Vuex.Store({
         fullscreen: true,
         color: {
           active: '#FF3333',
-          background: '#301F48'
+          background: '#100e18'
+        },
+      },
+      {
+        name: 'Time',
+        component: 'timeComponent',
+        fullscreen: false,
+        color: {
+          active: '#04ded4',
+          background: '#13111c'
         },
       },
     ]