extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-29 10:09:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Button properties hideOnReadonly, noValidation

Browse Source 
Added hideOnReadonly, default false.  Disabled/readonly buttons are now visible but disabled, unless you set hideOnReadonly="false" to get previous behaviour.

Added noValidation, default false.  It's just passed to etemplate2.submit() as before
This commit is contained in:
nathan 2022-04-04 16:24:01 -06:00
parent 76e76a9e18
commit a763b84be4
2 changed files with 39 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
api/js/etemplate/Et2Button/ButtonStyles.ts
View File

@ -14,7 +14,13 @@ export const buttonStyles = [
background-color: var(--gray_10, #e6e6e6); background-color: var(--gray_10, #e6e6e6);
border-radius: 3px; border-radius: 3px;
} }
:host(:hover) { :host([disabled]) {
display: flex;
}
:host([disabled]) ::slotted(img) {
filter: grayscale(1) contrast(0.2);
}
:host(:hover):not([disabled]) {
box-shadow: 1px 1px 1px rgb(0 0 0 / 60%); box-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
background-color: var(--bg_color_15_gray, #d9d9d9); background-color: var(--bg_color_15_gray, #d9d9d9);
} }
@ -25,7 +31,9 @@ export const buttonStyles = [
margin: 2px; margin: 2px;
height:20px; height:20px;
font-size: 9pt; font-size: 9pt;
color: var(--btn-label-color);
text-shadow: 0 0; text-shadow: 0 0;
} }
:not([disabled]) div {
color: var(--btn-label-color);
}
`]; `];

35
api/js/etemplate/Et2Button/Et2Button.ts
View File

@ -62,9 +62,6 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
max-width: 125px; max-width: 125px;
min-width: fit-content; min-width: fit-content;
} }
:host([readonly]) {
display: none;
}
/* Set size for icon */ /* Set size for icon */
::slotted(img.imageOnly) { ::slotted(img.imageOnly) {
padding-right: 0px !important; padding-right: 0px !important;
@ -93,11 +90,22 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
label: {type: String}, label: {type: String},
image: {type: String}, image: {type: String},
/**
* If button is set to readonly, do we want to hide it completely (old behaviour) or show it as disabled
* (default)
*/
hideOnReadonly: {type: Boolean},
/** /**
* Button should submit the etemplate * Button should submit the etemplate
* Return false from the click handler to cancel the submit, or set doSubmit to false to skip submitting. * Return false from the click handler to cancel the submit, or set doSubmit to false to skip submitting.
*/ */
doSubmit: {type: Boolean, reflect: false} doSubmit: {type: Boolean, reflect: false},
/**
* When submitting, skip the validation step. Allows to submit etemplates directly to the server.
*/
noValidation: {type: Boolean}
} }
} }
@ -119,6 +127,8 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
// Property default values // Property default values
this.__image = ''; this.__image = '';
this.doSubmit = true; this.doSubmit = true;
this.hideOnReadonly = false;
this.noValidation = false;
// Do not add icon here, no children can be added in constructor // Do not add icon here, no children can be added in constructor
@ -177,7 +187,7 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
// Submit the form // Submit the form
if(this.doSubmit) if(this.doSubmit)
{ {
return this.getInstanceManager().submit(); return this.getInstanceManager().submit(this, undefined, this.noValidation);
} }
this.clicked = false; this.clicked = false;
this.getInstanceManager()?.skip_close_prompt(false); this.getInstanceManager()?.skip_close_prompt(false);
@ -192,6 +202,19 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
{ {
super.requestUpdate(name, oldValue); super.requestUpdate(name, oldValue);
// "disabled" is the attribute from the spec
if(name == 'readonly')
{
if(this.readonly)
{
this.setAttribute('disabled', "");
}
else
{
this.removeAttribute("disabled");
}
}
// Default image & class are determined based on ID // Default image & class are determined based on ID
if(name == "id" && this._widget_id) if(name == "id" && this._widget_id)
{ {
@ -214,7 +237,7 @@ export class Et2Button extends Et2InputWidget(SlotMixin(LionButton))
render() render()
{ {
if(this.readonly) if(this.readonly && this.hideOnReadonly)
{ {
return ''; return '';
} }