From a4998cd88780e96177c614cb363995f7d823e90a Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Sun, 6 Aug 2023 13:27:42 +0200 Subject: [PATCH] feat: Tiny UI tweaks for the product edition (#4456) * UI tweaks on the product edition * Some other tweaks --- .../dialogs/smooth_alert_dialog.dart | 60 ++++++++++--------- .../lib/pages/product/edit_image_button.dart | 9 ++- .../lib/pages/product/explanation_widget.dart | 9 +++ .../pages/product/product_image_viewer.dart | 15 ++--- .../lib/pages/product/simple_input_page.dart | 4 +- .../product/simple_input_text_field.dart | 5 +- .../pages/product/simple_input_widget.dart | 10 ++-- packages/smooth_app/pubspec.lock | 2 +- 8 files changed, 67 insertions(+), 47 deletions(-) diff --git a/packages/smooth_app/lib/generic_lib/dialogs/smooth_alert_dialog.dart b/packages/smooth_app/lib/generic_lib/dialogs/smooth_alert_dialog.dart index 55a85f33982..8088a5ac655 100644 --- a/packages/smooth_app/lib/generic_lib/dialogs/smooth_alert_dialog.dart +++ b/packages/smooth_app/lib/generic_lib/dialogs/smooth_alert_dialog.dart @@ -458,36 +458,40 @@ class _SmoothActionFlatButton extends StatelessWidget { value: buttonData.text, button: true, excludeSemantics: true, - child: TextButton( - onPressed: buttonData.onPressed, - style: TextButton.styleFrom( - shape: const RoundedRectangleBorder( - borderRadius: ROUNDED_BORDER_RADIUS, - ), - textStyle: themeData.textTheme.bodyMedium!.copyWith( - color: themeData.colorScheme.onPrimary, - ), - padding: const EdgeInsets.symmetric( - horizontal: SMALL_SPACE, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 2.0), + child: TextButton( + onPressed: buttonData.onPressed, + style: TextButton.styleFrom( + shape: const RoundedRectangleBorder( + borderRadius: ROUNDED_BORDER_RADIUS, + ), + textStyle: themeData.textTheme.bodyMedium!.copyWith( + color: themeData.colorScheme.onPrimary, + ), + padding: const EdgeInsets.symmetric( + horizontal: SMALL_SPACE, + ), + minimumSize: const Size(0, 46.0), ), - minimumSize: const Size(0, 50.0), - ), - child: SizedBox( - height: buttonData.lines != null - ? VERY_LARGE_SPACE * buttonData.lines! - : null, - width: buttonData.minWidth, - child: FittedBox( - fit: BoxFit.scaleDown, - child: Text( - buttonData.text.toUpperCase(), - style: TextStyle( - fontWeight: FontWeight.bold, - color: buttonData.textColor ?? themeData.colorScheme.primary, + child: SizedBox( + height: buttonData.lines != null + ? VERY_LARGE_SPACE * buttonData.lines! + : null, + width: buttonData.minWidth, + child: FittedBox( + fit: BoxFit.scaleDown, + child: Text( + buttonData.text.toUpperCase(), + style: TextStyle( + fontWeight: FontWeight.bold, + color: + buttonData.textColor ?? themeData.colorScheme.primary, + ), + textAlign: TextAlign.center, + overflow: TextOverflow.ellipsis, + maxLines: buttonData.lines ?? 2, ), - textAlign: TextAlign.center, - overflow: TextOverflow.ellipsis, - maxLines: buttonData.lines ?? 2, ), ), ), diff --git a/packages/smooth_app/lib/pages/product/edit_image_button.dart b/packages/smooth_app/lib/pages/product/edit_image_button.dart index c04e9891ed4..bcd2d80b2af 100644 --- a/packages/smooth_app/lib/pages/product/edit_image_button.dart +++ b/packages/smooth_app/lib/pages/product/edit_image_button.dart @@ -35,9 +35,12 @@ class EditImageButton extends StatelessWidget { ), ), onPressed: onPressed, - label: Padding( - padding: EdgeInsets.all(borderWidth ?? 0), - child: Text(label), + label: SizedBox( + width: double.infinity, + child: Padding( + padding: EdgeInsets.all(borderWidth ?? 0), + child: Text(label), + ), ), ); } diff --git a/packages/smooth_app/lib/pages/product/explanation_widget.dart b/packages/smooth_app/lib/pages/product/explanation_widget.dart index 4627018c314..fe77d3a03eb 100644 --- a/packages/smooth_app/lib/pages/product/explanation_widget.dart +++ b/packages/smooth_app/lib/pages/product/explanation_widget.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:smooth_app/generic_lib/design_constants.dart'; /// Widget that displays explanations as a list, with expand/collapse mode. class ExplanationWidget extends StatefulWidget { @@ -55,6 +56,10 @@ class _CollapsedExplanation extends StatelessWidget { overflow: TextOverflow.ellipsis, ), trailing: const Icon(Icons.info_outline), + contentPadding: const EdgeInsetsDirectional.only( + start: SMALL_SPACE * 2, + end: SMALL_SPACE, + ), ); } } @@ -83,6 +88,10 @@ class _ExpandedExplanation extends StatelessWidget { quarterTurns: 2, child: Icon(Icons.expand_circle_down_outlined), ), + contentPadding: const EdgeInsetsDirectional.only( + start: SMALL_SPACE * 2, + end: SMALL_SPACE, + ), ), ); } else { diff --git a/packages/smooth_app/lib/pages/product/product_image_viewer.dart b/packages/smooth_app/lib/pages/product/product_image_viewer.dart index 6fcddc9c9ad..9efbb714901 100644 --- a/packages/smooth_app/lib/pages/product/product_image_viewer.dart +++ b/packages/smooth_app/lib/pages/product/product_image_viewer.dart @@ -154,13 +154,14 @@ class _ProductImageViewerState extends State width: 3, ), ), - child: Padding( - padding: const EdgeInsets.all(SMALL_SPACE), - child: LanguageSelector( - setLanguage: widget.setLanguage, - displayedLanguage: widget.language, - selectedLanguages: selectedLanguages, - foregroundColor: Colors.white, + child: LanguageSelector( + setLanguage: widget.setLanguage, + displayedLanguage: widget.language, + selectedLanguages: selectedLanguages, + foregroundColor: Colors.white, + padding: const EdgeInsetsDirectional.symmetric( + horizontal: 13.0, + vertical: SMALL_SPACE, ), ), ), diff --git a/packages/smooth_app/lib/pages/product/simple_input_page.dart b/packages/smooth_app/lib/pages/product/simple_input_page.dart index 5802bfb89d9..3da2b0903a5 100644 --- a/packages/smooth_app/lib/pages/product/simple_input_page.dart +++ b/packages/smooth_app/lib/pages/product/simple_input_page.dart @@ -1,4 +1,3 @@ -import 'package:auto_size_text/auto_size_text.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:openfoodfacts/openfoodfacts.dart'; @@ -94,9 +93,10 @@ class _SimpleInputPageState extends State { fixKeyboard: true, appBar: SmoothAppBar( centerTitle: false, - title: AutoSizeText( + title: Text( getProductName(widget.product, appLocalizations), maxLines: widget.product.barcode?.isNotEmpty == true ? 1 : 2, + overflow: TextOverflow.ellipsis, ), subTitle: widget.product.barcode != null ? ExcludeSemantics( diff --git a/packages/smooth_app/lib/pages/product/simple_input_text_field.dart b/packages/smooth_app/lib/pages/product/simple_input_text_field.dart index d2fb0654493..150b87c97ff 100644 --- a/packages/smooth_app/lib/pages/product/simple_input_text_field.dart +++ b/packages/smooth_app/lib/pages/product/simple_input_text_field.dart @@ -20,6 +20,7 @@ class SimpleInputTextField extends StatefulWidget { this.minLengthForSuggestions = 1, this.categories, this.shapeProvider, + this.padding, }); final FocusNode focusNode; @@ -32,6 +33,7 @@ class SimpleInputTextField extends StatefulWidget { final int minLengthForSuggestions; final String? categories; final String? Function()? shapeProvider; + final EdgeInsetsGeometry? padding; @override State createState() => _SimpleInputTextFieldState(); @@ -100,7 +102,8 @@ class _SimpleInputTextFieldState extends State { @override Widget build(BuildContext context) { return Padding( - padding: const EdgeInsetsDirectional.only(start: LARGE_SPACE), + padding: widget.padding ?? + const EdgeInsetsDirectional.only(start: LARGE_SPACE), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, diff --git a/packages/smooth_app/lib/pages/product/simple_input_widget.dart b/packages/smooth_app/lib/pages/product/simple_input_widget.dart index 8d7474497f2..3ace0c3d019 100644 --- a/packages/smooth_app/lib/pages/product/simple_input_widget.dart +++ b/packages/smooth_app/lib/pages/product/simple_input_widget.dart @@ -85,6 +85,9 @@ class _SimpleInputWidgetState extends State { tagType: widget.helper.getTagType(), hintText: widget.helper.getAddHint(appLocalizations), controller: widget.controller, + padding: const EdgeInsetsDirectional.only( + start: 9.0, + ), ), ), Tooltip( @@ -93,13 +96,13 @@ class _SimpleInputWidgetState extends State { child: IconButton( onPressed: _onAddItem, icon: const Icon(Icons.add_circle), + splashRadius: 20, ), ) ], ); }, ), - Divider(color: themeData.colorScheme.onBackground), AnimatedList( key: _listKey, initialItemCount: _localTerms.length, @@ -123,10 +126,7 @@ class _SimpleInputWidgetState extends State { customBorder: const CircleBorder(), onTap: () => _onRemoveItem(term, child), child: const Padding( - padding: EdgeInsets.symmetric( - horizontal: MEDIUM_SPACE, - vertical: SMALL_SPACE, - ), + padding: EdgeInsets.all(SMALL_SPACE), child: Icon(Icons.delete), ), ), diff --git a/packages/smooth_app/pubspec.lock b/packages/smooth_app/pubspec.lock index c471ccf3180..be40abb4662 100644 --- a/packages/smooth_app/pubspec.lock +++ b/packages/smooth_app/pubspec.lock @@ -78,7 +78,7 @@ packages: source: hosted version: "7.0.0" async: - dependency: transitive + dependency: "direct main" description: name: async sha256: "947bfcf187f74dbc5e146c9eb9c0f10c9f8b30743e341481c1e2ed3ecc18c20c"