feat: #960 - changed the attribute/importance preference display. (#1590

)

Impacted files:
* `attribute_button.dart`: changed the whole display.
* `design_constants.dart`: added constants for the default icon size and the minimum target size (according to goldens).
* `product_preferences.dart`: added the downgrading of "very important" to "important".
* `pubspec.lock`: wtf
* `user_preferences_page-blue-dark.png`: impacted by new display.
* `user_preferences_page-blue-light.png`: impacted by new display.
* `user_preferences_page-brown-dark.png`: impacted by new display.
* `user_preferences_page-brown-light.png`: impacted by new display.
* `user_preferences_page-green-dark.png`: impacted by new display.
* `user_preferences_page-green-light.png`: impacted by new display.

packages/smooth_app/lib/data_models/product_preferences.dart

@@ -6,7 +6,6 @@ import 'package:openfoodfacts/model/AttributeGroup.dart';
 import 'package:openfoodfacts/personalized_search/available_attribute_groups.dart';
 import 'package:openfoodfacts/personalized_search/available_preference_importances.dart';
 import 'package:openfoodfacts/personalized_search/available_product_preferences.dart';
-import 'package:openfoodfacts/personalized_search/preference_importance.dart';
 import 'package:openfoodfacts/personalized_search/product_preferences_manager.dart';
 import 'package:openfoodfacts/personalized_search/product_preferences_selection.dart';
 import 'package:smooth_app/data_models/downloadable_string.dart';
@@ -182,16 +181,6 @@ class ProductPreferences extends ProductPreferencesManager with ChangeNotifier {
     availableProductPreferences = myAvailableProductPreferences;
   }
 
