diff --git a/frontend/appflowy_flutter/lib/plugins/database/board/presentation/widgets/board_hidden_groups.dart b/frontend/appflowy_flutter/lib/plugins/database/board/presentation/widgets/board_hidden_groups.dart index 98dd7a8eaf..a44cf1c55d 100644 --- a/frontend/appflowy_flutter/lib/plugins/database/board/presentation/widgets/board_hidden_groups.dart +++ b/frontend/appflowy_flutter/lib/plugins/database/board/presentation/widgets/board_hidden_groups.dart @@ -42,6 +42,8 @@ class HiddenGroupsColumn extends StatelessWidget { return const SizedBox.shrink(); } final isCollapsed = layoutSettings.collapseHiddenGroups; + final leftPadding = margin.left + + context.read().horizontalPadding; return AnimatedSize( alignment: AlignmentDirectional.topStart, curve: Curves.easeOut, @@ -56,35 +58,29 @@ class HiddenGroupsColumn extends StatelessWidget { ), ), ) - : SizedBox( + : Container( width: 274, + padding: EdgeInsets.only( + left: leftPadding, + right: margin.right + 4, + ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox( height: 50, - child: Padding( - padding: EdgeInsets.only( - left: margin.left + - context - .read() - .horizontalPadding, - right: margin.right + 4, - ), - child: Row( - children: [ - Expanded( - child: FlowyText.medium( - LocaleKeys - .board_hiddenGroupSection_sectionTitle - .tr(), - overflow: TextOverflow.ellipsis, - color: Theme.of(context).hintColor, - ), + child: Row( + children: [ + Expanded( + child: FlowyText.medium( + LocaleKeys.board_hiddenGroupSection_sectionTitle + .tr(), + overflow: TextOverflow.ellipsis, + color: Theme.of(context).hintColor, ), - _collapseExpandIcon(context, isCollapsed), - ], - ), + ), + _collapseExpandIcon(context, isCollapsed), + ], ), ), Expanded( @@ -204,31 +200,27 @@ class _HiddenGroupCardState extends State { final databaseController = widget.bloc.databaseController; final primaryField = databaseController.fieldController.fieldInfos .firstWhereOrNull((element) => element.isPrimary)!; - - return Padding( - padding: const EdgeInsets.only(left: 26), - child: AppFlowyPopover( - controller: _popoverController, - direction: PopoverDirection.bottomWithCenterAligned, - triggerActions: PopoverTriggerFlags.none, - constraints: const BoxConstraints(maxWidth: 234, maxHeight: 300), - popupBuilder: (popoverContext) { - return BlocProvider.value( - value: context.read(), - child: HiddenGroupPopupItemList( - viewId: databaseController.viewId, - groupId: widget.group.groupId, - primaryFieldId: primaryField.id, - rowCache: databaseController.rowCache, - ), - ); - }, - child: HiddenGroupButtonContent( - popoverController: _popoverController, - groupId: widget.group.groupId, - index: widget.index, - bloc: widget.bloc, - ), + return AppFlowyPopover( + controller: _popoverController, + direction: PopoverDirection.bottomWithCenterAligned, + triggerActions: PopoverTriggerFlags.none, + constraints: const BoxConstraints(maxWidth: 234, maxHeight: 300), + popupBuilder: (popoverContext) { + return BlocProvider.value( + value: context.read(), + child: HiddenGroupPopupItemList( + viewId: databaseController.viewId, + groupId: widget.group.groupId, + primaryFieldId: primaryField.id, + rowCache: databaseController.rowCache, + ), + ); + }, + child: HiddenGroupButtonContent( + popoverController: _popoverController, + groupId: widget.group.groupId, + index: widget.index, + bloc: widget.bloc, ), ); } diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart index 34095e7512..39084c7fa3 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart @@ -1,7 +1,6 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/mobile/application/mobile_router.dart'; -import 'package:appflowy/plugins/base/emoji/emoji_text.dart'; import 'package:appflowy/plugins/document/application/document_bloc.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_block.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mobile_page_selector_sheet.dart'; @@ -106,70 +105,32 @@ class _MentionPageBlockState extends State { final view = state.data; // memorize the result pageMemorizer[widget.pageId] = view; + if (view == null) { - return FlowyHover( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 4), - child: FlowyText( - LocaleKeys.document_mention_noAccess.tr(), - color: Theme.of(context).disabledColor, - decoration: TextDecoration.underline, - fontSize: widget.textStyle?.fontSize, - fontWeight: widget.textStyle?.fontWeight, - ), - ), + return _NoAccessMentionPageBlock( + textStyle: widget.textStyle, ); } - final iconSize = widget.textStyle?.fontSize ?? 16.0; - Widget child = Row( - mainAxisSize: MainAxisSize.min, - children: [ - const HSpace(4), - view.icon.value.isNotEmpty - ? EmojiText( - emoji: view.icon.value, - fontSize: 12, - textAlign: TextAlign.center, - lineHeight: 1.3, - ) - : FlowySvg( - view.layout.icon, - size: Size.square(iconSize + 2.0), - ), - const HSpace(2), - FlowyText( - view.name, - decoration: TextDecoration.underline, - fontSize: widget.textStyle?.fontSize, - fontWeight: widget.textStyle?.fontWeight, - ), - const HSpace(4), - ], - ); - - if (PlatformExtension.isDesktop) { - child = Padding( - padding: const EdgeInsets.symmetric(horizontal: 2), - child: FlowyHover( - cursor: SystemMouseCursors.click, - child: child, - ), + if (PlatformExtension.isMobile) { + return _MobileMentionPageBlock( + view: view, + textStyle: widget.textStyle, + handleTap: handleTap, + handleDoubleTap: handleDoubleTap, + ); + } else { + return _DesktopMentionPageBlock( + view: view, + textStyle: widget.textStyle, + handleTap: handleTap, ); } - - return GestureDetector( - onTap: handleTap, - onDoubleTap: PlatformExtension.isMobile ? handleDoubleTap : null, - behavior: HitTestBehavior.opaque, - child: child, - ); }, ); } Future handleTap() async { - debugPrint('handleTap'); final view = await fetchView(widget.pageId); if (view == null) { Log.error('Page(${widget.pageId}) not found'); @@ -246,3 +207,127 @@ class _MentionPageBlockState extends State { }); } } + +class _MentionPageBlockContent extends StatelessWidget { + const _MentionPageBlockContent({ + required this.view, + required this.textStyle, + }); + + final ViewPB view; + final TextStyle? textStyle; + + @override + Widget build(BuildContext context) { + final emojiSize = textStyle?.fontSize ?? 12.0; + final iconSize = textStyle?.fontSize ?? 16.0; + + return Row( + mainAxisSize: MainAxisSize.min, + children: [ + const HSpace(4), + view.icon.value.isNotEmpty + ? FlowyText.emoji( + view.icon.value, + fontSize: emojiSize, + lineHeight: textStyle?.height, + optimizeEmojiAlign: true, + ) + : FlowySvg( + view.layout.icon, + size: Size.square(iconSize + 2.0), + ), + const HSpace(2), + FlowyText( + view.name, + decoration: TextDecoration.underline, + fontSize: textStyle?.fontSize, + fontWeight: textStyle?.fontWeight, + lineHeight: textStyle?.height, + ), + const HSpace(4), + ], + ); + } +} + +class _NoAccessMentionPageBlock extends StatelessWidget { + const _NoAccessMentionPageBlock({ + required this.textStyle, + }); + + final TextStyle? textStyle; + + @override + Widget build(BuildContext context) { + return FlowyHover( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 4), + child: FlowyText( + LocaleKeys.document_mention_noAccess.tr(), + color: Theme.of(context).disabledColor, + decoration: TextDecoration.underline, + fontSize: textStyle?.fontSize, + fontWeight: textStyle?.fontWeight, + ), + ), + ); + } +} + +class _MobileMentionPageBlock extends StatelessWidget { + const _MobileMentionPageBlock({ + required this.view, + required this.textStyle, + required this.handleTap, + required this.handleDoubleTap, + }); + + final TextStyle? textStyle; + final ViewPB view; + final VoidCallback handleTap; + final VoidCallback handleDoubleTap; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: handleTap, + onDoubleTap: handleDoubleTap, + behavior: HitTestBehavior.opaque, + child: _MentionPageBlockContent( + view: view, + textStyle: textStyle, + ), + ); + } +} + +class _DesktopMentionPageBlock extends StatelessWidget { + const _DesktopMentionPageBlock({ + required this.view, + required this.textStyle, + required this.handleTap, + }); + + final TextStyle? textStyle; + final ViewPB view; + final VoidCallback handleTap; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: handleTap, + behavior: HitTestBehavior.opaque, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 2), + child: FlowyHover( + cursor: SystemMouseCursors.click, + child: _MentionPageBlockContent( + view: view, + textStyle: textStyle, + ), + ), + ), + ); + } +} diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart index e8c3554e73..28f82c07e6 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart @@ -137,9 +137,8 @@ class EditorStyleCustomizer { textStyle: baseTextStyle.copyWith( fontSize: fontSize, fontWeight: FontWeight.normal, - fontStyle: FontStyle.italic, color: Colors.red, - backgroundColor: Colors.grey.withOpacity(0.3), + backgroundColor: theme.colorScheme.inverseSurface.withOpacity(0.8), ), ), applyHeightToFirstAscent: true,