Skip to content

Commit

Permalink
Onboarding: scrollbars everywhere + expanded card (#4342)
Browse files Browse the repository at this point in the history
  • Loading branch information
@g123k
g123k authored Jul 29, 2023
1 parent 5fdbc12 commit 8d0ae6a
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 100 deletions.
59 changes: 31 additions & 28 deletions packages/smooth_app/lib/pages/onboarding/knowledge_panel_page_template.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,36 +98,39 @@ class _KnowledgePanelPageTemplateState
children: <Widget>[
Flexible(
flex: 1,
child: ListView(
children: <Widget>[
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: <Widget>[
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(
<Widget>[
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: children,
),
],
),
],
if (children.isNotEmpty)
KnowledgePanelProductCards(
<Widget>[
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: children,
),
],
),
],
),
),
),
NextButton(
Expand Down
40 changes: 15 additions & 25 deletions packages/smooth_app/lib/pages/onboarding/preferences_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,6 @@ class _Helper extends StatefulWidget {
}

class _HelperState extends State<_Helper> {
bool _isProductExpanded = false;

@override
Widget build(BuildContext context) {
final ProductPreferences productPreferences =
Expand All @@ -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,
),
),
];
Expand All @@ -138,11 +132,13 @@ class _HelperState extends State<_Helper> {
children: <Widget>[
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(
Expand All @@ -155,10 +151,4 @@ class _HelperState extends State<_Helper> {
),
);
}

void _expandProductCard() {
if (!_isProductExpanded) {
setState(() => _isProductExpanded = true);
}
}
}
40 changes: 23 additions & 17 deletions packages/smooth_app/lib/pages/product/product_compatibility_header.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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),
),
),
),
),
),
Expand Down
8 changes: 4 additions & 4 deletions packages/smooth_app/lib/pages/product/summary_card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -107,7 +107,7 @@ class _SummaryCardState extends State<SummaryCard> with UpToDateMixin {
header: ProductCompatibilityHeader(
product: upToDateProduct,
productPreferences: widget._productPreferences,
isSettingClickable: widget.isSettingClickable,
isSettingVisible: widget.isSettingVisible,
),
body: Padding(
padding: widget.padding ?? SMOOTH_CARD_PADDING,
Expand Down Expand Up @@ -141,7 +141,7 @@ class _SummaryCardState extends State<SummaryCard> with UpToDateMixin {
header: ProductCompatibilityHeader(
product: upToDateProduct,
productPreferences: widget._productPreferences,
isSettingClickable: widget.isSettingClickable,
isSettingVisible: widget.isSettingVisible,
),
body: Padding(
padding: SMOOTH_CARD_PADDING,
Expand Down
59 changes: 33 additions & 26 deletions packages/smooth_app/lib/widgets/attribute_button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: <Widget>[
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: <Widget>[
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,
),
],
),
),
),
),
Expand Down

0 comments on commit 8d0ae6a

Please sign in to comment.