PATCH: fix some styles and translations

bimdata · May 11, 2022 · 6fd9bdc · 6fd9bdc
1 parent dea2776
commit 6fd9bdc
Show file tree

Hide file tree

Showing 19 changed files with 334 additions and 112 deletions.
diff --git a/src/components/bcf-filters/BcfFilters.scss b/src/components/bcf-filters/BcfFilters.scss
@@ -1,33 +1,54 @@
 .bcf-filters {
-  .btn-color-granite-light:enabled {
-    color: var(--color-primary);
-  }
+  &__btn-toggle {
+    &:enabled {
+      color: var(--color-primary);
+    }
 
-  .btn-color-granite-light:disabled {
-    background-color: var(--color-white);
-    color: var(--color-silver-dark);
+    &:disabled {
+      background-color: var(--color-white);
+      color: var(--color-silver-dark);
+    }
   }
 
+
   &__container {
     position: absolute;
     z-index: 1;
     top: calc(32px + 12px);
     left: 0;
     width: 100%;
+    padding: var(--spacing-unit);
     box-shadow: var(--box-shadow);
     background-color: var(--color-white);
 
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing-unit) * 2);
+
     &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
       &__title {
-        font-size: 12px;
-        font-weight: 700;
+        font-size: 1.1rem;
+        font-weight: bold;
       }
     }
 
     &__date {
-      p {
+      display: flex;
+      gap: calc(var(--spacing-unit) / 2);
+
+      .example {
+        margin-top: calc(var(--spacing-unit) / 2);
         font-size: 11px;
       }
     }
+
+    &__actions {
+      display: flex;
+      justify-content: center;
+    }
   }
 }
diff --git a/src/components/bcf-filters/BcfFilters.vue b/src/components/bcf-filters/BcfFilters.vue
@@ -1,11 +1,10 @@
 <template>
   <div class="bcf-filters" v-click-away="closeFilters">
     <BIMDataButton
-      class="btn-color-granite-light"
+      class="bcf-filters__btn-toggle"
       :class="{ 'btn-active': showFilters }"
-      :disabled="!bcfTopics.length"
+      :disabled="bcfTopics.length === 0"
       width="120px"
-      color="default"
       fill
       square
       icon
@@ -18,13 +17,14 @@
         color="default"
         margin="0 6px 0 0"
       />
-      {{ $t("BcfComponents.BcfFilters.filtersButton") }}
+      <span>
+        {{ $t("BcfComponents.BcfFilters.filtersButton") }}
+      </span>
     </BIMDataButton>
+
     <transition name="slide-fade-up">
-      <div class="bcf-filters__container p-18" v-show="showFilters">
-        <div
-          class="bcf-filters__container__header flex items-center justify-between"
-        >
+      <div class="bcf-filters__container" v-show="showFilters">
+        <div class="bcf-filters__container__header">
           <div class="bcf-filters__container__header__title">
             {{ $t("BcfComponents.BcfFilters.filtersTitle") }}
           </div>
@@ -34,12 +34,12 @@
               size="xxs"
               fill
               color="primary"
-              @click="showFilters = false"
+              @click="closeFilters"
             />
           </BIMDataButton>
         </div>
+
         <BIMDataSelect
-          class="m-t-24"
           width="100%"
           :multi="true"
           :label="$t('BcfComponents.BcfFilters.priorityLabel')"
@@ -48,8 +48,8 @@
           optionLabelKey="label"
           v-model="priorities"
         />
+
         <BIMDataSelect
-          class="m-t-24"
           width="100%"
           :multi="true"
           :label="$t('BcfComponents.BcfFilters.statusLabel')"
@@ -58,16 +58,17 @@
           optionLabelKey="label"
           v-model="status"
         />
-        <div class="bcf-filters__container__date flex justify-between m-t-24">
-          <div class="m-r-6">
+
+        <div class="bcf-filters__container__date">
+          <div>
             <BIMDataInput
               margin="0"
               v-model="startDateInput"
               :placeholder="$t('BcfComponents.BcfFilters.startDatePlaceholder')"
               :error="hasStartDateError"
               errorMessage="Error"
             />
-            <p class="m-y-6">
+            <p class="example">
               {{ $t("BcfComponents.BcfFilters.startDateExample") }}
             </p>
           </div>
@@ -79,13 +80,13 @@
               :error="hasEndDateError"
               errorMessage="Error"
             />
-            <p class="m-y-6">
+            <p class="example">
               {{ $t("BcfComponents.BcfFilters.endDateExample") }}
             </p>
           </div>
         </div>
+
         <BIMDataSelect
-          class="m-t-24"
           width="100%"
           :multi="true"
           :label="$t('BcfComponents.BcfFilters.assignedToLabel')"
@@ -94,8 +95,8 @@
           optionLabelKey="label"
           v-model="users"
         />
+
         <BIMDataSelect
-          class="m-t-24"
           width="100%"
           :multi="true"
           :label="$t('BcfComponents.BcfFilters.creatorsLabel')"
@@ -104,23 +105,25 @@
           optionLabelKey="label"
           v-model="creators"
         />
+
         <BIMDataSelect
-          class="m-t-24"
           width="100%"
           :multi="true"
           :label="$t('BcfComponents.BcfFilters.tagsLabel')"
           :options="tagOptions"
           v-model="tags"
         />
