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

Add option to hide the "collapse all" button in filters panel. #893.

This commit is contained in:
mateuswetah 2024-06-11 22:05:00 -03:00
parent fa0f35fa5c
commit 007a358a83
10 changed files with 132 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/assets/css/tainacan-gutenberg-block-faceted-search.css
View File

@ -55,6 +55,24 @@
flex-wrap: nowrap;
flex-direction: row;
flex: 1 0 auto; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters {
flex-direction: column; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters .filters {
flex-direction: row;
flex: 0 1 100%;
flex-wrap: wrap;
padding: 18px 12px 6px 12px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters .filters .fake-filters-heading {
margin-right: 90%;
top: -0.5em;
left: 0.5em; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters .filters .fake-filters-heading + .fake-link {
margin-right: 95%;
margin-left: 12px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control.horizontal-filters .filters .fake-filter {
margin: 6px 12px;
display: inline-flex;
width: 16.666%; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters {
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
display: flex;
@ -64,7 +82,7 @@
display: flex;
flex-direction: column;
width: 80%;
margin: 5% 12%; }
margin: 5% 8%; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-text {
margin: 4px 0;
width: 35%;

2
src/assets/css/tainacan-gutenberg-block-faceted-search.css.map
View File

File diff suppressed because one or more lines are too long

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

@ -512,6 +512,9 @@ class Theme_Helper {
* @type string $default_view_mode The default view mode
* @type bool $is_forced_view_mode Ignores user prefs to always render the choosen default view mode
* @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
* @return string The HTML div to be used for rendering the items list vue component
*/
public function search_shortcode($args) {
@ -617,7 +620,10 @@ class Theme_Helper {
'data-start-with-filters-hidden' => true,
'data-filters-as-modal' => true,
'data-show-inline-view-mode-options' => true,
'data-show-fullscreen-with-view-modes' => true
'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
]
];

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

@ -16,9 +16,11 @@
</h3>
<button
v-if="!isLoadingFilters &&
((filters.length >= 0 &&
isRepositoryLevel) || filters.length > 0)"
v-if="!hideCollapseAllFiltersButton &&
!isLoadingFilters && (
( filters.length >= 0 && isRepositoryLevel ) ||
filters.length > 0
)"
aria-controls="filters-items-list"
:aria-expanded="!collapseAll"
class="link-style collapse-all"
@ -33,7 +35,7 @@
</span>
</button>
<br>
<br v-if="!hideCollapseAllFiltersButton">
<filters-tags-list
v-if="filtersAsModal && hasFiltered"
@ -293,7 +295,8 @@
filtersAsModal: Boolean,
hasFiltered: Boolean,
isLoadingItems: Boolean,
isMobileScreen: false
isMobileScreen: false,
hideCollapseAllFiltersButton: false
},
emits: [
'update-is-loading-items-state'

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

@ -220,6 +220,10 @@
"displayFiltersHorizontally": {
"type": "boolean",
"default": false
},
"hideColllapseAllFiltersButton": {
"type": "boolean",
"default": false
}
},
"supports": {

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

@ -78,7 +78,8 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
collectionOrderByMeta,
collectionOrderByType,
shouldNotHideFiltersOnMobile,
displayFiltersHorizontally
displayFiltersHorizontally,
hideColllapseAllFiltersButton
} = attributes;
// Gets blocks props from hook
@ -502,7 +503,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
/>
<ToggleControl
label={__('Should not hide filters even on mobile', 'tainacan')}
help={ shouldNotHideFiltersOnMobile || shouldNotHideFiltersOnMobile === undefined ? __('Toggle to keep filters area visible even on small screen sizes', 'tainacan') : __('Automatically hide filters area on small screen sizes inside a modal', 'tainacan') }
help={ shouldNotHideFiltersOnMobile || shouldNotHideFiltersOnMobile === undefined ? __('Toggle to keep filters area visible even on small screen sizes.', 'tainacan') : __('Automatically hide filters area on small screen sizes inside a modal', 'tainacan') }
checked={ shouldNotHideFiltersOnMobile && !filtersAsModal }
onChange={ ( isChecked ) => {
shouldNotHideFiltersOnMobile = isChecked;
@ -529,6 +530,15 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
}
}
/>
<ToggleControl
label={__('Hide "Collapse all" filters button', 'tainacan')}
checked={ hideColllapseAllFiltersButton }
onChange={ ( isChecked ) => {
hideColllapseAllFiltersButton = isChecked;
setAttributes({ hideColllapseAllFiltersButton: isChecked });
}
}
/>
</PanelBody>
<PanelBody
@ -887,7 +897,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
!hideExposersButton ? <span className="fake-button"><div className="fake-icon"></div><div className="fake-text"></div></span> : null
}
</div>
<div className="below-search-control">
<div className={ 'below-search-control' + (displayFiltersHorizontally ? ' horizontal-filters' : '') }>
{ !showFiltersButtonInsideSearchControl & !hideHideFiltersButton && !hideFilters ? <span className="fake-hide-button"><div className="fake-icon"></div></span> : null }
{
!hideFilters && !filtersAsModal && !startWithFiltersHidden ?
@ -897,6 +907,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
}}
className="filters">
<div className="fake-filters-heading"></div>
{ !hideColllapseAllFiltersButton ? <span className="fake-link"></span> : null }
{ Array(2).fill().map( () => {
return <div className="fake-filter">
<span className="fake-text"></span>

30
src/views/gutenberg-blocks/blocks/faceted-search/style.scss
View File

@ -56,6 +56,33 @@
flex-direction: row;
flex: 1 0 auto;
&.horizontal-filters {
flex-direction: column;
.filters {
flex-direction: row;
flex: 0 1 100%;
flex-wrap: wrap;
padding: 18px 12px 6px 12px;
.fake-filters-heading {
margin-right: 90%;
top: -0.5em;
left: 0.5em;
}
.fake-filters-heading + .fake-link {
margin-right: 95%;
margin-left: 12px;
}
.fake-filter {
margin: 6px 12px;
display: inline-flex;
width: 16.666%;
}
}
}
.filters {
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
display: flex;
@ -66,7 +93,8 @@
display: flex;
flex-direction: column;
width: 80%;
margin: 5% 12%;
margin: 5% 8%;
.fake-text {
margin: 4px 0;
width: 35%;

15
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_layout.scss
View File

@ -170,12 +170,13 @@
.items-list-area {
max-width: 100%;
}
#filters-modal.horizontal-filters:not(.modal) {
#filters-modal.horizontal-filters {
overflow: visible;
.modal-content,
.filters-components-list {
overflow: visible;
width: 100%;
}
.filters-components-list {
@ -186,14 +187,20 @@
vertical-align: text-top;
}
.filter-item-forms {
width: 200px;
min-width: 200px;
width: 100%;
min-width: 272px;
break-inside: avoid;
display: inline-block;
vertical-align: text-top;
padding-right: 1.5em;
padding-right: 2.25em;
margin-bottom: 12px;
}
@media screen and (min-width: 769px) {
.filter-item-forms {
width: 272px;
}
}
}
}
}

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

@ -133,6 +133,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')),
}),
});

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

@ -406,42 +406,43 @@
<!-- SIDEBAR WITH FILTERS -->
<template v-if="!hideFilters">
<template v-if="!filtersAsModal && shouldNotHideFiltersOnMobile">
<div
v-if="isFiltersModalActive"
id="filters-modal"
ref="filters-modal"
role="region"
:class="'tainacan-modal tainacan-form filters-menu' + (displayFiltersHorizontally ? ' horizontal-filters' : '')">
<div
v-if="!filtersAsModal && !shouldNotHideFiltersOnMobile && isFiltersModalActive"
id="filters-modal"
ref="filters-modal"
role="region"
:class="'tainacan-modal tainacan-form filters-menu' + (displayFiltersHorizontally ? ' horizontal-filters' : '')">
<div class="animation-content modal-content">
<div class="animation-content modal-content">
<!-- JS-side hook for extra form content -->
<div
v-if="hooks['filters_before']"
class="faceted-search-hook faceted-search-hook-filters-before"
v-html="hooks['filters_before']" />
<!-- JS-side hook for extra form content -->
<div
v-if="hooks['filters_before']"
class="faceted-search-hook faceted-search-hook-filters-before"
v-html="hooks['filters_before']" />
<filters-items-list
id="filters-items-list"
:is-loading-items="isLoadingItems"
:taxonomy="taxonomy"
:collection-id="collectionId + ''"
:is-repository-level="isRepositoryLevel"
:filters-as-modal="false"
:has-filtered="hasFiltered"
:is-mobile-screen="isMobileScreen"
:hide-collapse-all-filters-button="hideCollapseAllFiltersButton"
@update-is-loading-items-state="(state) => isLoadingItems = state" />
<filters-items-list
id="filters-items-list"
:is-loading-items="isLoadingItems"
:taxonomy="taxonomy"
:collection-id="collectionId + ''"
:is-repository-level="isRepositoryLevel"
:filters-as-modal="false"
:has-filtered="hasFiltered"
:is-mobile-screen="isMobileScreen"
@update-is-loading-items-state="(state) => isLoadingItems = state" />
<!-- JS-side hook for extra form content -->
<div
v-if="hooks['filters_after']"
class="faceted-search-hook faceted-search-hook-filters-after"
v-html="hooks['filters_after']" />
<!-- JS-side hook for extra form content -->
<div
v-if="hooks['filters_after']"
class="faceted-search-hook faceted-search-hook-filters-after"
v-html="hooks['filters_after']" />
</div>
</div>
</div>
</template>
<b-modal
v-else
id="filters-modal"
@ -475,6 +476,7 @@
:filters-as-modal="filtersAsModal"
:has-filtered="hasFiltered"
:is-mobile-screen="isMobileScreen"
:hide-collapse-all-filters-button="hideCollapseAllFiltersButton"
@update-is-loading-items-state="(state) => isLoadingItems = state" />
<!-- JS-side hook for extra form content -->
@ -776,7 +778,8 @@
showInlineViewModeOptions: false,
showFullscreenWithViewModes: false,
shouldNotHideFiltersOnMobile: false,
displayFiltersHorizontally: false
displayFiltersHorizontally: false,
hideCollapseAllFiltersButton: false,
},
data() {
return {
@ -1172,6 +1175,8 @@
if ( !this.hideFilters && !this.shouldNotHideFiltersOnMobile ) {
this.hideFiltersOnMobile();
window.addEventListener('resize', this.hideFiltersOnMobile);
} else {
this.isFiltersModalActive = !this.startWithFiltersHidden;
}
// Uses Intersection Observer o see if the top of the list is on screen and fix filters list position