diff --git a/app/src/app.vue b/app/src/app.vue index 7722ec2f..8ab4b63d 100644 --- a/app/src/app.vue +++ b/app/src/app.vue @@ -6,29 +6,37 @@

Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, recusandae enim expedita iusto, esse voluptatum odio itaque delectus voluptatem dolorum dolores sint quam excepturi, consequatur aliquam nesciunt distinctio! Ullam, excepturi!

-
{{ thing }}
- -
-
-
Clock type:
- - - {{ label }} - - +
+ + + {{ label }} + + +
+ +
-
- -
-
{{ timezone }}
-
{{ getClockDateLabel(time, timezone) }}
+ +
+ +
+
{{ timezone }}
+
{{ getClockDateLabel(time, timezone) }}
+
+ +
+
+
+
+
Add a clock
+
-
-
- Add Clock
@@ -44,8 +52,6 @@ import DigitalClock from './components/clock/digital-clock.vue'; import { computed, - ref, - watchEffect, } from 'vue'; import { @@ -55,18 +61,27 @@ import { import { state, clocks, - setClockType + timezones, + setClockType, + addClock, + removeClock, + undo, + redo, + loadTimezones } from './stores/time'; -const thing = ref(''); - -watchEffect(() => console.log(state.clockType)); +loadTimezones(); const clockType = computed({ get: () => state.clockType, set: type => setClockType(type) }); +const addClockModel = computed({ + get: () => '', + set: value => value && addClock(value) +}); + const clockComponent = computed(() => state.clockType === 'analogue' ? AnalogueClock : DigitalClock @@ -85,6 +100,10 @@ function getClockDateLabel(time: Date, timezone: string) { padding: 2rem; } + .app__options { + margin: 2rem 0; + } + .clocks { display: grid; gap: 2rem; @@ -114,4 +133,20 @@ function getClockDateLabel(time: Date, timezone: string) { font-size: 0.875rem; } + .clocks-enter-from, + .clocks-leave-to { + opacity: 0; + transform: scale(0); + } + + .clocks-enter-active, + .clocks-leave-active { + transition: opacity var(--animation__timing) var(--animation__easing), + transform var(--animation__timing) var(--animation__easing); + } + + .clocks-move { + transition: transform var(--animation__timing) var(--animation__easing); + } + \ No newline at end of file diff --git a/app/src/components/clock/analogue-clock.vue b/app/src/components/clock/analogue-clock.vue index 7dbfae8e..e1acfada 100644 --- a/app/src/components/clock/analogue-clock.vue +++ b/app/src/components/clock/analogue-clock.vue @@ -10,12 +10,16 @@