Skip to content
This repository was archived by the owner on Feb 21, 2022. It is now read-only.

Commit 3e39054

Browse files
ExauthorExauthor
committed
Add time component
1 parent 420f35e commit 3e39054

File tree

12 files changed

+244
-118
lines changed

12 files changed

+244
-118
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@babel/plugin-proposal-do-expressions": "^7.0.0-beta.53",
14+
"moment": "^2.24.0",
1415
"pug": "2.0.3",
1516
"pug-plain-loader": "^1.0.0",
1617
"stylus": "^0.54.5",

‎src/assets/images/themes/time/index.png

44.2 KB
Loading

‎src/assets/style/index.styl

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ a
147147
.menu-popover-enter,
148148
.menu-popover-leave-to
149149
opacity 0
150-
transform: perspective(900px) rotate3d(70, 0, 0, -60deg);
150+
transform: perspective(900px) rotate3d(70, 0, 0, -50deg);
151151

152152
.menu-popover-enter-to,
153153
.menu-popover-leave
@@ -156,7 +156,10 @@ a
156156

157157
.menu-popover-enter-active,
158158
.menu-popover-leave-active
159-
transition opacity, transform .3s ease-out
159+
transition .4s ease-out
160+
161+
.menu-popover-leave-active
162+
transition .15s ease-out
160163

