From 14da48d3993d9b148bec129a3a5989108b21fc33 Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Mon, 13 Jan 2025 14:16:43 +0100 Subject: [PATCH] feat: "Quit without saving?" in a modal sheet (#6192) * "Quit without saving?" in a modal sheet * Revert changes on SmoothAlertDialog * Fix bottom margin --- .../bottom_sheets/smooth_bottom_sheet.dart | 32 ++++++-- packages/smooth_app/lib/l10n/app_en.arb | 1 + packages/smooth_app/lib/l10n/app_fr.arb | 1 + .../pages/product/may_exit_page_helper.dart | 82 +++++++++++++------ 4 files changed, 84 insertions(+), 32 deletions(-) diff --git a/packages/smooth_app/lib/generic_lib/bottom_sheets/smooth_bottom_sheet.dart b/packages/smooth_app/lib/generic_lib/bottom_sheets/smooth_bottom_sheet.dart index 882622d90949..c71fad863b22 100644 --- a/packages/smooth_app/lib/generic_lib/bottom_sheets/smooth_bottom_sheet.dart +++ b/packages/smooth_app/lib/generic_lib/bottom_sheets/smooth_bottom_sheet.dart @@ -86,6 +86,11 @@ Future showSmoothListOfChoicesModalSheet({ List? suffixIcons, Color? suffixIconTint, EdgeInsetsGeometry? padding, + EdgeInsetsGeometry? dividerPadding, + TextStyle? textStyle, + Color? headerBackgroundColor, + Color? prefixIndicatorColor, + bool safeArea = false, }) { assert(labels.length == values.length); assert(prefixIcons == null || values.length == prefixIcons.length); @@ -105,11 +110,12 @@ Future showSmoothListOfChoicesModalSheet({ leading: prefixIcons != null ? IconTheme.merge( data: IconThemeData(color: prefixIconTint), - child: prefixIcons[i]) + child: prefixIcons[i], + ) : null, title: Text( labels.elementAt(i), - style: const TextStyle(fontWeight: FontWeight.w500), + style: textStyle ?? const TextStyle(fontWeight: FontWeight.w500), ), contentPadding: EdgeInsetsDirectional.only( start: LARGE_SPACE, @@ -129,7 +135,13 @@ Future showSmoothListOfChoicesModalSheet({ ); if (i < labels.length - 1) { - items.add(const Divider(height: 1.0)); + const Widget divider = Divider(height: 1.0); + + if (dividerPadding != null) { + items.add(Padding(padding: dividerPadding, child: divider)); + } else { + items.add(divider); + } } } @@ -137,13 +149,20 @@ Future showSmoothListOfChoicesModalSheet({ items.add(footer); } - items.add(SizedBox(height: MediaQuery.of(context).padding.bottom)); + final double paddingHeight = MediaQuery.paddingOf(context).bottom; + items.add(SizedBox(height: paddingHeight)); + + if (safeArea && paddingHeight == 0.0) { + items.add(SizedBox(height: MediaQuery.viewPaddingOf(context).bottom)); + } return showSmoothModalSheet( context: context, builder: (BuildContext context) => SmoothModalSheet( title: title, prefixIndicator: true, + prefixIndicatorColor: prefixIndicatorColor, + headerBackgroundColor: headerBackgroundColor, bodyPadding: EdgeInsets.zero, body: Column(children: items), ), @@ -184,6 +203,7 @@ class SmoothModalSheet extends StatelessWidget { required this.body, bool prefixIndicator = false, bool closeButton = true, + Color? prefixIndicatorColor, Color? headerBackgroundColor, Color? headerForegroundColor, this.bodyPadding, @@ -192,7 +212,9 @@ class SmoothModalSheet extends StatelessWidget { }) : header = SmoothModalSheetHeader( title: title, prefix: prefixIndicator - ? const SmoothModalSheetHeaderPrefixIndicator() + ? SmoothModalSheetHeaderPrefixIndicator( + color: prefixIndicatorColor, + ) : null, suffix: closeButton ? SmoothModalSheetHeaderCloseButton( diff --git a/packages/smooth_app/lib/l10n/app_en.arb b/packages/smooth_app/lib/l10n/app_en.arb index 90fae0e28dfd..64ef8789681c 100644 --- a/packages/smooth_app/lib/l10n/app_en.arb +++ b/packages/smooth_app/lib/l10n/app_en.arb @@ -1556,6 +1556,7 @@ "@edit_product_form_item_categories_explainer_3": { "description": "Product edition - Categories - input explainer, part 3" }, + "edit_product_form_item_exit_title": "Quit without saving?", "edit_product_form_item_exit_confirmation": "Do you want to save your changes before leaving this page?", "edit_product_form_item_exit_confirmation_positive_button": "Save changes", "edit_product_form_item_exit_confirmation_negative_button": "Discard changes", diff --git a/packages/smooth_app/lib/l10n/app_fr.arb b/packages/smooth_app/lib/l10n/app_fr.arb index 002b6a0c4a51..8c9d5b12bf16 100644 --- a/packages/smooth_app/lib/l10n/app_fr.arb +++ b/packages/smooth_app/lib/l10n/app_fr.arb @@ -1556,6 +1556,7 @@ "@edit_product_form_item_categories_explainer_3": { "description": "Product edition - Categories - input explainer, part 3" }, + "edit_product_form_item_exit_title": "Quitter sans sauvegarder ?", "edit_product_form_item_exit_confirmation": "Souhaitez-vous enregistrer vos modifications avant de quitter cette page ?", "edit_product_form_item_exit_confirmation_positive_button": "Enregistrer les modifications", "edit_product_form_item_exit_confirmation_negative_button": "Annuler les modifications", diff --git a/packages/smooth_app/lib/pages/product/may_exit_page_helper.dart b/packages/smooth_app/lib/pages/product/may_exit_page_helper.dart index 7fd277803124..3460dc7b1608 100644 --- a/packages/smooth_app/lib/pages/product/may_exit_page_helper.dart +++ b/packages/smooth_app/lib/pages/product/may_exit_page_helper.dart @@ -1,6 +1,11 @@ import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; -import 'package:smooth_app/generic_lib/dialogs/smooth_alert_dialog.dart'; +import 'package:smooth_app/generic_lib/bottom_sheets/smooth_bottom_sheet.dart'; +import 'package:smooth_app/generic_lib/design_constants.dart'; +import 'package:smooth_app/helpers/color_extension.dart'; +import 'package:smooth_app/themes/smooth_theme.dart'; +import 'package:smooth_app/themes/smooth_theme_colors.dart'; +import 'package:smooth_app/themes/theme_provider.dart'; /// Helper class about the "You're leaving the page with unsaved changes" case. class MayExitPageHelper { @@ -13,30 +18,53 @@ class MayExitPageHelper { Future openSaveBeforeLeavingDialog( final BuildContext context, { final String? title, - }) async => - showDialog( - context: context, - builder: (final BuildContext context) { - final AppLocalizations appLocalizations = - AppLocalizations.of(context); - return SmoothAlertDialog( - close: true, - actionsAxis: Axis.vertical, - body: - Text(appLocalizations.edit_product_form_item_exit_confirmation), - title: title ?? appLocalizations.edit_product_label, - negativeAction: SmoothActionButton( - text: appLocalizations - .edit_product_form_item_exit_confirmation_negative_button, - onPressed: () => Navigator.pop(context, false), - ), - positiveAction: SmoothActionButton( - text: appLocalizations - .edit_product_form_item_exit_confirmation_positive_button, - onPressed: () => Navigator.pop(context, true), - ), - actionsOrder: SmoothButtonsBarOrder.numerical, - ); - }, - ); + }) async { + final AppLocalizations appLocalizations = AppLocalizations.of(context); + final SmoothColorsThemeExtension extension = + context.extension(); + + const Color color = Color(0xFFB81D1D); + + return showSmoothListOfChoicesModalSheet( + context: context, + title: title ?? appLocalizations.edit_product_form_item_exit_title, + headerBackgroundColor: color, + header: ColoredBox( + color: context.lightTheme(listen: false) + ? color.lighten(0.55) + : color.darken(0.3), + child: Padding( + padding: const EdgeInsetsDirectional.symmetric( + horizontal: LARGE_SPACE, + vertical: MEDIUM_SPACE, + ), + child: Text( + appLocalizations.edit_product_form_item_exit_confirmation, + style: Theme.of(context).textTheme.bodyLarge?.copyWith( + fontWeight: FontWeight.w600, + ), + ), + ), + ), + labels: [ + appLocalizations + .edit_product_form_item_exit_confirmation_positive_button, + appLocalizations + .edit_product_form_item_exit_confirmation_negative_button, + ], + values: [ + true, + false, + ], + prefixIcons: [ + Icon(Icons.save_rounded, color: extension.success), + Icon(Icons.cancel_rounded, color: extension.error), + ], + dividerPadding: const EdgeInsetsDirectional.symmetric( + horizontal: MEDIUM_SPACE, + ), + textStyle: const TextStyle(fontWeight: FontWeight.w600), + safeArea: true, + ); + } }