TF-4370 Add Description field to Create new Label modal

This commit is contained in:
dab246
2026-03-11 14:41:02 +07:00
committed by Dat H. Pham
parent a8dca322d4
commit 4c837ed9cf
6 changed files with 97 additions and 4 deletions
@@ -26,6 +26,8 @@ class TextFieldBuilder extends StatefulWidget {
final bool autocorrect;
final TextDirection textDirection;
final bool readOnly;
final bool isFillContainer;
final TextAlignVertical? textAlignVertical;
final MouseCursor? mouseCursor;
final String? semanticLabel;
@@ -36,6 +38,8 @@ class TextFieldBuilder extends StatefulWidget {
this.obscureText = false,
this.autoFocus = false,
this.readOnly = false,
this.isFillContainer = false,
this.textAlignVertical,
this.textStyle,
this.textDirection = TextDirection.ltr,
this.textInputAction,
@@ -89,6 +93,8 @@ class _TextFieldBuilderState extends State<TextFieldBuilder> {
decoration: widget.decoration,
maxLines: widget.maxLines,
minLines: widget.minLines,
textAlignVertical: widget.textAlignVertical,
expands: widget.isFillContainer,
keyboardAppearance: widget.keyboardAppearance,
style: widget.textStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(
color: AppColor.textFieldTextColor,
@@ -11,7 +11,12 @@ class DefaultInputFieldWidget extends StatelessWidget {
final String? hintText;
final String? errorText;
final Color? inputColor;
final bool hasMaxLines;
final bool isFillContainer;
final TextAlignVertical? textAlignVertical;
final double? maxHeight;
final FocusNode? focusNode;
final TextInputAction? inputAction;
final OnTextChange? onTextChange;
final OnTextSubmitted? onTextSubmitted;
@@ -22,6 +27,11 @@ class DefaultInputFieldWidget extends StatelessWidget {
this.errorText,
this.focusNode,
this.inputColor,
this.hasMaxLines = true,
this.isFillContainer = false,
this.textAlignVertical,
this.maxHeight,
this.inputAction,
this.onTextChange,
this.onTextSubmitted,
});
@@ -30,17 +40,19 @@ class DefaultInputFieldWidget extends StatelessWidget {
Widget build(BuildContext context) {
return TextFieldBuilder(
controller: textEditingController,
maxLines: 1,
textInputAction: TextInputAction.next,
maxLines: hasMaxLines ? 1 : null,
textInputAction: inputAction ?? TextInputAction.next,
textStyle: ThemeUtils.textStyleBodyBody3(
color: inputColor ?? AppColor.m3SurfaceBackground,
),
isFillContainer: isFillContainer,
textAlignVertical: textAlignVertical,
focusNode: focusNode,
onTextSubmitted: onTextSubmitted,
onTextChange: onTextChange,
decoration: InputDecoration(
constraints: BoxConstraints(
maxHeight: errorText?.isNotEmpty == true ? 60 : 40,
maxHeight: maxHeight ?? (errorText?.isNotEmpty == true ? 60 : 40),
),
filled: true,
fillColor: errorText?.isNotEmpty == true
@@ -11,8 +11,13 @@ class LabelInputFieldBuilder extends StatelessWidget {
final FocusNode? focusNode;
final double? runSpacing;
final double? inputFieldMaxWidth;
final double? inputFieldHeight;
final bool arrangeHorizontally;
final bool isLabelHasColon;
final bool hasMaxLines;
final bool isFillContainer;
final TextAlignVertical? textAlignVertical;
final TextInputAction? inputAction;
final OnTextChange? onTextChange;
const LabelInputFieldBuilder({
@@ -21,12 +26,17 @@ class LabelInputFieldBuilder extends StatelessWidget {
required this.textEditingController,
this.arrangeHorizontally = true,
this.isLabelHasColon = true,
this.hasMaxLines = true,
this.isFillContainer = false,
this.textAlignVertical,
this.hintText,
this.errorText,
this.focusNode,
this.labelStyle,
this.runSpacing,
this.inputFieldMaxWidth,
this.inputFieldHeight,
this.inputAction,
this.onTextChange,
});
@@ -39,6 +49,11 @@ class LabelInputFieldBuilder extends StatelessWidget {
hintText: hintText,
errorText: errorText,
focusNode: focusNode,
hasMaxLines: hasMaxLines,
textAlignVertical: textAlignVertical,
isFillContainer: isFillContainer,
inputAction: inputAction,
maxHeight: inputFieldHeight,
onTextChange: onTextChange,
),
);
@@ -55,6 +55,9 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
final ValueNotifier<bool> _createLabelStateNotifier = ValueNotifier(false);
final TextEditingController _nameInputController = TextEditingController();
final FocusNode _nameInputFocusNode = FocusNode();
final TextEditingController _descriptionInputController =
TextEditingController();
final FocusNode _descriptionInputFocusNode = FocusNode();
List<String> _labelDisplayNameList = <String>[];
Color? _selectedColor;
@@ -135,6 +138,12 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildLabelNameInputField(appLocalizations),
Padding(
padding: const EdgeInsets.only(top: 16),
child: _buildLabelDescriptionInputField(
appLocalizations,
),
),
Padding(
padding: const EdgeInsets.only(top: 26, bottom: 16),
child: Text(
@@ -297,6 +306,29 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
);
}
Widget _buildLabelDescriptionInputField(AppLocalizations appLocalizations) {
return LabelInputFieldBuilder(
label: appLocalizations.labelDescription,
hintText: appLocalizations.labelDescriptionHintText,
textEditingController: _descriptionInputController,
focusNode: _descriptionInputFocusNode,
arrangeHorizontally: false,
isLabelHasColon: false,
hasMaxLines: false,
isFillContainer: true,
labelStyle: ThemeUtils.textStyleInter600().copyWith(
fontSize: 14,
height: 18 / 14,
color: Colors.black,
),
runSpacing: 16,
inputFieldMaxWidth: double.infinity,
inputFieldHeight: 84,
textAlignVertical: TextAlignVertical.top,
inputAction: TextInputAction.newline,
);
}
void _onLabelNameInputChanged(
AppLocalizations appLocalizations,
String value,
@@ -376,6 +408,8 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
void dispose() {
_nameInputFocusNode.dispose();
_nameInputController.dispose();
_descriptionInputFocusNode.dispose();
_descriptionInputController.dispose();
_labelNameErrorTextNotifier.dispose();
_labelSelectedColorNotifier.dispose();
_createLabelStateNotifier.dispose();
+13 -1
View File
@@ -1,5 +1,5 @@
{
"@@last_modified": "2026-03-04T11:35:04.572137",
"@@last_modified": "2026-03-11T14:39:59.601630",
"initializing_data": "Initializing data...",
"@initializing_data": {
"type": "text",
@@ -5447,5 +5447,17 @@
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"labelDescription": "Description (optional)",
"@labelDescription": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
},
"labelDescriptionHintText": "Add a short description to explain what this label is for",
"@labelDescriptionHintText": {
"type": "text",
"placeholders_order": [],
"placeholders": {}
}
}
@@ -5762,4 +5762,18 @@ class AppLocalizations {
name: 'deleteALabelFailure',
);
}
String get labelDescription {
return Intl.message(
'Description (optional)',
name: 'labelDescription',
);
}
String get labelDescriptionHintText {
return Intl.message(
'Add a short description to explain what this label is for',
name: 'labelDescriptionHintText',
);
}
}