From b9022b6208517a85390093fa34e872040a3b4a76 Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Wed, 19 Jul 2023 14:34:05 +0200 Subject: [PATCH] Search page: - Clear button with a correct Inkwell - Clear button with a good semantic Swipe to dismiss with an icon --- packages/smooth_app/lib/l10n/app_en.arb | 8 ++++ .../lib/pages/scan/search_history_view.dart | 25 +++++++++--- .../lib/pages/scan/search_page.dart | 38 +++++++++++++------ 3 files changed, 54 insertions(+), 17 deletions(-) diff --git a/packages/smooth_app/lib/l10n/app_en.arb b/packages/smooth_app/lib/l10n/app_en.arb index ad4c46501dc..0e3a0bdf603 100644 --- 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 index eaea9fcda63..47877f468b5 100644 --- 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 { } 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 { }); } }, - 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 index a1b724a92a0..25882098749 100644 --- 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 { 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 { } } - 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, + ), + ), + ), ), ), );