mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
fix: expand the icon to be the same size as the text in the heading block (#6093)
* fix: hidden board group padding * fix: expand icon in heading style
This commit is contained in:
Lucas.Xu
GitHub
parent
7541dff00e
commit
956d62fe82
@ -42,6 +42,8 @@ class HiddenGroupsColumn extends StatelessWidget {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
final isCollapsed = layoutSettings.collapseHiddenGroups;
|
||||
final leftPadding = margin.left +
|
||||
context.read<DatabasePluginWidgetBuilderSize>().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<DatabasePluginWidgetBuilderSize>()
|
||||
.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<HiddenGroupCard> {
|
||||
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<BoardBloc>(),
|
||||
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<BoardBloc>(),
|
||||
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,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@ -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<MentionPageBlock> {
|
||||
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<void> 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<MentionPageBlock> {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user