-        <div class="flex justify-center m-t-24">
+
+        <div class="bcf-filters__container__actions">
           <BIMDataButton
             class="m-r-12"
             color="primary"
             ghost
             radius
             @click="resetFilters"
-            >{{ $t("BcfComponents.BcfFilters.resetButton") }}</BIMDataButton
           >
+            {{ $t("BcfComponents.BcfFilters.resetButton") }}
+          </BIMDataButton>
           <BIMDataButton color="primary" fill radius @click="submitFilters">
             <BIMDataIcon
               name="search"
@@ -129,7 +132,9 @@
               color="default"
               margin="0 6px 0 0"
             />
-            <span>{{ $t("BcfComponents.BcfFilters.searchButton") }}</span>
+            <span>
+              {{ $t("BcfComponents.BcfFilters.searchButton") }}
+            </span>
           </BIMDataButton>
         </div>
       </div>
@@ -195,7 +200,7 @@ export default {
         });
     });
 
-    // date
+    // start/end dates
     const startDateInput = ref("");
     const endDateInput = ref("");
     const hasStartDateError = ref(false);
@@ -234,7 +239,7 @@ export default {
         });
     });
 
-    // creator's list
+    // creators list
     const creators = ref([]);
     const creatorOptions = computed(() => {
       return Array.from(
@@ -259,15 +264,29 @@ export default {
         .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));
     });
 
-    // Validation date + emit formulaire
     const submitFilters = () => {
-      const startDateConform = isStartDateConform(startDateInput);
-      const endDateConform = isEndDateConform(startDateInput, endDateInput);
+      if (
+        startDateInput.value &&
+        !isStartDateConform(startDateInput) ||
+        (!startDateInput.value && endDateInput.value)
+      ) {
+        hasStartDateError.value = true;
+        return;
+      }
+      if (
+        startDateInput.value &&
+        endDateInput.value &&
+        !isEndDateConform(startDateInput, endDateInput)
+      ) {
+        hasEndDateError.value = true;
+        return;
+      }
 
       if (
         priorities.value.length ||
         status.value.length ||
-        (startDateConform && endDateConform) ||
+        startDateInput.value ||
+        (startDateInput.value && endDateInput.value) ||
         users.value.length ||
         creators.value.length ||
         tags.value.length
@@ -282,14 +301,6 @@ export default {
           tags: tags.value,
         });
         showFilters.value = false;
-      } else if (
-        startDateInput.value &&
-        endDateInput.value &&
-        !startDateConform &&
-        !endDateConform
-      ) {
-        hasStartDateError.value = true;
-        hasEndDateError.value = true;
       }
     };
 
@@ -319,23 +330,23 @@ export default {
       // References
       creators,
       creatorOptions,
+      endDateInput,
+      hasEndDateError,
+      hasStartDateError,
       priorities,
       priorityOptions,
+      showFilters,
+      startDateInput,
       status,
       statusOptions,
       tags,
       tagOptions,
       users,
       userOptions,
-      showFilters,
-      startDateInput,
-      endDateInput,
-      hasStartDateError,
-      hasEndDateError,
       // Methods
+      closeFilters,
       resetFilters,
       submitFilters,
-      closeFilters,
       toggleFilters
     };
   }

diff --git a/src/components/bcf-statistics/BcfStatistics.scss b/src/components/bcf-statistics/BcfStatistics.scss
@@ -44,7 +44,8 @@
         }
       }
 
-      .bimdata-paginated-list:deep() {
+      ::v-deep .bimdata-paginated-list,
+      :deep(.bimdata-paginated-list) {
         ul:first-child {
           height: 144px;
         }

diff --git a/src/components/bcf-topic-create/BcfTopicCreate.scss b/src/components/bcf-topic-create/BcfTopicCreate.scss
@@ -77,12 +77,15 @@
     }
 
     .btn-upload {
-      &:not(:disabled) label {
-        width: 100%;
-        height: 100%;
+      label {
         display: flex;
         justify-content: center;
         align-items: center;
+      }
+
+      &:not(:disabled) label {
+        width: 100%;
+        height: 100%;
         cursor: pointer;
       }
     }
@@ -109,23 +112,24 @@
     }
 
     &__body {
-      &:deep() {
-        .bimdata-input {
-          input {
-            font-size: 13px;
-            color: var(--color-granite);
-          }
-        }
-        .bimdata-select {
-          margin: 30px 0;
+      .bimdata-select {
+        margin: 30px 0;
+        font-size: 13px;
+      }
+      ::v-deep .bimdata-input,
+      :deep(.bimdata-input) {
+        input {
           font-size: 13px;
+          color: var(--color-granite);
         }
-        .bimdata-textarea {
-          textarea {
-            font-family: var(--primary-font);
-            font-size: 13px;
-            color: var(--color-granite);
-          }
+      }
+      ::v-deep .bimdata-textarea,
+      :deep(.bimdata-textarea) {
+        textarea {
+          font-family: var(--primary-font);
+          font-size: 13px;
+          color: var(--color-granite);
+          resize: vertical;
         }
       }
     }

diff --git a/src/components/bcf-topic-create/BcfTopicCreate.vue b/src/components/bcf-topic-create/BcfTopicCreate.vue
@@ -131,7 +131,6 @@
           :label="$t('BcfComponents.BcfTopicCreate.descriptionLabel')"
           v-model="topicDescription"
           fitContent
-          resizable
         />
         <BIMDataSelect
           width="100%"