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-wrap: nowrap;
flex-direction: row; flex-direction: row;
flex: 1 0 auto; } 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 { .wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters {
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%); flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
display: flex; display: flex;
@ -64,7 +82,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 80%; width: 80%;
margin: 5% 12%; } margin: 5% 8%; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-text { .wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-text {
margin: 4px 0; margin: 4px 0;
width: 35%; 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 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 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 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 * @return string The HTML div to be used for rendering the items list vue component
*/ */
public function search_shortcode($args) { public function search_shortcode($args) {
@ -617,7 +620,10 @@ class Theme_Helper {
'data-start-with-filters-hidden' => true, 'data-start-with-filters-hidden' => true,
'data-filters-as-modal' => true, 'data-filters-as-modal' => true,
'data-show-inline-view-mode-options' => 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> </h3>
<button <button
v-if="!isLoadingFilters && v-if="!hideCollapseAllFiltersButton &&
((filters.length >= 0 && !isLoadingFilters && (
isRepositoryLevel) || filters.length > 0)" ( filters.length >= 0 && isRepositoryLevel ) ||
filters.length > 0
)"
aria-controls="filters-items-list" aria-controls="filters-items-list"
:aria-expanded="!collapseAll" :aria-expanded="!collapseAll"
class="link-style collapse-all" class="link-style collapse-all"
@ -33,7 +35,7 @@
</span> </span>
</button> </button>
<br> <br v-if="!hideCollapseAllFiltersButton">
<filters-tags-list <filters-tags-list
v-if="filtersAsModal && hasFiltered" v-if="filtersAsModal && hasFiltered"
@ -293,7 +295,8 @@
filtersAsModal: Boolean, filtersAsModal: Boolean,
hasFiltered: Boolean, hasFiltered: Boolean,
isLoadingItems: Boolean, isLoadingItems: Boolean,
isMobileScreen: false isMobileScreen: false,
hideCollapseAllFiltersButton: false
}, },
emits: [ emits: [
'update-is-loading-items-state' 'update-is-loading-items-state'

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

@ -220,6 +220,10 @@
"displayFiltersHorizontally": { "displayFiltersHorizontally": {
"type": "boolean", "type": "boolean",
"default": false "default": false
},
"hideColllapseAllFiltersButton": {
"type": "boolean",
"default": false
} }
}, },
"supports": { "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, collectionOrderByMeta,
collectionOrderByType, collectionOrderByType,
shouldNotHideFiltersOnMobile, shouldNotHideFiltersOnMobile,
displayFiltersHorizontally displayFiltersHorizontally,
hideColllapseAllFiltersButton
} = attributes; } = attributes;
// Gets blocks props from hook // Gets blocks props from hook
@ -502,7 +503,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
/> />
<ToggleControl <ToggleControl
label={__('Should not hide filters even on mobile', 'tainacan')} 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 } checked={ shouldNotHideFiltersOnMobile && !filtersAsModal }
onChange={ ( isChecked ) => { onChange={ ( isChecked ) => {
shouldNotHideFiltersOnMobile = 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>
<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 !hideExposersButton ? <span className="fake-button"><div className="fake-icon"></div><div className="fake-text"></div></span> : null
} }
</div> </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 } { !showFiltersButtonInsideSearchControl & !hideHideFiltersButton && !hideFilters ? <span className="fake-hide-button"><div className="fake-icon"></div></span> : null }
{ {
!hideFilters && !filtersAsModal && !startWithFiltersHidden ? !hideFilters && !filtersAsModal && !startWithFiltersHidden ?
@ -897,6 +907,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) {
}} }}
className="filters"> className="filters">
<div className="fake-filters-heading"></div> <div className="fake-filters-heading"></div>
{ !hideColllapseAllFiltersButton ? <span className="fake-link"></span> : null }
{ Array(2).fill().map( () => { { Array(2).fill().map( () => {
return <div className="fake-filter"> return <div className="fake-filter">
<span className="fake-text"></span> <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-direction: row;
flex: 1 0 auto; 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 { .filters {
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%); flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
display: flex; display: flex;
@ -66,7 +93,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 80%; width: 80%;
margin: 5% 12%; margin: 5% 8%;
.fake-text { .fake-text {
margin: 4px 0; margin: 4px 0;
width: 35%; width: 35%;

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

@ -170,12 +170,13 @@
.items-list-area { .items-list-area {
max-width: 100%; max-width: 100%;
} }
#filters-modal.horizontal-filters:not(.modal) { #filters-modal.horizontal-filters {
overflow: visible; overflow: visible;
.modal-content, .modal-content,
.filters-components-list { .filters-components-list {
overflow: visible; overflow: visible;
width: 100%;
} }
.filters-components-list { .filters-components-list {
@ -186,14 +187,20 @@
vertical-align: text-top; vertical-align: text-top;
} }
.filter-item-forms { .filter-item-forms {
width: 200px; width: 100%;
min-width: 200px; min-width: 272px;
break-inside: avoid; break-inside: avoid;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
padding-right: 1.5em; padding-right: 2.25em;
margin-bottom: 12px; 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')), showFullscreenWithViewModes: isParameterTrue(getDataAttribute(blockElement, 'show-fullscreen-with-view-modes')),
shouldNotHideFiltersOnMobile: isParameterTrue(getDataAttribute(blockElement, 'should-not-hide-filters-on-mobile')), shouldNotHideFiltersOnMobile: isParameterTrue(getDataAttribute(blockElement, 'should-not-hide-filters-on-mobile')),
displayFiltersHorizontally: isParameterTrue(getDataAttribute(blockElement, 'display-filters-horizontally')), displayFiltersHorizontally: isParameterTrue(getDataAttribute(blockElement, 'display-filters-horizontally')),
hideCollapseAllFiltersButton: isParameterTrue(getDataAttribute(blockElement, 'hide-collapse-all-filters-button')),
}), }),
}); });

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

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