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

Et2TreeDropdown: Better sizing & styling to more closely match select & other widgets

Browse Source
This commit is contained in:
nathan 2024-09-05 14:53:34 -06:00
parent 51e7269d88
commit dcece87c9c
3 changed files with 80 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
api/js/etemplate/Et2Tree/Et2Tree.ts
View File

@ -227,42 +227,46 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
css` css`
:host { :host {
--sl-spacing-large: 1rem; --sl-spacing-large: 1rem;
display: block;
} }
::part(expand-button) {
rotate: none;
padding: 0 0.2em 0 5em;
margin-left: -5em;
} ::part(expand-button) {
rotate: none;
padding: 0 var(--sl-spacing-small);
}
/* Stop icon from shrinking if there's not enough space */ /* Stop icon from shrinking if there's not enough space */
/* increase font size by 2px this was previously done in pixelegg css but document css can not reach shadow root*/ /* increase font size by 2px this was previously done in pixelegg css but document css can not reach shadow root*/
sl-tree-item et2-image { sl-tree-item et2-image {
flex: 0 0 1em; flex: 0 0 1em;
font-size: calc(100% + 2px); font-size: calc(100% + 2px);
line-height: calc(100% - 2px);
padding-right: .4em; padding-right: .4em;
width: 1em;
height: 1em;
display: inline-block;
} }
::part(label) { ::part(label) {
overflow: hidden; overflow: hidden;
flex: 1 1 auto; flex: 1 1 auto;
} }
::part(label):hover { ::part(label):hover {
text-decoration: underline; text-decoration: underline;
} }
.tree-item__label { .tree-item__label {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
sl-tree-item.drop-hover { sl-tree-item.drop-hover {
background-color: var(--highlight-background-color); background-color: var(--highlight-background-color);
} }
/*Mail specific style TODO move it out of the component*/ /*Mail specific style TODO move it out of the component*/
sl-tree-item.unread > .tree-item__label { sl-tree-item.unread > .tree-item__label {
@ -885,6 +889,7 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
}) })
} }
const value = selectOption.value ?? selectOption.id; const value = selectOption.value ?? selectOption.id;
const selected = typeof this.value == "string" && this.value == value || Array.isArray(this.value) && this.value.includes(value);
return html` return html`
<sl-tree-item <sl-tree-item
@ -893,8 +898,9 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
id=${value} id=${value}
title=${selectOption.tooltip ||selectOption.title || nothing} title=${selectOption.tooltip ||selectOption.title || nothing}
class=${selectOption.class || nothing} class=${selectOption.class || nothing}
?selected=${typeof this.value == "string" && this.value == value || Array.isArray(this.value) && this.value.includes(value)} ?selected=${selected}
?expanded=${expandState} ?expanded=${expandState}
?disabled=${selectOption.disabled}
?lazy=${lazy} ?lazy=${lazy}
?focused=${selectOption.focused || nothing} ?focused=${selectOption.focused || nothing}
@sl-lazy-load=${(event) => { @sl-lazy-load=${(event) => {
@ -931,7 +937,7 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
<et2-image src="${img ?? nothing}"></et2-image> <et2-image src="${img ?? nothing}"></et2-image>
<span class="tree-item__label"> <span part="label_text" class="tree-item__label">
${selectOption.label ?? selectOption.text} ${selectOption.label ?? selectOption.text}
</span> </span>
${(selectOption.badge) ? ${(selectOption.badge) ?

54
api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts
View File

@ -114,6 +114,12 @@ export default css`
padding-top: var(--sl-spacing-3x-small); padding-top: var(--sl-spacing-3x-small);
max-height: calc(var(--height, 5) * var(--sl-input-height-medium)); max-height: calc(var(--height, 5) * var(--sl-input-height-medium));
min-width: 0px; min-width: 0px;
// Limit tag size
& > * {
max-width: 25em;
}
} }
/* End tags */ /* End tags */
@ -173,6 +179,9 @@ export default css`
} }
/* Tree */ /* Tree */
.tree-dropdown--searching et2-tree {
display: none;
}
sl-popup::part(popup) { sl-popup::part(popup) {
font-size: var(--sl-font-size-medium); font-size: var(--sl-font-size-medium);
@ -184,7 +193,6 @@ export default css`
padding-block: var(--sl-spacing-x-small); padding-block: var(--sl-spacing-x-small);
padding-inline: 0; padding-inline: 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: none; overscroll-behavior: none;
z-index: var(--sl-z-index-dropdown); z-index: var(--sl-z-index-dropdown);
@ -193,11 +201,45 @@ export default css`
max-width: var(--auto-size-available-width); max-width: var(--auto-size-available-width);
} }
et2-tree::part(checkbox) { et2-tree {
display: none; &::part(item) {
} font-family: var(--sl-font-sans);
font-weight: var(--sl-font-weight-normal);
line-height: var(--sl-line-height-normal);
letter-spacing: var(--sl-letter-spacing-normal);
color: var(--sl-color-neutral-700);
.tree-dropdown--searching et2-tree { }
display: none;
&::part(item-item) {
padding: var(--sl-spacing-x-small) var(--sl-spacing-medium) var(--sl-spacing-x-small) var(--sl-spacing-x-small);
transition: var(--sl-transition-fast) fill;
}
&::part(item-item):hover {
background-color: var(--sl-color-neutral-100);
color: var(--sl-color-neutral-1000);
}
&::part(checkbox) {
display: none;
}
&::part(label) {
flex: 1 0 auto;
display: contents;
overflow: unset;
&:hover {
text-decoration: none;
}
}
&::part(label_text) {
white-space: normal;
overflow: unset;
padding-right: var(--sl-spacing-medium);
max-width: 30em;
}
} }
`; `;

6
api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
View File

@ -520,6 +520,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
this.requestUpdate("open"); this.requestUpdate("open");
this.updateComplete.then(() => this.updateComplete.then(() =>
{ {
this._tree.style.minWidth = getComputedStyle(this).width;
this._tree.focus(); this._tree.focus();
}) })
} }
@ -665,8 +666,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
})} })}
flip flip
shift shift
sync="width" auto-size="both"
auto-size="vertical"
auto-size-padding="10" auto-size-padding="10"
?active=${this.open} ?active=${this.open}
placement=${this.placement || "bottom"} placement=${this.placement || "bottom"}
@ -696,7 +696,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
.id=${this.id + "_tree"} .id=${this.id + "_tree"}
._parent=${this} ._parent=${this}
class="tree-dropdown__tree" class="tree-dropdown__tree"
exportparts="" exportparts="label"
?readonly=${this.readonly} ?readonly=${this.readonly}
?disabled=${this.disabled} ?disabled=${this.disabled}
value=${this.multiple ? nothing : this.value} value=${this.multiple ? nothing : this.value}