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

Change how readonly multiple selects with rows=1 show more tags are hidden

Browse Source 
Showing total number of values is way easier than showing the number that aren't displayed
This commit is contained in:
nathan 2023-02-15 13:22:27 -07:00
parent c3e53c9d86
commit 524a9b3c7b
2 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -134,6 +134,24 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
display: none;
}
/* Style for tag count if rows=1 */
:host([readonly][multiple][rows]) .select__tags sl-tag {
position: absolute;
right: 0px;
top: 1px;
box-shadow: rgb(0 0 0/50%) -1.5ex 0px 1ex -1ex, rgb(0 0 0 / 0%) 0px 0px 0px 0px;
}
:host([readonly][multiple][rows]) .select__tags sl-tag::part(base) {
background-color: var(--sl-input-background-color);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
font-weight: bold;
min-width: 3em;
justify-content: center;
}
/* Show all rows on hover if rows=1 */
:host([readonly][multiple][rows]):hover .select__tags {
@ -305,18 +323,19 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
}
/**
* If maxTagsVisible=1 and rows=1 and multiple=true, when they put the mouse over the widget show all tags
* If 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 && this.value.length > 1)
if(this.rows == 1 && this.multiple == true && this.value.length > 1)
{
e.stopPropagation();
let distance = (-1 * parseInt(getComputedStyle(this).height)) - 1;
// Show all tags
this._oldMaxTagsVisible = this.maxTagsVisible;
this.maxTagsVisible = 0;
this._oldRows = this.rows;
this.rows = 10;
@ -360,7 +379,8 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
popup.parentNode.insertBefore(label, popup);
popup.remove();
}
this.maxTagsVisible = 1;
this.maxTagsVisible = this._oldMaxTagsVisible;
delete this._oldMaxTagsVisible;
this.rows = this._oldRows;
delete this._oldRows;
this.syncItemsFromValue();
@ -510,6 +530,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
{
overflow = this.displayTags.pop();
}
const checkedItems = Object.values(this._menuItems).filter(item => this.value.includes(item.value));
this.displayTags = checkedItems.map(item => this._createTagNode(item));
@ -519,6 +540,12 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
this.displayTags.push(overflow);
}
else if(this.multiple && this.rows == 1 && this.readonly && this.value.length > 1)
{
// Maybe more tags than we can show, show the count
this.displayTags.push(html`
<sl-tag class="multiple_tag" size=${this.size}>${this.value.length}</sl-tag> `);
}
}
_emptyLabelTemplate() : TemplateResult

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

@ -42,13 +42,13 @@
<et2-hbox disabled="!@toaddress" width="100%">
<et2-description value="To" class="firstColumnTitle"></et2-description>
<et2-select-email id="additionaltoaddress" readonly="true" multiple="true"
rows="1" maxTagsVisible="1"
rows="1"
onTagClick="app.mail.onclickCompose"></et2-select-email>
</et2-hbox>
<et2-hbox disabled="!@ccaddress" width="100%">
<et2-description value="Cc" class="firstColumnTitle"></et2-description>
<et2-select-email id="ccaddress" readonly="true" multiple="true"
rows="1" maxTagsVisible="1"
rows="1"
onTagClick="app.mail.onclickCompose"></et2-select-email>
</et2-hbox>
<et2-hbox width="100%" disabled="!@attachmentsBlock">