fix(projects): fix click handler on project creation card

bimdata · Apr 13, 2021 · 713b9e4 · 713b9e4
1 parent b05069a
commit 713b9e4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/src/components/specific/projects/project-creation-card/ProjectCreationCard.scss b/src/components/specific/projects/project-creation-card/ProjectCreationCard.scss
@@ -10,11 +10,11 @@
   color: $color-primary;
   transition-duration: 0.35s;
 
-  .action-loader {
+  &__loader {
     transform: scale(2);
   }
 
-  .creation-form {
+  &__form {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -31,11 +31,15 @@
     }
   }
 
-  .action-btn {
+  &__btn {
     display: flex;
     flex-direction: column;
+    justify-content: center;
     align-items: center;
-    .plus-icon {
+    width: 100%;
+    height: 100%;
+
+    &__icon {
       display: flex;
       justify-content: center;
       align-items: center;

diff --git a/src/components/specific/projects/project-creation-card/ProjectCreationCard.vue b/src/components/specific/projects/project-creation-card/ProjectCreationCard.vue
@@ -1,24 +1,20 @@
 <template>
-  <div
-    class="project-creation-card"
-    v-click-away="closeCreationForm"
-    @click="openCreationForm"
-  >
+  <div class="project-creation-card" v-click-away="closeCreationForm">
     <transition name="fade" mode="out-in">
-      <div class="action-loader" v-if="loading">
+      <div v-if="loading" class="project-creation-card__loader">
         <BIMDataSpinner />
       </div>
 
-      <div class="creation-form" v-else-if="showCreationForm">
-        <div class="creation-form__title">
+      <div v-else-if="showCreationForm" class="project-creation-card__form">
+        <div class="project-creation-card__form__title">
           {{ $t("Projects.ProjectCreationCard.title") }}
           <BIMDataButton ghost rounded icon @click.stop="closeCreationForm">
             <BIMDataIcon name="close" size="xxxs" />
           </BIMDataButton>
         </div>
         <BIMDataInput
           ref="nameInput"
-          class="creation-form__input"
+          class="project-creation-card__form__input"
           :placeholder="$t('Projects.ProjectCreationCard.inputName')"
           v-model="newProject.name"
           :error="error"
@@ -30,18 +26,18 @@
           fill
           radius
           color="primary"
-          class="creation-form__submit-btn"
+          class="project-creation-card__form__btn-submit"
           @click="createProject"
         >
           {{ $t("Projects.ProjectCreationCard.buttonCreate") }}
         </BIMDataButton>
       </div>
 
-      <div class="action-btn" v-else>
-        <div class="plus-icon">
+      <div v-else class="project-creation-card__btn" @click="openCreationForm">
+        <div class="project-creation-card__btn__icon">
           <BIMDataIcon name="plus" size="l" />
         </div>
-        <div>
+        <div class="project-creation-card__btn__text">
           {{ $t("Projects.ProjectCreationCard.text") }}
         </div>
       </div>