161164
@keyframes slideOut {
162165
to {

‎src/components/BackgroundImage.vue

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,29 @@
55
</template>
66

77
<script>
8-
import fire from '@/components/themes/fire';
9-
import osmos from '@/components/themes/osmos';
10-
import mars from '@/components/themes/mars';
11-
import space from '@/components/themes/space';
12-
import { mapState, mapGetters } from 'vuex'
8+
import fire from '@/components/themes/fire';
9+
import mars from '@/components/themes/mars';
10+
import { mapState, mapGetters } from 'vuex';
11+
import osmos from '@/components/themes/osmos';
12+
import space from '@/components/themes/space';
13+
import timeComponent from '@/components/themes/time';
1314
14-
export default {
15-
name: 'background-image',
16-
components: {
17-
fire,
18-
osmos,
19-
mars,
20-
space
21-
},
22-
computed: {
23-
...mapState(['themes', 'openLogin']),
24-
...mapState('system', {
25-
theme: state => state.settings.theme
26-
}),
27-
},
28-
}
15+
export default {
16+
name: 'background-image',
17+
components: {
18+
timeComponent,
19+
fire,
20+
osmos,
21+
mars,
22+
space
23+
},
24+
computed: {
25+
...mapState(['themes', 'openLogin']),
26+
...mapState('system', {
27+
theme: state => state.settings.theme
28+
}),
29+
},
30+
}
2931
</script>
3032

3133
<style lang='stylus'>

‎src/components/LoginComponent.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
keyPress(event) {
6868
if (event.which === 13) {
6969
if (!this.openLogin) {
70-
this.SET({type: 'openLogin', items: true})
70+
this.SET({type: 'openLogin', items: true});
7171
} else if (this.openLogin) {
7272
this.$nextTick(() => {
7373
this.$refs.password.focus();
@@ -91,7 +91,7 @@
9191
submit() {
9292
9393
if (!this.password) {
94-
return
94+
return;
9595
}
9696
9797
this.logging = true;

‎src/components/SelectItem.vue

Lines changed: 72 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -16,86 +16,85 @@
1616
</template>
1717

1818
<script>
19-
import { mapState, mapMutations } from 'vuex'
20-
21-
export default {
22-
name: 'select-item',
23-
props: ['mode'],
24-
computed: {
25-
...mapState(['openUsers', 'openDesktops']),
26-
...mapState('system', ['settings']),
27-
item: {
28-
get() {
29-
return this.settings[this.mode]
30-
},
31-
set(value) {
32-
return value
33-
}
19+
import { mapState, mapMutations } from 'vuex'
20+
21+
export default {
22+
name: 'select-item',
23+
props: ['mode'],
24+
computed: {
25+
...mapState(['openUsers', 'openDesktops']),
26+
...mapState('system', ['settings']),
27+
item: {
28+
get() {
29+
return this.settings[this.mode]
3430
},
35-
items() {
36-
return this.settings[this.mode + 's']
31+
set(value) {
32+
return value
3733
}
3834
},
39-
methods: {
40-
...mapMutations(['SET']),
41-
...mapMutations('system', ['CHANGE_SETTINGS']),
42-
changeItem(item) {
43-
this.CHANGE_SETTINGS({key: this.mode, value: item})
44-
this.item = item;
45-
},
46-
openList() {
47-
if (this.mode === 'user') {
48-
this.SET({type: 'openUsers', items: !this.openUsers})
49-
} else {
50-
this.SET({type: 'openDesktops', items: !this.openDesktops})
51-
}
52-
},
35+
items() {
36+
return this.settings[this.mode + 's']
5337
}
54-
};
38+
},
39+
methods: {
40+
...mapMutations(['SET']),
41+
...mapMutations('system', ['CHANGE_SETTINGS']),
42+
changeItem(item) {
43+
this.CHANGE_SETTINGS({key: this.mode, value: item})
44+
this.item = item;
45+
},
46+
openList() {
47+
if (this.mode === 'user') {
48+
this.SET({type: 'openUsers', items: !this.openUsers})
49+
} else {
50+
this.SET({type: 'openDesktops', items: !this.openDesktops})
51+
}
52+
},
53+
}
54+
};
5555
</script>
5656

5757
<style lang="stylus" scoped>
58-
59-
.item
60-
position relative
61-
text-align left
58+
.item
59+
position relative
60+
text-align left
61+
.item_icon
62+
width 20px
63+
height 20px
64+
border-radius 15%
65+
background var(--color-active)
66+
float right
67+
&::before
68+
content ""
69+
display block
70+
width 60%
71+
height 0
72+
border-left: 7px solid transparent;
73+
border-right: 7px solid transparent;
74+
border-bottom: 7px solid var(--color-bg);
75+
transition .4s
76+
transform translate(3px, 5px)
77+
&.selected
6278
.item_icon
63-
width 20px
64-
height 20px
65-
border-radius 15%
66-
background var(--color-active)
67-
float right
6879
&::before
69-
content ""
70-
display block
71-
width 60%
72-
height 0
73-
border-left: 7px solid transparent;
74-
border-right: 7px solid transparent;
75-
border-bottom: 7px solid var(--color-bg);
76-
transition .4s
77-
transform translate(3px, 5px)
78-
&.selected
79-
.item_icon
80-
&::before
81-
transform translate(3px, 7px) rotate(180deg)
82-
83-
.username
84-
text-align left
85-
font-size 1.2rem
86-
.item-list
87-
ul
88-
position absolute
89-
width 100%
90-
text-align center
91-
left 0
92-
z-index 1
93-
border-radius 7px
94-
overflow hidden
95-
& li
96-
padding 4px 5px
97-
background rgba(0,0,0,.4)
98-
&:hover
99-
text-shadow 0 0 6px currentColor
100-
background rgba(0,0,0,.7)
80+
transform translate(3px, 7px) rotate(180deg)
81+
82+
.username
83+
text-align left
84+
font-size 1.2rem
85+
.item-list
86+
ul
87+
position absolute
88+
width 100%
89+
text-align center
90+
left 0
91+
z-index 1
92+
border-radius 7px
93+
overflow hidden
94+
& li
95+
padding 4px 5px
96+
background rgba(0,0,0,.4)
97+
&:hover
98+
text-shadow 0 0 6px currentColor
99+
background rgba(0,0,0,.7)
101100
</style>

‎src/components/SettingsWindow.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
.settings-themes-item(
1010
v-for='(theme, i) in themes'
1111
:key='i'
12-
:style='`background: url(${setImage(theme.component)}) no-repeat center/cover`'
12+
:style='`background: url(${setImage(theme.name.toLowerCase())}) no-repeat center/cover`'
1313
@click='changeTheme(theme)')
1414
h4 {{theme.name}}
1515
</template>
@@ -31,7 +31,6 @@
3131
...mapMutations('system', ['CHANGE_SETTINGS']),
3232
...mapGetters(['CONVERT_TO_HSL', 'CHANGE_HSL']),
3333
closeSettings() {
34-
console.log("CLICK")
3534
this.SET({type: 'openSettings', items: false});
3635
this.SET({type: 'openLogin', items: true});
3736
},

‎src/components/themes/time.vue

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template lang="pug">
2+
<div class="body">
3+
<div class="time center-position">
4+
<h1 class="time-format"> {{currentTime.format("H:mm")}} </h1>
5+
<h3> {{currentTime.format("D ddd, YY MMM")}} </h3>
6+
</div>
7+
<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">
8+
<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"/>
9+
<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"/>
10+
<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"/>
11+
</svg>
12+
</div>
13+
</template>
14+
15+
<script>
16+
import moment from 'moment'
17+
18+
export default {
19+
name: 'Time',
20+
data() {
21+
return {
22+
currentTime: moment(),
23+
}
24+
},
25+
methods: {
26+
updatePath(path, time) {
27+
let length = path.getTotalLength();
28+
29+
path.style.transition = `3s`;
30+
path.style.strokeDasharray = length + ' ' + length;
31+
path.style.strokeDashoffset = length - 1;
32+
this.currentTime = moment();
33+
34+
setTimeout(() => {
35+
path.style.transition = `${time - (time / 20)}s linear`;
36+
path.style.strokeDashoffset = 0;
37+
}, 3000)
38+
}
39+
},
40+
mounted() {
41+
let momentArray = moment().format('H-m-s').split('-');
42+
43+
var svgNode = document.querySelector('#svg-time')
44+
45+
svgNode.childNodes.forEach((path, i, arr) => {
46+
let length = path.getTotalLength();
47+
let vm = this;
48+
//let startPosition = ;
49+
path.getBoundingClientRect();
50+
let part = (i != 0) ? 60 : 24;
51+
52+
path.style.transition = '0s';
53+
path.style.strokeDasharray = length + ' ' + length;
54+
path.style.strokeDashoffset = length - (length / part * momentArray[i]);
55+
56+
setTimeout(() => {
57+
let time = 60 ** (arr.length - i);
58+
let timeLeft = (60 ** (arr.length - i)) - (momentArray[i] * (60 ** (arr.length - i - 1)));
59+
60+
path.style.transition = `${timeLeft}s linear`;
61+
62+
setTimeout(() => {
63+
this.updatePath(path, time)
64+
setInterval(() => {
65+
this.updatePath(path, time)
66+
}, time * 1000)
67+
}, timeLeft * 1000);
68+
path.style.strokeDashoffset = 0;
69+
}, 200)
70+
})
71+
}
72+
}
73+
</script>
74+
75+
<style lang="stylus">
76+
.time-format
77+
font-size 8vmin
78+
text-align center
79+
text-shadow 0 0 2vmin var(--color-active)
80+
81+
#svg-time
82+
position relative
83+
84+
</style>

‎src/store/index.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default new Vuex.Store({
1414
openSettings: false,
1515
openUsers: false,
1616
openDesktops: false,
17-
openLogin: true,
17+
openLogin: false,
1818
themes: [
1919
{
2020
name: 'Fire',
@@ -48,7 +48,16 @@ export default new Vuex.Store({
4848
fullscreen: true,
4949
color: {
5050
active: '#FF3333',
51-
background: '#301F48'
51+
background: '#100e18'
52+
},
53+
},
54+
{
55+
name: 'Time',
56+
component: 'timeComponent',
57+
fullscreen: false,
58+
color: {
59+
active: '#04ded4',
60+
background: '#13111c'
5261
},
5362
},
5463
]

0 commit comments

Comments
 (0)