Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Improvements for the product page (Part 2) #5764

Merged
merged 3 commits into from
Oct 28, 2024
Merged

feat: Improvements for the product page (Part 2) #5764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3b8eb1d
Improvements for the product page
g123k Oct 28, 2024
48efe38
Fix Android issues
g123k Oct 28, 2024
47af08b
Remove unused variable
g123k Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 96 additions & 21 deletions packages/smooth_app/lib/helpers/product_cards_helper.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
import 'package:smooth_app/helpers/image_field_extension.dart';
import 'package:smooth_app/helpers/ui_helpers.dart';
import 'package:smooth_app/query/product_query.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';

SmoothAppBar buildEditProductAppBar({
Expand Down Expand Up @@ -88,26 +90,99 @@ const EdgeInsets SMOOTH_CARD_PADDING = EdgeInsets.symmetric(
/// A SmoothCard on Product cards using default margin and padding.
Widget buildProductSmoothCard({
Widget? header,
Widget? title,
EdgeInsetsGeometry? titlePadding,
required Widget body,
EdgeInsets? padding = EdgeInsets.zero,
EdgeInsets? margin = const EdgeInsets.symmetric(
EdgeInsetsGeometry? padding = EdgeInsets.zero,
EdgeInsetsGeometry? margin = const EdgeInsets.symmetric(
horizontal: SMALL_SPACE,
),
}) =>
SmoothCard(
margin: margin,
padding: padding,
child: switch (header) {
Object _ => Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
if (header != null) header,
body,
],
}) {
assert(
(header != null && title == null) || header == null,
"You can't pass a header and a title at the same time",
);

Widget child;

if (title != null) {
child = Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
_ProductSmoothCardTitle(
title: title,
padding: titlePadding,
),
body,
],
);
} else if (header != null) {
child = Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
header,
body,
],
);
} else {
child = body;
}

return SmoothCard(
margin: margin,
padding: padding,
child: child,
);
}

class _ProductSmoothCardTitle extends StatelessWidget {
const _ProductSmoothCardTitle({
required this.title,
this.padding,
});

final Widget title;
final EdgeInsetsGeometry? padding;

@override
Widget build(BuildContext context) {
final SmoothColorsThemeExtension colors =
Theme.of(context).extension<SmoothColorsThemeExtension>()!;
final EdgeInsetsGeometry effectivePadding = padding ??
const EdgeInsetsDirectional.symmetric(
vertical: MEDIUM_SPACE,
);
final TextStyle titleStyle =
Theme.of(context).textTheme.displaySmall ?? const TextStyle();
final double fontSize = titleStyle.fontSize ?? 15.0;

return Container(
constraints: BoxConstraints(
minHeight:
MEDIUM_SPACE * 2 + MediaQuery.textScalerOf(context).scale(fontSize),
),
decoration: BoxDecoration(
color: context.lightTheme()
? colors.primaryMedium
: colors.primarySemiDark,
borderRadius: const BorderRadius.vertical(
top: ROUNDED_RADIUS,
),
),
padding: effectivePadding,
child: Center(
child: DefaultTextStyle(
style: titleStyle,
textAlign: TextAlign.center,
child: SizedBox(
width: double.infinity,
child: title,
),
_ => body
},
),
),
);
}
}

