Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Text and background color in mobile toolbar #233

Merged
merged 21 commits into from
Jun 25, 2023
Merged

Feat: Text and background color in mobile toolbar #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
8b1d549
refactor: move shared code out of desktop
hyj1204 Jun 14, 2023
9a317c6
refactor: fix double exist error and extract color option
hyj1204 Jun 14, 2023
31ea64a
feat: update color icon
hyj1204 Jun 14, 2023
2912bff
refactor: refactor MobileToolbarItemMenuBtn to be more flexiable
hyj1204 Jun 14, 2023
2d1ee41
feat: add textAndBackgroundColorMobileToolbarItem
hyj1204 Jun 20, 2023
2421dd1
chore: dart fix
hyj1204 Jun 20, 2023
fcfa642
refactor: extract MobileToolbarMenuGridDelegate
hyj1204 Jun 21, 2023
3983b7d
chore: update UI parameters
hyj1204 Jun 21, 2023
0c2300f
refactor: delete format color in format_rich_text_style.dart and refa…
hyj1204 Jun 21, 2023
f6a6f8e
chore: remove the bottom line of tabbar
hyj1204 Jun 21, 2023
b7008a5
refactor: set color opitions to be customizable
hyj1204 Jun 21, 2023
deb5519
chore: add scrollbar in opitions grid view
hyj1204 Jun 21, 2023
5c662f8
test: update code to pass the previous tests
hyj1204 Jun 21, 2023
5716efc
chore: add Material in testing
hyj1204 Jun 21, 2023
e304aae
chore: unify text and background default color opitions
hyj1204 Jun 21, 2023
92ff5a8
test: add textAndBackgroundColorMobileToolbarItem test
hyj1204 Jun 21, 2023
8197326
chore: update AppFlowyEditorLocalizations
hyj1204 Jun 23, 2023
4d10a8d
chore: replace string by components' key in tests
hyj1204 Jun 23, 2023
7ccecc7
test: add color options widgets tests
hyj1204 Jun 23, 2023
4e6fef0
chore: dart fix
hyj1204 Jun 23, 2023
0fffeb8
chore: dart format
hyj1204 Jun 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 assets/mobile/toolbar_icons/text_color.svg → assets/mobile/toolbar_icons/color.svg
View file
Open in desktop
File renamed without changes
3 changes: 0 additions & 3 deletions assets/mobile/toolbar_icons/highlight_color.svg
View file
Open in desktop

This file was deleted.

