chore: Update design for filters (#3423)

2021-11-24 14:26:32 +05:30 · 2021-11-24 14:26:32 +05:30 · c23e2c23d4
commit c23e2c23d4
parent 330a97b5c5
10 changed files with 161 additions and 138 deletions
--- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@ -49,7 +49,17 @@ code {
 .cursor-pointer {
  cursor: pointer;
 }
+
 // remove when grid gutters are fixed
 .columns.with-right-space {
  padding-right: var(--space-normal);
 }
+
+
+.padding-right-small {
+  padding-right: var(--space-one);
+}
+
+.margin-right-small {
+  margin-right: var(--space-small);
+}
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@ -25,6 +25,7 @@ $default-button-height: 4.0rem;
  // @TODDO - Remove after moving all buttons to woot-button
  .icon+.button__content {
    padding-left: var(--space-small);
+    width: auto;
  }

  &.expanded {
@ -103,7 +104,6 @@ $default-button-height: 4.0rem;
    padding: 0;
  }

-
 }


--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
@ -47,6 +47,11 @@
  position: relative;
  width: 60rem;

+  &.medium {
+    max-width: 80%;
+    width: 90rem;
+  }
+
  .content-box {
    @include padding($zero);
    height: auto;
@ -94,6 +99,7 @@

  .delete-item {
    @include padding($space-large);
+
    button {
      @include margin($zero);
    }
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@ -81,6 +81,7 @@ l<template>
    <woot-modal
      :show.sync="showAdvancedFilters"
      :on-close="onToggleAdvanceFiltersModal"
+      size="medium"
    >
      <conversation-advanced-filter
        v-if="showAdvancedFilters"
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@ -34,6 +34,10 @@ export default {
      type: String,
      default: 'centered',
    },
+    size: {
+      type: String,
+      default: '',
+    },
  },
  computed: {
    modalContainerClassName() {
@ -41,7 +45,8 @@ export default {
      if (this.fullWidth) {
        return `${className} modal-container--full-width`;
      }
-      return className;
+
+      return `${className} ${this.size}`;
    },
    modalClassName() {
      const modalClassNameMap = {
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@ -4,7 +4,7 @@
      <p>{{ $t('FILTER.SUBTITLE') }}</p>
    </woot-modal-header>
    <div class="row modal-content">
-      <div class="medium-12 columns">
+      <div class="medium-12 columns filters-wrap">
        <filter-input-box
          v-for="(filter, i) in appliedFilters"
          :key="i"
@ -20,11 +20,18 @@
          @removeFilter="removeFilter(i)"
        />
        <div class="filter-actions">
-          <button class="append-filter-btn" @click="appendNewFilter">
-            <i class="icon ion-plus-circled margin-right-small" />
-            <span>{{ $t('FILTER.ADD_NEW_FILTER') }}</span>
-          </button>
+          <woot-button
+            icon="ion-plus"
+            color-scheme="success"
+            variant="smooth"
+            size="small"
+            @click="appendNewFilter"
+          >
+            {{ $t('FILTER.ADD_NEW_FILTER') }}
+          </woot-button>
        </div>
+      </div>
+      <div class="medium-12 columns">
        <div class="modal-footer justify-content-end w-full">
          <woot-button class="button clear" @click.prevent="onClose">
            {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
@ -203,79 +210,16 @@ export default {
  },
 };
 </script>
-
-<style>
-.filter-modal-content {
+<style lang="scss" scoped>
+.filters-wrap {
+  padding: var(--space-normal);
+  border-radius: var(--border-radius-large);
  border: 1px solid var(--color-border);
-  border-radius: var(--space-half);
-  padding: var(--space-one);
-}
-.filter--attributes {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--space-one);
-}
-.filter--attribute_clearbtn {
-  font-size: var(--space-two);
-  margin-left: var(--space-one);
-  cursor: pointer;
-}
-.filter--attributes_select {
-  margin-bottom: var(--space-zero) !important;
+  background: var(--color-background-light);
+  margin-bottom: var(--space-normal);
 }

-.filter--values_select {
-  margin-bottom: var(--space-zero) !important;
-}
-
-.padding-right-small {
-  padding-right: var(--space-one);
-}
-.margin-right-small {
-  margin-right: var(--space-three-fourths);
-}
-.append-filter-btn {
-  width: 100%;
-  border: 1px solid var(--color-border);
-  border-radius: var(--space-one-fourths);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-woot);
-  font-size: var(--font-size-one-and-half);
-  padding: var(--space-one);
-  height: var(----space-medium);
-  cursor: pointer;
-}
 .filter-actions {
-  margin: var(--space-two) var(--space-zero) var(--space-one) var(--space-zero);
-}
-.filter--attributes_input {
-  margin-bottom: var(--space-zero) !important;
-}
-.filter--query_operator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  margin: var(--space-one) var(--space-zero);
-}
-.filter--query_operator_line {
-  position: absolute;
-  z-index: var(--z-index-low);
-  width: 100%;
-  border-bottom: 1px solid var(--color-border);
-}
-.filter--query_operator_container {
-  position: relative;
-  z-index: var(--z-index-twenty);
-  margin: var(--space-zero);
-}
-.filter--query_operator_select {
-  width: 100%;
-  margin-bottom: var(--space-zero) !important;
-  border: none;
-  padding: var(--space-zero) var(--space-three) var(--space-zero)
-    var(--space-two);
+  margin-top: var(--space-normal);
 }
 </style>
--- a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
@ -1,40 +1,32 @@
 <template>
  <div class="filters">
-    <div class="filter--attributes">
-      <select
-        v-model="attribute_key"
-        class="filter--attributes_select"
-        @change="resetFilter()"
-      >
-        <option
-          v-for="attribute in filterAttributes"
-          :key="attribute.key"
-          :value="attribute.key"
+    <div class="filter">
+      <div class="filter-inputs">
+        <select
+          v-model="attributeKey"
+          class="filter__question"
+          @change="resetFilter()"
        >
-          {{ $t(`FILTER.ATTRIBUTES.${attribute.attributeI18nKey}`) }}
-        </option>
-      </select>
-      <button class="filter--attribute_clearbtn" @click="removeFilter">
-        <i class="icon ion-close-circled" />
-      </button>
-    </div>
-    <div class="filter-values">
-      <div class="row">
-        <div
-          class="columns padding-right-small"
-          :class="showUserInput ? 'small-4' : 'small-12'"
-        >
-          <select v-model="filter_operator" class="filter--values_select">
-            <option
-              v-for="(operator, o) in operators"
-              :key="o"
-              :value="operator.value"
-            >
-              {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
-            </option>
-          </select>
-        </div>
-        <div v-if="showUserInput" class="small-8 columns">
+          <option
+            v-for="attribute in filterAttributes"
+            :key="attribute.key"
+            :value="attribute.key"
+          >
+            {{ $t(`FILTER.ATTRIBUTES.${attribute.attributeI18nKey}`) }}
+          </option>
+        </select>
+
+        <select v-model="filterOperator" class="filter__operator">
+          <option
+            v-for="(operator, o) in operators"
+            :key="o"
+            :value="operator.value"
+          >
+            {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
+          </option>
+        </select>
+
+        <div v-if="showUserInput" class="filter__answer--wrap">
          <div
            v-if="inputType === 'multi_select'"
            class="multiselect-wrap--small"
@ -73,27 +65,32 @@
            v-else
            v-model="values"
            type="text"
-            class="filter--attributes_input"
+            class="answer--text-input"
            placeholder="Enter value"
          />
-          <div v-if="v.values.$dirty && v.values.$error" class="filter-error">
-            {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
-          </div>
        </div>
+        <woot-button
+          icon="ion-close"
+          variant="clear"
+          color-scheme="secondary"
+          @click="removeFilter"
+        />
      </div>
+      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
+        {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+      </p>
    </div>
-    <div v-if="showQueryOperator" class="filter--query_operator">
-      <hr class="filter--query_operator_line" />
-      <div class="filter--query_operator_container">
-        <select v-model="query_operator" class="filter--query_operator_select">
-          <option value="and">
-            {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
-          </option>
-          <option value="or">
-            {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
-          </option>
-        </select>
-      </div>
+
+    <div v-if="showQueryOperator" class="filter__join-operator">
+      <hr class="operator__line" />
+      <select v-model="query_operator" class="operator__select">
+        <option value="and">
+          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
+        </option>
+        <option value="or">
+          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
+        </option>
+      </select>
    </div>
  </div>
 </template>
@ -135,7 +132,7 @@ export default {
    },
  },
  computed: {
-    attribute_key: {
+    attributeKey: {
      get() {
        if (!this.value) return null;
        return this.value.attribute_key;
@ -145,7 +142,7 @@ export default {
        this.$emit('input', { ...payload, attribute_key: value });
      },
    },
-    filter_operator: {
+    filterOperator: {
      get() {
        if (!this.value) return null;
        return this.value.filter_operator;
@ -186,12 +183,75 @@ export default {
  },
 };
 </script>
-
-<style scoped>
-.multiselect {
-  margin-bottom: var(--space-zero) !important;
+<style lang="scss" scoped>
+.filter {
+  background: var(--color-background);
+  padding: var(--space-small);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-medium);
 }
+
+.filter-inputs {
+  display: flex;
+}
+
 .filter-error {
  color: var(--r-500);
+  display: block;
+  margin: var(--space-smaller) 0;
+}
+
+.filter__question,
+.filter__operator {
+  margin-bottom: var(--space-zero);
+  margin-right: var(--space-smaller);
+}
+
+.filter__question {
+  max-width: 30%;
+}
+
+.filter__operator {
+  max-width: 20%;
+}
+
+.filter__answer--wrap {
+  margin-right: var(--space-smaller);
+  flex-grow: 1;
+}
+.filter__answer {
+  &.answer--text-input {
+    margin-bottom: var(--space-zero);
+  }
+}
+
+.filter__join-operator-wrap {
+  position: relative;
+  z-index: var(--z-index-twenty);
+  margin: var(--space-zero);
+}
+
+.filter__join-operator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin: var(--space-one) var(--space-zero);
+
+  .operator__line {
+    position: absolute;
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .operator__select {
+    position: relative;
+    width: auto;
+    margin-bottom: var(--space-zero) !important;
+  }
+}
+
+.multiselect {
+  margin-bottom: var(--space-zero);
 }
 </style>
--- a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
@ -1,10 +1,10 @@
 {
  "FILTER": {
    "TITLE": "Filter Conversations",
-    "SUBTITLE": "Add filters below and hit 'Submit' to filter conversations.",
+    "SUBTITLE": "Add filters below and hit 'Apply filters' to filter conversations.",
    "ADD_NEW_FILTER": "Add Filter",
    "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
-    "SUBMIT_BUTTON_LABEL": "Submit",
+    "SUBMIT_BUTTON_LABEL": "Apply filters",
    "CANCEL_BUTTON_LABEL": "Cancel",
    "CLEAR_BUTTON_LABEL": "Clear Filters",
    "EMPTY_VALUE_ERROR": "Value is required",
--- a/app/javascript/shared/assets/stylesheets/font-size.scss
+++ b/app/javascript/shared/assets/stylesheets/font-size.scss
@ -3,7 +3,6 @@
  --font-size-micro: 1rem;
  --font-size-mini: 1.2rem;
  --font-size-small: 1.4rem;
-  --font-size-one-and-half: 1.5rem;
  --font-size-default: 1.6rem;
  --font-size-medium: 1.8rem;
  --font-size-two: 2rem;
--- a/app/javascript/shared/assets/stylesheets/spacing.scss
+++ b/app/javascript/shared/assets/stylesheets/spacing.scss
@ -2,10 +2,8 @@
  // spaces
  --space-zero: 0;
  --space-micro: 0.2rem;
-  --space-one-fourths: 0.25rem;
  --space-smaller: 0.4rem;
  --space-half: 0.5rem;
-  --space-three-fourths: 0.75rem;
  --space-small: 0.8rem;
  --space-one: 1rem;
  --space-slab: 1.2rem;