-  @override
-  String getImportanceIdForAttributeId(String attributeId) =>
-      _getRefinedImportanceId(super.getImportanceIdForAttributeId(attributeId));
-
-  /// Downgrades "very important" to "important" (from 4 to 3 choices, simpler).
-  static String _getRefinedImportanceId(final String importanceId) =>
-      importanceId == PreferenceImportance.ID_VERY_IMPORTANT
-          ? PreferenceImportance.ID_IMPORTANT
-          : importanceId;
-
   Future<void> resetImportances() async {
     await clearImportances(notifyListeners: false);
     if (attributeGroups != null) {
@@ -202,7 +191,7 @@ class ProductPreferences extends ProductPreferencesManager with ChangeNotifier {
             if (attribute.id != null && defaultF != null) {
               await setImportance(
                 attribute.id!,
-                _getRefinedImportanceId(defaultF),
+                defaultF,
                 notifyListeners: false,
               );
             }

packages/smooth_app/lib/generic_lib/design_constants.dart

@@ -9,6 +9,12 @@ const double LARGE_SPACE = 16.0;
 const double VERY_LARGE_SPACE = 20.0;
 const double MINIMUM_TOUCH_SIZE = 48.0;
 
+/// Default icon size, cf. [Icon]
+const double DEFAULT_ICON_SIZE = 24.0;
+
+/// Default icon size, cf. goldens.dart
+const double MINIMUM_TARGET_SIZE = 48.0;
+
 /// Background, e.g SmoothCard
 const Radius ROUNDED_RADIUS = Radius.circular(20.0);
 //ignore: non_constant_identifier_names

packages/smooth_app/lib/widgets/attribute_button.dart

@@ -1,9 +1,12 @@
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:openfoodfacts/model/Attribute.dart';
 import 'package:openfoodfacts/personalized_search/preference_importance.dart';
 import 'package:smooth_app/data_models/product_preferences.dart';
+import 'package:smooth_app/generic_lib/buttons/smooth_action_button.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
+import 'package:smooth_app/generic_lib/dialogs/smooth_alert_dialog.dart';
 
 /// Colored button for attribute importance, with corresponding action
 class AttributeButton extends StatelessWidget {
@@ -15,58 +18,131 @@ class AttributeButton extends StatelessWidget {
   final Attribute attribute;
   final ProductPreferences productPreferences;
 
-  static const Map<String, String> _nextValues = <String, String>{
-    PreferenceImportance.ID_NOT_IMPORTANT: PreferenceImportance.ID_IMPORTANT,
-    PreferenceImportance.ID_IMPORTANT: PreferenceImportance.ID_MANDATORY,
-    PreferenceImportance.ID_MANDATORY: PreferenceImportance.ID_NOT_IMPORTANT,
-  };
-
-  static const Map<String, Color> _colors = <String, Color>{
-    PreferenceImportance.ID_NOT_IMPORTANT: PRIMARY_GREY_COLOR,
-    PreferenceImportance.ID_IMPORTANT: PRIMARY_BLUE_COLOR,
-    PreferenceImportance.ID_MANDATORY: RED_COLOR,
-  };
+  static const List<String> _importanceIds = <String>[
+    PreferenceImportance.ID_NOT_IMPORTANT,
+    PreferenceImportance.ID_IMPORTANT,
+    PreferenceImportance.ID_VERY_IMPORTANT,
+    PreferenceImportance.ID_MANDATORY,
+  ];
 
   @override
   Widget build(BuildContext context) {
     final ThemeData themeData = Theme.of(context);
-    String importanceId =
+    final IconThemeData iconThemeData = IconTheme.of(context);
+    final String currentImportanceId =
         productPreferences.getImportanceIdForAttributeId(attribute.id!);
-    // We switch from 4 to 3 choices: very important is downgraded to important
-    if (importanceId == PreferenceImportance.ID_VERY_IMPORTANT) {
-      importanceId = PreferenceImportance.ID_IMPORTANT;
-    }
     const double horizontalPadding = LARGE_SPACE;
-    final double screenWidth =
+    final double widgetWidth =
         MediaQuery.of(context).size.width - 2 * horizontalPadding;
+    final double importanceWidth = widgetWidth / 4;
     final TextStyle style = themeData.textTheme.headline3!;
+    final String? info = attribute.settingNote;
+    final List<Widget> children = <Widget>[];
+    for (final String importanceId in _importanceIds) {
+      children.add(
+        GestureDetector(
+          onTap: () async {
+            await productPreferences.setImportance(attribute.id!, importanceId);
+            final AppLocalizations? appLocalizations =
+                AppLocalizations.of(context);
+            await showDialog<void>(
+              context: context,
+              builder: (BuildContext context) => SmoothAlertDialog(
+                body: Text(
+                    'blah blah blah importance "$importanceId"'), // TODO(monsieurtanuki): find translations
+                actions: <SmoothActionButton>[
+                  SmoothActionButton(
+                    text: appLocalizations!.close,
+                    onPressed: () => Navigator.pop(context),
+                  ),
+                ],
+              ),
+            );
+          },
+          child: SizedBox(
+            width: importanceWidth,
+            height: MINIMUM_TARGET_SIZE,
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: <Widget>[
+                AutoSizeText(
+                  productPreferences
+                      .getPreferenceImportanceFromImportanceId(importanceId)!
+                      .name!,
+                  maxLines: 1,
+                  textAlign: TextAlign.center,
+                ),
+                Icon(
+                  currentImportanceId == importanceId
+                      ? Icons.radio_button_checked
+                      : Icons.radio_button_off,
+                  color: themeData.colorScheme.primary,
+                ),
+              ],
+            ),
+          ),
+        ),
+      );
+    }
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: horizontalPadding),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        crossAxisAlignment: CrossAxisAlignment.center,
+      padding: const EdgeInsets.symmetric(
+        vertical: SMALL_SPACE,
+        horizontal: horizontalPadding,
+      ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
-          SizedBox(
-            width: screenWidth * .45,
-            child: Text(attribute.name!, style: style),
-          ),
-          SizedBox(
-            width: screenWidth * .45,
-            child: ElevatedButton(
-              child: AutoSizeText(
-                productPreferences
-                    .getPreferenceImportanceFromImportanceId(importanceId)!
-                    .name!,
-                style: style.copyWith(color: Colors.white),
-                maxLines: 1,
+          GestureDetector(
+            child: SizedBox(
+              height: MINIMUM_TARGET_SIZE,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.start,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: <Widget>[
+                  if (info != null) const Icon(Icons.info_outline),
+                  Container(
+                    padding: info == null
+                        ? null
+                        : const EdgeInsets.only(left: SMALL_SPACE),
+                    child: SizedBox(
+                      width: widgetWidth -
+                          SMALL_SPACE -
+                          (iconThemeData.size ?? DEFAULT_ICON_SIZE),
+                      child: AutoSizeText(
+                        attribute.settingName ?? attribute.name!,
+                        maxLines: 2,
+                        style: style,
+                      ),
+                    ),
+                  ),
+                ],
               ),
-              style: ElevatedButton.styleFrom(
-                primary: _colors[importanceId],
-                onPrimary: Colors.white,
-              ),
-              onPressed: () async => productPreferences.setImportance(
-                  attribute.id!, _nextValues[importanceId]!),
             ),
+            onTap: info == null
+                ? null
+                : () async => showDialog<void>(
+                      context: context,
+                      builder: (BuildContext context) {
+                        final AppLocalizations? appLocalizations =
+                            AppLocalizations.of(context);
+                        return SmoothAlertDialog(
+                          body: Text(info),
+                          actions: <SmoothActionButton>[
+                            SmoothActionButton(
+                              text: appLocalizations!.close,
+                              onPressed: () => Navigator.pop(context),
+                            ),
+                          ],
+                        );
+                      },
+                    ),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: children,
           ),
         ],
       ),