77 changes: 77 additions & 0 deletions example/lib/pages/simple_editor.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ class SimpleEditor extends StatelessWidget {
editorState: editorState,
toolbarItems: [
textDecorationMobileToolbarItem,
textAndBackgroundColorMobileToolbarItem,
headingMobileToolbarItem,
todoListMobileToolbarItem,
listMobileToolbarItem,
Expand All @@ -77,6 +78,82 @@ class SimpleEditor extends StatelessWidget {
codeMobileToolbarItem,
// dividerMobileToolbarItem,
],
textColorOptions: [
ColorOption(
colorHex: Colors.grey.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorGray,
),
ColorOption(
colorHex: Colors.brown.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorBrown,
),
ColorOption(
colorHex: Colors.yellow.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorYellow,
),
ColorOption(
colorHex: Colors.green.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorGreen,
),
ColorOption(
colorHex: Colors.blue.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorBlue,
),
ColorOption(
colorHex: Colors.purple.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorPurple,
),
ColorOption(
colorHex: Colors.pink.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorPink,
),
ColorOption(
colorHex: Colors.red.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorRed,
),
],
backgroundColorOptions: [
ColorOption(
colorHex: Colors.grey.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations
.current.backgroundColorGray,
),
ColorOption(
colorHex: Colors.brown.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations
.current.backgroundColorBrown,
),
ColorOption(
colorHex: Colors.yellow.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations
.current.backgroundColorYellow,
),
ColorOption(
colorHex: Colors.green.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations
.current.backgroundColorGreen,
),
ColorOption(
colorHex: Colors.blue.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations
.current.backgroundColorBlue,
),
ColorOption(
colorHex: Colors.purple.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations
.current.backgroundColorPurple,
),
ColorOption(
colorHex: Colors.pink.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations
.current.backgroundColorPink,
),
ColorOption(
colorHex: Colors.red.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations
.current.backgroundColorRed,
),
],
),
],
);
Expand Down
11 changes: 8 additions & 3 deletions lib/l10n/intl_en.arb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"@@locale": "en",
"bold": "Bold",
"@bold": {},
"bulletedList": "Bulleted list",
"bulletedList": "Bulleted List",
"@bulletedList": {},
"checkbox": "Checkbox",
"@checkbox": {},
Expand All @@ -24,7 +24,7 @@
"@italic": {},
"link": "Link",
"@link": {},
"numberedList": "Numbered list",
"numberedList": "Numbered List",
"@numberedList": {},
"quote": "Quote",
"@quote": {},
Expand Down Expand Up @@ -74,6 +74,7 @@
"@backgroundColorPink": {},
"backgroundColorRed": "Red background",
"@backgroundColorRed": {},
"done": "Done",
"tint1": "Tint 1",
"tint2": "Tint 2",
"tint3": "Tint 3",
Expand All @@ -92,7 +93,11 @@
"lightLightTint7": "Green",
"lightLightTint8": "Aqua",
"lightLightTint9": "Blue",
"textColor": "Text color",
"mobileHeading1": "Heading 1",
"mobileHeading2": "Heading 2",
"mobileHeading3": "Heading 3",
"textColor": "Text Color",
"backgroundColor": "Background Color",
"addYourLink": "Add your link",
"openLink": "Open link",
"copyLink": "Copy link",
Expand Down
110 changes: 4 additions & 106 deletions lib/src/editor/toolbar/desktop/items/color/color_menu.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,15 @@ void showColorMenu(
editorState: editorState,
selectedColorHex: currentColorHex,
colorOptions: isTextColor
? _generateTextColorOptions(editorState)
: _generateHighlightColorOptions(editorState),
? generateTextColorOptions()
: generateHighlightColorOptions(),
onSubmittedColorHex: (color) {
isTextColor
? _formatFontColor(
? formatFontColor(
editorState,
color,
)
: _formatHighlightColor(
: formatHighlightColor(
editorState,
color,
);
Expand All @@ -64,105 +64,3 @@ void showColorMenu(
).build();
Overlay.of(context).insert(overlay!);
}

void _formatHighlightColor(EditorState editorState, String color) {
// if the color is empty, remove the highlight color format
editorState.formatDelta(
editorState.selection,
{
FlowyRichTextKeys.highlightColor: color.isEmpty ? null : color,
},
);
}

void _formatFontColor(EditorState editorState, String color) {
// if the color is empty, remove the color format
editorState.formatDelta(
editorState.selection,
{
FlowyRichTextKeys.textColor: color.isEmpty ? null : color,
},
);
}

List<ColorOption> _generateTextColorOptions(EditorState editorState) {
return [
ColorOption(
colorHex: '',
name: AppFlowyEditorLocalizations.current.fontColorDefault,
),
ColorOption(
colorHex: Colors.grey.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorGray,
),
ColorOption(
colorHex: Colors.brown.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorBrown,
),
ColorOption(
colorHex: Colors.yellow.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorYellow,
),
ColorOption(
colorHex: Colors.green.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorGreen,
),
ColorOption(
colorHex: Colors.blue.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorBlue,
),
ColorOption(
colorHex: Colors.purple.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorPurple,
),
ColorOption(
colorHex: Colors.pink.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorPink,
),
ColorOption(
colorHex: Colors.red.toHex(),
name: AppFlowyEditorLocalizations.current.fontColorRed,
),
];
}

List<ColorOption> _generateHighlightColorOptions(EditorState editorState) {
return [
ColorOption(
colorHex: '',
name: AppFlowyEditorLocalizations.current.backgroundColorDefault,
),
ColorOption(
colorHex: Colors.grey.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations.current.backgroundColorGray,
),
ColorOption(
colorHex: Colors.brown.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations.current.backgroundColorBrown,
),
ColorOption(
colorHex: Colors.yellow.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations.current.backgroundColorYellow,
),
ColorOption(
colorHex: Colors.green.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations.current.backgroundColorGreen,
),
ColorOption(
colorHex: Colors.blue.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations.current.backgroundColorBlue,
),
ColorOption(
colorHex: Colors.purple.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations.current.backgroundColorPurple,
),
ColorOption(
colorHex: Colors.pink.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations.current.backgroundColorPink,
),
ColorOption(
colorHex: Colors.red.withOpacity(0.3).toHex(),
name: AppFlowyEditorLocalizations.current.backgroundColorRed,
),
];
}
11 changes: 0 additions & 11 deletions lib/src/editor/toolbar/desktop/items/color/color_picker.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,6 @@ import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:appflowy_editor/src/editor/toolbar/desktop/items/utils/overlay_util.dart';
import 'package:flutter/material.dart';

class ColorOption {
const ColorOption({
required this.colorHex,
required this.name,
});

// 0xFF000000
final String colorHex;
final String name;
}

class ColorPicker extends StatefulWidget {
const ColorPicker({
super.key,
Expand Down
Loading