tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/admin/components/filter-types/tainacan-filter-item.vue
View File

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

10
src/views/admin/components/search/filters-items-list.vue
View File

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