Displays filter desription in a tooltip or bellow the name.
This commit is contained in:
mateuswetah
parent
5950929dfc
commit
6f1ad642b4
|
|
@ -20,7 +20,8 @@ class Filter extends Entity {
|
|||
$filter_type,
|
||||
$filter_type_options,
|
||||
$begin_with_filter_collapsed,
|
||||
$display_in_repository_level_lists;
|
||||
$display_in_repository_level_lists,
|
||||
$description_bellow_name;
|
||||
|
||||
static $post_type = 'tainacan-filter';
|
||||
public $enabled_for_collection = true;
|
||||
|
|
@ -195,7 +196,15 @@ class Filter extends Entity {
|
|||
public function get_display_in_repository_level_lists() {
|
||||
return $this->get_mapped_property('display_in_repository_level_lists');
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Return the filter description_bellow_name
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
function get_description_bellow_name() {
|
||||
return $this->get_mapped_property('description_bellow_name');
|
||||
}
|
||||
|
||||
/**
|
||||
* Define the filter name
|
||||
|
|
@ -301,6 +310,16 @@ class Filter extends Entity {
|
|||
$this->enabled_for_collection = $value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set filter description_bellow_name
|
||||
*
|
||||
* @param [string] $value If the description will be displayed below the name instead of inside a tooltip (yes/no)
|
||||
* @return void
|
||||
*/
|
||||
function set_description_bellow_name($value) {
|
||||
$this->set_mapped_property('description_bellow_name', $value);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* {@inheritdoc }
|
||||
|
|
|
|||
|
|
@ -118,6 +118,16 @@ class Filters extends Repository {
|
|||
'description' => __( 'The filter input placeholder. This is a simple message that will appear inside textual input and may indicate to the user what kind of information is expected.', 'tainacan' ),
|
||||
'default' => '',
|
||||
],
|
||||
'description_bellow_name' => [
|
||||
'map' => 'meta',
|
||||
'title' => __( 'Description below name', 'tainacan' ),
|
||||
'type' => 'string',
|
||||
'description' => __( 'Whether the filter description should be displayed below the input label instead of inside a tooltip.', 'tainacan' ),
|
||||
'on_error' => __( 'Please set the "Description below name" value as "yes" or "no"', 'tainacan' ),
|
||||
'validation' => v::stringType()->in( [ 'yes', 'no' ] ), // yes or no
|
||||
'enum' => [ 'yes', 'no' ],
|
||||
'default' => 'no'
|
||||
],
|
||||
] );
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,6 +49,27 @@
|
|||
@focus="clearErrors('description')" />
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
:addons="false"
|
||||
:label="$i18n.getHelperTitle('filters', 'description_bellow_name')"
|
||||
:type="formErrors['description_bellow_name'] != undefined ? 'is-danger' : ''"
|
||||
:message="formErrors['description_bellow_name'] != undefined ? formErrors['description_bellow_name'] : ''">
|
||||
|
||||
<b-switch
|
||||
v-model="form.description_bellow_name"
|
||||
size="is-small"
|
||||
true-value="yes"
|
||||
false-value="no"
|
||||
:native-value="form.description_bellow_name == 'yes' ? 'yes' : 'no'"
|
||||
name="description_bellow_name"
|
||||
@update:model-value="clearErrors('description_bellow_name')">
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('filters', 'description_bellow_name')"
|
||||
:message="$i18n.getHelperMessage('filters', 'description_bellow_name')"
|
||||
:extra-classes="isRepositoryLevel ? 'tainacan-repository-tooltip' : ''" />
|
||||
</b-switch>
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
v-if="form.filter_type_object.use_input_placeholder"
|
||||
:addons="false"
|
||||
|
|
@ -350,14 +371,16 @@ export default {
|
|||
if ((filter.filter_type_object && filter.filter_type_object.form_component) || filter.edit_form == '') {
|
||||
|
||||
for (let [key, value] of Object.entries(this.form)) {
|
||||
if (key === 'begin_with_filter_collapsed' || key === 'display_in_repository_level_lists')
|
||||
if (key === 'begin_with_filter_collapsed' || key === 'display_in_repository_level_lists' || key === 'description_bellow_name' )
|
||||
this.form[key] = (value == 'yes' || value == true) ? 'yes' : 'no';
|
||||
}
|
||||
if (this.form['begin_with_filter_collapsed'] === undefined)
|
||||
this.form['begin_with_filter_collapsed'] = 'no';
|
||||
if (this.form['display_in_repository_level_lists'] === undefined)
|
||||
this.form['display_in_repository_level_lists'] = 'no';
|
||||
|
||||
if (this.form['description_bellow_name'] === undefined)
|
||||
this.form['description_bellow_name'] = 'no';
|
||||
|
||||
this.updateFilter({ filterId: filter.id, index: this.index, options: this.form })
|
||||
.then(() => {
|
||||
this.form = {};
|
||||
|
|
@ -385,7 +408,7 @@ export default {
|
|||
let formObj = {};
|
||||
|
||||
for (let [key, value] of formData.entries()) {
|
||||
if (key === 'begin_with_filter_collapsed' || key === 'display_in_repository_level_lists')
|
||||
if (key === 'begin_with_filter_collapsed' || key === 'display_in_repository_level_lists' || key === 'description_bellow_name' )
|
||||
formObj[key] = (value == 'yes' || value == true) ? 'yes' : 'no';
|
||||
else
|
||||
formObj[key] = value;
|
||||
|
|
@ -394,6 +417,8 @@ export default {
|
|||
formObj['begin_with_filter_collapsed'] = 'no';
|
||||
if (formObj['display_in_repository_level_lists'] === undefined)
|
||||
formObj['display_in_repository_level_lists'] = 'no';
|
||||
if (formObj['description_bellow_name'] === undefined)
|
||||
formObj['description_bellow_name'] = 'no';
|
||||
|
||||
this.fillExtraFormData(formObj);
|
||||
this.updateFilter({ filterId: filter.id, index: this.index, options: formObj })
|
||||
|
|
|
|||
|
|
@ -13,17 +13,6 @@
|
|||
<template #trigger="props">
|
||||
<button
|
||||
:id="'filter-label-id-' + filter.id"
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
shown: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: filter.name,
|
||||
html: false,
|
||||
autoHide: false,
|
||||
placement: 'top-start',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
:for="'filter-input-id-' + filter.id"
|
||||
:aria-controls="'filter-input-id-' + filter.id"
|
||||
:aria-expanded="singleCollapseOpen"
|
||||
|
|
@ -37,10 +26,22 @@
|
|||
}"
|
||||
class="tainacan-icon tainacan-icon-1-25em" />
|
||||
</span>
|
||||
<span class="collapse-label">{{ filter.name }}</span>
|
||||
<span
|
||||
class="collapse-label">
|
||||
{{ filter.name }}
|
||||
</span>
|
||||
<help-button
|
||||
v-if="filter.description_bellow_name !== 'yes' && filter.description"
|
||||
:title="filter.name"
|
||||
:message="filter.description" />
|
||||
</button>
|
||||
</template>
|
||||
<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"
|
||||
|
|
@ -59,18 +60,6 @@
|
|||
class="collapse show disabled-filter">
|
||||
<div class="collapse-trigger">
|
||||
<button
|
||||
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
shown: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: $i18n.get('instruction_click_to_load_filter'),
|
||||
html: false,
|
||||
autoHide: false,
|
||||
placement: 'top-start',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
:for="'filter-input-id-' + filter.id"
|
||||
:aria-controls="'filter-input-id-' + filter.id"
|
||||
class="label"
|
||||
|
|
@ -78,7 +67,25 @@
|
|||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-arrowright tainacan-icon-1-25em" />
|
||||
</span>
|
||||
<span class="collapse-label">{{ filter.name }}</span>
|
||||
<span
|
||||
class="collapse-label"
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
shown: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: $i18n.get('instruction_click_to_load_filter'),
|
||||
html: false,
|
||||
autoHide: false,
|
||||
placement: 'top-start',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}">
|
||||
{{ filter.name }}
|
||||
</span>
|
||||
<help-button
|
||||
v-if="filter.description_bellow_name !== 'yes' && filter.description"
|
||||
:title="filter.name"
|
||||
:message="filter.description" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -218,6 +225,15 @@
|
|||
outline: none;
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
|
||||
.tainacan-help-tooltip-trigger {
|
||||
font-size: 1.188em;
|
||||
|
||||
.icon {
|
||||
margin-right: 0px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -227,6 +243,13 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-description-help-info {
|
||||
font-size: 0.75em;
|
||||
color: var(--tainacan-info-color);
|
||||
margin-top: -0.25em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
.taginput-container {
|
||||
border-radius: var(--tainacan-input-border-radius, 1px) !important;
|
||||
box-shadow: none !important;
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
getHelperTooltipContent() {
|
||||
return `<h5>` + this.title + `</h5>
|
||||
<p>` + ((this.message != '' && this.message != undefined) ? this.message : this.$i18n.get('info_no_description_provided')) + `</p>`;
|
||||
return ( this.title ? ( `<p style="font-weight: bold">` + this.title + `</p>` ) : '' ) +
|
||||
`<p>` + ((this.message != '' && this.message != undefined) ? this.message : this.$i18n.get('info_no_description_provided')) + `</p>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@ export default {
|
|||
|
||||
<style lang="scss">
|
||||
|
||||
.tainacan-help-tooltip-trigger>a .icon {
|
||||
.tainacan-help-tooltip-trigger > a .icon {
|
||||
i, i::before { font-size: 0.875em !important }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ import ThemeSearch from './theme.vue';
|
|||
|
||||
// Remaining imports
|
||||
import store from '../../../admin/js/store/store';
|
||||
import HelpButton from '../../../admin/components/other/help-button.vue';
|
||||
import routerTheme from './theme-search/js/theme-router.js';
|
||||
import eventBusSearch from '../../../admin/js/event-bus-search';
|
||||
import {
|
||||
|
|
@ -188,6 +189,7 @@ export default (element) => {
|
|||
VueItemsList.use(AxiosErrorHandlerPlugin);
|
||||
VueItemsList.use(ConsolePlugin, {visual: false});
|
||||
VueItemsList.use(AdminOptionsHelperPlugin, blockElement.dataset['options']);
|
||||
VueItemsList.component('help-button', HelpButton);
|
||||
|
||||
/* Registers Extra Vue Components passed to the window.tainacan_extra_components */
|
||||
if (typeof window.tainacan_extra_components != "undefined") {
|
||||
|
|
|
|||
Loading…
Reference in New Issue