Skip to content

Commit

Permalink
Better edit product page banner
Browse files Browse the repository at this point in the history
  • Loading branch information
@g123k
g123k committed Jan 13, 2025
1 parent 88c2e73 commit a633fc4
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 48 deletions.
8 changes: 8 additions & 0 deletions packages/smooth_app/lib/l10n/app_en.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1398,6 +1398,14 @@
"@edit_product_label": {
"description": "Edit product button label"
},
"edit_product_pending_operations_banner_title": "Uploading your edits…",
"@edit_product_pending_operations_banner_title": {
"description": "When a product has pending edits (being sent to the server), there is a message on the edit page (here is the title of the message)."
},
"edit_product_pending_operations_banner_message": "Your edits are being **sent in the background** (or later in case of error).\nYou can continue editing other product fields.",
"@edit_product_pending_operations_banner_message": {
"description": "When a product has pending edits (being sent to the server), there is a message on the edit page. Please keep the ** syntax to make the text bold."
},
"edit_product_label_short": "Edit",
"@edit_product_label_short": {
"description": "Edit product button short label (only the verb)"
Expand Down
10 changes: 9 additions & 1 deletion packages/smooth_app/lib/l10n/app_fr.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1398,6 +1398,14 @@
"@edit_product_label": {
"description": "Edit product button label"
},
"edit_product_pending_operations_banner_title": "Envoi de vos modifications…",
"@edit_product_pending_operations_banner_title": {
"description": "When a product has pending edits (being sent to the server), there is a message on the edit page (here is the title of the message)."
},
"edit_product_pending_operations_banner_message": "Vos modifications sont en cours d'envoi en **arrière-plan** (ou plus tard en cas d'erreur).\nVous pouvez continuer d'éditer d'autres champs du produit.",
"@edit_product_pending_operations_banner_message": {
"description": "When a product has pending edits (being sent to the server), there is a message on the edit page. Please keep the ** syntax to make the text bold."
},
"edit_product_label_short": "Modifier",
"@edit_product_label_short": {
"description": "Edit product button short label (only the verb)"
Expand Down Expand Up @@ -3433,7 +3441,7 @@
"@product_page_action_bar_item_disable": {
"description": "Accessibility label to disable action (= make it invisible)"
},
"product_page_pending_operations_banner_title": "Téléversement de vos modifications…",
"product_page_pending_operations_banner_title": "Envoi de vos modifications…",
"@product_page_pending_operations_banner_title": {
"description": "When a product has pending edits (being sent to the server), there is a message on the product page (here is the title of the message)."
},
Expand Down
53 changes: 45 additions & 8 deletions packages/smooth_app/lib/pages/product/edit_product_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import 'package:smooth_app/generic_lib/design_constants.dart';
import 'package:smooth_app/generic_lib/widgets/smooth_back_button.dart';
import 'package:smooth_app/generic_lib/widgets/smooth_list_tile_card.dart';
import 'package:smooth_app/helpers/analytics_helper.dart';
import 'package:smooth_app/helpers/color_extension.dart';
import 'package:smooth_app/helpers/product_cards_helper.dart';
import 'package:smooth_app/pages/navigator/app_navigator.dart';
import 'package:smooth_app/pages/onboarding/currency_selector_helper.dart';
Expand All @@ -22,15 +23,17 @@ import 'package:smooth_app/pages/product/edit_product_barcode.dart';
import 'package:smooth_app/pages/product/gallery_view/product_image_gallery_view.dart';
import 'package:smooth_app/pages/product/nutrition_page_loaded.dart';
import 'package:smooth_app/pages/product/product_field_editor.dart';
import 'package:smooth_app/pages/product/product_page/new_product_page_loading_indicator.dart';
import 'package:smooth_app/pages/product/product_type_extensions.dart';
import 'package:smooth_app/pages/product/simple_input_page.dart';
import 'package:smooth_app/pages/product/simple_input_page_helpers.dart';
import 'package:smooth_app/query/product_query.dart';
import 'package:smooth_app/resources/app_animations.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';
import 'package:smooth_app/widgets/smooth_app_bar.dart';
import 'package:smooth_app/widgets/smooth_banner.dart';
import 'package:smooth_app/widgets/smooth_scaffold.dart';

/// Page where we can indirectly edit all data about a product.
Expand Down Expand Up @@ -69,6 +72,9 @@ class _EditProductPageState extends State<EditProductPage> with UpToDateMixin {
final String productBrand =
getProductBrands(upToDateProduct, appLocalizations);

final bool hasUploadIndicator = UpToDateChanges(localDatabase)
.hasNotTerminatedOperations(upToDateProduct.barcode!);

return SmoothScaffold(
backgroundColor: lightTheme
? theme.extension<SmoothColorsThemeExtension>()!.primaryLight
Expand Down Expand Up @@ -147,7 +153,10 @@ class _EditProductPageState extends State<EditProductPage> with UpToDateMixin {
top: SMALL_SPACE,
start: MEDIUM_SPACE,
end: MEDIUM_SPACE,
bottom: MEDIUM_SPACE + MediaQuery.viewPaddingOf(context).bottom,
bottom: MEDIUM_SPACE +
(!hasUploadIndicator
? MediaQuery.viewPaddingOf(context).bottom
: 0.0),
),
controller: _controller,
children: <Widget>[
Expand Down Expand Up @@ -308,12 +317,8 @@ class _EditProductPageState extends State<EditProductPage> with UpToDateMixin {
),
),
),
bottomNavigationBar: UpToDateChanges(localDatabase)
.hasNotTerminatedOperations(upToDateProduct.barcode!)
? const ProductPageLoadingIndicator(
addSafeArea: true,
)
: null,
bottomNavigationBar:
hasUploadIndicator ? const _EditPageLoadingIndicator() : null,
);
}

Expand Down Expand Up @@ -408,3 +413,35 @@ class _ListTitleItem extends SmoothListTileCard {
),
);
}

