fix: improve color selector (#5743)

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/shared_widget.dart

@@ -299,10 +299,16 @@ class ConfirmPopup extends StatefulWidget {
   final String title;
   final String description;
   final VoidCallback onConfirm;
-  final String? confirmLabel;
   final Color? confirmButtonColor;
   final ConfirmPopupStyle style;
 
+  /// The label of the confirm button.
+  ///
+  /// Defaults to 'Delete' for [ConfirmPopupStyle.cancelAndOk] style.
+  /// Defaults to 'Ok' for [ConfirmPopupStyle.onlyOk] style.
+  ///
+  final String? confirmLabel;
+
   @override
   State<ConfirmPopup> createState() => _ConfirmPopupState();
 }

frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_workspace_view.dart

@@ -15,6 +15,7 @@ import 'package:appflowy/workspace/application/settings/date_time/date_format_ex
 import 'package:appflowy/workspace/application/settings/date_time/time_format_ext.dart';
 import 'package:appflowy/workspace/application/settings/workspace/workspace_settings_bloc.dart';
 import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/shared_widget.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy/workspace/presentation/settings/shared/af_dropdown_menu_entry.dart';
@@ -31,6 +32,7 @@ import 'package:appflowy/workspace/presentation/settings/shared/settings_input_f
 import 'package:appflowy/workspace/presentation/settings/shared/settings_radio_select.dart';
 import 'package:appflowy/workspace/presentation/settings/shared/single_setting_action.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/theme_upload/theme_upload_view.dart';
+import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:appflowy/workspace/presentation/widgets/toggle/toggle.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
@@ -44,7 +46,6 @@ import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
-import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:google_fonts/google_fonts.dart';
 
@@ -1144,9 +1145,21 @@ class _DocumentCursorColorSetting extends StatelessWidget {
         return SettingListTile(
           label: label,
           resetButtonKey: const Key('DocumentCursorColorResetButton'),
-          onResetRequested: () => context
+          onResetRequested: () {
-            ..read<AppearanceSettingsCubit>().resetDocumentCursorColor()
+            showConfirmDialog(
-            ..read<DocumentAppearanceCubit>().syncCursorColor(null),
+              context: context,
+              title:
+                  LocaleKeys.settings_workspacePage_resetCursorColor_title.tr(),
+              description: LocaleKeys
+                  .settings_workspacePage_resetCursorColor_description
+                  .tr(),
+              style: ConfirmPopupStyle.cancelAndOk,
+              confirmLabel: LocaleKeys.settings_common_reset.tr(),
+              onConfirm: () => context
+                ..read<AppearanceSettingsCubit>().resetDocumentCursorColor()
+                ..read<DocumentAppearanceCubit>().syncCursorColor(null),
+            );
+          },
           trailing: [
             DocumentColorSettingButton(
               key: const Key('DocumentCursorColorSettingButton'),
@@ -1202,9 +1215,21 @@ class _DocumentSelectionColorSetting extends StatelessWidget {
         return SettingListTile(
           label: label,
           resetButtonKey: const Key('DocumentSelectionColorResetButton'),
-          onResetRequested: () => context
+          onResetRequested: () {
-            ..read<AppearanceSettingsCubit>().resetDocumentSelectionColor()
+            showConfirmDialog(
-            ..read<DocumentAppearanceCubit>().syncSelectionColor(null),
+              context: context,
+              title: LocaleKeys.settings_workspacePage_resetSelectionColor_title
+                  .tr(),
+              description: LocaleKeys
+                  .settings_workspacePage_resetSelectionColor_description
+                  .tr(),
+              style: ConfirmPopupStyle.cancelAndOk,
+              confirmLabel: LocaleKeys.settings_common_reset.tr(),
+              onConfirm: () => context
+                ..read<AppearanceSettingsCubit>().resetDocumentSelectionColor()
+                ..read<DocumentAppearanceCubit>().syncSelectionColor(null),
+            );
+          },
           trailing: [
             DocumentColorSettingButton(
               currentColor: state.selectionColor ??

frontend/appflowy_flutter/lib/workspace/presentation/settings/shared/document_color_setting_button.dart

@@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/util/color_to_hex_string.dart';
@@ -9,7 +11,6 @@ import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
-import 'package:flutter/material.dart';
 
 class DocumentColorSettingButton extends StatefulWidget {
   const DocumentColorSettingButton({
@@ -271,13 +272,13 @@ String? validateOpacityValue(String? value) {
   return null;
 }
 
-const _kColorCircleWidth = 46.0;
+const _kColorCircleWidth = 32.0;
-const _kColorCircleHeight = 46.0;
+const _kColorCircleHeight = 32.0;
-const _kColorCircleRadius = 23.0;
+const _kColorCircleRadius = 20.0;
 const _kColorOpacityThumbRadius = 23.0;
 const _kDialogButtonPaddingHorizontal = 24.0;
 const _kDialogButtonPaddingVertical = 12.0;
-const _kColorsColumnSpacing = 3.0;
+const _kColorsColumnSpacing = 12.0;
 
 class _ColorPicker extends StatelessWidget {
   const _ColorPicker({
@@ -292,31 +293,31 @@ class _ColorPicker extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
-    return SingleChildScrollView(
+    return ColorPicker(
-      child: ColorPicker(
+      width: _kColorCircleWidth,
-        width: _kColorCircleWidth,
+      height: _kColorCircleHeight,
-        height: _kColorCircleHeight,
+      borderRadius: _kColorCircleRadius,
-        borderRadius: _kColorCircleRadius,
+      enableOpacity: true,
-        enableOpacity: true,
+      opacityThumbRadius: _kColorOpacityThumbRadius,
-        opacityThumbRadius: _kColorOpacityThumbRadius,
+      columnSpacing: _kColorsColumnSpacing,
-        columnSpacing: _kColorsColumnSpacing,
+      enableTooltips: false,
-        enableTooltips: false,
+      hasBorder: true,
-        pickersEnabled: const {
+      borderColor: theme.colorScheme.outline,
-          ColorPickerType.both: false,
+      pickersEnabled: const {
-          ColorPickerType.primary: true,
+        ColorPickerType.both: false,
-          ColorPickerType.accent: true,
+        ColorPickerType.primary: true,
-          ColorPickerType.wheel: true,
+        ColorPickerType.accent: true,
-        },
+        ColorPickerType.wheel: true,
-        subheading: Text(
+      },
-          LocaleKeys.settings_appearance_documentSettings_colorShade.tr(),
+      subheading: Text(
-          style: theme.textTheme.labelLarge,
+        LocaleKeys.settings_appearance_documentSettings_colorShade.tr(),
-        ),
+        style: theme.textTheme.labelLarge,
-        opacitySubheading: Text(
-          LocaleKeys.settings_appearance_documentSettings_opacity.tr(),
-          style: theme.textTheme.labelLarge,
-        ),
-        onColorChanged: onColorChanged,
       ),
+      opacitySubheading: Text(
+        LocaleKeys.settings_appearance_documentSettings_opacity.tr(),
+        style: theme.textTheme.labelLarge,
+      ),
+      onColorChanged: onColorChanged,
     );
   }
 }
@@ -377,40 +378,52 @@ void _showColorPickerDialog({
   required Color currentColor,
   required void Function(Color) updateColor,
 }) {
-  final style = Theme.of(context);
   Color selectedColor = currentColor;
 
   showDialog(
     context: context,
     barrierColor: const Color.fromARGB(128, 0, 0, 0),
-    builder: (context) {
+    builder: (context) => FlowyDialog(
-      return AlertDialog(
+      expandHeight: false,
-        icon: const FlowySvg(
+      title: Row(
-          FlowySvgs.m_aa_color_s,
+        children: [
-        ),
+          const FlowySvg(FlowySvgs.m_aa_color_s),
-        title: Text(
+          const HSpace(12),
-          title ??
+          FlowyText(
-              LocaleKeys.settings_appearance_documentSettings_pickColor.tr(),
+            title ??
-          style: style.textTheme.titleLarge,
+                LocaleKeys.settings_appearance_documentSettings_pickColor.tr(),
-        ),
+            fontSize: 20,
-        content: _ColorPicker(
-          selectedColor: selectedColor,
-          onColorChanged: (color) => selectedColor = color,
-        ),
-        actionsPadding: const EdgeInsets.all(8),
-        actions: [
-          _ColorPickerActions(
-            onReset: () {
-              updateColor(currentColor);
-              Navigator.of(context).pop();
-            },
-            onUpdate: () {
-              updateColor(selectedColor);
-              Navigator.of(context).pop();
-            },
           ),
         ],
-      );
+      ),
-    },
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          _ColorPicker(
+            selectedColor: selectedColor,
+            onColorChanged: (color) => selectedColor = color,
+          ),
+          Padding(
+            padding: const EdgeInsets.all(16),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                const HSpace(8),
+                _ColorPickerActions(
+                  onReset: () {
+                    updateColor(currentColor);
+                    Navigator.of(context).pop();
+                  },
+                  onUpdate: () {
+                    updateColor(selectedColor);
+                    Navigator.of(context).pop();
+                  },
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    ),
   );
 }

frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialogs.dart

@@ -1,3 +1,5 @@
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/tasks/app_widget.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/shared_widget.dart';
@@ -9,7 +11,6 @@ import 'package:flowy_infra_ui/widget/buttons/primary_button.dart';
 import 'package:flowy_infra_ui/widget/buttons/secondary_button.dart';
 import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
-import 'package:flutter/material.dart';
 import 'package:toastification/toastification.dart';
 
 export 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
@@ -348,6 +349,8 @@ Future<void> showConfirmDialog({
   required String title,
   required String description,
   VoidCallback? onConfirm,
+  String? confirmLabel,
+  ConfirmPopupStyle style = ConfirmPopupStyle.onlyOk,
 }) {
   return showDialog(
     context: context,
@@ -362,7 +365,8 @@ Future<void> showConfirmDialog({
             title: title,
             description: description,
             onConfirm: () => onConfirm?.call(),
-            style: ConfirmPopupStyle.onlyOk,
+            confirmLabel: confirmLabel,
+            style: style,
           ),
         ),
       );

frontend/resources/translations/en.json

@@ -404,6 +404,14 @@
           "dark": "Dark"
         }
       },
+      "resetCursorColor": {
+        "title": "Reset document cursor color",
+        "description": "Are you sure you want to reset the cursor color?"
+      },
+      "resetSelectionColor": {
+        "title": "Reset document selection color",
+        "description": "Are you sure you want to reset the selection color?"
+      },
       "theme": {
         "title": "Theme",
         "description": "Select a preset theme, or upload your own custom theme.",