Implement expand_multiple_rows attribute for Et2Select using Et2InvokerMixin

This commit is contained in:
ralf 2022-03-12 14:49:25 +02:00
parent 4cf4c5090a
commit 940e1b12c1
6 changed files with 91 additions and 15 deletions

View File

@ -14,11 +14,12 @@ import {cssImage} from "../Et2Widget/Et2Widget";
import {StaticOptions} from "./StaticOptions";
import {Et2widgetWithSelectMixin} from "./Et2WidgetWithSelectMixin";
import {SelectOption} from "./FindSelectOptions";
import {Et2InvokerMixin} from "../Et2Url/Et2InvokerMixin";
// export Et2WidgetWithSelect which is used as type in other modules
export class Et2WidgetWithSelect extends Et2widgetWithSelectMixin(LionSelect){};
export class Et2Select extends Et2WidgetWithSelect
export class Et2Select extends Et2InvokerMixin(Et2WidgetWithSelect)
{
static get styles()
{
@ -48,6 +49,15 @@ export class Et2Select extends Et2WidgetWithSelect
background-position-x: calc(100% - 8px);
text-indent: 5px;
}
::slotted([slot="suffix"]) {
font-size: 120% !important;
font-weight: bold;
color: gray !important;
position: relative;
left: -2px;
top: -2px;
}
select:hover {
box-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
@ -100,18 +110,59 @@ export class Et2Select extends Et2WidgetWithSelect
type: Boolean,
reflect: true,
},
/**
* Add a button to switch to multiple with given number of rows
*/
expand_multiple_rows: {
type: Number,
}
}
}
/**
* @deprecated use this.multiple = multi
*
* @param multi
*/
set_multiple(multi)
{
if (typeof multi !== 'boolean')
{
multi = multi && !(multi === 'false' || multi === '0');
}
this.multiple = multi;
}
set expand_multiple_rows(rows)
{
if (rows && !this.multiple)
{
this._invokerAction = () => {
this.multiple = true;
this._inputNode.size = parseInt(rows) || 4;
this._invokerNode.style.display = 'none';
}
this._invokerTitle = egw.lang('Switch to multiple');
this._invokerLabel = '+';
}
else
{
this._invokerLabel = undefined;
}
}
/**
* Method to check if invoker can be activated: not disabled, empty or invalid
*
* Overwritten to NOT disable if empty.
*
* @protected
* */
_toggleInvokerDisabled()
{
if (this._invokerNode)
{
const invokerNode = /** @type {HTMLElement & {disabled: boolean}} */ (this._invokerNode);
invokerNode.disabled = this.disabled || this.hasFeedbackFor.length > 0;
}
}
/** @param {import('@lion/core').PropertyValues } changedProperties */
updated(changedProperties : PropertyValues)
{
@ -134,6 +185,11 @@ export class Et2Select extends Et2WidgetWithSelect
if (changedProperties.has('multiple'))
{
this._inputNode.multiple = this.multiple;
// switch the expand button off
if (this.multiple)
{
this.expand_multiple_rows = 0;
}
}
}

View File

@ -46,7 +46,7 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
...super.styles,
colorsDefStyles,
css`
::slotted(input), input {
::slotted(input), input, ::slotted(select) {
background-color: transparent;
border: none !important;
}
@ -101,9 +101,7 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
/** @private */
this.__invokerId = this.__createUniqueIdForA11y();
// default for properties
this._invokerLabel = '⎆';
this._invokerTitle = 'Click to open';
this._invokerAction = () => alert('Invoked :)');
}
/** @private */
@ -124,6 +122,31 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
{
this._toggleInvokerDisabled();
}
if (name === '_invokerLabel' || name === '_invokerTitle')
{
this._toggleInvoker();
}
if (name === '_invokerAction')
{
if (oldValue) this._invokerNode?.removeEventListener('click', oldValue);
this._invokerNode?.addEventListener('click', this._invokerAction.bind(this), true);
}
}
/**
* (Un)Hide invoker, if no label or action defined
*
* @protected
* */
_toggleInvoker()
{
if (this._invokerNode)
{
this._invokerNode.style.display = !this._invokerLabel ? 'none' : 'inline-block';
this._invokerNode.innerHTML = this._invokerLabel || '';
this._invokerNode.title = this._invokerTitle || '';
}
}
/**
@ -145,6 +168,7 @@ export const Et2InvokerMixin = dedupeMixin((superclass) =>
{
super.firstUpdated(changedProperties);
this._toggleInvokerDisabled();
this._toggleInvoker();
}
/**

View File

@ -78,7 +78,6 @@
display: inline-block;
}
#calendar-sidebox_cat_id {
width: 90%;
margin-bottom: 10px;
}
#calendar-sidebox_cat_id ~ * {

View File

@ -62,4 +62,4 @@ if(view_change >= 0) {update.view = app.calendar.sidebox_changes_views[view_chan
}
</styles>
</template>
</overlay>
</overlay>

View File

@ -88,7 +88,6 @@
display: inline-block;
}
#calendar-sidebox_cat_id {
width: 90%;
margin-bottom: 10px;
}
#calendar-sidebox_cat_id ~ * {
@ -2802,4 +2801,4 @@ div#calendar-container div.calendar table tbody tr.rowhilite td {
background-image: url(../../../pixelegg/images/5_day_view.svg);
}
/* ########################################################################################
/* * Calendar END */
/* * Calendar END */

View File

@ -9,7 +9,6 @@
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Stefan Reinhardt <stefan.reinhardt@pixelegg.de>
* @package calendar
* @version $Id$
*/
@import (reference) "../../../pixelegg/less/definitions.less";
@ -1251,5 +1250,4 @@ div#calendar-container {
}
/* ########################################################################################
/* * Calendar END */
/* * Calendar END */