feat: Add infos about the photo in the modal sheet (gallery) (#6229)

* Info about the photo in the banner

* Contributor's name + expandable container

* Recenter outdated icon

packages/smooth_app/lib/generic_lib/bottom_sheets/smooth_bottom_sheet.dart

@@ -111,10 +111,13 @@ Future<T?> showSmoothListOfChoicesModalSheet<T>({
   List<Widget>? suffixIcons,
   Color? suffixIconTint,
   EdgeInsetsGeometry? padding,
+  EdgeInsetsGeometry? contentPadding,
   EdgeInsetsGeometry? dividerPadding,
   TextStyle? textStyle,
   Color? headerBackgroundColor,
+  Color? footerBackgroundColor,
   Color? prefixIndicatorColor,
+  double footerSpace = 0.0,
   bool safeArea = false,
 }) {
   assert(labels.length == values.length);
@@ -142,10 +145,11 @@ Future<T?> showSmoothListOfChoicesModalSheet<T>({
           labels.elementAt(i),
           style: textStyle ?? const TextStyle(fontWeight: FontWeight.w500),
         ),
-        contentPadding: EdgeInsetsDirectional.only(
-          start: LARGE_SPACE,
-          end: addEndArrowToItems ? 17.0 : LARGE_SPACE,
-        ),
+        contentPadding: contentPadding ??
+            EdgeInsetsDirectional.only(
+              start: LARGE_SPACE,
+              end: addEndArrowToItems ? 17.0 : LARGE_SPACE,
+            ),
         trailing: (suffixIcons != null
             ? IconTheme.merge(
                 data: IconThemeData(color: suffixIconTint),
@@ -170,15 +174,34 @@ Future<T?> showSmoothListOfChoicesModalSheet<T>({
     }
   }
 
-  if (footer != null) {
-    items.add(footer);
+  double bottomPadding = MediaQuery.paddingOf(context).bottom;
+
+  if (safeArea && bottomPadding == 0.0) {
+    bottomPadding = MediaQuery.viewPaddingOf(context).bottom;
   }
 
-  final double paddingHeight = MediaQuery.paddingOf(context).bottom;
-  items.add(SizedBox(height: paddingHeight));
+  if (footer != null) {
+    if (footerSpace > 0.0) {
+      items.add(SizedBox(height: footerSpace));
+    }
+
+    Widget footerChild = Column(
+      children: <Widget>[
+        footer,
+        SizedBox(height: bottomPadding),
+      ],
+    );
+
+    if (footerBackgroundColor != null) {
+      footerChild = ColoredBox(
+        color: footerBackgroundColor,
+        child: footerChild,
+      );
+    }
 
-  if (safeArea && paddingHeight == 0.0) {
-    items.add(SizedBox(height: MediaQuery.viewPaddingOf(context).bottom));
+    items.add(footerChild);
+  } else {
+    items.add(SizedBox(height: bottomPadding));
   }
 
   return showSmoothModalSheet<T>(

packages/smooth_app/lib/l10n/app_en.arb

@@ -538,6 +538,10 @@
             "imageType": {}
         }
     },
+    "outdated_image_short_label": "may be outdated",
+    "@outdated_image_short_label": {
+        "description": "A label for outdated images"
+    },
     "ingredients": "Ingredients",
     "@ingredients": {},
     "ingredients_editing_instructions": "Keep the original order. Indicate the percentage when specified. Separate with a comma or hyphen and use parentheses for ingredients of an ingredient.",
@@ -851,6 +855,30 @@
     "@product_image_action_choose_existing_photo": {
         "description": "Replace the existing picture with one from the product's photos"
     },
+    "product_image_details_label": "Information about the photo",
+    "@product_image_details_label": {
+        "description": "Label for the photo details"
+    },
+    "product_image_details_from_producer": "From the producer",
+    "@product_image_details_from_producer": {
+        "description": "Text to indicate that the image was taken by the producer"
+    },
+    "product_image_details_contributor": "Contributor",
+    "@product_image_details_contributor": {
+        "description": "The name of the contributor who uploaded the image"
+    },
+    "product_image_details_contributor_producer": "Contributor (producer)",
+    "@product_image_details_contributor": {
+        "description": "The name of the contributor (and also the owner field) who uploaded the image"
+    },
+    "product_image_details_date": "Date",
+    "@product_image_details_date": {
+        "description": "Text to indicate the date of the image"
+    },
+    "product_image_details_date_unknown": "Unknown",
+    "@product_image_details_date": {
+        "description": "Text to indicate the date of the image is unknown"
+    },
     "homepage_main_card_logo_description": "Welcome to Open Food Facts",
     "@homepage_main_card_logo_description": {
         "description": "Description for accessibility of the Open Food Facts logo on the homepage"

packages/smooth_app/lib/pages/image/product_image_other_page.dart

@@ -398,13 +398,15 @@ class _ProductImageDetailsButton extends StatelessWidget {
                           ),
                           subtitle: Text(image.contributor ?? '-'),
                         ),
+                        const Divider(),
                         ListTile(
                           title: Text(
                               appLocalizations.photo_viewer_details_date_title),
                           subtitle: Text(image.uploaded != null
                               ? DateFormat.yMMMMEEEEd().format(image.uploaded!)
                               : '-'),
                         ),
+                        const Divider(),
                         ListTile(
                           title: Text(
                               appLocalizations.photo_viewer_details_size_title),
@@ -418,7 +420,8 @@ class _ProductImageDetailsButton extends StatelessWidget {
                                 : '-',
                           ),
                         ),
-                        if (url.isNotEmpty)
+                        if (url.isNotEmpty) ...<Widget>[
+                          const Divider(),
                           ListTile(
                             title: Text(appLocalizations
                                 .photo_viewer_details_url_title),
@@ -427,9 +430,11 @@ class _ProductImageDetailsButton extends StatelessWidget {
                             onTap: () {
                               LaunchUrlHelper.launchURL(url);
                             },
-                          ),
+                          )
+                        ],
                         SizedBox(
-                            height: MediaQuery.viewPaddingOf(context).bottom),
+                          height: MediaQuery.viewPaddingOf(context).bottom,
+                        ),
                       ],
                     ),
                   );