chore: Update design for filters (#3423)

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);
+}

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;
   }
 
-
 }
 
 

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);
     }

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"

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 = {

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">
+          <woot-button
-            <i class="icon ion-plus-circled margin-right-small" />
+            icon="ion-plus"
-            <span>{{ $t('FILTER.ADD_NEW_FILTER') }}</span>
+            color-scheme="success"
-          </button>
+            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 lang="scss" scoped>
-<style>
+.filters-wrap {
-.filter-modal-content {
+  padding: var(--space-normal);
+  border-radius: var(--border-radius-large);
   border: 1px solid var(--color-border);
-  border-radius: var(--space-half);
+  background: var(--color-background-light);
-  padding: var(--space-one);
+  margin-bottom: var(--space-normal);
-}
-.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;
 }
 
-.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);
+  margin-top: var(--space-normal);
-}
-.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);
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="filters">
-    <div class="filter--attributes">
+    <div class="filter">
+      <div class="filter-inputs">
         <select
-        v-model="attribute_key"
+          v-model="attributeKey"
-        class="filter--attributes_select"
+          class="filter__question"
           @change="resetFilter()"
         >
           <option
@@ -14,17 +15,8 @@
             {{ $t(`FILTER.ATTRIBUTES.${attribute.attributeI18nKey}`) }}
           </option>
         </select>
-      <button class="filter--attribute_clearbtn" @click="removeFilter">
+
-        <i class="icon ion-close-circled" />
+        <select v-model="filterOperator" class="filter__operator">
-      </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"
@@ -33,8 +25,8 @@
             {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
           </option>
         </select>
-        </div>
+
-        <div v-if="showUserInput" class="small-8 columns">
+        <div v-if="showUserInput" class="filter__answer--wrap">
           <div
             v-if="inputType === 'multi_select'"
             class="multiselect-wrap--small"
@@ -73,19 +65,25 @@
             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">
+        </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>
+
-      </div>
+    <div v-if="showQueryOperator" class="filter__join-operator">
-    </div>
+      <hr class="operator__line" />
-    <div v-if="showQueryOperator" class="filter--query_operator">
+      <select v-model="query_operator" class="operator__select">
-      <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>
@@ -95,7 +93,6 @@
       </select>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
@@ -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 lang="scss" scoped>
-<style scoped>
+.filter {
-.multiselect {
+  background: var(--color-background);
-  margin-bottom: var(--space-zero) !important;
+  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>

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",

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;

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;