diff --git 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 index f068666958..2a5e758cfb 100644 --- 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 createState() => _ConfirmPopupState(); } diff --git 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 index c105d1bb4d..357b9ce17b 100644 --- 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().resetDocumentCursorColor() - ..read().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().resetDocumentCursorColor() + ..read().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().resetDocumentSelectionColor() - ..read().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().resetDocumentSelectionColor() + ..read().syncSelectionColor(null), + ); + }, trailing: [ DocumentColorSettingButton( currentColor: state.selectionColor ?? diff --git 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 index 6e052b84a8..9892fd18a8 100644 --- 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(); + }, + ), + ], + ), + ), + ], + ), + ), ); } diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialogs.dart b/frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialogs.dart index d453e5b057..67062450cf 100644 --- 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 showConfirmDialog({ required String title, required String description, VoidCallback? onConfirm, + String? confirmLabel, + ConfirmPopupStyle style = ConfirmPopupStyle.onlyOk, }) { return showDialog( context: context, @@ -362,7 +365,8 @@ Future showConfirmDialog({ title: title, description: description, onConfirm: () => onConfirm?.call(), - style: ConfirmPopupStyle.onlyOk, + confirmLabel: confirmLabel, + style: style, ), ), ); diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json index 3080596c3a..33185bf790 100644 --- 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.",