Skip to content

Commit

Permalink
fix children structure
Browse files Browse the repository at this point in the history
  • Loading branch information
JafarMirzaie committed Mar 24, 2023
1 parent 59998d1 commit 7fc7c5e
Show file tree
Hide file tree
Showing 34 changed files with 237 additions and 204 deletions.
7 changes: 4 additions & 3 deletions Signum.React.Extensions/Alerts/Templates/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,14 @@ export default function Alert(p: { ctx: TypeContext<AlertEntity> }) {
<ValueLine ctx={ctx.subCtx(n => n.titleField)} label={AlertMessage.Title.niceToString()} valueHtmlAttributes={{ placeholder: (ctx.value.alertType && AlertsClient.getTitle(null, ctx.value.alertType)) ?? undefined }} />
{
!ctx.value.isNew && !edit ?
<FormGroup ctx={ctx.subCtx(n => n.titleField)} label={AlertMessage.Text.niceToString()}
children={() => <div style={{ whiteSpace: "pre-wrap" }}>
<FormGroup ctx={ctx.subCtx(n => n.titleField)} label={AlertMessage.Text.niceToString()} >
{() => <div style={{ whiteSpace: "pre-wrap" }}>
{AlertsClient.format(ctx.value.textField || ctx.value.textFromAlertType || "", ctx.value)}
<br />
<a href="#" className="text-muted" onClick={e => { e.preventDefault(); setEdit(true) }}>Edit</a>
</div>}
/>
</FormGroup>

:
<ValueLine ctx={ctx.subCtx(n => n.textField)} label={AlertMessage.Text.niceToString()} valueHtmlAttributes={{ style: { height: "180px" } }} />
}
Expand Down
22 changes: 11 additions & 11 deletions Signum.React.Extensions/Authorization/Templates/DoublePassword.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,22 +32,22 @@ export function DoublePassword(p: { ctx: TypeContext<string>, initialOpen: boole

if (!isOpen) {
return (
<FormGroup label={LoginAuthMessage.NewPassword.niceToString()} ctx={p.ctx}
children={() => <a className="btn btn-light btn-sm" onClick={() => setIsOpen(true)}>
<FontAwesomeIcon icon="key" /> {LoginAuthMessage.ChangePassword.niceToString()}
</a>}
/>
<FormGroup label={LoginAuthMessage.NewPassword.niceToString()} ctx={p.ctx}>
{() => <a className="btn btn-light btn-sm" onClick={() => setIsOpen(true)}>
<FontAwesomeIcon icon="key" /> {LoginAuthMessage.ChangePassword.niceToString()}
</a>}
</FormGroup>
);
}

return (
<div>
<FormGroup ctx={p.ctx} label={LoginAuthMessage.NewPassword.niceToString()}
children={inputId => <input id={inputId} type="password" ref={newPass} autoComplete="off" placeholder={LoginAuthMessage.NewPassword.niceToString()} className={classes(p.ctx.formControlClass, p.mandatory && !newPass.current?.value ? "sf-mandatory" : null)} onBlur={handlePasswordBlur} />}
/>
<FormGroup ctx={p.ctx} label={LoginAuthMessage.ConfirmNewPassword.niceToString()}
children={inputId => <input id={inputId} type="password" ref={newPass2} autoComplete="off" placeholder={LoginAuthMessage.ConfirmNewPassword.niceToString()} className={classes(p.ctx.formControlClass, p.mandatory && !newPass2.current?.value ? "sf-mandatory" : null)} onBlur={handlePasswordBlur} />}
/>
<FormGroup ctx={p.ctx} label={LoginAuthMessage.NewPassword.niceToString()}>
{inputId => <input id={inputId} type="password" ref={newPass} autoComplete="off" placeholder={LoginAuthMessage.NewPassword.niceToString()} className={classes(p.ctx.formControlClass, p.mandatory && !newPass.current?.value ? "sf-mandatory" : null)} onBlur={handlePasswordBlur} />}
</FormGroup>
<FormGroup ctx={p.ctx} label={LoginAuthMessage.ConfirmNewPassword.niceToString()}>
{inputId => <input id={inputId} type="password" ref={newPass2} autoComplete="off" placeholder={LoginAuthMessage.ConfirmNewPassword.niceToString()} className={classes(p.ctx.formControlClass, p.mandatory && !newPass2.current?.value ? "sf-mandatory" : null)} onBlur={handlePasswordBlur} />}
</FormGroup>
</div>
);
}
6 changes: 3 additions & 3 deletions Signum.React.Extensions/Basics/Templates/IconTypeahead.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@ export function IconTypeaheadLine(p : IconTypeaheadLineProps){
var ctx = p.ctx;

return (
<FormGroup ctx={ctx} label={ctx.niceName()}
children={inputId => <IconTypeahead icon={ctx.value}
<FormGroup ctx={ctx} label={ctx.niceName()}>
{inputId => <IconTypeahead icon={ctx.value}
placeholder={p.ctx.placeholderLabels ? p.ctx.niceName() : undefined}
extraIcons={p.extraIcons}
formControlClass={ctx.formControlClass}
inputAttrs={p.inputAttrs}
onChange={handleChange} />}
/>
</FormGroup>
);
}

Expand Down
7 changes: 3 additions & 4 deletions Signum.React.Extensions/Chart/Templates/ChartColumn.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -197,9 +197,8 @@ export function ChartPaletteLink(p: ChartPaletteLinkProps) {
const [palette, reload] = useAPIWithReload(() => ColorPaletteClient.getColorPalette(p.type.name), [p.type.name]);

return (
<FormGroup ctx={p.ctx}
label={ChartMessage.ColorsFor0.niceToString(p.type.niceName)}
children={() => palette === undefined ?
<FormGroup ctx={p.ctx} label={ChartMessage.ColorsFor0.niceToString(p.type.niceName)}>
{() => palette === undefined ?
<span className={p.ctx.formControlPlainTextClass}>
{JavascriptMessage.loading.niceToString()}
</span> :
Expand All @@ -219,7 +218,7 @@ export function ChartPaletteLink(p: ChartPaletteLinkProps) {
{palette ? ChartMessage.ViewPalette.niceToString() : ChartMessage.CreatePalette.niceToString()}
</a>
}
/>
</FormGroup>
);
}

Expand Down
6 changes: 3 additions & 3 deletions Signum.React.Extensions/Chart/UserChart/UserChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,13 @@ export default function UserChart(p : { ctx: TypeContext<UserChartEntity> }){
<div>
<EntityLine ctx={ctx.subCtx(e => e.owner)} />
<ValueLine ctx={ctx.subCtx(e => e.displayName)} />
<FormGroup ctx={ctx.subCtx(e => e.query)}
children={() =>
<FormGroup ctx={ctx.subCtx(e => e.query)}>
{() =>
Finder.isFindable(queryKey, true) ?
<a className="form-control-static" href={Finder.findOptionsPath({ queryName: queryKey })}>{getQueryNiceName(queryKey)}</a> :
<span>{getQueryNiceName(queryKey)}</span>
}
/>
</FormGroup>
<EntityLine ctx={ctx.subCtx(e => e.entityType)} onChange={() => forceUpdate()}
helpText={
<div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ export function ValueUserQueryElement(p: ValueUserQueryElementProps) {

return (
<div>
<FormGroup ctx={ctx} label={ctx.value.label ?? getQueryNiceName(fo.queryName)}
children={() =>
<FormGroup ctx={ctx} label={ctx.value.label ?? getQueryNiceName(fo.queryName)}>
{() =>
<div className="row align-items-center">
<div className="col-auto">
<span>{ctx.value.label ?? getQueryNiceName(fo!.queryName)}</span>
Expand All @@ -65,7 +65,7 @@ export function ValueUserQueryElement(p: ValueUserQueryElementProps) {
customRequest={p.cachedQuery && ((qr, fo, token) => p.cachedQuery!.then(cq => executeQueryValueCached(qr, fo, token, cq)))} />
</div>
</div>}
/>
</FormGroup>
</div>
);
}
Expand Down
6 changes: 3 additions & 3 deletions Signum.React.Extensions/Dynamic/DynamicPanelSimplePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -144,8 +144,8 @@ export function CheckEvalType(p: CheckEvalTypeProps) {
}

return (
<FormGroup ctx={p.ctx} label={getQueryNiceName(p.findOptions.queryName)}
children={() => <>
<FormGroup ctx={p.ctx} label={getQueryNiceName(p.findOptions.queryName)}>
{() => <>
<SearchValue findOptions={p.findOptions} isLink={true} />
{
state == "loading" ?
Expand Down Expand Up @@ -174,7 +174,7 @@ export function CheckEvalType(p: CheckEvalTypeProps) {

}
</>}
/>
</FormGroup>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,9 @@ export default function DynamicValidation(p: DynamicValidationProps) {
<div>
<ValueLine ctx={ctx.subCtx(d => d.name)} />
<EntityLine ctx={ctx.subCtx(d => d.entityType)} onChange={handleEntityTypeChange} />
<FormGroup ctx={ctx.subCtx(d => d.subEntity)}
children={() => ctx.value.entityType && <PropertyRouteCombo ctx={ctx.subCtx(d => d.subEntity)} type={ctx.value.entityType} onChange={forceUpdate} routes={PropertyRoute.generateAll(ctx.value.entityType.cleanName).filter(a => a.propertyRouteType == "Mixin" || a.typeReference().isEmbedded && !a.typeReference().isCollection)} />}
/>
<FormGroup ctx={ctx.subCtx(d => d.subEntity)}>
{() => ctx.value.entityType && <PropertyRouteCombo ctx={ctx.subCtx(d => d.subEntity)} type={ctx.value.entityType} onChange={forceUpdate} routes={PropertyRoute.generateAll(ctx.value.entityType.cleanName).filter(a => a.propertyRouteType == "Mixin" || a.typeReference().isEmbedded && !a.typeReference().isCollection)} />}
</FormGroup>
{ctx.value.entityType &&
<div>
<br />
Expand Down
6 changes: 3 additions & 3 deletions Signum.React.Extensions/Dynamic/View/DynamicViewOverride.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -261,13 +261,13 @@ export default function DynamicViewOverrideComponent(p: DynamicViewOverrideCompo
<EntityLine ctx={ctx.subCtx(a => a.entityType)} onChange={forceUpdate} onRemove={handleTypeRemove} />
{
ctx.value.entityType && viewNames &&
<FormGroup ctx={ctx.subCtx(d => d.viewName)} label={ctx.niceName(d => d.viewName)}
children={inputId => <select id={inputId} value={ctx.value.viewName ? ctx.value.viewName : ""} className="form-select" onChange={handleViewNameChange}>
<FormGroup ctx={ctx.subCtx(d => d.viewName)} label={ctx.niceName(d => d.viewName)}>
{inputId => <select id={inputId} value={ctx.value.viewName ? ctx.value.viewName : ""} className="form-select" onChange={handleViewNameChange}>
<option value="">{" - "}</option>
{(viewNames ?? []).map((v, i) => <option key={i} value={v}>{v}</option>)}
</select>
}
/>
</FormGroup>
}

{ctx.value.entityType &&
Expand Down
6 changes: 3 additions & 3 deletions Signum.React.Extensions/Files/FileImageLine.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ export const FileImageLine = React.forwardRef(function FileImageLine(props: File
<FormGroup ctx={p.ctx} label={p.label}
labelHtmlAttributes={p.labelHtmlAttributes}
htmlAttributes={{ ...c.baseHtmlAttributes(), ...EntityBaseController.entityHtmlAttributes(p.ctx.value), ...p.formGroupHtmlAttributes }}
helpText={c.props.helpText}
children={() => hasValue ? renderImage() : p.ctx.readOnly ? undefined :
helpText={c.props.helpText}>
{() => hasValue ? renderImage() : p.ctx.readOnly ? undefined :
<FileUploader
accept={p.accept}
maxSizeInBytes={p.maxSizeInBytes}
Expand All @@ -81,7 +81,7 @@ export const FileImageLine = React.forwardRef(function FileImageLine(props: File
buttonCss={p.ctx.buttonClass}
divHtmlAttributes={{ className: "sf-file-line-new" }} />
}
/>
</FormGroup>
);

function renderImage() {
Expand Down
6 changes: 3 additions & 3 deletions Signum.React.Extensions/Files/FileLine.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ export const FileLine = React.memo(React.forwardRef(function FileLine(props: Fil
<FormGroup ctx={p.ctx} label={p.label}
labelHtmlAttributes={p.labelHtmlAttributes}
htmlAttributes={{ ...c.baseHtmlAttributes(), ...EntityBaseController.entityHtmlAttributes(p.ctx.value), ...p.formGroupHtmlAttributes }}
helpText={p.helpText}
children={() => hasValue ? renderFile() : p.ctx.readOnly ? undefined :
helpText={p.helpText}>
{() => hasValue ? renderFile() : p.ctx.readOnly ? undefined :
<FileUploader
accept={p.accept}
maxSizeInBytes={p.maxSizeInBytes}
Expand All @@ -82,7 +82,7 @@ export const FileLine = React.memo(React.forwardRef(function FileLine(props: Fil
fileDropCssClass={c.mandatoryClass ?? undefined}
divHtmlAttributes={{ className: "sf-file-line-new" }} />
}
/>
</FormGroup>
);


Expand Down
6 changes: 3 additions & 3 deletions Signum.React.Extensions/Files/MultiFileImageLine.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -92,8 +92,8 @@ export const MultiFileImageLine = React.forwardRef(function MultiFileLine(props:
<FormGroup ctx={p.ctx} label={p.label}
htmlAttributes={{ ...c.baseHtmlAttributes(), ...p.formGroupHtmlAttributes }}
helpText={p.helpText}
labelHtmlAttributes={p.labelHtmlAttributes}
children={() => <div>
labelHtmlAttributes={p.labelHtmlAttributes}>
{() => <div>
<div className="d-flex">
{
c.getMListItemContext(p.ctx.subCtx({ formGroupStyle: "None" })).map(mlec =>
Expand Down Expand Up @@ -128,7 +128,7 @@ export const MultiFileImageLine = React.forwardRef(function MultiFileLine(props:
divHtmlAttributes={{ className: "sf-file-line-new" }} />}
</div>
</div>}
/>
</FormGroup>
);


Expand Down
6 changes: 3 additions & 3 deletions Signum.React.Extensions/Files/MultiFileLine.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@ export const MultiFileLine = React.forwardRef(function MultiFileLine(props: Mult
<FormGroup ctx={p.ctx} label={p.label}
htmlAttributes={{ ...c.baseHtmlAttributes(), ...p.formGroupHtmlAttributes }}
helpText={p.helpText}
labelHtmlAttributes={p.labelHtmlAttributes}
children={() => <table className="sf-multi-value">
labelHtmlAttributes={p.labelHtmlAttributes}>
{() => <table className="sf-multi-value">
<tbody>
{
c.getMListItemContext(p.ctx.subCtx({ formGroupStyle: "None" })).map(mlec =>
Expand Down Expand Up @@ -156,7 +156,7 @@ export const MultiFileLine = React.forwardRef(function MultiFileLine(props: Mult
</tr>
</tbody>
</table>}
/>
</FormGroup>
);
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,15 @@ export default function NeuralNetworkSettings(p : { ctx: TypeContext<NeuralNetwo

function renderCount(ctx: StyleContext, p: PredictorEntity, usage: PredictorColumnUsage) {
return (
<FormGroup ctx={ctx} label={PredictorColumnUsage.niceToString(usage) + " columns"}
children={inputId => p.state != "Trained" ? <FormControlReadonly inputId={inputId} ctx={ctx}>?</FormControlReadonly> : <SearchValue isBadge={true} isLink={true} findOptions={{
<FormGroup ctx={ctx} label={PredictorColumnUsage.niceToString(usage) + " columns"}>
{inputId => p.state != "Trained" ? <FormControlReadonly id={inputId} ctx={ctx}>?</FormControlReadonly> : <SearchValue isBadge={true} isLink={true} findOptions={{
queryName: PredictorCodificationEntity,
filterOptions: [
{ token: PredictorCodificationEntity.token(e => e.predictor), value: p },
{ token: PredictorCodificationEntity.token(e => e.usage), value: usage }
]
}} />}
/>
</FormGroup>
);
}
const ctx = p.ctx;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,9 @@ export default function PredictLine(p : PredictLineProps){
predicted == original || isLite(predicted) && isLite(original) && is(predicted, original) ? "green" : "red";
}
return (
<FormGroup ctx={p.sctx} label={p.token.niceName} labelHtmlAttributes={{ title: fullNiceName(p.token) }} children={() => renderValue()} />
<FormGroup ctx={p.sctx} label={p.token.niceName} labelHtmlAttributes={{ title: fullNiceName(p.token) }}>
{() => renderValue()}
</FormGroup>
);
}

Expand Down
6 changes: 3 additions & 3 deletions Signum.React.Extensions/Mailing/Templates/EmailTemplate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -135,9 +135,9 @@ function EmailTemplateFrom(p: { ctx: TypeContext<EmailTemplateFromEmbedded>, que
<div>
<div className="row">
<div className="col-sm-2" >
<FormGroup label={EmailTemplateEntity.nicePropertyName(a => a.recipients![0].element.kind)} ctx={sc}
children={() => <span className={sc.formControlClass}>{EmailTemplateEntity.nicePropertyName(a => a.from)} </span>}
/>
<FormGroup label={EmailTemplateEntity.nicePropertyName(a => a.recipients![0].element.kind)} ctx={sc}>
{() => <span className={sc.formControlClass}>{EmailTemplateEntity.nicePropertyName(a => a.from)} </span>}
</FormGroup>
</div>
<div className="col-sm-10">
{p.query && !p.ctx.value.emailAddress &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@ export default function QueryTokenEntityBuilder(p: QueryTokenEmbeddedBuilderProp
);

return (
<FormGroup ctx={p.ctx} helpText={p.helpText}
children={() => !qte || !qte.parseException ? tokenBuilder :
<FormGroup ctx={p.ctx} helpText={p.helpText}>
{() => !qte || !qte.parseException ? tokenBuilder :
<div>
<code>{qte.tokenString}</code>
<br />
Expand All @@ -54,7 +54,7 @@ export default function QueryTokenEntityBuilder(p: QueryTokenEmbeddedBuilderProp
</p>
</div>
}
/>
</FormGroup>
);
}

6 changes: 3 additions & 3 deletions Signum.React.Extensions/UserQueries/Templates/UserQuery.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,13 @@ export default function UserQuery(p: { ctx: TypeContext<UserQueryEntity> }) {
<div>
<EntityLine ctx={ctx.subCtx(e => e.owner)} />
<ValueLine ctx={ctx.subCtx(e => e.displayName)} />
<FormGroup ctx={ctx.subCtx(e => e.query)}
children={() => query && (
<FormGroup ctx={ctx.subCtx(e => e.query)}>
{() => query && (
Finder.isFindable(query.key, true) ?
<a className="form-control-static" href={Finder.findOptionsPath({ queryName: query.key })}>{getQueryNiceName(query.key)}</a> :
<span>{getQueryNiceName(query.key)}</span>)
}
/>
</FormGroup>

{query &&
(<div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,11 @@ const [show, setShow] = React.useState<boolean>(true);
var stats = p.stats;

return (
<FormGroup ctx={ctx} children={() => <button className="btn btn-default" onClick={handleClick}>
<FontAwesomeIcon icon="gauge" color="green" /> {WorkflowActivityMonitorMessage.WorkflowActivityMonitor.niceToString()}
</button>}
/>
<FormGroup ctx={ctx}>
{() => <button className="btn btn-default" onClick={handleClick}>
<FontAwesomeIcon icon="gauge" color="green" /> {WorkflowActivityMonitorMessage.WorkflowActivityMonitor.niceToString()}
</button>}
</FormGroup>
);
}

Expand All @@ -86,9 +87,13 @@ const [show, setShow] = React.useState<boolean>(true);
<div className="modal-body">
{
<div>
<FormGroup ctx={ctx} label={CaseActivityEntity.nicePluralName()} children={inputId => <FormControlReadonly inputId={inputId} ctx={ctx}>{stats.caseActivityCount}</FormControlReadonly>} />
<FormGroup ctx={ctx} label={CaseActivityEntity.nicePluralName()}>
{inputId => <FormControlReadonly id={inputId} ctx={ctx}>{stats.caseActivityCount}</FormControlReadonly>}
</FormGroup>
{config.columns.map((col, i) =>
<FormGroup ctx={ctx} label={col.displayName || col.token!.niceName} children={inputId => <FormControlReadonly inputId={inputId} ctx={ctx}>{stats.customValues[i]}</FormControlReadonly>} />
<FormGroup ctx={ctx} label={col.displayName || col.token!.niceName}>
{inputId => <FormControlReadonly id={inputId} ctx={ctx}>{stats.customValues[i]}</FormControlReadonly>}
</FormGroup>
)}
{activity.type == "CallWorkflow" || activity.type == "DecompositionWorkflow" ?
renderSubWorkflowExtra(ctx) :
Expand Down
Loading

2 comments on commit 7fc7c5e

@olmobrutall
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Accessibility

In the last months we have been bussy with many new features. So much I didn't have too much time to write about them, now many of them look ready for a public presentations... Let's go!

For one of the projects (a public offering) we needed to ensure the application was passing the WCAG 2.1 guidelines.

The following commits (3cce578, 806c73a, fc341be, c26a9ef) made by @JafarMirzaie apply some of the recomendations of some WACG tools / online tests.

The most important changes are:

  • Adding title to buttons that only have an image (i.e. FontAwesomeIcon).
  • Replace div/span with an onClick event for a button so they are focusable.
  • Propper <label> to <input> connection using id and for attributes.

If you have any custom FormGroup you will need to fix it manually (it's a compile-time error)

Before:

<FormGroup ctx={dc}>
  <div className={dc.inputGroupClass}>
    <FormControlReadonly ctx={dc}>
		{formatNumber.format(subTotalPrice(dc.value))}
    </FormControlReadonly>
	<span className="input-group-text"></span>
  </div>
</FormGroup>
<FormGroup ctx={dc}>
	{id =>
	 <div className={dc.inputGroupClass}>
		<FormControlReadonly id={id} ctx={dc}>
		 {formatNumber.format(subTotalPrice(dc.value))}
	   </FormControlReadonly>
	   <span className="input-group-text"></span>
	 </div>
	}
</FormGroup>

The change is automatic for every ValueLine / EntityLine / etc...

Thanks @jafar for maiking Signum Framework goodies accessible to everyone :)

@JafarMirzaie
Copy link
Contributor Author

@JafarMirzaie JafarMirzaie commented on 7fc7c5e May 4, 2023 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.