Search page:

- Clear button with a correct Inkwell - Clear button with a good semantic Swipe to dismiss with an icon
openfoodfacts · Jul 19, 2023 · b9022b6 · b9022b6
1 parent 5b376d0
commit b9022b6
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 17 deletions.
diff --git a/packages/smooth_app/lib/l10n/app_en.arb b/packages/smooth_app/lib/l10n/app_en.arb
@@ -1588,6 +1588,10 @@
     "@dev_mode_scan_scan_half_image": {
         "description": "Scan mode - Scan half image"
     },
+    "search_history_item_edit_tooltip": "Reuse and edit this search",
+    "@search_history_item_edit_tooltip": {
+        "description": "A tooltip to explain the Pen button near a search term -> it allows to reuse the item"
+    },
     "product_search_no_more_results": "You've downloaded all the {totalSize} products.",
     "@product_search_no_more_results": {
         "description": "Product search list - No more results available",
@@ -1736,6 +1740,10 @@
     "@basic_details_add_error": {
         "description": "Error message when error occurs while submitting basic details"
     },
+    "clear_search": "Clear your search",
+    "@confirm_clearclear_search": {
+        "description": "Tooltip to explain that the X button clears the content of the search"
+    },
     "confirm_clear": "You're about to clear your entire history: are you sure you want to continue?",
     "@confirm_clear": {
         "description": "Asking about whether to clear the history list or not"

diff --git a/packages/smooth_app/lib/pages/scan/search_history_view.dart b/packages/smooth_app/lib/pages/scan/search_history_view.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:provider/provider.dart';
 import 'package:smooth_app/database/dao_string_list.dart';
 import 'package:smooth_app/database/local_database.dart';
@@ -43,12 +44,22 @@ class _SearchHistoryViewState extends State<SearchHistoryView> {
   }
 
   Widget _buildSearchHistoryTile(BuildContext context, String query) {
+    final AppLocalizations localizations = AppLocalizations.of(context);
+
     return Dismissible(
       key: Key(query),
       direction: DismissDirection.endToStart,
       onDismissed: (DismissDirection direction) async =>
           _handleDismissed(context, query),
-      background: Container(color: RED_COLOR),
+      background: Container(
+        color: RED_COLOR,
+        alignment: AlignmentDirectional.centerEnd,
+        padding: const EdgeInsetsDirectional.only(end: LARGE_SPACE * 2),
+        child: const Icon(
+          Icons.delete,
+          color: Colors.white,
+        ),
+      ),
       child: InkWell(
         onTap: () => widget.onTap?.call(query),
         child: Padding(
@@ -83,12 +94,16 @@ class _SearchHistoryViewState extends State<SearchHistoryView> {
                   });
                 }
               },
-              child: const Padding(
-                padding: EdgeInsets.all(8.0),
-                child: Icon(Icons.edit, size: 18.0),
+              child: Tooltip(
+                message: localizations.search_history_item_edit_tooltip,
+                enableFeedback: true,
+                child: const Padding(
+                  padding: EdgeInsets.all(8.0),
+                  child: Icon(Icons.edit, size: 18.0),
+                ),
               ),
             ),
-            minLeadingWidth: 10,
+            minLeadingWidth: 10.0,
             title: Text(query, style: const TextStyle(fontSize: 20.0)),
           ),
         ),

diff --git a/packages/smooth_app/lib/pages/scan/search_page.dart b/packages/smooth_app/lib/pages/scan/search_page.dart
@@ -231,7 +231,8 @@ class _SearchFieldState extends State<SearchField> {
         vertical: 17.0,
       ),
       hintText: localizations.search,
-      suffixIcon: widget.showClearButton ? _buildClearButton() : null,
+      suffixIcon:
+          widget.showClearButton ? _buildClearButton(localizations) : null,
     );
 
     const TextStyle textStyle = TextStyle(fontSize: 18.0);
@@ -282,19 +283,32 @@ class _SearchFieldState extends State<SearchField> {
     }
   }
 
-  Widget _buildClearButton() {
+  Widget _buildClearButton(AppLocalizations localizations) {
     return Padding(
       padding: const EdgeInsetsDirectional.only(end: MEDIUM_SPACE),
-      child: IconButton(
-        onPressed: _handleClear,
-        icon: AnimatedCrossFade(
-          duration: SmoothAnimationsDuration.brief,
-          crossFadeState:
-              _isEmpty ? CrossFadeState.showFirst : CrossFadeState.showSecond,
-          // Closes the page.
-          firstChild: const Icon(Icons.close),
-          // Clears the text.
-          secondChild: const Icon(Icons.cancel),
+      child: ClipOval(
+        child: Material(
+          type: MaterialType.transparency,
+          child: IconButton(
+            tooltip: localizations.clear_search,
+            onPressed: _handleClear,
+            icon: AnimatedCrossFade(
+              duration: SmoothAnimationsDuration.short,
+              crossFadeState: _isEmpty
+                  ? CrossFadeState.showFirst
+                  : CrossFadeState.showSecond,
+              // Closes the page.
+              firstChild: Icon(
+                Icons.close,
+                semanticLabel: localizations.clear_search,
+              ),
+              // Clears the text.
+              secondChild: Icon(
+                Icons.cancel,
+                semanticLabel: localizations.clear_search,
+              ),
+            ),
+          ),
         ),
       ),
     );