From 8d0ae6a72d08e9a31d02e84f5b7ff466c777f679 Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Sat, 29 Jul 2023 19:26:55 +0200 Subject: [PATCH] Onboarding: scrollbars everywhere + expanded card (#4342) --- .../knowledge_panel_page_template.dart | 59 ++++++++++--------- .../pages/onboarding/preferences_page.dart | 40 +++++-------- .../product/product_compatibility_header.dart | 40 +++++++------ .../lib/pages/product/summary_card.dart | 8 +-- .../lib/widgets/attribute_button.dart | 59 +++++++++++-------- 5 files changed, 106 insertions(+), 100 deletions(-) diff --git a/packages/smooth_app/lib/pages/onboarding/knowledge_panel_page_template.dart b/packages/smooth_app/lib/pages/onboarding/knowledge_panel_page_template.dart index 6605707a221..e1d351d5067 100644 --- a/packages/smooth_app/lib/pages/onboarding/knowledge_panel_page_template.dart +++ b/packages/smooth_app/lib/pages/onboarding/knowledge_panel_page_template.dart @@ -98,36 +98,39 @@ class _KnowledgePanelPageTemplateState children: [ Flexible( flex: 1, - child: ListView( - children: [ - SvgPicture.asset( - widget.svgAsset, - height: MediaQuery.of(context).size.height * .25, - package: AppHelper.APP_PACKAGE, - ), - Padding( - padding: const EdgeInsets.symmetric( - horizontal: LARGE_SPACE, + child: Scrollbar( + child: ListView( + children: [ + SvgPicture.asset( + widget.svgAsset, + height: + MediaQuery.of(context).size.height * .25, + package: AppHelper.APP_PACKAGE, ), - child: Text( - widget.headerTitle, - style: Theme.of(context) - .textTheme - .displayMedium - ?.wellSpaced, + Padding( + padding: const EdgeInsets.symmetric( + horizontal: LARGE_SPACE, + ), + child: Text( + widget.headerTitle, + style: Theme.of(context) + .textTheme + .displayMedium + ?.wellSpaced, + ), ), - ), - if (children.isNotEmpty) - KnowledgePanelProductCards( - [ - Column( - crossAxisAlignment: - CrossAxisAlignment.start, - children: children, - ), - ], - ), - ], + if (children.isNotEmpty) + KnowledgePanelProductCards( + [ + Column( + crossAxisAlignment: + CrossAxisAlignment.start, + children: children, + ), + ], + ), + ], + ), ), ), NextButton( diff --git a/packages/smooth_app/lib/pages/onboarding/preferences_page.dart b/packages/smooth_app/lib/pages/onboarding/preferences_page.dart index 880b022a3f4..98c06fd33b8 100644 --- a/packages/smooth_app/lib/pages/onboarding/preferences_page.dart +++ b/packages/smooth_app/lib/pages/onboarding/preferences_page.dart @@ -73,8 +73,6 @@ class _Helper extends StatefulWidget { } class _HelperState extends State<_Helper> { - bool _isProductExpanded = false; - @override Widget build(BuildContext context) { final ProductPreferences productPreferences = @@ -98,23 +96,19 @@ class _HelperState extends State<_Helper> { style: Theme.of(context).textTheme.displayMedium, ), ), - Container( - height: _isProductExpanded ? null : 180, + Padding( padding: const EdgeInsetsDirectional.only( bottom: LARGE_SPACE, start: LARGE_SPACE, end: LARGE_SPACE, ), - child: GestureDetector( - onTap: () => _expandProductCard(), - child: SummaryCard( - widget.product, - productPreferences, - isFullVersion: _isProductExpanded, - isRemovable: false, - isSettingClickable: false, - isProductEditable: false, - ), + child: SummaryCard( + widget.product, + productPreferences, + isFullVersion: true, + isRemovable: false, + isSettingVisible: false, + isProductEditable: false, ), ), ]; @@ -138,11 +132,13 @@ class _HelperState extends State<_Helper> { children: [ Flexible( flex: 1, - child: ListView.builder( - padding: const EdgeInsetsDirectional.only(top: LARGE_SPACE), - itemCount: pageData.length, - itemBuilder: (BuildContext context, int position) => - pageData[position], + child: Scrollbar( + child: ListView.builder( + padding: const EdgeInsetsDirectional.only(top: LARGE_SPACE), + itemCount: pageData.length, + itemBuilder: (BuildContext context, int position) => + pageData[position], + ), ), ), NextButton( @@ -155,10 +151,4 @@ class _HelperState extends State<_Helper> { ), ); } - - void _expandProductCard() { - if (!_isProductExpanded) { - setState(() => _isProductExpanded = true); - } - } } diff --git a/packages/smooth_app/lib/pages/product/product_compatibility_header.dart b/packages/smooth_app/lib/pages/product/product_compatibility_header.dart index ef6636ff7f0..83797ff35b2 100644 --- a/packages/smooth_app/lib/pages/product/product_compatibility_header.dart +++ b/packages/smooth_app/lib/pages/product/product_compatibility_header.dart @@ -12,12 +12,12 @@ class ProductCompatibilityHeader extends StatelessWidget { const ProductCompatibilityHeader({ required this.product, required this.productPreferences, - required this.isSettingClickable, + required this.isSettingVisible, }); final Product product; final ProductPreferences productPreferences; - final bool isSettingClickable; + final bool isSettingVisible; @override Widget build(BuildContext context) { @@ -57,21 +57,27 @@ class ProductCompatibilityHeader extends StatelessWidget { ), ), ), - InkWell( - borderRadius: const BorderRadius.only(topRight: ROUNDED_RADIUS), - onTap: isSettingClickable - ? () => AppNavigator.of(context).push( - AppRoutes.PREFERENCES(PreferencePageType.FOOD), - ) - : null, - child: Tooltip( - message: appLocalizations.open_food_preferences_tooltip, - triggerMode: isSettingClickable - ? TooltipTriggerMode.longPress - : TooltipTriggerMode.tap, - child: const SizedBox.square( - dimension: kMinInteractiveDimension, - child: Icon(Icons.settings), + Opacity( + opacity: isSettingVisible ? 1.0 : 0.0, + child: IgnorePointer( + ignoring: !isSettingVisible, + child: InkWell( + borderRadius: const BorderRadius.only(topRight: ROUNDED_RADIUS), + onTap: isSettingVisible + ? () => AppNavigator.of(context).push( + AppRoutes.PREFERENCES(PreferencePageType.FOOD), + ) + : null, + child: Tooltip( + message: appLocalizations.open_food_preferences_tooltip, + triggerMode: isSettingVisible + ? TooltipTriggerMode.longPress + : TooltipTriggerMode.tap, + child: const SizedBox.square( + dimension: kMinInteractiveDimension, + child: Icon(Icons.settings), + ), + ), ), ), ), diff --git a/packages/smooth_app/lib/pages/product/summary_card.dart b/packages/smooth_app/lib/pages/product/summary_card.dart index 13d969940df..18c271d155d 100644 --- a/packages/smooth_app/lib/pages/product/summary_card.dart +++ b/packages/smooth_app/lib/pages/product/summary_card.dart @@ -45,7 +45,7 @@ class SummaryCard extends StatefulWidget { this.isFullVersion = false, this.showUnansweredQuestions = false, this.isRemovable = true, - this.isSettingClickable = true, + this.isSettingVisible = true, this.isProductEditable = true, this.attributeGroupsClickable = true, this.padding, @@ -68,7 +68,7 @@ class SummaryCard extends StatefulWidget { final bool isRemovable; /// If true, the icon setting will be clickable. - final bool isSettingClickable; + final bool isSettingVisible; /// If true, the product will be editable final bool isProductEditable; @@ -107,7 +107,7 @@ class _SummaryCardState extends State with UpToDateMixin { header: ProductCompatibilityHeader( product: upToDateProduct, productPreferences: widget._productPreferences, - isSettingClickable: widget.isSettingClickable, + isSettingVisible: widget.isSettingVisible, ), body: Padding( padding: widget.padding ?? SMOOTH_CARD_PADDING, @@ -141,7 +141,7 @@ class _SummaryCardState extends State with UpToDateMixin { header: ProductCompatibilityHeader( product: upToDateProduct, productPreferences: widget._productPreferences, - isSettingClickable: widget.isSettingClickable, + isSettingVisible: widget.isSettingVisible, ), body: Padding( padding: SMOOTH_CARD_PADDING, diff --git a/packages/smooth_app/lib/widgets/attribute_button.dart b/packages/smooth_app/lib/widgets/attribute_button.dart index 6cbdfeeef7c..51061d9847a 100644 --- a/packages/smooth_app/lib/widgets/attribute_button.dart +++ b/packages/smooth_app/lib/widgets/attribute_button.dart @@ -38,32 +38,39 @@ class AttributeButton extends StatelessWidget { for (final String importanceId in _importanceIds) { children.add( Expanded( - child: InkWell( - onTap: () async => productPreferences.setImportance( - attribute.id!, - importanceId, - ), - child: Container( - width: importanceWidth, - constraints: const BoxConstraints(minHeight: MINIMUM_TOUCH_SIZE), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Icon( - currentImportanceId == importanceId - ? Icons.radio_button_checked - : Icons.radio_button_off, - color: themeData.colorScheme.primary, - ), - AutoSizeText( - productPreferences - .getPreferenceImportanceFromImportanceId(importanceId)! - .name!, - maxLines: 2, - textAlign: TextAlign.center, - ), - ], + child: Material( + type: MaterialType.transparency, + child: InkWell( + onTap: () async => productPreferences.setImportance( + attribute.id!, + importanceId, + ), + child: Container( + width: importanceWidth, + margin: const EdgeInsets.symmetric(horizontal: 2.0), + constraints: + const BoxConstraints(minHeight: MINIMUM_TOUCH_SIZE), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Icon( + currentImportanceId == importanceId + ? Icons.radio_button_checked + : Icons.radio_button_off, + color: themeData.colorScheme.primary, + ), + const SizedBox(height: VERY_SMALL_SPACE), + AutoSizeText( + productPreferences + .getPreferenceImportanceFromImportanceId( + importanceId)! + .name!, + maxLines: 2, + textAlign: TextAlign.center, + ), + ], + ), ), ), ),