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

fix: Harmonization between modal sheets #5875

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
+92 −60
Open

fix: Harmonization between modal sheets #5875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7b9b5a1
Harmonization between modal sheets
g123k Nov 18, 2024
a35cec9
Add a missing const
g123k Nov 18, 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
110 changes: 63 additions & 47 deletions packages/smooth_app/lib/generic_lib/bottom_sheets/smooth_bottom_sheet.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<T?> showSmoothModalSheet<T>({
required BuildContext context,
Expand Down Expand Up @@ -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,
);

Expand Down Expand Up @@ -147,15 +149,23 @@ class SmoothModalSheetHeader extends StatelessWidget implements SizeWidget {
@override
Widget build(BuildContext context) {
final Color primaryColor =
Theme.of(context).extension<SmoothColorsThemeExtension>()!.primaryDark;
context.extension<SmoothColorsThemeExtension>().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>[
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,
Expand Down Expand Up @@ -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;
Expand All @@ -238,6 +250,10 @@ class SmoothModalSheetHeaderButton extends StatelessWidget

@override
Widget build(BuildContext context) {
final SmoothColorsThemeExtension extension =
context.extension<SmoothColorsThemeExtension>();
final bool lightTheme = context.lightTheme();

return Semantics(
value: tooltip,
button: true,
Expand All @@ -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: <Widget>[
if (prefix != null) ...<Widget>[
prefix!,
const SizedBox(
width: SMALL_SPACE,
),
],
Text(
label,
style: const TextStyle(
color: Colors.white,
fontSize: 17.0,
),
maxLines: 1,
child: Row(
children: <Widget>[
if (prefix != null) ...<Widget>[
prefix!,
const SizedBox(
width: SMALL_SPACE,
),
if (suffix != null) ...<Widget>[
const SizedBox(
width: SMALL_SPACE,
),
suffix!,
],
],
),
Text(
label,
style: const TextStyle(
fontSize: 16.5,
fontWeight: FontWeight.bold,
),
maxLines: 1,
),
if (suffix != null) ...<Widget>[
const SizedBox(
width: SMALL_SPACE,
),
suffix!,
],
],
),
),
),
Expand Down Expand Up @@ -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,
),
Expand Down Expand Up @@ -379,14 +390,19 @@ class SmoothModalSheetHeaderPrefixIndicator extends StatelessWidget
@override
Widget build(BuildContext context) {
final SmoothColorsThemeExtension extension =
Theme.of(context).extension<SmoothColorsThemeExtension>()!;

return Container(
width: 10.0,
height: 10.0,
decoration: BoxDecoration(
color: extension.secondaryNormal,
shape: BoxShape.circle,
context.extension<SmoothColorsThemeExtension>();

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,
),
),
),
);
}
Expand Down
14 changes: 11 additions & 3 deletions packages/smooth_app/lib/pages/all_product_list_modal.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -84,10 +87,14 @@ class _ModalProductListItem extends StatelessWidget {

@override
Widget build(BuildContext context) {
final LocalDatabase localDatabase = context.watch<LocalDatabase>();
final SmoothColorsThemeExtension extension =
context.extension<SmoothColorsThemeExtension>();
final bool lightTheme = context.lightTheme();

final AppLocalizations appLocalizations = AppLocalizations.of(context);

final LocalDatabase localDatabase = context.watch<LocalDatabase>();

final int productsLength = productList.barcodes.length;
final bool enableRename = productList.listType == ProductListType.USER;
final bool hasProducts = productsLength > 0;
Expand Down Expand Up @@ -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(
Expand All @@ -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,
Expand Down
25 changes: 16 additions & 9 deletions packages/smooth_app/lib/pages/preferences/user_preferences_widgets.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,13 +337,16 @@ class UserPreferencesMultipleChoicesItem<T> 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<T>(
context: context,
header: SmoothModalSheetHeader(title: title),
header: header,
bodyBuilder: (BuildContext context) {
return SliverList(
delegate: SliverChildBuilderDelegate(
Expand All @@ -370,6 +373,7 @@ class UserPreferencesMultipleChoicesItem<T> extends StatelessWidget {
} else {
final SmoothModalSheet smoothModalSheet = SmoothModalSheet(
title: title,
prefixIndicator: true,
bodyPadding: EdgeInsets.zero,
body: SizedBox(
height: itemHeight * labels.length,
Expand Down Expand Up @@ -446,19 +450,21 @@ class _ChoiceItem<T> extends StatelessWidget {
final ThemeData theme = Theme.of(context);
final SmoothColorsThemeExtension extension =
theme.extension<SmoothColorsThemeExtension>()!;
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,
selected: selected,
button: true,
excludeSemantics: true,
child: Ink(
color: selectedColor ?? Colors.transparent,
color: backgroundColor,
child: Column(
children: <Widget>[
ListTile(
Expand All @@ -467,6 +473,7 @@ class _ChoiceItem<T> extends StatelessWidget {
title: Text(
label,
style: theme.textTheme.headlineMedium?.copyWith(
color: !lightTheme ? Colors.white : null,
fontWeight: selected ? FontWeight.bold : FontWeight.normal,
),
),
Expand Down
1 change: 1 addition & 0 deletions packages/smooth_app/lib/pages/product/common/product_list_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -511,6 +511,7 @@ class _ProductListPageState extends State<ProductListPage>
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),
Expand Down
2 changes: 1 addition & 1 deletion packages/smooth_app/lib/themes/smooth_theme_colors.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class SmoothColorsThemeExtension
});

SmoothColorsThemeExtension.defaultValues()
: primaryUltraBlack = const Color(0xFF52443D),
: primaryUltraBlack = const Color(0xFF201A17),
primaryBlack = const Color(0xFF341100),
primaryDark = const Color(0xFF483527),
primarySemiDark = const Color(0xFF52443D),
Expand Down
Loading