From 1fad5aa8044e2aa903a56e014556dae8841e4f05 Mon Sep 17 00:00:00 2001 From: Yijing Huang Date: Thu, 10 Aug 2023 07:59:24 -0500 Subject: [PATCH] feat: callout improvement (#3090) --- .../document/presentation/editor_page.dart | 4 ++ .../editor_plugins/actions/option_action.dart | 12 +++--- .../callout/callout_block_component.dart | 42 +++++++++---------- .../lib/workspace/application/appearance.dart | 1 + .../lib/colorscheme/dandelion.dart | 18 ++++---- .../lib/colorscheme/default_colorscheme.dart | 18 ++++---- .../flowy_infra/lib/colorscheme/lavender.dart | 18 ++++---- .../flowy_infra/lib/theme_extension.dart | 5 +++ 8 files changed, 65 insertions(+), 53 deletions(-) diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart index 16c9608a27..6c76ed3952 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart @@ -5,6 +5,7 @@ import 'package:appflowy/workspace/application/settings/shortcuts/settings_short import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_page/inline_page_reference.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:collection/collection.dart'; +import 'package:flowy_infra/theme_extension.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -185,6 +186,8 @@ class _AppFlowyEditorPageState extends State { // OptionAction.moveDown, ]; + final calloutBGColor = AFThemeExtension.of(context).calloutBGColor; + final configuration = BlockComponentConfiguration( padding: (_) => const EdgeInsets.symmetric(vertical: 5.0), ); @@ -250,6 +253,7 @@ class _AppFlowyEditorPageState extends State { ), CalloutBlockKeys.type: CalloutBlockComponentBuilder( configuration: configuration, + defaultColor: calloutBGColor, ), DividerBlockKeys.type: DividerBlockComponentBuilder( configuration: configuration, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action.dart index 1f80b82034..987105c759 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action.dart @@ -16,6 +16,8 @@ enum OptionAction { turnInto, moveUp, moveDown, + + /// callout background color color, divider, align; @@ -241,11 +243,12 @@ class ColorOptionAction extends PopoverActionCell { final bgColor = node.attributes[blockComponentBackgroundColor] as String?; final selectedColor = bgColor?.toColor(); - + // get default background color from themeExtension + final defaultColor = AFThemeExtension.of(context).calloutBGColor; final colors = [ - // clear background color. + // reset to default background color FlowyColorOption( - color: Colors.transparent, + color: defaultColor, name: LocaleKeys.document_plugins_optionAction_defaultColor.tr(), ), ...FlowyTint.values.map( @@ -265,8 +268,7 @@ class ColorOptionAction extends PopoverActionCell { ), onTap: (color, index) async { final transaction = editorState.transaction; - final backgroundColor = - color == Colors.transparent ? null : color.toHex(); + final backgroundColor = color.toHex(); transaction.updateNode(node, { blockComponentBackgroundColor: backgroundColor, }); diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart index 40837576a9..aab9402917 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart @@ -1,4 +1,5 @@ import 'package:appflowy_editor/appflowy_editor.dart'; +import 'package:flowy_infra/theme_extension.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; @@ -26,16 +27,16 @@ class CalloutBlockKeys { static const String icon = 'icon'; } -// creating a new callout node +// The one is inserted through selection menu Node calloutNode({ Delta? delta, String emoji = '📌', - String backgroundColor = '#F0F0F0', + Color? defaultColor, }) { final attributes = { CalloutBlockKeys.delta: (delta ?? Delta()).toJson(), CalloutBlockKeys.icon: emoji, - CalloutBlockKeys.backgroundColor: backgroundColor, + CalloutBlockKeys.backgroundColor: defaultColor?.toHex() ?? '#f2f2f2', }; return Node( type: CalloutBlockKeys.type, @@ -43,12 +44,13 @@ Node calloutNode({ ); } -// defining the callout block menu item for selection +// defining the callout block menu item in selection menu SelectionMenuItem calloutItem = SelectionMenuItem.node( name: 'Callout', iconData: Icons.note, - keywords: ['callout'], - nodeBuilder: (editorState, _) => calloutNode(), + keywords: [CalloutBlockKeys.type], + nodeBuilder: (editorState, context) => + calloutNode(defaultColor: AFThemeExtension.of(context).calloutBGColor), replace: (_, node) => node.delta?.isEmpty ?? false, updateSelection: (_, path, __, ___) { return Selection.single(path: path, startOffset: 0); @@ -59,17 +61,21 @@ SelectionMenuItem calloutItem = SelectionMenuItem.node( class CalloutBlockComponentBuilder extends BlockComponentBuilder { CalloutBlockComponentBuilder({ this.configuration = const BlockComponentConfiguration(), + required this.defaultColor, }); @override final BlockComponentConfiguration configuration; + final Color defaultColor; + @override BlockComponentWidget build(BlockComponentContext blockComponentContext) { final node = blockComponentContext.node; return CalloutBlockComponentWidget( key: node.key, node: node, + defaultColor: defaultColor, configuration: configuration, showActions: showActions(node), actionBuilder: (context, state) => actionBuilder( @@ -96,8 +102,11 @@ class CalloutBlockComponentWidget extends BlockComponentStatefulWidget { super.showActions, super.actionBuilder, super.configuration = const BlockComponentConfiguration(), + required this.defaultColor, }); + final Color defaultColor; + @override State createState() => _CalloutBlockComponentWidgetState(); @@ -128,17 +137,8 @@ class _CalloutBlockComponentWidgetState // get the background color of the note block from the node's attributes Color get backgroundColor { final colorString = - node.attributes[CalloutBlockKeys.backgroundColor] as String?; - if (colorString == null) { - return Colors.transparent; - } - - final brightness = Theme.of(context).brightness; - final bool isDarkMode = brightness == Brightness.dark; - - final Color bgColor = colorString.toColor(); - - return isDarkMode ? bgColor.withOpacity(0.3) : bgColor; + node.attributes[CalloutBlockKeys.backgroundColor] as String; + return colorString.toColor(); } // get the emoji of the note block from the node's attributes or default to '📌' @@ -162,9 +162,9 @@ class _CalloutBlockComponentWidgetState // the emoji picker button for the note Padding( padding: const EdgeInsets.only( - top: 6.0, - left: 2.0, - right: 2.0, + top: 8.0, + left: 4.0, + right: 4.0, ), child: EmojiPickerButton( key: ValueKey( @@ -183,7 +183,7 @@ class _CalloutBlockComponentWidgetState child: buildCalloutBlockComponent(context), ), ), - const VSpace(10), + const HSpace(8.0), ], ), ); diff --git a/frontend/appflowy_flutter/lib/workspace/application/appearance.dart b/frontend/appflowy_flutter/lib/workspace/application/appearance.dart index 6a82a31df8..b215b7061f 100644 --- a/frontend/appflowy_flutter/lib/workspace/application/appearance.dart +++ b/frontend/appflowy_flutter/lib/workspace/application/appearance.dart @@ -346,6 +346,7 @@ class AppearanceSettingsState with _$AppearanceSettingsState { fontSize: FontSizes.s11, fontColor: theme.shader3, ), + calloutBGColor: theme.hoverBG3, caption: _getFontStyle( fontFamily: fontFamily, fontSize: FontSizes.s11, diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart index ae041525b2..f5590b4055 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/dandelion.dart @@ -93,15 +93,15 @@ class DandelionColorScheme extends FlowyColorScheme { bg2: _black, bg3: const Color(0xff4f4f4f), bg4: const Color(0xff2c144b), - tint1: const Color(0xff8738F5), - tint2: const Color(0xffE6336E), - tint3: const Color(0xffFF2D9E), - tint4: const Color(0xffE9973E), - tint5: const Color(0xffFBF000), - tint6: const Color(0xffC0F000), - tint7: const Color(0xff15F74E), - tint8: const Color(0xff00F0E2), - tint9: const Color(0xff00BCF0), + tint1: const Color(0x4d9327FF), + tint2: const Color(0x66FC0088), + tint3: const Color(0x4dFC00E2), + tint4: const Color(0x80BE5B00), + tint5: const Color(0x33F8EE00), + tint6: const Color(0x4d6DC300), + tint7: const Color(0x5900BD2A), + tint8: const Color(0x80008890), + tint9: const Color(0x4d0029FF), main1: _darkMain1, main2: const Color(0xffe0196f), shadow: _black, diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart index b3f324504e..03115ddadb 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart @@ -91,15 +91,15 @@ class DefaultColorScheme extends FlowyColorScheme { bg2: const Color(0xffEDEEF2), bg3: _darkMain1, bg4: const Color(0xff2C144B), - tint1: const Color(0xff8738F5), - tint2: const Color(0xffE6336E), - tint3: const Color(0xffFF2D9E), - tint4: const Color(0xffE9973E), - tint5: const Color(0xffFBF000), - tint6: const Color(0xffC0F000), - tint7: const Color(0xff15F74E), - tint8: const Color(0xff00F0E2), - tint9: const Color(0xff00BCF0), + tint1: const Color(0x4d9327FF), + tint2: const Color(0x66FC0088), + tint3: const Color(0x4dFC00E2), + tint4: const Color(0x80BE5B00), + tint5: const Color(0x33F8EE00), + tint6: const Color(0x4d6DC300), + tint7: const Color(0x5900BD2A), + tint8: const Color(0x80008890), + tint9: const Color(0x4d0029FF), main1: _darkMain1, main2: const Color(0xff00B7EA), shadow: const Color(0xff0F131C), diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart index 8a04ed586c..9a49fc4185 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/lavender.dart @@ -94,15 +94,15 @@ class LavenderColorScheme extends FlowyColorScheme { bg2: _black, bg3: _darkMain1, bg4: const Color(0xff2c144b), - tint1: const Color(0xff8738F5), - tint2: const Color(0xffE6336E), - tint3: const Color(0xffFF2D9E), - tint4: const Color(0xffE9973E), - tint5: const Color(0xffFBF000), - tint6: const Color(0xffC0F000), - tint7: const Color(0xff15F74E), - tint8: const Color(0xff00F0E2), - tint9: const Color(0xff00BCF0), + tint1: const Color(0x4d9327FF), + tint2: const Color(0x66FC0088), + tint3: const Color(0x4dFC00E2), + tint4: const Color(0x80BE5B00), + tint5: const Color(0x33F8EE00), + tint6: const Color(0x4d6DC300), + tint7: const Color(0x5900BD2A), + tint8: const Color(0x80008890), + tint9: const Color(0x4d0029FF), main1: _darkMain1, main2: _darkMain1, shadow: _black, diff --git a/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart b/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart index ab5da1505d..d55b9fe56f 100644 --- a/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart +++ b/frontend/appflowy_flutter/packages/flowy_infra/lib/theme_extension.dart @@ -22,6 +22,7 @@ class AFThemeExtension extends ThemeExtension { final Color toggleOffFill; final Color progressBarBGColor; final Color toggleButtonBGColor; + final Color calloutBGColor; final TextStyle code; final TextStyle callout; @@ -44,6 +45,7 @@ class AFThemeExtension extends ThemeExtension { required this.lightGreyHover, required this.toggleOffFill, required this.textColor, + required this.calloutBGColor, required this.code, required this.callout, required this.caption, @@ -69,6 +71,7 @@ class AFThemeExtension extends ThemeExtension { Color? tint8, Color? tint9, Color? textColor, + Color? calloutBGColor, Color? greyHover, Color? greySelect, Color? lightGreyHover, @@ -92,6 +95,7 @@ class AFThemeExtension extends ThemeExtension { tint8: tint8 ?? this.tint8, tint9: tint9 ?? this.tint9, textColor: textColor ?? this.textColor, + calloutBGColor: calloutBGColor ?? this.calloutBGColor, greyHover: greyHover ?? this.greyHover, greySelect: greySelect ?? this.greySelect, lightGreyHover: lightGreyHover ?? this.lightGreyHover, @@ -123,6 +127,7 @@ class AFThemeExtension extends ThemeExtension { tint8: Color.lerp(tint8, other.tint8, t)!, tint9: Color.lerp(tint9, other.tint9, t)!, textColor: Color.lerp(textColor, other.textColor, t)!, + calloutBGColor: Color.lerp(calloutBGColor, other.calloutBGColor, t)!, greyHover: Color.lerp(greyHover, other.greyHover, t)!, greySelect: Color.lerp(greySelect, other.greySelect, t)!, lightGreyHover: Color.lerp(lightGreyHover, other.lightGreyHover, t)!,