class _EditPageLoadingIndicator extends StatelessWidget {
const _EditPageLoadingIndicator();

@override
Widget build(BuildContext context) {
final AppLocalizations appLocalizations = AppLocalizations.of(context);
final SmoothColorsThemeExtension extension =
context.extension<SmoothColorsThemeExtension>();

final bool lightTheme = context.lightTheme();

return SmoothBanner(
icon: CloudUploadAnimation(
size: MediaQuery.sizeOf(context).width * 0.10,
),
iconAlignment: AlignmentDirectional.center,
iconBackgroundColor: lightTheme ? extension.primaryBlack : Colors.black,
title: appLocalizations.edit_product_pending_operations_banner_title,
titleColor: lightTheme ? null : Colors.white,
titleBackgroundColor:
lightTheme ? extension.primaryMedium : Colors.black26,
contentBackgroundColor: lightTheme
? extension.primaryMedium.lighten()
: extension.primaryUltraBlack,
contentColor: lightTheme ? null : Colors.grey[200],
topShadow: true,
content: appLocalizations.edit_product_pending_operations_banner_message,
addSafeArea: true,
);
}
}
108 changes: 69 additions & 39 deletions packages/smooth_app/lib/widgets/smooth_banner.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:smooth_app/generic_lib/design_constants.dart';
import 'package:smooth_app/themes/theme_provider.dart';
import 'package:smooth_app/widgets/smooth_close_button.dart';
import 'package:smooth_app/widgets/smooth_text.dart';

