extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 07:53:39 +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

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

@ -227,43 +227,47 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
css`
:host {
--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*/
sl-tree-item et2-image {
flex: 0 0 1em;
font-size: calc(100% + 2px);
line-height: calc(100% - 2px);
padding-right: .4em;
width: 1em;
height: 1em;
display: inline-block;
}
::part(label) {
overflow: hidden;
::part(label) {
overflow: hidden;
flex: 1 1 auto;
}
}
::part(label):hover {
text-decoration: underline;
}
::part(label):hover {
text-decoration: underline;
}
.tree-item__label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tree-item__label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
sl-tree-item.drop-hover {
background-color: var(--highlight-background-color);
}
sl-tree-item.drop-hover {
background-color: var(--highlight-background-color);
}
/*Mail specific style TODO move it out of the component*/
sl-tree-item.unread > .tree-item__label {
font-weight: bold;
@ -885,6 +889,7 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
})
}
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`
<sl-tree-item
@ -893,8 +898,9 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
id=${value}
title=${selectOption.tooltip ||selectOption.title || 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}
?disabled=${selectOption.disabled}
?lazy=${lazy}
?focused=${selectOption.focused || nothing}
@sl-lazy-load=${(event) => {
@ -931,7 +937,7 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
<et2-image src="${img ?? nothing}"></et2-image>
<span class="tree-item__label">
<span part="label_text" class="tree-item__label">
${selectOption.label ?? selectOption.text}
</span>
${(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);
max-height: calc(var(--height, 5) * var(--sl-input-height-medium));
min-width: 0px;
// Limit tag size
& > * {
max-width: 25em;
}
}
/* End tags */
@ -173,6 +179,9 @@ export default css`
}
/* Tree */
.tree-dropdown--searching et2-tree {
display: none;
}
sl-popup::part(popup) {
font-size: var(--sl-font-size-medium);
@ -184,7 +193,6 @@ export default css`
padding-block: var(--sl-spacing-x-small);
padding-inline: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: none;
z-index: var(--sl-z-index-dropdown);
@ -193,11 +201,45 @@ export default css`
max-width: var(--auto-size-available-width);
}
et2-tree::part(checkbox) {
display: none;
}
et2-tree {
&::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.updateComplete.then(() =>
{
this._tree.style.minWidth = getComputedStyle(this).width;
this._tree.focus();
})
}
@ -665,8 +666,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
})}
flip
shift
sync="width"
auto-size="vertical"
auto-size="both"
auto-size-padding="10"
?active=${this.open}
placement=${this.placement || "bottom"}
@ -696,7 +696,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
.id=${this.id + "_tree"}
._parent=${this}
class="tree-dropdown__tree"
exportparts=""
exportparts="label"
?readonly=${this.readonly}
?disabled=${this.disabled}
value=${this.multiple ? nothing : this.value}