extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-04 20:40:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Finish Et2Email widget

Browse Source
This commit is contained in:
nathan 2023-12-13 10:33:30 -07:00
parent 5df34bce91
commit 437ad34300
4 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
api/js/etemplate/Et2Email/Et2Email.styles.ts
View File

@ -18,6 +18,7 @@ export default css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center;
gap: 0.1rem 0.5rem; gap: 0.1rem 0.5rem;
background-color: var(--sl-input-background-color); background-color: var(--sl-input-background-color);
@ -55,6 +56,7 @@ export default css`
/* Tags */ /* Tags */
.email et2-email-tag { .email et2-email-tag {
order: 2; order: 2;
flex-grow: 0;
margin: auto 0px; margin: auto 0px;
--icon-width: 1.8em; --icon-width: 1.8em;
@ -62,7 +64,6 @@ export default css`
} }
/* Search box */ /* Search box */
.email__search { .email__search {
flex: 1 1 auto; flex: 1 1 auto;
order: 10; order: 10;
@ -76,9 +77,13 @@ export default css`
padding-inline: var(--sl-input-spacing-medium); padding-inline: var(--sl-input-spacing-medium);
} }
.email .email__loading {
order: 19;
}
.email .email__suffix { .email .email__suffix {
order: 20; order: 20;
} }
/* Listbox */ /* Listbox */
.email__listbox { .email__listbox {

13
api/js/etemplate/Et2Email/Et2Email.ts
View File

@ -283,7 +283,6 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
this.classList.remove("et2-sortable-email"); this.classList.remove("et2-sortable-email");
return; return;
} }
console.log(this, " is sortable");
this.classList.add("et2-sortable-email"); this.classList.add("et2-sortable-email");
let pull : boolean | string = !this.disabled && !this.readonly; let pull : boolean | string = !this.disabled && !this.readonly;
if(this.readonly && !this.disabled) if(this.readonly && !this.disabled)
@ -450,12 +449,14 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
clearTimeout(this._searchTimeout); clearTimeout(this._searchTimeout);
this.searching = true; this.searching = true;
this.requestUpdate("searching");
// Start the searches // Start the searches
this._searchPromise = this.remoteSearch(this._search.value, this.searchOptions); this._searchPromise = this.remoteSearch(this._search.value, this.searchOptions);
return this._searchPromise.then(async() => return this._searchPromise.then(async() =>
{ {
this.searching = false; this.searching = false;
this.requestUpdate("searching", true);
if(!this.open && this.hasFocus) if(!this.open && this.hasFocus)
{ {
this.show(); this.show();
@ -584,7 +585,6 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
*/ */
private handleLostFocus = (event : MouseEvent | KeyboardEvent) => private handleLostFocus = (event : MouseEvent | KeyboardEvent) =>
{ {
console.log(this, "lost focus");
// Close when clicking outside of the component // Close when clicking outside of the component
const path = event.composedPath(); const path = event.composedPath();
if(this && !path.includes(this)) if(this && !path.includes(this))
@ -690,6 +690,11 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
// Tab or enter checks current value // Tab or enter checks current value
else if(Et2Email.TAG_BREAK.indexOf(event.key) !== -1) else if(Et2Email.TAG_BREAK.indexOf(event.key) !== -1)
{ {
// Don't want the key to do its normal ting
event.stopPropagation();
event.preventDefault();
// Check for valid email or current selection
if(!this.validateAddress(this._search.value.trim()) && this.currentOption) if(!this.validateAddress(this._search.value.trim()) && this.currentOption)
{ {
this._search.value = this.currentOption.value.replaceAll("___", " "); this._search.value = this.currentOption.value.replaceAll("___", " ");
@ -1058,6 +1063,8 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
<slot part="prefix" name="prefix" class="email__prefix"></slot> <slot part="prefix" name="prefix" class="email__prefix"></slot>
${this.tagsTemplate()} ${this.tagsTemplate()}
${this.inputTemplate()} ${this.inputTemplate()}
${this.searching ? html`
<sl-spinner class="email__loading"></sl-spinner>` : nothing}
<slot part="suffix" name="suffix" class="email__suffix"></slot> <slot part="suffix" name="suffix" class="email__suffix"></slot>
</div> </div>
<div <div
@ -1071,7 +1078,7 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
@keydown=${this.handleSuggestionsKeyDown} @keydown=${this.handleSuggestionsKeyDown}
@mouseup=${this.handleSuggestionsMouseUp} @mouseup=${this.handleSuggestionsMouseUp}
> >
${this.suggestionsTemplate()} ${(this._selectOptions && this._selectOptions.length) ? this.suggestionsTemplate() : this.egw().lang("no matches found")}
</div> </div>
</sl-popup> </sl-popup>
</div> </div>

2
api/src/Etemplate/Widget/Taglist.php
View File

@ -217,4 +217,4 @@ class Taglist extends Etemplate\Widget
} }
Etemplate\Widget::registerWidget(__NAMESPACE__ . '\\Taglist', array( Etemplate\Widget::registerWidget(__NAMESPACE__ . '\\Taglist', array(
'taglist', 'et2-select-email', 'et2-select-thumbnail')); 'taglist', 'et2-select-email', 'et2-select-thumbnail', 'et2-email'));

14
mail/templates/default/compose.xet
View File

@ -57,9 +57,9 @@
</row> </row>
<row class="mailComposeHeaders" > <row class="mailComposeHeaders" >
<et2-description value="To"></et2-description> <et2-description value="To"></et2-description>
<et2-select-email id="to" allowDragAndDrop="true" width="100%" onclick="app.mail.address_click" multiple="true" <et2-email id="to" width="100%" onclick="app.mail.address_click" autofocus="true"
onchange="app.mail.recipients_onchange" autofocus="true" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email" onchange="app.mail.recipients_onchange"
placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email> placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-email>
<et2-hbox> <et2-hbox>
<et2-description id="cc_expander" value="Cc" class="et2_button_text" onclick="app.mail.compose_fieldExpander"></et2-description> <et2-description id="cc_expander" value="Cc" class="et2_button_text" onclick="app.mail.compose_fieldExpander"></et2-description>
<et2-description id="bcc_expander" value="Bcc" class="et2_button_text" onclick="app.mail.compose_fieldExpander"></et2-description> <et2-description id="bcc_expander" value="Bcc" class="et2_button_text" onclick="app.mail.compose_fieldExpander"></et2-description>
@ -67,16 +67,16 @@
</row> </row>
<row class="mailComposeHeaders mailComposeJQueryCc"> <row class="mailComposeHeaders mailComposeJQueryCc">
<et2-description value="Cc"></et2-description> <et2-description value="Cc"></et2-description>
<et2-select-email id="cc" width="100%" allowDragAndDrop="true" onclick="app.mail.address_click" multiple="true" <et2-email id="cc" width="100%" onclick="app.mail.address_click"
onchange="app.mail.recipients_onchange" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email" onchange="app.mail.recipients_onchange" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email"
placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email> placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-email>
<et2-description></et2-description> <et2-description></et2-description>
</row> </row>
<row class="mailComposeHeaders mailComposeJQueryBcc"> <row class="mailComposeHeaders mailComposeJQueryBcc">
<et2-description value="Bcc"></et2-description> <et2-description value="Bcc"></et2-description>
<et2-select-email id="bcc" width="100%" allowDragAndDrop="true" onclick="app.mail.address_click" multiple="true" <et2-email id="bcc" width="100%" onclick="app.mail.address_click"
onchange="app.mail.recipients_onchange" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email" onchange="app.mail.recipients_onchange" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email"
placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email> placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-email>
<et2-description></et2-description> <et2-description></et2-description>
</row> </row>
<row class="mailComposeHeaders"> <row class="mailComposeHeaders">