diff options
| author | crupest <crupest@outlook.com> | 2021-07-01 20:02:32 +0800 |
|---|---|---|
| committer | crupest <crupest@outlook.com> | 2021-07-01 20:02:32 +0800 |
| commit | a6f0f257f060c2e0be139a5e17a8f68cc9bfde4a (patch) | |
| tree | d43c6d20dc10163b40a30bd4e96f915747dc3e51 /FrontEnd | |
| parent | 47175cf9afcd86b0b92f7121ce0c3d85b948b6dd (diff) | |
| download | timeline-a6f0f257f060c2e0be139a5e17a8f68cc9bfde4a.tar.gz timeline-a6f0f257f060c2e0be139a5e17a8f68cc9bfde4a.tar.bz2 timeline-a6f0f257f060c2e0be139a5e17a8f68cc9bfde4a.zip | |
...
Diffstat (limited to 'FrontEnd')
| -rw-r--r-- | FrontEnd/TODO.md | 2 | ||||
| -rw-r--r-- | FrontEnd/src/views/common/dailog/OperationDialog.tsx | 44 |
2 files changed, 40 insertions, 6 deletions
diff --git a/FrontEnd/TODO.md b/FrontEnd/TODO.md index b407128e..53e9750e 100644 --- a/FrontEnd/TODO.md +++ b/FrontEnd/TODO.md @@ -6,5 +6,5 @@ - [x] Improve buttons.
- [x] Improve icon buttons.
- [ ] Login page.
-- [ ] Alert.
+- [x] Alert.
- [x] Move prefix `tl` to `cru`.
diff --git a/FrontEnd/src/views/common/dailog/OperationDialog.tsx b/FrontEnd/src/views/common/dailog/OperationDialog.tsx index 083d60da..6bc846dd 100644 --- a/FrontEnd/src/views/common/dailog/OperationDialog.tsx +++ b/FrontEnd/src/views/common/dailog/OperationDialog.tsx @@ -51,6 +51,7 @@ export interface OperationDialogBoolInput { type: "bool"; label: I18nText; initValue?: boolean; + helperText?: string; } export interface OperationDialogSelectInputOption { @@ -77,6 +78,7 @@ export interface OperationDialogDateTimeInput { type: "datetime"; label?: I18nText; initValue?: string; + helperText?: string; } export type OperationDialogInput = @@ -330,7 +332,13 @@ const OperationDialog = < ); } else if (item.type === "bool") { return ( - <div key={index}> + <div + key={index} + className={classNames( + "cru-operation-dialog-group", + error != null ? "error" : null + )} + > <input type="checkbox" checked={value as boolean} @@ -339,7 +347,19 @@ const OperationDialog = < }} disabled={process} /> - <label>{convertI18nText(item.label, t)}</label> + <label className="cru-operation-dialog-inline-label"> + {convertI18nText(item.label, t)} + </label> + {error != null && ( + <div className="cru-operation-dialog-error-text"> + {error} + </div> + )} + {item.helperText && ( + <div className="cru-operation-dialog-helper-text"> + {t(item.helperText)} + </div> + )} </div> ); } else if (item.type === "select") { @@ -374,7 +394,13 @@ const OperationDialog = < ); } else if (item.type === "color") { return ( - <div key={index}> + <div + key={index} + className={classNames( + "cru-operation-dialog-group", + error != null ? "error" : null + )} + > {item.canBeNull ? ( <input type="checkbox" @@ -403,9 +429,17 @@ const OperationDialog = < ); } else if (item.type === "datetime") { return ( - <div key={index}> + <div + key={index} + className={classNames( + "cru-operation-dialog-group", + error != null ? "error" : null + )} + > {item.label && ( - <label>{convertI18nText(item.label, t)}</label> + <label className="cru-operation-dialog-label"> + {convertI18nText(item.label, t)} + </label> )} <input type="datetime-local" |