mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-22 06:30:59 +01:00
Et2TreeDropdown
- Better handling of horizontal space - Single select closes dropdown immediately - Selecting tree item actually changes value
This commit is contained in:
parent
c53e122564
commit
51f23a0dcf
@ -41,8 +41,9 @@ export default css`
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.1rem 0.5rem;
|
||||
|
||||
background-color: var(--sl-input-background-color);
|
||||
@ -53,6 +54,7 @@ export default css`
|
||||
min-height: var(--sl-input-height-medium);
|
||||
max-height: calc(var(--height, 5) * var(--sl-input-height-medium));
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-block: 0;
|
||||
padding-inline: var(--sl-input-spacing-medium);
|
||||
padding-top: 0.1rem;
|
||||
@ -80,18 +82,18 @@ export default css`
|
||||
|
||||
/* Trigger */
|
||||
|
||||
.tree-dropdown__trigger {
|
||||
max-width: initial;
|
||||
min-width: initial;
|
||||
flex: 0 0 1em;
|
||||
order: 21;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.tree-dropdown__trigger::part(base) {
|
||||
border: none;
|
||||
.tree-dropdown__expand-icon {
|
||||
height: var(--sl-input-height-medium);
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: var(--sl-transition-medium) rotate ease;
|
||||
rotate: 0;
|
||||
margin-inline-start: var(--sl-spacing-small);
|
||||
}
|
||||
|
||||
.tree-dropdown--open .tree-dropdown__expand-icon {
|
||||
rotate: -180deg;
|
||||
}
|
||||
|
||||
/* End trigger */
|
||||
@ -100,6 +102,15 @@ export default css`
|
||||
order: 1;
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
|
||||
.tree-dropdown__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* End tags */
|
||||
|
||||
/* Search box */
|
||||
|
||||
:host([readonly]) .tree-dropdown__search {
|
||||
@ -107,7 +118,7 @@ export default css`
|
||||
}
|
||||
|
||||
.tree-dropdown__search {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 1 7em;
|
||||
order: 10;
|
||||
min-width: 7em;
|
||||
border: none;
|
||||
|
@ -243,6 +243,7 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
|
||||
this.hasFocus = true;
|
||||
// Should not be needed, but not firing the update
|
||||
this.requestUpdate("hasFocus");
|
||||
this.show();
|
||||
|
||||
// Reset tags to not take focus
|
||||
this.setCurrentTag(null);
|
||||
@ -325,8 +326,13 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
|
||||
handleTreeChange(event)
|
||||
{
|
||||
const oldValue = this.value;
|
||||
this.value = this._tree.value;
|
||||
this.value = this._tree.getValue();
|
||||
this.requestUpdate("value", oldValue);
|
||||
|
||||
if(!this.multiple)
|
||||
{
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
|
||||
handleTriggerClick()
|
||||
@ -341,6 +347,11 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
|
||||
this._popup.active = true;
|
||||
}
|
||||
this.open = this._popup.active;
|
||||
this.requestUpdate("open");
|
||||
this.updateComplete.then(() =>
|
||||
{
|
||||
this._tree.focus();
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@ -477,17 +488,16 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
|
||||
<slot part="prefix" name="prefix" class="tree-dropdown__prefix"></slot>
|
||||
<div part="tags" class="tree-dropdown__tags">
|
||||
${this.tagsTemplate()}
|
||||
</div>
|
||||
${this.inputTemplate()}
|
||||
</div>
|
||||
${this.searching ? html`
|
||||
<sl-spinner class="tree-dropdown"></sl-spinner>` : nothing
|
||||
}
|
||||
<slot part="suffix" name="suffix" class="tree-dropdown__suffix"></slot>
|
||||
<et2-button caret class="tree-dropdown__trigger"
|
||||
@click=${this.handleTriggerClick}
|
||||
.noSubmit=${true}
|
||||
>
|
||||
</et2-button>
|
||||
<slot name="expand-icon" part="expand-icon" class="tree-dropdown__expand-icon"
|
||||
@click=${this.handleTriggerClick}>
|
||||
<sl-icon library="system" name="chevron-down" aria-hidden="true"></sl-icon>
|
||||
</slot>
|
||||
</div>
|
||||
<et2-tree
|
||||
class="tree-dropdown__tree"
|
||||
@ -497,7 +507,7 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
|
||||
.value=${this.value}
|
||||
._selectOptions=${this.select_options}
|
||||
|
||||
@change=${this.handleTreeChange}
|
||||
@sl-selection-change=${this.handleTreeChange}
|
||||
>
|
||||
</et2-tree>
|
||||
</sl-popup>
|
||||
|
Loading…
Reference in New Issue
Block a user