TF-3763 Update style for Has attachment checkbox in advanced search view

Signed-off-by: dab246 <tdvu@linagora.com>
This commit is contained in:
dab246
2025-06-13 11:20:15 +07:00
committed by Dat H. Pham
parent 061f5d232c
commit c528722685
7 changed files with 134 additions and 78 deletions
+2
View File
@@ -93,6 +93,8 @@ export 'presentation/views/toast/toast_position.dart';
export 'presentation/views/toast/tmail_toast.dart';
export 'presentation/views/bottom_popup/full_screen_action_sheet_builder.dart';
export 'presentation/views/checkbox/labeled_checkbox.dart';
export 'presentation/views/checkbox/default_labeled_checkbox.dart';
export 'presentation/views/checkbox/custom_icon_labeled_checkbox.dart';
export 'presentation/views/container/tmail_container_widget.dart';
export 'presentation/views/clipper/side_arrow_clipper.dart';
export 'presentation/views/avatar/gradient_circle_avatar_icon.dart';
@@ -261,6 +261,15 @@ class ThemeUtils {
color: AppColor.textPrimary,
);
static const TextStyle textStyleM3BodyMedium3 = TextStyle(
fontFamily: ConstantsUI.fontApp,
fontWeight: FontWeight.w400,
letterSpacing: 0.25,
fontSize: 14,
height: 20 / 14,
color: AppColor.m3SurfaceBackground,
);
static TextStyle textStyleAppShortcut() => const TextStyle(
fontFamily: ConstantsUI.fontApp,
fontWeight: FontWeight.normal,
@@ -0,0 +1,44 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/views/checkbox/labeled_checkbox.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class CustomIconLabeledCheckbox extends LabeledCheckbox {
final String svgIconPath;
final String selectedSvgIconPath;
final FocusNode focusNode;
const CustomIconLabeledCheckbox({
super.key,
required super.label,
required super.onChanged,
required this.svgIconPath,
required this.selectedSvgIconPath,
required this.focusNode,
super.value,
super.gap = 16.0,
});
@override
Widget get buildCheckboxWidget => FocusableActionDetector(
focusNode: focusNode,
autofocus: false,
child: Material(
type: MaterialType.transparency,
child: InkWell(
canRequestFocus: true,
focusColor: AppColor.colorMailboxHovered,
borderRadius: const BorderRadius.all(Radius.circular(20)),
onTap: () => onChanged(!(value)),
child: SvgPicture.asset(
value ? selectedSvgIconPath : svgIconPath,
width: 20,
height: 20,
colorFilter: AppColor.primaryColor.asFilter(),
fit: BoxFit.fill,
),
),
),
);
}
@@ -0,0 +1,28 @@
import 'package:core/presentation/views/checkbox/labeled_checkbox.dart';
import 'package:flutter/material.dart';
class DefaultLabeledCheckbox extends LabeledCheckbox {
final Color activeColor;
final FocusNode focusNode;
const DefaultLabeledCheckbox({
super.key,
required super.label,
required super.onChanged,
required this.activeColor,
required this.focusNode,
super.value,
super.gap,
super.textStyle,
});
@override
Widget get buildCheckboxWidget => Checkbox(
value: value,
activeColor: activeColor,
visualDensity: VisualDensity.compact,
focusNode: focusNode,
onChanged: onChanged,
);
}
@@ -1,60 +1,49 @@
import 'package:core/presentation/utils/theme_utils.dart';
import 'package:flutter/material.dart';
typedef OnChangedAction = void Function(bool? value);
class LabeledCheckbox extends StatelessWidget {
const LabeledCheckbox({Key? key,
const LabeledCheckbox({
Key? key,
required this.label,
this.contentPadding,
this.value,
this.onChanged,
this.activeColor,
this.fontSize = 16,
required this.onChanged,
this.value = false,
this.gap = 4.0,
this.bold = false,
this.focusNode,
this.textStyle,
}) : super(key: key);
final String label;
final EdgeInsets? contentPadding;
final bool? value;
final Function(bool?)? onChanged;
final Color? activeColor;
final double fontSize;
final bool value;
final OnChangedAction onChanged;
final double gap;
final bool bold;
final FocusNode? focusNode;
final TextStyle? textStyle;
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () => onChanged?.call(!(value ?? false)),
child: Padding(
padding: contentPadding ?? const EdgeInsets.all(0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Checkbox(
value: value,
activeColor: activeColor,
visualDensity: VisualDensity.compact,
focusNode: focusNode,
onChanged: onChanged,
),
SizedBox(
width: gap,
),
Flexible(
child: Text(
label,
style: TextStyle(
fontSize: fontSize,
fontWeight: bold ? FontWeight.bold : FontWeight.normal,
color: Colors.black
),
),
),
],
),
onTap: () => onChanged(!(value)),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
buildCheckboxWidget,
buildGapWidget,
buildLabelWidget,
],
),
);
}
}
Widget get buildCheckboxWidget => Checkbox(
value: value,
visualDensity: VisualDensity.compact,
onChanged: onChanged,
);
Widget get buildGapWidget => SizedBox(width: gap);
Widget get buildLabelWidget => Text(
label,
style: textStyle ?? ThemeUtils.textStyleM3BodyMedium3,
);
}
@@ -1,5 +1,5 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/views/checkbox/labeled_checkbox.dart';
import 'package:core/presentation/views/checkbox/default_labeled_checkbox.dart';
import 'package:flutter/material.dart';
import 'package:tmail_ui_user/features/base/isolate/background_isolate_binary_messenger/background_isolate_binary_messenger_mobile.dart';
import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -8,16 +8,16 @@ typedef OnChangedHasAttachment = void Function(bool? value);
class CheckBoxHasAttachmentWidget extends StatelessWidget {
final bool hasAttachmentValue;
final FocusNode? currentFocusNode;
final FocusNode currentFocusNode;
final FocusNode? nextFocusNode;
final OnChangedHasAttachment? onChanged;
final OnChangedHasAttachment onChanged;
const CheckBoxHasAttachmentWidget({
super.key,
required this.hasAttachmentValue,
this.currentFocusNode,
required this.currentFocusNode,
required this.onChanged,
this.nextFocusNode,
this.onChanged,
});
@override
@@ -29,10 +29,9 @@ class CheckBoxHasAttachmentWidget extends StatelessWidget {
nextFocusNode?.requestFocus();
}
},
child: LabeledCheckbox(
child: DefaultLabeledCheckbox(
label: AppLocalizations.of(context).hasAttachment,
focusNode: currentFocusNode,
contentPadding: EdgeInsets.zero,
value: hasAttachmentValue,
activeColor: AppColor.primaryColor,
onChanged: onChanged,
@@ -1,7 +1,7 @@
import 'package:core/presentation/extensions/color_extension.dart';
import 'package:core/presentation/utils/responsive_utils.dart';
import 'package:core/presentation/views/button/icon_button_web.dart';
import 'package:core/presentation/views/checkbox/labeled_checkbox.dart';
import 'package:core/presentation/views/checkbox/custom_icon_labeled_checkbox.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
@@ -24,12 +24,9 @@ class AdvancedSearchFilterFormBottomView extends GetWidget<AdvancedFilterControl
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Transform(
transform: Matrix4.translationValues(-8.0, 0.0, 0.0),
child: _buildCheckboxHasAttachment(
context,
currentFocusNode: focusManager.attachmentCheckboxFocusNode,
nextFocusNode: focusManager.searchButtonFocusNode),
_buildCheckboxHasAttachment(
context,
focusManager.attachmentCheckboxFocusNode,
),
_buildListButton(context, controller.responsiveUtils),
],
@@ -105,28 +102,16 @@ class AdvancedSearchFilterFormBottomView extends GetWidget<AdvancedFilterControl
Widget _buildCheckboxHasAttachment(
BuildContext context,
{
FocusNode? currentFocusNode,
FocusNode? nextFocusNode,
}
FocusNode currentFocusNode,
) {
return Obx(
() => KeyboardListener(
focusNode: FocusNode(),
onKeyEvent: (event) {
if (event is KeyDownEvent &&
event.logicalKey == LogicalKeyboardKey.tab) {
nextFocusNode?.requestFocus();
}
},
child: LabeledCheckbox(
label: AppLocalizations.of(context).hasAttachment,
focusNode: currentFocusNode,
contentPadding: EdgeInsets.zero,
value: controller.hasAttachment.value,
activeColor: AppColor.primaryColor,
onChanged: controller.onHasAttachmentCheckboxChanged,
),
() => CustomIconLabeledCheckbox(
label: AppLocalizations.of(context).hasAttachment,
svgIconPath: controller.imagePaths.icCheckboxUnselected,
selectedSvgIconPath: controller.imagePaths.icCheckboxSelected,
focusNode: currentFocusNode,
value: controller.hasAttachment.value,
onChanged: controller.onHasAttachmentCheckboxChanged,
),
);
}