// used to be in now defunct `AttributeListExpandable`
List<Attribute> getPopulatedAttributes(
Expand Down Expand Up @@ -170,7 +245,7 @@ List<Attribute> getSortedAttributes(
}
final Map<String, List<Attribute>> mandatoryAttributesByGroup =
<String, List<Attribute>>{};
// collecting all the mandatory attributes, by group
// collecting all the mandatory attributes, by group
for (final AttributeGroup attributeGroup in product.attributeGroups!) {
mandatoryAttributesByGroup[attributeGroup.id!] = getFilteredAttributes(
attributeGroup,
Expand All @@ -181,7 +256,7 @@ List<Attribute> getSortedAttributes(
);
}

// now ordering by attribute group order
// now ordering by attribute group order
for (final String attributeGroupId in attributeGroupOrder) {
final List<Attribute>? attributes =
mandatoryAttributesByGroup[attributeGroupId];
Expand Down Expand Up @@ -266,7 +341,7 @@ ProductImageData getProductImageData(
language,
);
if (productImage != null) {
// we found a localized version for this image
// we found a localized version for this image
return ProductImageData(
imageId: productImage.imgid,
imageField: imageField,
Expand Down Expand Up @@ -344,7 +419,7 @@ List<ProductImage> getRawProductImages(
for (final ProductImage productImage in rawImages) {
final int? imageId = int.tryParse(productImage.imgid!);
if (imageId == null) {
// highly unlikely
// highly unlikely
continue;
}
final ProductImage? previous = map[imageId];
Expand All @@ -354,12 +429,12 @@ List<ProductImage> getRawProductImages(
}
final ImageSize? currentImageSize = productImage.size;
if (currentImageSize == null) {
// highly unlikely
// highly unlikely
continue;
}
final ImageSize? previousImageSize = previous.size;
if (previousImageSize == imageSize) {
// we already have the best
// we already have the best
continue;
}
map[imageId] = productImage;
Expand Down
14 changes: 12 additions & 2 deletions packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_group_card.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import 'package:openfoodfacts/openfoodfacts.dart';
import 'package:provider/provider.dart';
import 'package:smooth_app/generic_lib/design_constants.dart';
import 'package:smooth_app/knowledge_panel/knowledge_panels/knowledge_panel_card.dart';
import 'package:smooth_app/themes/smooth_theme_colors.dart';
import 'package:smooth_app/themes/theme_provider.dart';

class KnowledgePanelGroupCard extends StatelessWidget {
const KnowledgePanelGroupCard({
Expand All @@ -19,6 +21,9 @@ class KnowledgePanelGroupCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ThemeData themeData = Theme.of(context);
final SmoothColorsThemeExtension themeExtension =
themeData.extension<SmoothColorsThemeExtension>()!;

return Provider<KnowledgePanelPanelGroupElement>(
lazy: true,
create: (_) => groupElement,
Expand All @@ -32,8 +37,13 @@ class KnowledgePanelGroupCard extends StatelessWidget {
explicitChildNodes: true,
child: Text(
groupElement.title!,
style:
themeData.textTheme.titleSmall!.apply(color: Colors.grey),
style: themeData.textTheme.titleSmall!.copyWith(
fontSize: 15.5,
fontWeight: FontWeight.w700,
color: context.lightTheme()
? themeExtension.primaryUltraBlack
: themeExtension.primaryLight,
),
),
),
),
Expand Down
42 changes: 8 additions & 34 deletions packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_product_cards.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import 'package:flutter/material.dart';
import 'package:smooth_app/generic_lib/design_constants.dart';
import 'package:smooth_app/helpers/product_cards_helper.dart';
import 'package:smooth_app/knowledge_panel/knowledge_panels_builder.dart';
import 'package:smooth_app/themes/smooth_theme_colors.dart';
import 'package:smooth_app/themes/theme_provider.dart';

class KnowledgePanelProductCards extends StatelessWidget {
const KnowledgePanelProductCards(this.knowledgePanelWidgets);
Expand All @@ -13,9 +11,6 @@ class KnowledgePanelProductCards extends StatelessWidget {

@override
Widget build(BuildContext context) {
final SmoothColorsThemeExtension colors =
Theme.of(context).extension<SmoothColorsThemeExtension>()!;

final List<Widget> widgetsWrappedInSmoothCards =
knowledgePanelWidgets.map((Widget widget) {
/// When we have a panel with a title (e.g. "Health"), we change
Expand All @@ -26,31 +21,12 @@ class KnowledgePanelProductCards extends StatelessWidget {

if (hasTitle) {
content = buildProductSmoothCard(
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: context.lightTheme()
? colors.primaryMedium
: colors.primarySemiDark,
borderRadius: const BorderRadius.vertical(
top: ROUNDED_RADIUS,
),
),
width: double.infinity,
padding: const EdgeInsetsDirectional.symmetric(
vertical: SMALL_SPACE,
),
child: Center(child: widget.children.first),
),
Padding(
padding: SMOOTH_CARD_PADDING,
child: Column(
children: widget.children.sublist(1),
),
),
],
title: Text((widget.children.first as KnowledgePanelTitle).title),
body: Padding(
padding: SMOOTH_CARD_PADDING,
child: Column(
children: widget.children.sublist(1),
),
),
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
Expand All @@ -71,10 +47,8 @@ class KnowledgePanelProductCards extends StatelessWidget {

return Center(
child: Padding(
padding: const EdgeInsetsDirectional.only(
bottom: SMALL_SPACE,
start: SMALL_SPACE,
end: SMALL_SPACE,
padding: const EdgeInsetsDirectional.symmetric(
horizontal: SMALL_SPACE,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
Expand Down
Loading
Loading