Displays collapsed filters in a different manner. #680.

This commit is contained in:
mateuswetah 2022-03-09 15:47:17 -03:00
parent 49348bd0ea
commit c726f3fa2c
2 changed files with 21 additions and 12 deletions

View File

@ -5,12 +5,12 @@
<b-collapse
v-if="displayFilter"
class="show"
:open.sync="open"
:open.sync="singleCollapseOpen"
animation="filter-item">
<button
:for="'filter-input-id-' + filter.id"
:aria-controls="'filter-input-id-' + filter.id"
:aria-expanded="open"
:aria-expanded="singleCollapseOpen"
v-tooltip="{
delay: {
shown: 500,
@ -53,7 +53,7 @@
</b-collapse>
<div
v-if="beginWithFilterCollapsed && !displayFilter"
class="collapse show">
class="collapse show disabled-filter">
<div class="collapse-trigger">
<button
@ -73,7 +73,7 @@
@click="displayFilter = true"
class="label">
<span class="icon">
<i class="tainacan-icon tainacan-icon-add tainacan-icon-1em"/>
<i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-1-25em"/>
</span>
<span class="collapse-label">{{ filter.name }}</span>
</button>
@ -89,14 +89,15 @@
filter: Object,
query: Object,
isRepositoryLevel: Boolean,
open: true,
expandAll: true,
isLoadingItems: true,
filtersAsModal: Boolean
},
data() {
return {
isUsingElasticSearch: tainacan_plugin.wp_elasticpress == "1" ? true : false,
displayFilter: false
displayFilter: false,
singleCollapseOpen: this.expandAll
}
},
computed: {
@ -105,6 +106,11 @@
}
},
watch: {
expandAll() {
this.singleCollapseOpen = this.expandAll;
if (this.expandAll)
this.displayFilter = true;
},
beginWithFilterCollapsed: {
handler() {
this.displayFilter = !this.beginWithFilterCollapsed;
@ -119,7 +125,7 @@
onFilterUpdateParentCollapse(open) {
const componentsThatShouldCollapseIfEmpty = ['tainacan-filter-taxonomy-checkbox', 'tainacan-filter-selectbox', 'tainacan-filter-checkbox'];
if (componentsThatShouldCollapseIfEmpty.includes(this.filter.filter_type_object.component))
this.open = open;
this.singleCollapseOpen = open;
}
}
}
@ -152,6 +158,9 @@
line-height: 1.4em;
}
}
.disabled-filter {
opacity: 0.75;
}
.collapse-content {
margin-top: 12px;
}

View File

@ -85,7 +85,7 @@
v-for="(filter, filterIndex) in taxonomyFilter"
:key="filterIndex"
:filter="filter"
:open="!collapseAll"
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/>
</template>
@ -133,7 +133,7 @@
v-for="(filter, filterIndex) in taxonomyFilter"
:key="filterIndex"
:filter="filter"
:open="!collapseAll"
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/>
</template>
@ -185,7 +185,7 @@
v-for="(filter, filterIndex) in repositoryCollectionFilter"
:key="filterIndex"
:filter="filter"
:open="!collapseAll"
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/>
</template>
@ -233,7 +233,7 @@
v-for="(filter, filterIndex) in repositoryCollectionFilter"
:key="filterIndex"
:filter="filter"
:open="!collapseAll"
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/>
</template>
@ -256,7 +256,7 @@
v-for="(filter, index) in filters"
:key="index"
:filter="filter"
:open="!collapseAll"
:expand-all="!collapseAll"
:is-repository-level="isRepositoryLevel"
:filters-as-modal="filtersAsModal"/>
</template>