extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-07 16:44:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

Limit mail to & cc addresses to 1 row, show all on hover.

Browse Source 
Use:
multiple="true" rows="1" maxTagsVisible="1"
to trigger show all on hover
This commit is contained in:
nathan 2023-02-06 14:48:55 -07:00
parent c48e2dccf1
commit cd980c78df
2 changed files with 92 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
api/js/etemplate/Et2Select/Et2Select.ts
View File

@ -114,7 +114,8 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
} }
:host([rows]) .select__tags { :host([rows]) .select__tags {
max-height: calc(var(--rows, 5) * 1.35rem); max-height: calc(var(--rows, 5) * 2.45em);
overflow: hidden;
} }
/* Keep overflow tag right-aligned. It's the only sl-tag. */ /* Keep overflow tag right-aligned. It's the only sl-tag. */
@ -132,6 +133,23 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
:host([readonly][multiple]) .select__icon { :host([readonly][multiple]) .select__icon {
display: none; display: none;
} }
/* Show all rows on hover if rows=1 */
:host([readonly][multiple][rows]):hover .select__tags {
width: -webkit-fill-available;
width: -moz-fill-available;
width: fill-available;
}
/* Style for the popup */
::part(popup) {
z-index: 1;
background: var(--sl-input-background-color);
padding: var(--sl-input-spacing-small);
padding-left: 0;
}
` `
]; ];
} }
@ -191,6 +209,8 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
this._triggerChange = this._triggerChange.bind(this); this._triggerChange = this._triggerChange.bind(this);
this._doResize = this._doResize.bind(this); this._doResize = this._doResize.bind(this);
this._handleMouseWheel = this._handleMouseWheel.bind(this); this._handleMouseWheel = this._handleMouseWheel.bind(this);
this._handleMouseEnter = this._handleMouseEnter.bind(this);
this._handleMouseLeave = this._handleMouseLeave.bind(this);
} }
connectedCallback() connectedCallback()
@ -204,6 +224,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
this.addEventListener("sl-after-hide", this.et2HandleBlur); this.addEventListener("sl-after-hide", this.et2HandleBlur);
this.addEventListener("mousewheel", this._handleMouseWheel); this.addEventListener("mousewheel", this._handleMouseWheel);
this.addEventListener("mouseenter", this._handleMouseEnter);
this.updateComplete.then(() => this.updateComplete.then(() =>
{ {
@ -263,6 +284,65 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
e.stopPropagation(); e.stopPropagation();
} }
/**
* If maxTagsVisible=1 and rows=1 and multiple=true, when they put the mouse over the widget show all tags
* @param {MouseEvent} e
* @private
*/
private _handleMouseEnter(e : MouseEvent)
{
if(this.maxTagsVisible == 1 && this.rows == 1 && this.multiple == true)
{
e.stopPropagation();
// Show all tags
this.maxTagsVisible = 0;
this._oldRows = this.rows;
this.rows = 10;
this.syncItemsFromValue();
// Bind to turn this all off
this.addEventListener("mouseleave", this._handleMouseLeave);
// Popup - this might get wiped out next render(), might not
this.updateComplete.then(() =>
{
let label = this.dropdown.querySelector(".select__label");
let popup = document.createElement("sl-popup");
popup.strategy = "fixed";
popup.active = true;
popup.sync = "width";
popup.classList.add("hover__popup");
label.parentNode.insertBefore(popup, label);
popup.appendChild(label);
label.style.width = "35ex";
});
}
}
/**
* If we're showing all rows because of _handleMouseEnter, reset when mouse leaves
* @param {MouseEvent} e
* @private
*/
private _handleMouseLeave(e : MouseEvent)
{
let popup = this.dropdown.querySelector("sl-popup");
if(popup)
{
// Popup still here. Remove it
let label = popup.firstChild;
popup.parentNode.insertBefore(label, popup);
popup.remove();
}
this.maxTagsVisible = 1;
this.rows = this._oldRows;
delete this._oldRows;
this.syncItemsFromValue();
this.removeEventListener("mouseleave", this._handleMouseLeave);
this.dropdown.requestUpdate();
}
/** /**
* Get the node where we're putting the selection options * Get the node where we're putting the selection options
* *
@ -497,15 +577,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
tag.addEventListener("dblclick", this._handleDoubleClick); tag.addEventListener("dblclick", this._handleDoubleClick);
tag.addEventListener("click", this.handleTagInteraction); tag.addEventListener("click", this.handleTagInteraction);
tag.addEventListener("keydown", this.handleTagInteraction); tag.addEventListener("keydown", this.handleTagInteraction);
tag.addEventListener("sl-remove", (event) => tag.addEventListener("sl-remove", (event : CustomEvent) => this.handleTagRemove(event, item));
{
event.stopPropagation();
if(!this.disabled)
{
item.checked = false;
this.syncValueFromItems();
}
});
} }
let image = this._createImage(item); let image = this._createImage(item);
if(image) if(image)

16
mail/templates/default/index.xet
View File

@ -40,13 +40,17 @@
<et2-description value="From" class="firstColumnTitle"></et2-description> <et2-description value="From" class="firstColumnTitle"></et2-description>
<et2-select-email id="additionalfromaddress" readonly="true" multiple="true" onclick="app.mail.onclickCompose"></et2-select-email> <et2-select-email id="additionalfromaddress" readonly="true" multiple="true" onclick="app.mail.onclickCompose"></et2-select-email>
</et2-hbox> </et2-hbox>
<et2-hbox disabled="!@toaddress" width="100%"> <et2-hbox disabled="!@toaddress" width="100%">
<et2-description value="To" class="firstColumnTitle"></et2-description> <et2-description value="To" class="firstColumnTitle"></et2-description>
<et2-select-email id="additionaltoaddress" readonly="true" multiple="true" onclick="app.mail.onclickCompose"></et2-select-email> <et2-select-email id="additionaltoaddress" readonly="true" multiple="true"
rows="1" maxTagsVisible="1"
onclick="app.mail.onclickCompose"></et2-select-email>
</et2-hbox> </et2-hbox>
<et2-hbox disabled="!@ccaddress" width="100%"> <et2-hbox disabled="!@ccaddress" width="100%">
<et2-description value="Cc" class="firstColumnTitle"></et2-description> <et2-description value="Cc" class="firstColumnTitle"></et2-description>
<et2-select-email id="ccaddress" readonly="true" multiple="true" onclick="app.mail.onclickCompose"></et2-select-email> <et2-select-email id="ccaddress" readonly="true" multiple="true"
rows="1" maxTagsVisible="1"
onclick="app.mail.onclickCompose"></et2-select-email>
</et2-hbox> </et2-hbox>
</et2-details> </et2-details>
<et2-date-time align="right" id="date" readonly="true"></et2-date-time> <et2-date-time align="right" id="date" readonly="true"></et2-date-time>