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.

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: customized color options #270

Merged
merged 6 commits into from
Jul 4, 2023

Conversation

hyj1204
Copy link
Contributor

@hyj1204 hyj1204 commented Jun 30, 2023

To close #234
Related to #211

To customize color options:

Desktop

Give a list of ColorOption to buildTextColorItem and/or buildHighlightColorItem functions to display your personalized colors.

       if (PlatformExtension.isDesktopOrWeb) {
            return FloatingToolbar(
              items: [
                buildTextColorItem(
                  colorOptions: [
                    ColorOption(colorHex: '164B60', name: 'Navy'),
                    ColorOption(colorHex: '1B6B93', name: 'Blue'),
                  ],
                ),
                buildHighlightColorItem(
                  colorOptions: [
                    ColorOption(colorHex: '4FC0D0', name: 'Light Blue'),
                    ColorOption(colorHex: 'A2FF86', name: 'Green'),
                  ],
                ),
              ],
          ...

image
image

Mobile

Give a list of text/background ColorOption to buildTextAndBackgroundColorMobileToolbarItem to display your personalized colors.

MobileToolbar(
                  editorState: editorState,
                  toolbarItems: [
                    buildTextAndBackgroundColorMobileToolbarItem(
                      textColorOptions: [
                        ColorOption(colorHex: '164B60', name: 'Navy'),
                        ColorOption(colorHex: '1B6B93', name: 'Blue'),
                      ],
                      backgroundColorOptions: [
                        ColorOption(colorHex: '4FC0D0', name: 'Light Blue'),
                        ColorOption(colorHex: 'A2FF86', name: 'Green'),
                      ],
                    ),
                  ],
                ),

image

image

@hyj1204 hyj1204 requested a review from LucasXu0 June 30, 2023 16:11
@hyj1204 hyj1204 self-assigned this Jun 30, 2023
@LucasXu0
Copy link
Collaborator

LucasXu0 commented Jul 3, 2023

@hyj1204 Please fix the CI issues.

group: 4,
isActive: onlyShowInTextType,
builder: (context, editorState) {
String? highlightColorHex;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this ever get assigned any other value than null? Seems redundant

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

highlightColorHex is used to show a checked mark on current color options(if it has a color), I assigned value to it now(same with text color).
image

Nice catch, Thanks!

@hyj1204 hyj1204 force-pushed the feat/customized_color_options branch from ff49c2a to 442a57c Compare July 3, 2023 18:45
@codecov
Copy link

codecov bot commented Jul 3, 2023

Codecov Report

Merging #270 (e352564) into main (070ceb3) will increase coverage by 0.92%.
The diff coverage is 79.48%.

@@            Coverage Diff             @@
##             main     #270      +/-   ##
==========================================
+ Coverage   63.68%   64.61%   +0.92%     
==========================================
  Files         246      246              
  Lines       10878    10880       +2     
==========================================
+ Hits         6928     7030     +102     
+ Misses       3950     3850     -100     
Impacted Files Coverage Δ
...editor/toolbar/desktop/items/color/color_menu.dart 0.00% <0.00%> (ø)
...itor/toolbar/desktop/items/color/color_picker.dart 80.74% <0.00%> (ø)
lib/src/editor/toolbar/mobile/mobile_toolbar.dart 96.25% <ø> (-0.14%) ⬇️
lib/src/editor/toolbar/utils/color_generators.dart 100.00% <ø> (+100.00%) ⬆️
...ktop/items/color/highlight_color_toolbar_item.dart 83.33% <83.33%> (+1.51%) ⬆️
...r/desktop/items/color/text_color_toolbar_item.dart 83.33% <83.33%> (+1.51%) ⬆️
...rc/editor/toolbar/mobile/mobile_toolbar_style.dart 100.00% <100.00%> (ø)
..._items/color/background_color_options_widgets.dart 100.00% <100.00%> (ø)
...color/text_and_background_color_tool_bar_item.dart 100.00% <100.00%> (ø)
...oolbar_items/color/text_color_options_widgets.dart 100.00% <100.00%> (ø)

... and 1 file with indirect coverage changes

@LucasXu0 LucasXu0 merged commit 13805af into AppFlowy-IO:main Jul 4, 2023
@hyj1204 hyj1204 deleted the feat/customized_color_options branch July 4, 2023 16:30
LucasXu0 pushed a commit to MayurSMahajan/appflowy-editor that referenced this pull request Jul 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FR] Customized color options in color picker for Desktop
3 participants