Skip to content

Commit

Permalink
Major update 6 (#1456)
Browse files Browse the repository at this point in the history
  • Loading branch information
EchoEllet authored Oct 23, 2023
1 parent 9b380e4 commit 6cf9cd0
Show file tree
Hide file tree
Showing 32 changed files with 791 additions and 406 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
## [7.9.0]
- Buttons Improvemenets
- Refactor all the button configurations that used in `QuillToolbar.basic()` but there are still few lefts
- **Breaking change**: Remove some configurations from the QuillToolbar and move them to the new `QuillProvider`, please notice this is a development version and this might be changed in the next few days, the stable release will be ready in less than 3 weeks
- Update `flutter_quill_extensions` and it will be published into pub.dev soon.
- Allow you to customize the search dialog by custom callback with child builder

## [7.8.0]
- **Important note**: this is not test release yet, it works but need more test and changes and breaking changes, we don't have development version and it will help us if you try the latest version and report the issues in Github but if you want a stable version please use `7.4.16`. this refactoring process will not take long and should be done less than three weeks with the testing.
- We managed to refactor most of the buttons configurations and customizations in the `QuillProvider`, only three lefts then will start on refactoring the toolbar configurations
Expand Down
12 changes: 9 additions & 3 deletions example/lib/pages/home_page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,7 @@ class _HomePageState extends State<HomePage> {
webImagePickImpl: _webImagePickImpl,
),
showAlignmentButtons: true,
afterButtonPressed: _focusNode.requestFocus,
// afterButtonPressed: _focusNode.requestFocus,
);
}
if (_isDesktop()) {
Expand All @@ -272,7 +272,7 @@ class _HomePageState extends State<HomePage> {
filePickImpl: openFileSystemPickerForDesktop,
),
showAlignmentButtons: true,
afterButtonPressed: _focusNode.requestFocus,
// afterButtonPressed: _focusNode.requestFocus,
);
}
return QuillToolbar.basic(
Expand All @@ -288,7 +288,7 @@ class _HomePageState extends State<HomePage> {
// cameraPickSettingSelector: _selectCameraPickSetting,
),
showAlignmentButtons: true,
afterButtonPressed: _focusNode.requestFocus,
// afterButtonPressed: _focusNode.requestFocus,
);
}

Expand Down Expand Up @@ -320,6 +320,12 @@ class _HomePageState extends State<HomePage> {
return SafeArea(
child: QuillProvider(
configurations: QuillConfigurations(
toolbarConfigurations: QuillToolbarConfigurations(
buttonOptions: QuillToolbarButtonOptions(
base: QuillToolbarBaseButtonOptions(
afterButtonPressed: _focusNode.requestFocus,
),
)),
editorConfigurations: const QuillEditorConfigurations(
placeholder: 'Add content',
// ignore: avoid_redundant_argument_values
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ class CameraButton extends StatelessWidget {
final iconFillColor =
iconTheme?.iconUnselectedFillColor ?? (fillColor ?? theme.canvasColor);

return QuillIconButton(
return QuillToolbarIconButton(
icon: Icon(icon, size: iconSize, color: iconColor),
tooltip: tooltip,
highlightElevation: 0,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ class FormulaButton extends StatelessWidget {
final iconFillColor =
iconTheme?.iconUnselectedFillColor ?? (fillColor ?? theme.canvasColor);

return QuillIconButton(
return QuillToolbarIconButton(
icon: Icon(icon, size: iconSize, color: iconColor),
tooltip: tooltip,
highlightElevation: 0,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ class ImageButton extends StatelessWidget {
final iconFillColor =
iconTheme?.iconUnselectedFillColor ?? (fillColor ?? theme.canvasColor);

return QuillIconButton(
return QuillToolbarIconButton(
icon: Icon(icon, size: iconSize, color: iconColor),
tooltip: tooltip,
highlightElevation: 0,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ class MediaButton extends StatelessWidget {
final iconFillColor =
iconTheme?.iconUnselectedFillColor ?? fillColor ?? theme.canvasColor;

return QuillIconButton(
return QuillToolbarIconButton(
icon: Icon(icon, size: iconSize, color: iconColor),
tooltip: tooltip,
highlightElevation: 0,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ class VideoButton extends StatelessWidget {
final iconFillColor =
iconTheme?.iconUnselectedFillColor ?? (fillColor ?? theme.canvasColor);

return QuillIconButton(
return QuillToolbarIconButton(
icon: Icon(icon, size: iconSize, color: iconColor),
tooltip: tooltip,
highlightElevation: 0,
Expand Down
2 changes: 1 addition & 1 deletion flutter_quill_extensions/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ dependencies:
flutter:
sdk: flutter

flutter_quill: ^7.5.0
flutter_quill: ^7.8.0
# In case you are working on changes for both libraries,
# flutter_quill:
# path: ~/development/playground/framework_based/flutter/flutter-quill
Expand Down
7 changes: 7 additions & 0 deletions lib/src/models/config/shared_configurations.dart
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart' show Color, Colors, Locale;

import './editor/configurations.dart' show QuillEditorConfigurations;
import './toolbar/configurations.dart' show QuillToolbarConfigurations;
import '../themes/quill_dialog_theme.dart';
import 'others/animations.dart';

export './others/animations.dart';
Expand All @@ -11,6 +13,7 @@ export './others/animations.dart';
class QuillSharedConfigurations extends Equatable {
const QuillSharedConfigurations({
this.dialogBarrierColor = Colors.black54,
this.dialogTheme,
this.locale,
this.animationConfigurations = const QuillAnimationConfigurations(
checkBoxPointItem: false,
Expand All @@ -22,6 +25,10 @@ class QuillSharedConfigurations extends Equatable {
/// The barrier color of the shown dialogs
final Color dialogBarrierColor;

/// The default dialog theme for all the dialogs for quill editor and
/// quill toolbar
final QuillDialogTheme? dialogTheme;

/// The locale to use for the editor and toolbar, defaults to system locale
/// More https://github.com/singerdmx/flutter-quill#translation
final Locale? locale;
Expand Down
39 changes: 39 additions & 0 deletions lib/src/models/config/toolbar/buttons/link_style.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import 'package:flutter/widgets.dart' show Color;

import '../../../../widgets/toolbar/toolbar.dart';
import '../../../structs/link_dialog_action.dart';
import '../../../themes/quill_dialog_theme.dart';

class QuillToolbarLinkStyleButtonExtraOptions
extends QuillToolbarBaseButtonExtraOptions {
const QuillToolbarLinkStyleButtonExtraOptions({
required super.controller,
required super.context,
required super.onPressed,
});
}

class QuillToolbarLinkStyleButtonOptions extends QuillToolbarBaseButtonOptions<
QuillToolbarLinkStyleButtonOptions,
QuillToolbarLinkStyleButtonExtraOptions> {
const QuillToolbarLinkStyleButtonOptions({
this.dialogTheme,
this.linkRegExp,
this.linkDialogAction,
this.dialogBarrierColor,
this.iconSize,
super.iconData,
super.globalIconSize,
super.afterButtonPressed,
super.tooltip,
super.iconTheme,
super.childBuilder,
super.controller,
});

final double? iconSize;
final QuillDialogTheme? dialogTheme;
final RegExp? linkRegExp;
final LinkDialogAction? linkDialogAction;
final Color? dialogBarrierColor;
}
61 changes: 61 additions & 0 deletions lib/src/models/config/toolbar/buttons/search.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import 'package:flutter/widgets.dart' show Color;

import '../../../../../flutter_quill.dart';

class QuillToolbarSearchButtonExtraOptions
extends QuillToolbarBaseButtonExtraOptions {
const QuillToolbarSearchButtonExtraOptions({
required super.controller,
required super.context,
required super.onPressed,
});
}

class QuillToolbarSearchButtonOptions extends QuillToolbarBaseButtonOptions {
const QuillToolbarSearchButtonOptions({
super.iconData,
super.controller,
super.childBuilder,
super.tooltip,
super.afterButtonPressed,
super.iconTheme,
this.dialogTheme,
this.iconSize,
this.dialogBarrierColor,
this.fillColor,
this.customOnPressedCallback,
});

final QuillDialogTheme? dialogTheme;
final double? iconSize;

/// By default will be [dialogBarrierColor] from [QuillSharedConfigurations]
final Color? dialogBarrierColor;

final Color? fillColor;

/// By default we will show simple search dialog ui
/// you can pass value to this callback to change this
final QuillToolbarSearchButtomOnPressedCallback? customOnPressedCallback;
}

typedef QuillToolbarSearchButtomOnPressedCallback = Future<void> Function(
QuillController controller,
);

// typedef QuillToolbarSearchButtonFindTextCallback = List<int> Function({
// required int index,
// required String text,
// required QuillController controller,
// required List<int> offsets,
// required bool wholeWord,
// required bool caseSensitive,
// bool moveToPosition,
// });

// typedef QuillToolbarSearchButtonMoveToPositionCallback = void Function({
// required int index,
// required String text,
// required QuillController controller,
// required List<int> offsets,
// });
41 changes: 41 additions & 0 deletions lib/src/models/config/toolbar/buttons/select_header_style.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import 'package:flutter/widgets.dart' show Axis;

import '../../../../widgets/toolbar/toolbar.dart';
import '../../../documents/attribute.dart';

class QuillToolbarSelectHeaderStyleButtonExtraOptions
extends QuillToolbarBaseButtonExtraOptions {
const QuillToolbarSelectHeaderStyleButtonExtraOptions({
required super.controller,
required super.context,
required super.onPressed,
});
}

class QuillToolbarSelectHeaderStyleButtonsOptions
extends QuillToolbarBaseButtonOptions<
QuillToolbarSelectHeaderStyleButtonsOptions,
QuillToolbarSelectHeaderStyleButtonExtraOptions> {
const QuillToolbarSelectHeaderStyleButtonsOptions({
super.afterButtonPressed,
super.childBuilder,
super.controller,
super.iconData,
super.iconTheme,
super.tooltip,
this.axis,
this.attributes = const [
Attribute.header,
Attribute.h1,
Attribute.h2,
Attribute.h3,
],
this.iconSize,
});

final List<Attribute> attributes;

/// By default we will the toolbar axis from [QuillToolbarConfigurations]
final Axis? axis;
final double? iconSize;
}
31 changes: 30 additions & 1 deletion lib/src/models/config/toolbar/configurations.dart
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart' show immutable;
import 'package:flutter/widgets.dart' show Axis;

import 'buttons/base.dart';
import 'buttons/clear_format.dart';
Expand All @@ -8,17 +9,24 @@ import 'buttons/font_family.dart';
import 'buttons/font_size.dart';
import 'buttons/history.dart';
import 'buttons/indent.dart';
import 'buttons/link_style.dart';
import 'buttons/search.dart';
import 'buttons/select_alignment.dart';
import 'buttons/select_header_style.dart';
import 'buttons/toggle_check_list.dart';
import 'buttons/toggle_style.dart';

export './../../../widgets/toolbar/buttons/search/search_dialog.dart';
export './buttons/base.dart';
export './buttons/clear_format.dart';
export './buttons/color.dart';
export './buttons/font_family.dart';
export './buttons/font_size.dart';
export './buttons/history.dart';
export './buttons/link_style.dart';
export './buttons/search.dart';
export './buttons/select_alignment.dart';
export './buttons/select_header_style.dart';
export './buttons/toggle_check_list.dart';
export './buttons/toggle_style.dart';

Expand All @@ -42,8 +50,10 @@ class QuillToolbarConfigurations extends Equatable {
this.multiRowsDisplay = true,
this.fontFamilyValues,
this.fontSizesValues,
this.axis = Axis.horizontal,

/// By default it will calculated based on the [baseOptions] iconSize
/// By default it will calculated based on the [globalIconSize] from
/// [base] in [QuillToolbarButtonOptions]
/// You can change it but the the change only apply if
/// the [multiRowsDisplay] is false, if [multiRowsDisplay] then the value
/// will be [kDefaultIconSize] * 2
Expand Down Expand Up @@ -93,13 +103,19 @@ class QuillToolbarConfigurations extends Equatable {
/// ```
final Map<String, String>? fontSizesValues;

/// Toolbar axis
/// it will apply only for [QuillToolbar.basic]
/// we will update that logic soon
final Axis axis;

@override
List<Object?> get props => [
buttonOptions,
multiRowsDisplay,
fontFamilyValues,
fontSizesValues,
toolbarSize,
axis,
];
}

Expand Down Expand Up @@ -137,6 +153,10 @@ class QuillToolbarButtonOptions extends Equatable {
this.clearFormat = const QuillToolbarClearFormatButtonOptions(),
this.selectAlignmentButtons =
const QuillToolbarSelectAlignmentButtonOptions(),
this.search = const QuillToolbarSearchButtonOptions(),
this.selectHeaderStyleButtons =
const QuillToolbarSelectHeaderStyleButtonsOptions(),
this.linkStyle = const QuillToolbarLinkStyleButtonOptions(),
});

/// The base configurations for all the buttons which will apply to all
Expand Down Expand Up @@ -173,6 +193,15 @@ class QuillToolbarButtonOptions extends Equatable {
/// and you have child builder
final QuillToolbarSelectAlignmentButtonOptions selectAlignmentButtons;

final QuillToolbarSearchButtonOptions search;

/// The reason we call this buttons in the end because this is responsible
/// for all the header style buttons and not just one, you still
/// can customize it and you also have child builder
final QuillToolbarSelectHeaderStyleButtonsOptions selectHeaderStyleButtons;

final QuillToolbarLinkStyleButtonOptions linkStyle;

@override
List<Object?> get props => [
base,
Expand Down
Loading

0 comments on commit 6cf9cd0

Please sign in to comment.