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

Creates option to hide filter collapses.

This commit is contained in:
mateuswetah 2024-06-14 12:29:58 -03:00
parent 8d6475ef04
commit 9c8789b292
7 changed files with 86 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/classes/theme-helper/class-tainacan-theme-helper.php
View File

@ -514,7 +514,7 @@ class Theme_Helper {
* @type string[] $enabled_view_modes The list os enable view modes to display
* @type bool $should_not_hide_filters_on_mobile Disables the default behavior of automatically collapsing the filters inside a modal when in small screen sizes
* @type bool $display_filters_horizontally Display the filters in an horizontal panel above search control instead of a sidebar
* @type bool $hide_collapse_all_filters_button Hides the button that collapses all filters inside the filters panel
* @type bool $hide_filter_collapses Hides the button that collapses all filters inside the filters panel
* @return string The HTML div to be used for rendering the items list vue component
*/
public function search_shortcode($args) {
@ -623,7 +623,7 @@ class Theme_Helper {
'data-show-fullscreen-with-view-modes' => true,
'data-should-not-hide-filters-on-mobile' => true,
'data-display-filters-horizontally' => true,
'data-hide-collapse-all-filters-button' => true
'data-hide-filter-collapses' => true
]
];

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

@ -6,7 +6,7 @@
@touchstart="setFilterFocus(filter.id)"
@mousedown="setFilterFocus(filter.id)">
<b-collapse
v-if="displayFilter"
v-if="!hideCollapses && displayFilter"
v-model="singleCollapseOpen"
class="show"
animation="filter-item">
@ -56,7 +56,7 @@
</div>
</b-collapse>
<div
v-if="beginWithFilterCollapsed && !displayFilter"
v-if="!hideCollapses && beginWithFilterCollapsed && !displayFilter"
class="collapse show disabled-filter">
<div class="collapse-trigger">
<button
@ -89,6 +89,38 @@
</button>
</div>
</div>
<template v-if="hideCollapses">
<label
:for="'filter-input-id-' + filter.id"
class="label">
<span
class="collapse-label">
{{ filter.name }}
</span>
<help-button
v-if="filter.description_bellow_name !== 'yes' && filter.description"
:title="filter.name"
:message="filter.description" />
</label>
<div :id="'filter-input-id-' + filter.id">
<p
v-if="filter.description_bellow_name === 'yes' && filter.description"
class="filter-description-help-info">
{{ filter.description }}
</p>
<component
:is="filter.filter_type_object ? filter.filter_type_object.component : null"
:filter="filter"
:query="query"
:is-using-elastic-search="isUsingElasticSearch"
:is-repository-level="isRepositoryLevel"
:is-loading-items="isLoadingItems"
:current-collection-id="$eventBusSearch.collectionId"
:filters-as-modal="filtersAsModal"
@input="onInput"
@update-parent-collapse="onFilterUpdateParentCollapse" />
</div>
</template>
</b-field>
</template>
@ -119,7 +151,8 @@
expandAll: true,
isLoadingItems: true,
filtersAsModal: Boolean,
isMobileScreen: false
isMobileScreen: false,
hideCollapses: false
},
data() {
return {
@ -137,7 +170,7 @@
watch: {
expandAll() {
this.singleCollapseOpen = this.expandAll;
if (this.expandAll)
if ( this.expandAll )
this.displayFilter = true;
},
beginWithFilterCollapsed: {
@ -212,7 +245,29 @@
.column {
padding: 0.75em 1px 0.75em 0 !important;
}
& > .label {
display: block !important;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
line-height: 1.4em !important;
border: none;
background-color: transparent;
color: var(--tainacan-label-color);
text-align: left;
outline: none;
padding: 0 !important;
margin: 0 0 8px 0;
.tainacan-help-tooltip-trigger {
font-size: 1.188em;
.icon {
margin-right: 0px;
margin-left: 6px;
}
}
}
.collapse {
.label {
display: inline-flex;

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

@ -16,10 +16,8 @@
</h3>
<button
v-if="!hideCollapseAllFiltersButton &&
!isLoadingFilters && (
( filters.length >= 0 && isRepositoryLevel ) ||
filters.length > 0
v-if="!hideFilterCollapses && !isLoadingFilters && (
( filters.length >= 0 && isRepositoryLevel ) || filters.length > 0
)"
aria-controls="filters-items-list"
:aria-expanded="!collapseAll"
@ -35,7 +33,7 @@
</span>
</button>
<br v-if="!hideCollapseAllFiltersButton">
<br v-if="!hideFilterCollapses">
<filters-tags-list
v-if="filtersAsModal && hasFiltered"
@ -88,7 +86,8 @@
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
:is-mobile-screen="isMobileScreen"
:hide-collapses="hideFilterCollapses" />
</template>
<hr v-if="taxonomyFilter.length > 1">
</div>
@ -131,7 +130,8 @@
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
:is-mobile-screen="isMobileScreen"
:hide-collapses="hideFilterCollapses" />
</template>
<hr v-if="taxonomyFilter.length > 1">
</div>
@ -178,7 +178,8 @@
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
:is-mobile-screen="isMobileScreen"
:hide-collapses="hideFilterCollapses" />
</template>
<hr v-if="repositoryCollectionFilters.length > 1">
</div>
@ -221,7 +222,8 @@
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
:is-mobile-screen="isMobileScreen"
:hide-collapses="hideFilterCollapses" />
</template>
<hr v-if="repositoryCollectionFilters.length > 1">
</div>
@ -239,7 +241,8 @@
:expand-all="!collapseAll"
:is-repository-level="isRepositoryLevel"
:filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
:is-mobile-screen="isMobileScreen"
:hide-collapses="hideFilterCollapses" />
</template>
</div>
<section
@ -296,7 +299,7 @@
hasFiltered: Boolean,
isLoadingItems: Boolean,
isMobileScreen: false,
hideCollapseAllFiltersButton: false
hideFilterCollapses: false
},
emits: [
'update-is-loading-items-state'

2
src/views/gutenberg-blocks/blocks/faceted-search/block.json
View File

@ -221,7 +221,7 @@
"type": "boolean",
"default": false
},
"hideColllapseAllFiltersButton": {
"hideFilterColllapses": {
"type": "boolean",
"default": false
},

12
src/views/gutenberg-blocks/blocks/faceted-search/edit.js
View File

@ -79,7 +79,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
collectionOrderByType,
shouldNotHideFiltersOnMobile,
displayFiltersHorizontally,
hideColllapseAllFiltersButton,
hideFilterColllapses,
filtersInlineWidth
} = attributes;
@ -532,11 +532,11 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
}
/>
<ToggleControl
label={__('Hide "Collapse all" filters button', 'tainacan')}
checked={ hideColllapseAllFiltersButton }
label={__('Hide filter collapses button', 'tainacan')}
checked={ hideFilterColllapses }
onChange={ ( isChecked ) => {
hideColllapseAllFiltersButton = isChecked;
setAttributes({ hideColllapseAllFiltersButton: isChecked });
hideFilterColllapses = isChecked;
setAttributes({ hideFilterColllapses: isChecked });
}
}
/>
@ -920,7 +920,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
}}
className="filters">
<div className="fake-filters-heading"></div>
{ !hideColllapseAllFiltersButton ? <span className="fake-link"></span> : null }
{ !hideFilterColllapses ? <span className="fake-link"></span> : null }
{ Array(2).fill().map( () => {
return <div className="fake-filter">
<span className="fake-text"></span>

2
src/views/gutenberg-blocks/blocks/faceted-search/theme.js
View File

@ -134,7 +134,7 @@ export default (element) => {
showFullscreenWithViewModes: isParameterTrue(getDataAttribute(blockElement, 'show-fullscreen-with-view-modes')),
shouldNotHideFiltersOnMobile: isParameterTrue(getDataAttribute(blockElement, 'should-not-hide-filters-on-mobile')),
displayFiltersHorizontally: isParameterTrue(getDataAttribute(blockElement, 'display-filters-horizontally')),
hideCollapseAllFiltersButton: isParameterTrue(getDataAttribute(blockElement, 'hide-collapse-all-filters-button')),
hideFilterCollapses: isParameterTrue(getDataAttribute(blockElement, 'hide-filter-collapses')),
}),
});

6
src/views/gutenberg-blocks/blocks/faceted-search/theme.vue
View File

@ -438,7 +438,7 @@
:filters-as-modal="false"
:has-filtered="hasFiltered"
:is-mobile-screen="isMobileScreen"
:hide-collapse-all-filters-button="hideCollapseAllFiltersButton"
:hide-filter-collapses="hideFilterCollapses"
@update-is-loading-items-state="(state) => isLoadingItems = state" />
<!-- JS-side hook for extra form content -->
@ -483,7 +483,7 @@
:filters-as-modal="filtersAsModal"
:has-filtered="hasFiltered"
:is-mobile-screen="isMobileScreen"
:hide-collapse-all-filters-button="hideCollapseAllFiltersButton"
:hide-filter-collapses="hideFilterCollapses"
@update-is-loading-items-state="(state) => isLoadingItems = state" />
<!-- JS-side hook for extra form content -->
@ -786,7 +786,7 @@
showFullscreenWithViewModes: false,
shouldNotHideFiltersOnMobile: false,
displayFiltersHorizontally: false,
hideCollapseAllFiltersButton: false,
hideFilterCollapses: false,
},
data() {
return {