From 556a25c908c41a10216cb367347a651654741a18 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Wed, 15 Jul 2020 00:54:22 +0200
Subject: [PATCH] :dizzy: (interval) add animation to plus and minus

---
 src/assets/minus.svg             | 15 +++++++++
 src/assets/plus.svg              | 16 +++++++++
 src/components/IntervalInput.vue | 57 +++++++++-----------------------
 src/styles/app.scss              |  2 +-
 src/views/Home.vue               | 11 +++---
 5 files changed, 52 insertions(+), 49 deletions(-)
 create mode 100644 src/assets/minus.svg
 create mode 100644 src/assets/plus.svg

diff --git a/src/assets/minus.svg b/src/assets/minus.svg
new file mode 100644
index 0000000..872e488
--- /dev/null
+++ b/src/assets/minus.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="icon icon-tabler icon-tabler-minus"
+  width="44"
+  height="44"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="#2c3a47"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <line x1="5" y1="12" x2="19" y2="12" />
+</svg>
diff --git a/src/assets/plus.svg b/src/assets/plus.svg
new file mode 100644
index 0000000..5fdde45
--- /dev/null
+++ b/src/assets/plus.svg
@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="icon icon-tabler icon-tabler-plus"
+  width="44"
+  height="44"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="#2c3a47"
+  fill="none"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <line x1="12" y1="5" x2="12" y2="19" />
+  <line x1="5" y1="12" x2="19" y2="12" />
+</svg>
diff --git a/src/components/IntervalInput.vue b/src/components/IntervalInput.vue
index 64d5169..efa72d1 100644
--- a/src/components/IntervalInput.vue
+++ b/src/components/IntervalInput.vue
@@ -1,41 +1,18 @@
 <template>
   <div class="interval-input">
-    <button v-show="editable" @click="minus">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="icon icon-tabler icon-tabler-minus"
-        width="44"
-        height="44"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="#2c3a47"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" />
-        <line x1="5" y1="12" x2="19" y2="12" />
-      </svg>
-    </button>
-    <h2>{{ label }}</h2>
-    <button v-show="editable" @click="plus">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="icon icon-tabler icon-tabler-plus"
-        width="44"
-        height="44"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="#2c3a47"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" />
-        <line x1="12" y1="5" x2="12" y2="19" />
-        <line x1="5" y1="12" x2="19" y2="12" />
-      </svg>
-    </button>
+    <transition name="fade" mode="out-in">
+      <button v-show="editable" @click="minus">
+        <img key="minus" src="@/assets/minus.svg" alt="minus" />
+      </button>
+    </transition>
+    <transition name="fade" mode="out-in">
+      <h2>{{ label }}</h2>
+    </transition>
+    <transition name="fade" mode="out-in">
+      <button v-show="editable" @click="plus">
+        <img key="plus" src="@/assets/plus.svg" alt="plus" />
+      </button>
+    </transition>
   </div>
 </template>
 
@@ -48,18 +25,16 @@ export default defineComponent({
   props: {
     editable: { type: Boolean, required: true }
   },
-  setup(props) {
+  setup() {
     const { interval, minInterval, minus, plus } = useInterval()
 
     const label = computed(() => {
       if (interval.value > 1) {
-        return props.editable
-          ? `${interval.value} minutes`
-          : `${interval.value} minute session`
+        return `${interval.value} minute session`
       }
 
       if (interval.value === minInterval) {
-        return props.editable ? '30 seconds' : '30 second session'
+        return '30 second session'
       }
 
       return `${interval.value} minute`
diff --git a/src/styles/app.scss b/src/styles/app.scss
index ef22cc3..d24b739 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -54,7 +54,7 @@ a {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s ease;
+  transition: opacity 0.25s ease;
 }
 .fade-enter,
 .fade-leave-to {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 711eb91..c8d0262 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -24,12 +24,16 @@
             v-if="timeState === 'stopped'"
             src="@/assets/play.svg"
             alt="play"
+            width="44px"
+            height="44px"
           />
           <img
             key="pause"
             v-if="timeState === 'started'"
             src="@/assets/pause.svg"
             alt="pause"
+            width="44px"
+            height="44px"
           />
         </transition>
       </button>
@@ -140,11 +144,4 @@ footer {
   font-style: italic;
   font-size: 1rem;
 }
-
-$button-size: 44px;
-
-button {
-  width: $button-size;
-  height: $button-size;
-}
 </style>