From a32fde1bd0682bc0757a672213963cf39089aabc Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Thu, 21 Nov 2024 13:16:16 +0100 Subject: [PATCH] fix: Harmonization between modal sheets (#5875) * Harmonization between modal sheets * Add a missing const --- .../bottom_sheets/smooth_bottom_sheet.dart | 110 ++++++++++-------- .../lib/pages/all_product_list_modal.dart | 14 ++- .../preferences/user_preferences_widgets.dart | 25 ++-- .../product/common/product_list_page.dart | 1 + 4 files changed, 91 insertions(+), 59 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 2dd49071e6b..7f4e276eaa5 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 @@ -6,7 +6,9 @@ import 'package:smooth_app/generic_lib/bottom_sheets/smooth_draggable_bottom_she import 'package:smooth_app/generic_lib/design_constants.dart'; import 'package:smooth_app/helpers/haptic_feedback_helper.dart'; import 'package:smooth_app/resources/app_icons.dart' as icons; +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'; Future showSmoothModalSheet({ required BuildContext context, @@ -98,7 +100,7 @@ class SmoothModalSheet extends StatelessWidget { @override Widget build(BuildContext context) { Widget bodyChild = Padding( - padding: bodyPadding ?? const EdgeInsets.all(MEDIUM_SPACE), + padding: bodyPadding ?? const EdgeInsetsDirectional.all(MEDIUM_SPACE), child: body, ); @@ -147,15 +149,23 @@ class SmoothModalSheetHeader extends StatelessWidget implements SizeWidget { @override Widget build(BuildContext context) { final Color primaryColor = - Theme.of(context).extension()!.primaryDark; + context.extension().primaryDark; final Color tintColor = foregroundColor ?? Colors.white; return IconTheme( data: IconThemeData(color: tintColor), child: Container( height: suffix is SmoothModalSheetHeaderButton ? double.infinity : null, - color: backgroundColor ?? primaryColor, constraints: const BoxConstraints(minHeight: MIN_HEIGHT), + decoration: BoxDecoration( + color: backgroundColor ?? primaryColor, + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.2), + blurRadius: 5.0, + ), + ], + ), padding: EdgeInsetsDirectional.only( start: (prefix?.requiresPadding == true ? 0 : VERY_LARGE_SPACE), top: VERY_SMALL_SPACE, @@ -225,9 +235,11 @@ class SmoothModalSheetHeaderButton extends StatelessWidget this.tooltip, }); - static const EdgeInsetsGeometry _padding = EdgeInsetsDirectional.symmetric( - horizontal: 15.0, - vertical: 10.0, + static const EdgeInsetsGeometry _padding = EdgeInsetsDirectional.only( + start: LARGE_SPACE - 1, + end: LARGE_SPACE, + top: BALANCED_SPACE, + bottom: BALANCED_SPACE, ); final String label; @@ -238,6 +250,10 @@ class SmoothModalSheetHeaderButton extends StatelessWidget @override Widget build(BuildContext context) { + final SmoothColorsThemeExtension extension = + context.extension(); + final bool lightTheme = context.lightTheme(); + return Semantics( value: tooltip, button: true, @@ -251,39 +267,34 @@ class SmoothModalSheetHeaderButton extends StatelessWidget shape: const RoundedRectangleBorder( borderRadius: ROUNDED_BORDER_RADIUS, ), - foregroundColor: Colors.white, - backgroundColor: Theme.of(context).primaryColor, - iconColor: Colors.white, + foregroundColor: lightTheme ? Colors.black : Colors.white, + backgroundColor: + lightTheme ? extension.primaryMedium : extension.primaryBlack, + iconColor: lightTheme ? Colors.black : Colors.white, ), - child: IconTheme( - data: const IconThemeData( - color: Colors.white, - size: 20.0, - ), - child: Row( - children: [ - if (prefix != null) ...[ - prefix!, - const SizedBox( - width: SMALL_SPACE, - ), - ], - Text( - label, - style: const TextStyle( - color: Colors.white, - fontSize: 17.0, - ), - maxLines: 1, + child: Row( + children: [ + if (prefix != null) ...[ + prefix!, + const SizedBox( + width: SMALL_SPACE, ), - if (suffix != null) ...[ - const SizedBox( - width: SMALL_SPACE, - ), - suffix!, - ], ], - ), + Text( + label, + style: const TextStyle( + fontSize: 16.5, + fontWeight: FontWeight.bold, + ), + maxLines: 1, + ), + if (suffix != null) ...[ + const SizedBox( + width: SMALL_SPACE, + ), + suffix!, + ], + ], ), ), ), @@ -326,15 +337,15 @@ class SmoothModalSheetHeaderCloseButton extends StatelessWidget width: 1.5, ), ), - margin: const EdgeInsets.all(VERY_SMALL_SPACE), - padding: const EdgeInsets.all(SMALL_SPACE), + margin: const EdgeInsetsDirectional.all(VERY_SMALL_SPACE), + padding: const EdgeInsetsDirectional.all(SMALL_SPACE), child: const icons.Close( size: 13.0, ), ); } else { icon = const Padding( - padding: EdgeInsets.all(MEDIUM_SPACE), + padding: EdgeInsetsDirectional.all(MEDIUM_SPACE), child: icons.Close( size: 15.0, ), @@ -379,14 +390,19 @@ class SmoothModalSheetHeaderPrefixIndicator extends StatelessWidget @override Widget build(BuildContext context) { final SmoothColorsThemeExtension extension = - Theme.of(context).extension()!; - - return Container( - width: 10.0, - height: 10.0, - decoration: BoxDecoration( - color: extension.secondaryNormal, - shape: BoxShape.circle, + context.extension(); + + return Padding( + padding: const EdgeInsetsDirectional.only(end: VERY_SMALL_SPACE), + child: SizedBox( + width: 10.0, + height: 10.0, + child: DecoratedBox( + decoration: BoxDecoration( + color: extension.secondaryNormal, + shape: BoxShape.circle, + ), + ), ), ); } diff --git a/packages/smooth_app/lib/pages/all_product_list_modal.dart b/packages/smooth_app/lib/pages/all_product_list_modal.dart index cf846ef6491..0d7570e567c 100644 --- a/packages/smooth_app/lib/pages/all_product_list_modal.dart +++ b/packages/smooth_app/lib/pages/all_product_list_modal.dart @@ -8,6 +8,9 @@ import 'package:smooth_app/generic_lib/design_constants.dart'; import 'package:smooth_app/pages/preferences/user_preferences_list_tile.dart'; import 'package:smooth_app/pages/product/common/product_list_popup_items.dart'; import 'package:smooth_app/pages/product/common/product_query_page_helper.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'; /// Page that lists all product lists. class AllProductListModal extends StatelessWidget { @@ -84,10 +87,14 @@ class _ModalProductListItem extends StatelessWidget { @override Widget build(BuildContext context) { - final LocalDatabase localDatabase = context.watch(); + final SmoothColorsThemeExtension extension = + context.extension(); + final bool lightTheme = context.lightTheme(); final AppLocalizations appLocalizations = AppLocalizations.of(context); + final LocalDatabase localDatabase = context.watch(); + final int productsLength = productList.barcodes.length; final bool enableRename = productList.listType == ProductListType.USER; final bool hasProducts = productsLength > 0; @@ -121,7 +128,7 @@ class _ModalProductListItem extends StatelessWidget { child: ListTile( leading: Icon(item.getIconData()), title: Text(item.getTitle(appLocalizations)), - contentPadding: EdgeInsets.zero, + contentPadding: EdgeInsetsDirectional.zero, onTap: () async { Navigator.of(context).pop(); await item.doSomething( @@ -140,7 +147,8 @@ class _ModalProductListItem extends StatelessWidget { ) : null, selected: selected, - selectedColor: Theme.of(context).primaryColor.withOpacity(0.2), + selectedColor: + lightTheme ? extension.primaryMedium : extension.primarySemiDark, contentPadding: const EdgeInsetsDirectional.only( start: VERY_LARGE_SPACE, end: LARGE_SPACE, diff --git a/packages/smooth_app/lib/pages/preferences/user_preferences_widgets.dart b/packages/smooth_app/lib/pages/preferences/user_preferences_widgets.dart index 37705b4fc43..d46cce8da43 100644 --- a/packages/smooth_app/lib/pages/preferences/user_preferences_widgets.dart +++ b/packages/smooth_app/lib/pages/preferences/user_preferences_widgets.dart @@ -337,13 +337,16 @@ class UserPreferencesMultipleChoicesItem extends StatelessWidget { // If there is not enough space, we use the scrolling sheet final T? res; - final SmoothModalSheetHeader header = - SmoothModalSheetHeader(title: title); + final SmoothModalSheetHeader header = SmoothModalSheetHeader( + title: title, + prefix: const SmoothModalSheetHeaderPrefixIndicator(), + ); + if ((itemHeight * labels.length + header.computeHeight(context)) > (queryData.size.height * 0.9) - queryData.viewPadding.top) { res = await showSmoothDraggableModalSheet( context: context, - header: SmoothModalSheetHeader(title: title), + header: header, bodyBuilder: (BuildContext context) { return SliverList( delegate: SliverChildBuilderDelegate( @@ -370,6 +373,7 @@ class UserPreferencesMultipleChoicesItem extends StatelessWidget { } else { final SmoothModalSheet smoothModalSheet = SmoothModalSheet( title: title, + prefixIndicator: true, bodyPadding: EdgeInsets.zero, body: SizedBox( height: itemHeight * labels.length, @@ -446,11 +450,13 @@ class _ChoiceItem extends StatelessWidget { final ThemeData theme = Theme.of(context); final SmoothColorsThemeExtension extension = theme.extension()!; - final Color? selectedColor = selected - ? context.lightTheme() - ? extension.primaryMedium - : extension.primaryDark - : null; + final bool lightTheme = context.lightTheme(); + + final Color backgroundColor = selected + ? (lightTheme ? extension.primaryMedium : extension.primarySemiDark) + : context.lightTheme() + ? Colors.transparent + : extension.primaryUltraBlack; return Semantics( value: label, @@ -458,7 +464,7 @@ class _ChoiceItem extends StatelessWidget { button: true, excludeSemantics: true, child: Ink( - color: selectedColor ?? Colors.transparent, + color: backgroundColor, child: Column( children: [ ListTile( @@ -467,6 +473,7 @@ class _ChoiceItem extends StatelessWidget { title: Text( label, style: theme.textTheme.headlineMedium?.copyWith( + color: !lightTheme ? Colors.white : null, fontWeight: selected ? FontWeight.bold : FontWeight.normal, ), ), diff --git a/packages/smooth_app/lib/pages/product/common/product_list_page.dart b/packages/smooth_app/lib/pages/product/common/product_list_page.dart index b1b1cc1b3b7..a63fe039c9e 100644 --- a/packages/smooth_app/lib/pages/product/common/product_list_page.dart +++ b/packages/smooth_app/lib/pages/product/common/product_list_page.dart @@ -511,6 +511,7 @@ class _ProductListPageState extends State context: context, header: SmoothModalSheetHeader( title: appLocalizations.product_list_select, + prefix: const SmoothModalSheetHeaderPrefixIndicator(), suffix: SmoothModalSheetHeaderButton( label: appLocalizations.product_list_create, prefix: const Icon(Icons.add_circle_outline_sharp),