extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 06:30:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve styling & behaviour of Et2SelectEmail

Browse Source
This commit is contained in:
nathan 2023-09-14 14:30:20 -06:00
parent 01375295fe
commit 472ee73dda
5 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -145,13 +145,13 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
/* Hide dropdown trigger when multiple & readonly */ /* Hide dropdown trigger when multiple & readonly */
:host([readonly][multiple]) .select__expand-icon { :host([readonly][multiple])::part(expand-icon) {
display: none; display: none;
} }
/* Style for tag count if rows=1 */ /* Style for tag count if rows=1 */
:host([readonly][multiple][rows]) .select__tags sl-tag { :host([readonly][multiple][rows])::part(tags) {
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 1px; top: 1px;
@ -649,7 +649,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
?removable=${!readonly} ?removable=${!readonly}
?readonly=${readonly} ?readonly=${readonly}
?editable=${isEditable} ?editable=${isEditable}
value=${option.value} .value=${option.value.replaceAll("___", " ")}
@dblclick=${this._handleDoubleClick} @dblclick=${this._handleDoubleClick}
@click=${typeof this.onTagClick == "function" ? (e) => this.onTagClick(e, e.target) : nothing} @click=${typeof this.onTagClick == "function" ? (e) => this.onTagClick(e, e.target) : nothing}
> >

6
api/js/etemplate/Et2Select/SearchMixin.ts
View File

@ -11,9 +11,9 @@ import {css, CSSResultGroup, html, LitElement, nothing, render, TemplateResult}
import {cleanSelectOptions, SelectOption} from "./FindSelectOptions"; import {cleanSelectOptions, SelectOption} from "./FindSelectOptions";
import {Validator} from "@lion/form-core"; import {Validator} from "@lion/form-core";
import {Et2Tag} from "./Tag/Et2Tag"; import {Et2Tag} from "./Tag/Et2Tag";
import {SlMenuItem} from "@shoelace-style/shoelace";
import {StaticOptions} from "./StaticOptions"; import {StaticOptions} from "./StaticOptions";
import {dedupeMixin} from "@open-wc/dedupe-mixin"; import {dedupeMixin} from "@open-wc/dedupe-mixin";
import {SlOption} from "@shoelace-style/shoelace";
// Otherwise import gets stripped // Otherwise import gets stripped
let keep_import : Et2Tag; let keep_import : Et2Tag;
@ -543,9 +543,9 @@ export const Et2WithSearchMixin = dedupeMixin(<T extends Constructor<LitElement>
if(this.allowFreeEntries) if(this.allowFreeEntries)
{ {
this.freeEntries.forEach((item : SlMenuItem) => this.freeEntries.forEach((item : SlOption) =>
{ {
if(!options.some(i => i.value == item.value)) if(!options.some(i => i.value == item.value.replaceAll("___", " ")))
{ {
options.push({value: item.value, label: item.textContent, class: item.classList.toString()}); options.push({value: item.value, label: item.textContent, class: item.classList.toString()});
} }

13
api/js/etemplate/Et2Select/Select/Et2SelectEmail.ts
View File

@ -148,11 +148,6 @@ export class Et2SelectEmail extends Et2Select
} }
} }
connectedCallback()
{
super.connectedCallback();
}
protected _bindListeners() protected _bindListeners()
{ {
super._bindListeners(); super._bindListeners();
@ -207,6 +202,9 @@ export class Et2SelectEmail extends Et2Select
*/ */
_tagTemplate(option, index) _tagTemplate(option, index)
{ {
const readonly = (this.readonly || option && typeof (option.disabled) != "undefined" && option.disabled);
const isEditable = this.editModeEnabled && !readonly;
return html` return html`
<et2-email-tag <et2-email-tag
class=${classMap({ class=${classMap({
@ -215,7 +213,10 @@ export class Et2SelectEmail extends Et2Select
})} })}
?.fullEmail=${this.fullEmail} ?.fullEmail=${this.fullEmail}
?.onlyEmail=${this.onlyEmail} ?.onlyEmail=${this.onlyEmail}
value=${option.value} ?removable=${!readonly}
?readonly=${readonly}
?editable=${isEditable}
.value=${option.value.replaceAll("___", " ")}
> >
${option.getTextLabel().trim()} ${option.getTextLabel().trim()}
</et2-email-tag> </et2-email-tag>

6
api/js/etemplate/Et2Select/Tag/Et2EmailTag.ts
View File

@ -218,15 +218,15 @@ export class Et2EmailTag extends Et2Tag
{ {
let content = this.value; let content = this.value;
// If there's a name, just show the name, otherwise show the email // If there's a name, just show the name, otherwise show the email
if(!this.onlyEmail && Et2EmailTag.email_cache[this.value]) if(!this.onlyEmail && Et2EmailTag.email_cache[content])
{ {
// Append current value as email, data may have work & home email in it // Append current value as email, data may have work & home email in it
content = (Et2EmailTag.email_cache[this.value]?.n_fn || "") + " <" + (Et2EmailTag.splitEmail(this.value)?.email || this.value) + ">" content = (Et2EmailTag.email_cache[content]?.n_fn || "") + " <" + (Et2EmailTag.splitEmail(content)?.email || content) + ">"
} }
if (this.onlyEmail) if (this.onlyEmail)
{ {
const split = Et2EmailTag.splitEmail(content); const split = Et2EmailTag.splitEmail(content);
content = split.email || this.value; content = split.email || content;
} }
else if(!this.fullEmail) else if(!this.fullEmail)
{ {

3
mail/templates/default/app.css
View File

@ -1070,7 +1070,8 @@ div#mail-index_nm.splitter-pane {min-height: 100px;}
min-width: 7em; min-width: 7em;
color: darkgrey; color: darkgrey;
} }
.mailPreviewHeaders et2-select-email::part(control) {
.mailPreviewHeaders et2-select-email::part(combobox) {
border: none; border: none;
} }
#popupMainDiv {height: 100%} #popupMainDiv {height: 100%}