From 54206c446fc6c1ec5601aa01cc605d9ff14363ee Mon Sep 17 00:00:00 2001 From: Morn Date: Tue, 27 May 2025 08:32:47 +0800 Subject: [PATCH] fix: search LR issues (#7984) * fix: some search LR issues * fix: revamp search textfield hint text --- .../show_mobile_bottom_sheet.dart | 3 +- .../mobile_search_reference_bottom_sheet.dart | 20 +++ .../search/mobile_search_result.dart | 45 ++++--- .../search/mobile_search_textfield.dart | 10 +- .../search/mobile_view_ancestors.dart | 17 +-- .../command_palette/widgets/page_preview.dart | 2 +- .../widgets/recent_views_list.dart | 6 +- .../widgets/search_ask_ai_entrance.dart | 116 +++++++++--------- .../command_palette/widgets/search_field.dart | 7 +- .../widgets/search_results_list.dart | 5 +- frontend/resources/translations/en-US.json | 1 + 11 files changed, 129 insertions(+), 103 deletions(-) diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart index 5f7b0096d3..b0db53f271 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart @@ -59,6 +59,7 @@ Future showMobileBottomSheet( double initialChildSize = 0.51, double bottomSheetPadding = 0, bool enablePadding = true, + WidgetBuilder? dragHandleBuilder, }) async { assert( showHeader || @@ -102,7 +103,7 @@ Future showMobileBottomSheet( // ----- header area ----- if (showDragHandle) { children.add( - const DragHandle(), + dragHandleBuilder?.call(context) ?? const DragHandle(), ); } diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_reference_bottom_sheet.dart b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_reference_bottom_sheet.dart index ba906d66a4..231460cd2d 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_reference_bottom_sheet.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_reference_bottom_sheet.dart @@ -12,6 +12,7 @@ import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy_ui/appflowy_ui.dart'; import 'package:easy_localization/easy_localization.dart' hide TextDirection; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; +import 'package:universal_platform/universal_platform.dart'; class SearchSourceReferenceBottomSheet extends StatelessWidget { const SearchSourceReferenceBottomSheet(this.sources, {super.key}); @@ -40,6 +41,8 @@ class SearchSourceReferenceBottomSheet extends StatelessWidget { minChildSize: 1.0, initialChildSize: 1.0, backgroundColor: theme.surfaceColorScheme.primary, + dragHandleBuilder: + UniversalPlatform.isAndroid ? (_) => const _DragHandler() : null, builder: (_) => SizedBox( height: MediaQuery.of(context).size.height, child: MobileViewPage( @@ -152,3 +155,20 @@ class PageReferenceList extends StatelessWidget { } } } + +class _DragHandler extends StatelessWidget { + const _DragHandler(); + + @override + Widget build(BuildContext context) { + return Container( + height: 4, + width: 40, + margin: const EdgeInsets.symmetric(vertical: 12), + decoration: BoxDecoration( + color: Colors.grey.shade400, + borderRadius: BorderRadius.circular(2), + ), + ); + } +} diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_result.dart b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_result.dart index 08f1a667dd..07bd31fda9 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_result.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_result.dart @@ -167,30 +167,27 @@ class _NoResult extends StatelessWidget { final textColor = theme.textColorScheme.secondary; return Align( alignment: Alignment.topCenter, - child: SizedBox( - height: 140, - child: Column( - children: [ - const VSpace(48), - FlowySvg( - FlowySvgs.m_home_search_icon_m, - color: theme.iconColorScheme.secondary, - size: Size.square(24), - ), - const VSpace(12), - Text( - LocaleKeys.search_noResultForSearching.tr(), - style: theme.textStyle.body.enhanced(color: textColor), - maxLines: 1, - overflow: TextOverflow.ellipsis, - ), - Text( - textAlign: TextAlign.center, - LocaleKeys.search_noResultForSearchingHint.tr(), - style: theme.textStyle.caption.standard(color: textColor), - ), - ], - ), + child: Column( + children: [ + const VSpace(48), + FlowySvg( + FlowySvgs.m_home_search_icon_m, + color: theme.iconColorScheme.secondary, + size: Size.square(24), + ), + const VSpace(12), + Text( + LocaleKeys.search_noResultForSearching.tr(), + style: theme.textStyle.heading4.enhanced(color: textColor), + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + Text( + textAlign: TextAlign.center, + LocaleKeys.search_noResultForSearchingHint.tr(), + style: theme.textStyle.body.standard(color: textColor), + ), + ], ), ); } diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_textfield.dart b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_textfield.dart index 916abc96d3..410491ca52 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_textfield.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_textfield.dart @@ -114,10 +114,7 @@ class _MobileSearchTextfieldState extends State focusNode: focusNode, textAlign: TextAlign.left, controller: controller, - style: TextStyle( - fontSize: 14, - height: 20 / 14, - fontWeight: FontWeight.w400, + style: theme.textStyle.heading4.standard( color: theme.textColorScheme.primary, ), decoration: buildInputDecoration(context), @@ -140,10 +137,7 @@ class _MobileSearchTextfieldState extends State final enableBorder = border.copyWith( borderSide: BorderSide(color: theme.borderColorScheme.themeThick), ); - final hintStyle = TextStyle( - fontSize: 14, - height: 20 / 14, - fontWeight: FontWeight.w400, + final hintStyle = theme.textStyle.heading4.standard( color: theme.textColorScheme.tertiary, ); return InputDecoration( diff --git a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_view_ancestors.dart b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_view_ancestors.dart index 86b8906c59..fb7269ae56 100644 --- a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_view_ancestors.dart +++ b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_view_ancestors.dart @@ -31,7 +31,7 @@ class ViewAncestorBloc extends Bloc { } }, ); - if(ancester != null) { + if (ancester != null) { emit(state.copyWith(ancestor: ancester, isLoading: false)); } }, @@ -90,7 +90,7 @@ extension ViewAncestorTextExtension on ViewAncestorState { return Text( displayPath.join(' / '), style: textStyle, - maxLines: 1, + maxLines: 2, overflow: TextOverflow.ellipsis, ); }, @@ -114,6 +114,7 @@ extension ViewAncestorTextExtension on ViewAncestorState { .standard(color: theme.textColorScheme.tertiary) .copyWith(letterSpacing: 0.1); return Row( + mainAxisSize: MainAxisSize.min, children: [ HSpace(8), Text( @@ -123,11 +124,13 @@ extension ViewAncestorTextExtension on ViewAncestorState { ), ), HSpace(8), - Text( - displayPath.join(' / '), - style: style, - maxLines: 1, - overflow: TextOverflow.ellipsis, + Flexible( + child: Text( + displayPath.join(' / '), + style: style, + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), ), ], ); diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/page_preview.dart b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/page_preview.dart index 07b208e6c9..8ee3997afa 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/page_preview.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/page_preview.dart @@ -55,7 +55,7 @@ class PagePreview extends StatelessWidget { borderRadius: BorderRadius.circular(12), ), margin: EdgeInsets.only( - top: theme.spacing.m, + top: theme.spacing.xs, bottom: theme.spacing.xl, ), child: Stack( diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/recent_views_list.dart b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/recent_views_list.dart index ea389b6214..3d95c5d1ac 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/recent_views_list.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/recent_views_list.dart @@ -74,7 +74,7 @@ class RecentViewsList extends StatelessWidget { if (showAskingAI) SearchAskAiEntrance(), buildTitle(context), buildViewList(state, context, hidePreview), - VSpace(8), + VSpace(16), ], ), ), @@ -97,11 +97,11 @@ class RecentViewsList extends StatelessWidget { ), child: Text( LocaleKeys.sideBar_recent.tr(), - style: theme.textStyle.heading4 + style: theme.textStyle.body .enhanced(color: theme.textColorScheme.secondary) .copyWith( letterSpacing: 0.2, - height: 24 / 16, + height: 22 / 16, ), ), ); diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_ask_ai_entrance.dart b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_ask_ai_entrance.dart index 7925fba20f..3c1a893345 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_ask_ai_entrance.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_ask_ai_entrance.dart @@ -36,40 +36,43 @@ class _AskAIFor extends StatelessWidget { Widget build(BuildContext context) { final theme = AppFlowyTheme.of(context); final spaceM = theme.spacing.m, spaceL = theme.spacing.l; - return AFBaseButton( - borderRadius: spaceM, - padding: EdgeInsets.all(spaceL), - backgroundColor: (context, isHovering, disable) { - if (isHovering) { - return theme.fillColorScheme.contentHover; - } - return Colors.transparent; - }, - borderColor: (context, isHovering, disable, isFocused) => - Colors.transparent, - builder: (ctx, isHovering, disable) { - return Row( - children: [ - SizedBox.square( - dimension: 20, - child: Center( - child: FlowySvg( - FlowySvgs.m_home_ai_chat_icon_m, - size: Size.square(20), - blendMode: null, + return Padding( + padding: EdgeInsets.symmetric(vertical: theme.spacing.xs), + child: AFBaseButton( + borderRadius: spaceM, + padding: EdgeInsets.all(spaceL), + backgroundColor: (context, isHovering, disable) { + if (isHovering) { + return theme.fillColorScheme.contentHover; + } + return Colors.transparent; + }, + borderColor: (context, isHovering, disable, isFocused) => + Colors.transparent, + builder: (ctx, isHovering, disable) { + return Row( + children: [ + SizedBox.square( + dimension: 20, + child: Center( + child: FlowySvg( + FlowySvgs.m_home_ai_chat_icon_m, + size: Size.square(20), + blendMode: null, + ), ), ), - ), - HSpace(8), - buildText(context), - ], - ); - }, - onTap: () { - context - .read() - ?.add(CommandPaletteEvent.goingToAskAI()); - }, + HSpace(8), + buildText(context), + ], + ); + }, + onTap: () { + context + .read() + ?.add(CommandPaletteEvent.goingToAskAI()); + }, + ), ); } @@ -116,27 +119,30 @@ class _AISearching extends StatelessWidget { Widget build(BuildContext context) { final theme = AppFlowyTheme.of(context); return Padding( - padding: EdgeInsets.all(theme.spacing.l), - child: Row( - children: [ - SizedBox.square( - dimension: 20, - child: Center( - child: FlowySvg( - FlowySvgs.m_home_ai_chat_icon_m, - size: Size.square(20), - blendMode: null, + padding: EdgeInsets.symmetric(vertical: theme.spacing.xs), + child: Padding( + padding: EdgeInsets.all(theme.spacing.l), + child: Row( + children: [ + SizedBox.square( + dimension: 20, + child: Center( + child: FlowySvg( + FlowySvgs.m_home_ai_chat_icon_m, + size: Size.square(20), + blendMode: null, + ), ), ), - ), - HSpace(8), - Text( - LocaleKeys.search_searching.tr(), - style: theme.textStyle.body - .standard(color: theme.textColorScheme.secondary) - .copyWith(height: 22 / 14), - ), - ], + HSpace(8), + Text( + LocaleKeys.search_searching.tr(), + style: theme.textStyle.body + .standard(color: theme.textColorScheme.secondary) + .copyWith(height: 22 / 14), + ), + ], + ), ), ); } @@ -153,11 +159,9 @@ class _AIOverview extends StatelessWidget { if (summaries.isEmpty) { return const SizedBox.shrink(); } + final xl = theme.spacing.xl, m = theme.spacing.m, l = theme.spacing.l; return Padding( - padding: EdgeInsets.symmetric( - vertical: theme.spacing.l, - horizontal: theme.spacing.m, - ), + padding: EdgeInsets.fromLTRB(m, l, m, xl), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -228,7 +232,7 @@ class _AIOverview extends StatelessWidget { HSpace(theme.spacing.l), Text( LocaleKeys.commandPalette_aiOverview.tr(), - style: theme.textStyle.heading4 + style: theme.textStyle.body .enhanced(color: theme.textColorScheme.secondary) .copyWith(height: 22 / 16, letterSpacing: 0.2), ), diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_field.dart b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_field.dart index 0c9a7aea9e..8e6d3e3f2c 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_field.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_field.dart @@ -1,3 +1,4 @@ +import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart'; import 'package:appflowy_ui/appflowy_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; @@ -87,6 +88,8 @@ class _SearchFieldState extends State { Widget build(BuildContext context) { final theme = AppFlowyTheme.of(context); final radius = BorderRadius.circular(theme.spacing.l); + final workspace = + context.read()?.state.currentWorkspace; return Container( height: 44, @@ -109,9 +112,11 @@ class _SearchFieldState extends State { borderRadius: radius, ), isDense: false, - hintText: LocaleKeys.search_searchOrAskAI.tr(), + hintText: LocaleKeys.search_searchFieldHint + .tr(args: ['${workspace?.name}']), hintStyle: theme.textStyle.heading4 .standard(color: theme.textColorScheme.tertiary), + hintMaxLines: 1, counterText: "", focusedBorder: OutlineInputBorder( borderRadius: radius, diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_results_list.dart b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_results_list.dart index deef7491dc..02b04b24af 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_results_list.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_results_list.dart @@ -91,11 +91,11 @@ class _SearchResultListState extends State { ), child: Text( LocaleKeys.commandPalette_bestMatches.tr(), - style: theme.textStyle.heading4 + style: theme.textStyle.body .enhanced(color: theme.textColorScheme.secondary) .copyWith( letterSpacing: 0.2, - height: 24 / 16, + height: 22 / 16, ), ), ); @@ -156,6 +156,7 @@ class _SearchResultListState extends State { ); }, ), + VSpace(16), ], ), ], diff --git a/frontend/resources/translations/en-US.json b/frontend/resources/translations/en-US.json index d63d3d240d..86a1886797 100644 --- a/frontend/resources/translations/en-US.json +++ b/frontend/resources/translations/en-US.json @@ -2356,6 +2356,7 @@ "label": "Search", "sidebarSearchIcon": "Search and quickly jump to a page", "searchOrAskAI": "Search or ask AI", + "searchFieldHint": "Search or ask a question in {}...", "askAIAnything": "Ask AI anything", "askAIFor": "Ask AI", "searching": "Searching...",