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

FR: Users choose color from palette or picker #5041 #5677

Conversation

gustamor
Copy link
Contributor

@gustamor gustamor commented Jul 2, 2024

Feature Preview

Grabacion.de.pantalla.2024-07-02.a.las.18.54.53.mov
  • Added flex_color_picker dependency.
  • Implemented a new color picker dialog with the following features:
    • Display Material predefined colors.
    • Include primary, accent, and shade colors, as well as a color wheel for selection.
    • Add a graphical opacity selector.
    • Enhanced the previous dialog to include an icon in a text field for opening the palette.
  • Added suffixIcon parameter to the _ColorSettingTextField class, making it reactive to tap gestures.
  • Utilized ColorExtension on the Color class to avoid namespace conflicts when converting colors to hexadecimal strings.
  • Added translation strings to english

Addresses (#5041): [FR] Let user pick from a list of predefined colors for selection and cursor colors.


Hand-made tests done on:

  • Linux (Pop_OS!)
  • Macos M2
  • Web application
  • Mobile

PR Checklist

  • My code adheres to AppFlowy's Conventions
  • I've listed at least one issue that this PR fixes in the description above.
  • I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
  • All existing tests are passing.

@CLAassistant
Copy link

CLAassistant commented Jul 2, 2024

CLA assistant check
All committers have signed the CLA.

Copy link

github-actions bot commented Jul 2, 2024

🥷 Ninja i18n – 🛎️ Translations need to be updated

Project /project.inlang

lint rule new reports level link
Missing translation 78 warning contribute (via Fink 🐦)

Copy link

codecov bot commented Jul 4, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.08%. Comparing base (c122f0a) to head (bed68e9).
Report is 46 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #5677      +/-   ##
==========================================
- Coverage   86.74%   84.08%   -2.66%     
==========================================
  Files         217      211       -6     
  Lines        5032     5115      +83     
  Branches      831      850      +19     
==========================================
- Hits         4365     4301      -64     
- Misses        561      722     +161     
+ Partials      106       92      -14     
Flag Coverage Δ
appflowy_web_app 84.08% <ø> (-2.66%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

…y-IO#5041)

- Added `flex_color_picker` dependency.
- Implemented a new color picker dialog with the following features:
  - Display Material predefined colors.
  - Include primary, accent, and shade colors, as well as a color wheel for selection.
  - Add a graphical opacity selector.
  - Enhanced the previous dialog to include an icon in a text field for opening the palette.
- Added `suffixIcon` parameter to the `_ColorSettingTextField` class, making it reactive to tap gestures.
- Utilized `ColorExtension` on the `Color` class to avoid namespace conflicts when converting colors to hexadecimal strings.
- Added translation strings to english

This commit addresses issue AppFlowy-IO#5041
@gustamor gustamor force-pushed the feat/user_choose_color_from_palette_or_picker_5041 branch from a3892c4 to 19dcc46 Compare July 4, 2024 08:18
@LucasXu0 LucasXu0 added the v0.6.4 label Jul 4, 2024
…y-IO#5041)

- Added `flex_color_picker` dependency.
- Implemented a new color picker dialog with the following features:
      - Display Material predefined colors.
      - Include primary, accent, and shade colors, as well as a color wheel for selection.
      - Add a graphical opacity selector.
      - Enhanced the previous dialog to include an icon in a text field for opening the palette.
- Added `suffixIcon` parameter to the `_ColorSettingTextField` class, making it reactive to tap gestures.
- Utilized `ColorExtension` on the `Color` class to avoid namespace conflicts when converting colors to hexadecimal strings.
- Added translation strings to english

This commit addresses issue AppFlowy-IO#5041
.tool-versions Outdated
@@ -0,0 +1 @@
flutter 3.22.0-stable
Copy link
Collaborator

Choose a reason for hiding this comment

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

please remove this file.

Comment on lines 108 to 115
void updateColor(Color color) {
setState(() {
hexController.text = ColorExtension(color).toHexString().extractHex();
opacityController.text =
ColorExtension(color).toHexString().extractOpacity();
});
updateSelectedColor();
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

mark this function as private and move it below the initState function.

Comment on lines 267 to 296
void _showColorPickerDialog({
required BuildContext context,
String? title,
required Color currentColor,
required void Function(Color) updateColor,
}) {
const kColorCircleWidth = 46.0;
const kColorCircleHeight = 46.0;
const kColorCircleRadius = 23.0;
const kColorOpacityThumbRadius = 23.0;
const kDialogButtonPaddingHorizontal = 24.0;
const kDialogButtonPaddingVertical = 12.0;
const kColorsColumnSpacing = 3.0;
final style = Theme.of(context);
Color selectedColor = currentColor;

void updated(Color color) {
updateColor(color);
Navigator.of(context).pop();
}

showDialog(
context: context,
barrierColor: const Color.fromARGB(128, 0, 0, 0),
builder: (context) {
return AlertDialog(
icon: const Icon(Icons.palette),
title: Text(
title ??
LocaleKeys.settings_appearance_documentSettings_pickColor.tr(),
Copy link
Collaborator

Choose a reason for hiding this comment

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

It would be better to subtract a widget to handle the logic instead of putting all of them in a function.

@LucasXu0 LucasXu0 merged commit e500c89 into AppFlowy-IO:main Jul 10, 2024
15 of 18 checks passed
@gustamor gustamor deleted the feat/user_choose_color_from_palette_or_picker_5041 branch July 10, 2024 10:13
zoli added a commit to zoli/AppFlowy that referenced this pull request Jul 14, 2024
* main: (52 commits)
  chore: improve popup menu color (AppFlowy-IO#5725)
  fix: ai chat result contains html escape text (AppFlowy-IO#5721)
  chore: bump version 0.6.4 (AppFlowy-IO#5719)
  feat: support sign-in and sign-up on Web (AppFlowy-IO#5712)
  fix: syntax error when generating translation files (AppFlowy-IO#5718)
  feat: choose cursor/selection color from palette or color picker AppFlowy-IO#5041 (AppFlowy-IO#5677)
  feat: render ai text message with appflowy_editor (AppFlowy-IO#5682)
  feat: enable debug logs in internal build (AppFlowy-IO#5713)
  chore: update yrs and appflowy collab dependencies (AppFlowy-IO#5707)
  chore: bump version 0.6.3 (AppFlowy-IO#5701)
  feat: support publish document (AppFlowy-IO#5576)
  refactor: extract chat plugin to new repo (AppFlowy-IO#5699)
  fix: take the max value of the keyboard height and the view insets bottom to make the toolbar visible  (AppFlowy-IO#5700)
  chore: use latest macos runner to build the release package (AppFlowy-IO#5686)
  fix: filter chat page when duplicating (AppFlowy-IO#5676)
  chore: show ai service error (AppFlowy-IO#5675)
  feat: sync the created view after duplicating (AppFlowy-IO#5674)
  chore: disable cloud search (AppFlowy-IO#5663)
  feat: support moving page to a space (AppFlowy-IO#5665)
  chore: update German translations (AppFlowy-IO#5640)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants