extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-06-25 12:21:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

Et2TreeDropdown: Fix readonly & disabled styles

Browse Source 
Still allowed dropdown, and did not look disabled
This commit is contained in:
nathan 2024-10-30 11:31:58 -06:00
parent 37ce527fd4
commit 21aec1a93d
2 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,6 +63,7 @@ export default css`
justify-content: space-between; justify-content: space-between;
vertical-align: middle; vertical-align: middle;
color: var(--sl-input-color);
background-color: var(--sl-input-background-color); background-color: var(--sl-input-background-color);
border: solid var(--sl-input-border-width) var(--sl-input-border-color); border: solid var(--sl-input-border-width) var(--sl-input-border-color);
@ -83,7 +84,15 @@ export default css`
align-items: flex-start align-items: flex-start
} }
.tree-dropdown--disabled { :host([readonly]) .tree-dropdown__combobox {
background: none;
opacity: 1;
border: none;
outline: none;
cursor: not-allowed;
}
.tree-dropdown--disabled, .tree-dropdown--disabled .tree-dropdown__combobox {
background-color: var(--sl-input-background-color-disabled); background-color: var(--sl-input-background-color-disabled);
border-color: var(--sl-input-border-color-disabled); border-color: var(--sl-input-border-color-disabled);
color: var(--sl-input-color-disabled); color: var(--sl-input-color-disabled);
@ -92,6 +101,10 @@ export default css`
outline: none; outline: none;
} }
.tree-dropdown--disabled .tree-dropdown__expand-icon {
cursor: not-allowed;
color: var(--sl-input-color-disabled);
}
:not(.tree-dropdown--disabled).tree-dropdown--open .tree-dropdown__combobox, :not(.tree-dropdown--disabled).tree-dropdown--open .tree-dropdown__combobox,
:not(.tree-dropdown--disabled).tree-dropdown--focused .tree-dropdown__combobox { :not(.tree-dropdown--disabled).tree-dropdown--focused .tree-dropdown__combobox {
background-color: var(--sl-input-background-color-focus); background-color: var(--sl-input-background-color-focus);

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

@ -524,6 +524,10 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
private handleFocus() private handleFocus()
{ {
if(this.disabled || this.readonly)
{
return;
}
this.hasFocus = true; this.hasFocus = true;
// Should not be needed, but not firing the update // Should not be needed, but not firing the update
this.requestUpdate("hasFocus"); this.requestUpdate("hasFocus");
@ -712,6 +716,11 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
handleTriggerClick(event) handleTriggerClick(event)
{ {
if(this.disabled || this.readonly)
{
return;
}
event.stopPropagation(); event.stopPropagation();
this.hasFocus = true; this.hasFocus = true;
@ -772,6 +781,10 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
const option = this.optionSearch(this.value, this.select_options, 'value', 'children'); const option = this.optionSearch(this.value, this.select_options, 'value', 'children');
image = option ? this.iconTemplate(option?.option ?? option) : null; image = option ? this.iconTemplate(option?.option ?? option) : null;
} }
if(this.disabled || this.readonly)
{
return html`${image}${this.displayLabel || this.emptyLabel || placeholder}`;
}
return html` return html`
${image} ${image}
<input id="search" type="text" part="input" <input id="search" type="text" part="input"
@ -936,6 +949,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
placement=${this.placement || "bottom"} placement=${this.placement || "bottom"}
strategy="fixed" strategy="fixed"
?disabled=${this.disabled} ?disabled=${this.disabled}
?readonly=${this.readonly}
@sl-after-hide=${() => {this.resultsOpen = false;}} @sl-after-hide=${() => {this.resultsOpen = false;}}
> >
<div <div