Expand All @@ -14,8 +15,10 @@ class SmoothBanner extends StatelessWidget {
this.iconAlignment,
this.iconColor,
this.iconBackgroundColor,
this.titleBackgroundColor,
this.contentBackgroundColor,
this.onDismissClicked,
this.borderRadius,
this.addSafeArea = false,
this.topShadow = false,
super.key,
Expand All @@ -31,10 +34,13 @@ class SmoothBanner extends StatelessWidget {
final bool topShadow;
final bool addSafeArea;

final BorderRadiusGeometry? borderRadius;

final Color? iconColor;
final Color? iconBackgroundColor;
final Color? titleColor;
final Color? contentColor;
final Color? titleBackgroundColor;
final Color? contentBackgroundColor;

static const Color _titleColor = Color(0xFF373737);
Expand Down Expand Up @@ -74,51 +80,65 @@ class SmoothBanner extends StatelessWidget {
width: double.infinity,
color: contentBackgroundColor ?? const Color(0xFFECECEC),
padding: EdgeInsetsDirectional.only(
start: MEDIUM_SPACE,
end: MEDIUM_SPACE,
top: onDismissClicked != null
? VERY_SMALL_SPACE
: BALANCED_SPACE,
bottom: onDismissClicked != null ? LARGE_SPACE : MEDIUM_SPACE,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text(
title,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: titleColor ?? _titleColor,
),
),
ColoredBox(
color: titleBackgroundColor ?? Colors.transparent,
child: Padding(
padding: EdgeInsetsDirectional.symmetric(
horizontal: MEDIUM_SPACE,
vertical: onDismissClicked != null
? VERY_SMALL_SPACE
: BALANCED_SPACE,
),
if (onDismissClicked != null) ...<Widget>[
const SizedBox(width: SMALL_SPACE),
SmoothCloseButton(
onClose: () => onDismissClicked!.call(
SmoothBannerDismissEvent.fromButton,
child: Row(
children: <Widget>[
Expanded(
child: Text(
title,
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: titleColor ?? _titleColor,
),
),
),
circleColor: titleColor ?? _titleColor,
crossColor: Colors.white,
circleSize: 26.0,
crossSize: 12.0,
tooltip: AppLocalizations.of(context)
.owner_field_info_close_button,
),
],
],
if (onDismissClicked != null) ...<Widget>[
const SizedBox(width: SMALL_SPACE),
SmoothCloseButton(
onClose: () => onDismissClicked!.call(
SmoothBannerDismissEvent.fromButton,
),
circleColor: titleColor ?? _titleColor,
crossColor: Colors.white,
circleSize: 26.0,
crossSize: 12.0,
tooltip: AppLocalizations.of(context)
.owner_field_info_close_button,
),
],
],
),
),
),
if (onDismissClicked == null)
const SizedBox(height: VERY_SMALL_SPACE),
TextWithBoldParts(
text: content,
textStyle: TextStyle(
fontSize: 14.0,
color: contentColor ?? const Color(0xFF373737),
const SizedBox(
height: VERY_SMALL_SPACE,
width: MEDIUM_SPACE,
),
Padding(
padding: const EdgeInsetsDirectional.symmetric(
horizontal: MEDIUM_SPACE),
child: TextWithBoldParts(
text: content,
textStyle: TextStyle(
fontSize: 14.0,
height: 1.6,
color: contentColor ?? const Color(0xFF373737),
),
),
),
if (bottomPadding > 0) SizedBox(height: bottomPadding),
Expand All @@ -130,14 +150,24 @@ class SmoothBanner extends StatelessWidget {
),
);

if (borderRadius != null) {
child = ClipRRect(
borderRadius: borderRadius!,
child: child,
);
}

if (topShadow) {
child = DecoratedBox(
decoration: const BoxDecoration(
decoration: BoxDecoration(
borderRadius: borderRadius,
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black12,
color: context.lightTheme()
? Colors.black12
: const Color(0x10FFFFFF),
blurRadius: 6.0,
offset: Offset(0.0, -4.0),
offset: const Offset(0.0, -4.0),
),
],
),
Expand Down

0 comments on commit a633fc4

Please sign in to comment.