fix: improve color selector (#5743)

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>
2024-08-30 18:12:39 +00:00 · 2024-07-16 08:50:50 +02:00 · 2024-07-16 08:50:50 +02:00 · dc6349b4b1
commit dc6349b4b1
parent 44d8def3ce
5 changed files with 123 additions and 67 deletions
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/shared_widget.dart
+++ b/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();
 }
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_workspace_view.dart
+++ b/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
-            ..read<AppearanceSettingsCubit>().resetDocumentCursorColor()
-            ..read<DocumentAppearanceCubit>().syncCursorColor(null),
+          onResetRequested: () {
+            showConfirmDialog(
+              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
-            ..read<AppearanceSettingsCubit>().resetDocumentSelectionColor()
-            ..read<DocumentAppearanceCubit>().syncSelectionColor(null),
+          onResetRequested: () {
+            showConfirmDialog(
+              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 ??
--- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/shared/document_color_setting_button.dart
+++ b/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 _kColorCircleHeight = 46.0;
-const _kColorCircleRadius = 23.0;
+const _kColorCircleWidth = 32.0;
+const _kColorCircleHeight = 32.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(
-      child: ColorPicker(
-        width: _kColorCircleWidth,
-        height: _kColorCircleHeight,
-        borderRadius: _kColorCircleRadius,
-        enableOpacity: true,
-        opacityThumbRadius: _kColorOpacityThumbRadius,
-        columnSpacing: _kColorsColumnSpacing,
-        enableTooltips: false,
-        pickersEnabled: const {
-          ColorPickerType.both: false,
-          ColorPickerType.primary: true,
-          ColorPickerType.accent: true,
-          ColorPickerType.wheel: true,
-        },
-        subheading: Text(
-          LocaleKeys.settings_appearance_documentSettings_colorShade.tr(),
-          style: theme.textTheme.labelLarge,
-        ),
-        opacitySubheading: Text(
-          LocaleKeys.settings_appearance_documentSettings_opacity.tr(),
-          style: theme.textTheme.labelLarge,
-        ),
-        onColorChanged: onColorChanged,
+    return ColorPicker(
+      width: _kColorCircleWidth,
+      height: _kColorCircleHeight,
+      borderRadius: _kColorCircleRadius,
+      enableOpacity: true,
+      opacityThumbRadius: _kColorOpacityThumbRadius,
+      columnSpacing: _kColorsColumnSpacing,
+      enableTooltips: false,
+      hasBorder: true,
+      borderColor: theme.colorScheme.outline,
+      pickersEnabled: const {
+        ColorPickerType.both: false,
+        ColorPickerType.primary: true,
+        ColorPickerType.accent: true,
+        ColorPickerType.wheel: true,
+      },
+      subheading: Text(
+        LocaleKeys.settings_appearance_documentSettings_colorShade.tr(),
+        style: theme.textTheme.labelLarge,
      ),
+      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) {
-      return AlertDialog(
-        icon: const FlowySvg(
-          FlowySvgs.m_aa_color_s,
-        ),
-        title: Text(
-          title ??
-              LocaleKeys.settings_appearance_documentSettings_pickColor.tr(),
-          style: style.textTheme.titleLarge,
-        ),
-        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();
-            },
+    builder: (context) => FlowyDialog(
+      expandHeight: false,
+      title: Row(
+        children: [
+          const FlowySvg(FlowySvgs.m_aa_color_s),
+          const HSpace(12),
+          FlowyText(
+            title ??
+                LocaleKeys.settings_appearance_documentSettings_pickColor.tr(),
+            fontSize: 20,
          ),
        ],
-      );
-    },
+      ),
+      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();
+                  },
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    ),
  );
 }
--- a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialogs.dart
+++ b/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,
          ),
        ),
      );
--- a/frontend/resources/translations/en.json
+++ b/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.",