From c23e2c23d4151a2879b33e5e74c808565246730f Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 24 Nov 2021 14:26:32 +0530
Subject: [PATCH] chore: Update design for filters (#3423)

---
 .../assets/scss/_foundation-custom.scss       |  10 +
 .../assets/scss/widgets/_buttons.scss         |   2 +-
 .../dashboard/assets/scss/widgets/_modal.scss |   6 +
 .../dashboard/components/ChatList.vue         |   1 +
 app/javascript/dashboard/components/Modal.vue |   7 +-
 .../ConversationAdvancedFilter.vue            |  94 ++--------
 .../conversation/components/FilterInput.vue   | 172 ++++++++++++------
 .../i18n/locale/en/advancedFilters.json       |   4 +-
 .../shared/assets/stylesheets/font-size.scss  |   1 -
 .../shared/assets/stylesheets/spacing.scss    |   2 -
 10 files changed, 161 insertions(+), 138 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
index 1cb529b97..83f5f9ea4 100644
--- 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);
+}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 1a72d51df..55c7bc3de 100644
--- 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;
   }
 
-
 }
 
 
diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
index f1a36a87c..7a9a83845 100644
--- 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);
     }
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 919105c2f..4a614cf3f 100644
--- 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"
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index ad423f918..463a2aeea 100644
--- 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 = {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index 288b7cc1f..4d2c39814 100644
--- 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>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
index a9f00fa57..d5a9cefd8 100644
--- 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>
diff --git a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
index 0d4a5fc4d..f2292db8e 100644
--- 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",
diff --git a/app/javascript/shared/assets/stylesheets/font-size.scss b/app/javascript/shared/assets/stylesheets/font-size.scss
index ed6447531..d431abb8c 100644
--- 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;
diff --git a/app/javascript/shared/assets/stylesheets/spacing.scss b/app/javascript/shared/assets/stylesheets/spacing.scss
index 313cb650b..9ce5fecb0 100644
--- 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;