feat(styles): update design-system version and use button ripple effect

bimdata · Feb 2, 2021 · 29a14fb · 29a14fb
1 parent 78e4020
commit 29a14fb
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 76 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@bimdata/design-system": "0.1.4",
+    "@bimdata/design-system": "0.1.7",
     "@bimdata/typescript-fetch-api-client": "^1.0.0",
     "@bimdata/utils": "^0.2.15",
     "@uppy/core": "^1.15.0",
@@ -40,6 +40,6 @@
     "prettier": "^1.19.1",
     "sass-loader": "^8.0.2",
     "typescript": "~3.9.3",
-    "vue-jest": "^5.0.0-0"
+    "vue-jest": "^5.0.0-alpha.8"
   }
 }
diff --git a/src/components/project-action-menu/ProjectActionMenu.scss b/src/components/project-action-menu/ProjectActionMenu.scss
@@ -3,23 +3,6 @@
 
   &__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/project-action-menu/ProjectActionMenu.vue b/src/components/project-action-menu/ProjectActionMenu.vue
@@ -3,9 +3,8 @@
     @click.stop="() => {}"
     v-click-away="closeMenu">
 
-    <BIMDataButton color="default" ghost rounded icon
+    <BIMDataButton color="default" ripple rounded icon
       class="project-action-menu__btn"
-      :class="{ clicked }"
       @click="toggleMenu">
       <BIMDataIcon name="ellipsis" size="l" />
     </BIMDataButton>
@@ -74,12 +73,6 @@ export default {
     const loading = ref(false);
     provide('loading', loading);
 
-    const clicked = ref(false);
-    const rippleEffect = () => {
-      clicked.value = true;
-      setTimeout(() => clicked.value = false, 500);
-    };
-
     const showMenu = ref(false);
     const closeMenu = () => {
       closeUpdateForm();
@@ -88,7 +81,6 @@ export default {
       showMenu.value = false;
     };
     const toggleMenu = () => {
-      rippleEffect();
       closeUpdateForm();
       closeDeleteGuard();
       loading.value = false;
@@ -113,7 +105,6 @@ export default {
 
     return {
       // References
-      clicked,
       loading,
       showDeleteGuard,
       showMenu,

diff --git a/src/components/space-action-menu/SpaceActionMenu.scss b/src/components/space-action-menu/SpaceActionMenu.scss
@@ -3,23 +3,6 @@
 
   &__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
@@ -3,9 +3,8 @@
     @click.stop="() => {}"
     v-click-away="closeMenu">
 
-    <BIMDataButton color="default" ghost rounded icon
+    <BIMDataButton color="default" ripple rounded icon
       class="space-action-menu__btn"
-      :class="{ clicked }"
       @click="toggleMenu">
       <BIMDataIcon name="ellipsis" size="l" />
     </BIMDataButton>
@@ -61,7 +60,7 @@ import { useSpaces } from '@/state/spaces';
 // Components
 import BIMDataButton from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js';
 import BIMDataIcon from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js';
-import BIMDataSpinner from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSpinner.js";
+import BIMDataSpinner from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSpinner.js';
 import SpaceDeleteGuard from '@/components/space-delete-guard/SpaceDeleteGuard';
 import SpaceImageInput from '@/components/space-image-input/SpaceImageInput';
 import SpaceUpdateForm from '@/components/space-update-form/SpaceUpdateForm';
@@ -87,12 +86,6 @@ export default {
     const loading = ref(false);
     provide('loading', loading);
 
-    const clicked = ref(false);
-    const rippleEffect = () => {
-      clicked.value = true;
-      setTimeout(() => clicked.value = false, 500);
-    };
-
     const showMenu = ref(false);
     const closeMenu = () => {
       closeUpdateForm();
@@ -101,7 +94,6 @@ export default {
       showMenu.value = false;
     };
     const toggleMenu = () => {
-      rippleEffect();
       closeUpdateForm();
       closeDeleteGuard();
       loading.value = false;
@@ -130,7 +122,6 @@ export default {
 
     return {
       // References
-      clicked,
       loading,
       showDeleteGuard,
       showMenu,

diff --git a/src/styles/animations.scss b/src/styles/animations.scss
diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -1,6 +1,5 @@
 @import '~@bimdata/design-system/dist/scss/elements/_BIMDataScrollbar.scss';
 
-@import './animations.scss';
 @import './transitions.scss';
 
 * {