mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 16:44:07 +01:00
Implement expand_multiple_rows attribute for Et2Select using Et2InvokerMixin
This commit is contained in:
parent
4cf4c5090a
commit
940e1b12c1
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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();
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -78,7 +78,6 @@
|
||||
display: inline-block;
|
||||
}
|
||||
#calendar-sidebox_cat_id {
|
||||
width: 90%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#calendar-sidebox_cat_id ~ * {
|
||||
|
@ -62,4 +62,4 @@ if(view_change >= 0) {update.view = app.calendar.sidebox_changes_views[view_chan
|
||||
}
|
||||
</styles>
|
||||
</template>
|
||||
</overlay>
|
||||
</overlay>
|
@ -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 */
|
@ -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 */
|
Loading…
Reference in New Issue
Block a user