KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: Update design for filters (#3423)

Browse source
This commit is contained in:
Nithin David Thomas 2021-11-24 14:26:32 +05:30 committed by GitHub
parent 330a97b5c5
commit c23e2c23d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 161 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/javascript/dashboard/assets/scss/_foundation-custom.scss
View file

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

2
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View file

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

6
app/javascript/dashboard/assets/scss/widgets/_modal.scss
View file

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

1
app/javascript/dashboard/components/ChatList.vue
View file

@ -81,6 +81,7 @@ l<template>
<woot-modal
:show.sync="showAdvancedFilters"
:on-close="onToggleAdvanceFiltersModal"
size="medium"
>
<conversation-advanced-filter
v-if="showAdvancedFilters"

7
app/javascript/dashboard/components/Modal.vue
View file

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

94
app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
View file

@ -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>

124
app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
View file

@ -1,9 +1,10 @@
<template>
<div class="filters">
<div class="filter--attributes">
<div class="filter">
<div class="filter-inputs">
<select
v-model="attribute_key"
class="filter--attributes_select"
v-model="attributeKey"
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" />
</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">
<select v-model="filterOperator" class="filter__operator">
<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>
<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">
<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>
@ -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 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>

4
app/javascript/dashboard/i18n/locale/en/advancedFilters.json
View file

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

1
app/javascript/shared/assets/stylesheets/font-size.scss
View file

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

2
app/javascript/shared/assets/stylesheets/spacing.scss
View file

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