extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-07 08:34:42 +01: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;
vertical-align: middle;
color: var(--sl-input-color);
background-color: var(--sl-input-background-color);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
@ -83,7 +84,15 @@ export default css`
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);
border-color: var(--sl-input-border-color-disabled);
color: var(--sl-input-color-disabled);
@ -92,6 +101,10 @@ export default css`
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--focused .tree-dropdown__combobox {
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()
{
if(this.disabled || this.readonly)
{
return;
}
this.hasFocus = true;
// Should not be needed, but not firing the update
this.requestUpdate("hasFocus");
@ -712,6 +716,11 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
handleTriggerClick(event)
{
if(this.disabled || this.readonly)
{
return;
}
event.stopPropagation();
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');
image = option ? this.iconTemplate(option?.option ?? option) : null;
}
if(this.disabled || this.readonly)
{
return html`${image}${this.displayLabel || this.emptyLabel || placeholder}`;
}
return html`
${image}
<input id="search" type="text" part="input"
@ -936,6 +949,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
placement=${this.placement || "bottom"}
strategy="fixed"
?disabled=${this.disabled}
?readonly=${this.readonly}
@sl-after-hide=${() => {this.resultsOpen = false;}}
>
<div