From ecd81219d48f597d0c67991330c37365f39ca551 Mon Sep 17 00:00:00 2001
From: NicolasRichel <nicolas@bimdata.io>
Date: Tue, 26 Jan 2021 17:02:20 +0100
Subject: [PATCH] fix(#16): add ripple effect to space action menu toggle
 button

---
 src/animations.scss                             | 11 +++++++++++
 .../space-action-menu/SpaceActionMenu.scss      | 17 +++++++++++++++++
 .../space-action-menu/SpaceActionMenu.vue       |  9 +++++++++
 src/global.scss                                 |  2 ++
 4 files changed, 39 insertions(+)
 create mode 100644 src/animations.scss

diff --git a/src/animations.scss b/src/animations.scss
new file mode 100644
index 000000000..e5e3dae34
--- /dev/null
+++ b/src/animations.scss
@@ -0,0 +1,11 @@
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+  }
+  75% {
+    transform: scale(1.3);
+  }
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/src/components/space-action-menu/SpaceActionMenu.scss b/src/components/space-action-menu/SpaceActionMenu.scss
index c25b22daf..6fd9d7703 100644
--- a/src/components/space-action-menu/SpaceActionMenu.scss
+++ b/src/components/space-action-menu/SpaceActionMenu.scss
@@ -3,6 +3,23 @@
 
   &__btn {
     color: $color-tertiary-dark;
+
+    // Ripple effect
+    &.clicked {
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background-color: $color-primary;
+        transform: scale(0);
+        animation-name: ripple;
+        animation-duration: 0.5s;
+      }
+    }
   }
 
   &__container {
diff --git a/src/components/space-action-menu/SpaceActionMenu.vue b/src/components/space-action-menu/SpaceActionMenu.vue
index 66de99e5a..1aceea640 100644
--- a/src/components/space-action-menu/SpaceActionMenu.vue
+++ b/src/components/space-action-menu/SpaceActionMenu.vue
@@ -2,6 +2,7 @@
   <div class="space-action-menu" v-click-away="closeMenu">
     <BIMDataButton color="default" ghost rounded icon
       class="space-action-menu__btn"
+      :class="{ clicked }"
       @click="toggleMenu">
       <BIMDataIcon name="ellipsis" size="l" />
     </BIMDataButton>
@@ -81,6 +82,12 @@ export default {
 
     const loading = createLoadingContext(`space-action-${props.space.id}`);
 
+    const clicked = ref(false);
+    const rippleEffect = () => {
+      clicked.value = true;
+      setTimeout(() => clicked.value = false, 500);
+    };
+
     const showMenu = ref(false);
     const closeMenu = () => {
       closeUpdateForm();
@@ -89,6 +96,7 @@ export default {
       showMenu.value = false;
     };
     const toggleMenu = () => {
+      rippleEffect();
       closeUpdateForm();
       closeDeleteGuard();
       loading.value = false;
@@ -117,6 +125,7 @@ export default {
 
     return {
       // References
+      clicked,
       loading,
       showDeleteGuard,
       showMenu,
diff --git a/src/global.scss b/src/global.scss
index d01419c23..ee884cdd1 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -1,5 +1,7 @@
 @import '~@bimdata/design-system/dist/scss/elements/_BIMDataScrollbar.scss';
 
+@import './animations.scss';
+
 * {
   box-sizing: border-box;
 }