Add option to hide the "collapse all" button in filters panel. #893.
This commit is contained in:
parent
fa0f35fa5c
commit
007a358a83
|
@ -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%;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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
|
||||||
]
|
]
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -220,6 +220,10 @@
|
||||||
"displayFiltersHorizontally": {
|
"displayFiltersHorizontally": {
|
||||||
"type": "boolean",
|
"type": "boolean",
|
||||||
"default": false
|
"default": false
|
||||||
|
},
|
||||||
|
"hideColllapseAllFiltersButton": {
|
||||||
|
"type": "boolean",
|
||||||
|
"default": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"supports": {
|
"supports": {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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')),
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -406,9 +406,9 @@
|
||||||
|
|
||||||
<!-- 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"
|
||||||
|
@ -431,6 +431,7 @@
|
||||||
:filters-as-modal="false"
|
:filters-as-modal="false"
|
||||||
: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 -->
|
||||||
|
@ -441,7 +442,7 @@
|
||||||
|
|
||||||
</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
|
||||||
|
|
Loading…
Reference in New Issue