From 33b8cb2498ba81f3cceb08af48e3bbe274377d83 Mon Sep 17 00:00:00 2001 From: Adil Hanney Date: Thu, 9 Nov 2023 01:36:48 +0000 Subject: [PATCH] feat: allow customising iconButtonFactor --- doc/migration.md | 6 +++++- lib/src/models/config/toolbar/buttons/base.dart | 9 +++++++-- lib/src/widgets/toolbar/buttons/clear_format.dart | 9 ++++++++- lib/src/widgets/toolbar/buttons/color.dart | 8 +++++++- lib/src/widgets/toolbar/buttons/custom_button.dart | 5 ++++- lib/src/widgets/toolbar/buttons/history.dart | 6 ++++-- lib/src/widgets/toolbar/buttons/indent.dart | 11 ++++++++--- lib/src/widgets/toolbar/buttons/link_style.dart | 8 +++++++- lib/src/widgets/toolbar/buttons/link_style2.dart | 8 +++++++- lib/src/widgets/toolbar/buttons/search/search.dart | 9 ++++++++- lib/src/widgets/toolbar/buttons/select_alignment.dart | 10 ++++++++-- .../widgets/toolbar/buttons/select_header_style.dart | 10 ++++++++-- lib/src/widgets/toolbar/buttons/toggle_style.dart | 3 ++- 13 files changed, 83 insertions(+), 19 deletions(-) diff --git a/doc/migration.md b/doc/migration.md index 4de759f7..7a65b3ef 100644 --- a/doc/migration.md +++ b/doc/migration.md @@ -79,10 +79,14 @@ All the options have parent `QuillToolbarBaseButtonOptions` which have common th final IconData? iconData; /// To change the icon size pass a different value, by default will be - /// [kDefaultIconSize] + /// [kDefaultIconSize]. /// This will be used for all the buttons but you can override this final double globalIconSize; + /// The factor of how much larger the button is in relation to the icon, + /// by default it will be [kIconButtonFactor]. + final double globalIconButtonFactor; + /// To do extra logic after pressing the button final VoidCallback? afterButtonPressed; diff --git a/lib/src/models/config/toolbar/buttons/base.dart b/lib/src/models/config/toolbar/buttons/base.dart index 931b6fa3..b8f47d26 100644 --- a/lib/src/models/config/toolbar/buttons/base.dart +++ b/lib/src/models/config/toolbar/buttons/base.dart @@ -5,7 +5,7 @@ import 'package:flutter/widgets.dart' show BuildContext, IconData, Widget; import '../../../../../flutter_quill.dart' show QuillController, QuillProvider; import '../../../themes/quill_icon_theme.dart' show QuillIconTheme; -import '../../quill_configurations.dart' show kDefaultIconSize; +import '../../quill_configurations.dart' show kDefaultIconSize, kIconButtonFactor; @immutable class QuillToolbarBaseButtonExtraOptions extends Equatable { @@ -38,6 +38,7 @@ class QuillToolbarBaseButtonOptions extends Equatable { const QuillToolbarBaseButtonOptions({ this.iconData, this.globalIconSize = kDefaultIconSize, + this.globalIconButtonFactor = kIconButtonFactor, this.afterButtonPressed, this.tooltip, this.iconTheme, @@ -51,10 +52,14 @@ class QuillToolbarBaseButtonOptions extends Equatable { final IconData? iconData; /// To change the the icon size pass a different value, by default will be - /// [kDefaultIconSize] + /// [kDefaultIconSize]. /// this will be used for all the buttons but you can override this final double globalIconSize; + /// The factor of how much larger the button is in relation to the icon, + /// by default it will be [kIconButtonFactor]. + final double globalIconButtonFactor; + /// To do extra logic after pressing the button final VoidCallback? afterButtonPressed; diff --git a/lib/src/widgets/toolbar/buttons/clear_format.dart b/lib/src/widgets/toolbar/buttons/clear_format.dart index 2e2c4e9d..aed2feaf 100644 --- a/lib/src/widgets/toolbar/buttons/clear_format.dart +++ b/lib/src/widgets/toolbar/buttons/clear_format.dart @@ -27,6 +27,12 @@ class QuillToolbarClearFormatButton extends StatelessWidget { return iconSize ?? baseFontSize; } + double _iconButtonFactor(BuildContext context) { + final baseIconFactor = baseButtonExtraOptions(context).iconButtonFactor; + final iconButtonFactor = options.iconButtonFactor; + return iconButtonFactor ?? baseIconFactor; + } + VoidCallback? _afterButtonPressed(BuildContext context) { return options.afterButtonPressed ?? baseButtonExtraOptions(context).afterButtonPressed; @@ -69,6 +75,7 @@ class QuillToolbarClearFormatButton extends StatelessWidget { final iconTheme = _iconTheme(context); final tooltip = _tooltip(context); final iconSize = _iconSize(context); + final iconButtonFactor = _iconButtonFactor(context); final iconData = _iconData(context); final childBuilder = @@ -105,7 +112,7 @@ class QuillToolbarClearFormatButton extends StatelessWidget { tooltip: tooltip, highlightElevation: 0, hoverElevation: 0, - size: iconSize * kIconButtonFactor, + size: iconSize * iconButtonFactor, icon: Icon(iconData, size: iconSize, color: iconColor), fillColor: fillColor, borderRadius: iconTheme?.borderRadius ?? 2, diff --git a/lib/src/widgets/toolbar/buttons/color.dart b/lib/src/widgets/toolbar/buttons/color.dart index 83da1e06..e1804cda 100644 --- a/lib/src/widgets/toolbar/buttons/color.dart +++ b/lib/src/widgets/toolbar/buttons/color.dart @@ -108,6 +108,12 @@ class QuillToolbarColorButtonState extends State { return iconSize ?? baseFontSize; } + double get iconButtonFactor { + final baseIconFactor = baseButtonExtraOptions.iconButtonFactor; + final iconButtonFactor = options.iconButtonFactor; + return iconButtonFactor ?? baseIconFactor; + } + VoidCallback? get afterButtonPressed { return options.afterButtonPressed ?? baseButtonExtraOptions.afterButtonPressed; @@ -179,7 +185,7 @@ class QuillToolbarColorButtonState extends State { tooltip: tooltip, highlightElevation: 0, hoverElevation: 0, - size: iconSize * kIconButtonFactor, + size: iconSize * iconButtonFactor, icon: Icon(iconData, size: iconSize, color: widget.isBackground ? iconColorBackground : iconColor), diff --git a/lib/src/widgets/toolbar/buttons/custom_button.dart b/lib/src/widgets/toolbar/buttons/custom_button.dart index 50745e74..b958ec51 100644 --- a/lib/src/widgets/toolbar/buttons/custom_button.dart +++ b/lib/src/widgets/toolbar/buttons/custom_button.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; +import '../../../models/config/toolbar/configurations.dart'; import '../../../models/themes/quill_icon_theme.dart'; import '../base_toolbar.dart'; @@ -9,6 +10,7 @@ class CustomButton extends StatelessWidget { required this.icon, this.iconColor, this.iconSize = kDefaultIconSize, + this.iconButtonFactor = kIconButtonFactor, this.iconTheme, this.afterButtonPressed, this.tooltip, @@ -19,6 +21,7 @@ class CustomButton extends StatelessWidget { final IconData? icon; final Color? iconColor; final double iconSize; + final double iconButtonFactor; final QuillIconTheme? iconTheme; final VoidCallback? afterButtonPressed; final String? tooltip; @@ -31,7 +34,7 @@ class CustomButton extends StatelessWidget { return QuillToolbarIconButton( highlightElevation: 0, hoverElevation: 0, - size: iconSize * kIconButtonFactor, + size: iconSize * iconButtonFactor, icon: Icon(icon, size: iconSize, color: iconColor), tooltip: tooltip, borderRadius: iconTheme?.borderRadius ?? 2, diff --git a/lib/src/widgets/toolbar/buttons/history.dart b/lib/src/widgets/toolbar/buttons/history.dart index 5bae3bfd..102c8062 100644 --- a/lib/src/widgets/toolbar/buttons/history.dart +++ b/lib/src/widgets/toolbar/buttons/history.dart @@ -60,7 +60,9 @@ class QuillToolbarHistoryButtonState extends State { final childBuilder = options.childBuilder ?? baseButtonConfigurations.childBuilder; final iconSize = options.iconSize ?? - context.requireQuillToolbarBaseButtonOptions.globalIconSize; + baseButtonConfigurations.globalIconSize; + final iconButtonFactor = options.iconButtonFactor ?? + baseButtonConfigurations.iconButtonFactor; final iconTheme = options.iconTheme ?? baseButtonConfigurations.iconTheme; final afterButtonPressed = options.afterButtonPressed ?? @@ -96,7 +98,7 @@ class QuillToolbarHistoryButtonState extends State { tooltip: tooltip, highlightElevation: 0, hoverElevation: 0, - size: iconSize * kIconButtonFactor, + size: iconSize * iconButtonFactor, icon: Icon( iconData, size: iconSize, diff --git a/lib/src/widgets/toolbar/buttons/indent.dart b/lib/src/widgets/toolbar/buttons/indent.dart index 2c8cdf94..1acaa04c 100644 --- a/lib/src/widgets/toolbar/buttons/indent.dart +++ b/lib/src/widgets/toolbar/buttons/indent.dart @@ -8,8 +8,7 @@ import '../../controller.dart'; import '../base_toolbar.dart' show QuillToolbarBaseButtonOptions, - QuillToolbarIconButton, - kIconButtonFactor; + QuillToolbarIconButton; class QuillToolbarIndentButton extends StatefulWidget { const QuillToolbarIndentButton({ @@ -43,6 +42,12 @@ class QuillToolbarIndentButtonState extends State { return iconSize ?? baseFontSize; } + double get iconButtonFactor { + final baseIconFactor = baseButtonExtraOptions.iconButtonFactor; + final iconButtonFactor = options.iconButtonFactor; + return iconButtonFactor ?? baseIconFactor; + } + VoidCallback? get afterButtonPressed { return options.afterButtonPressed ?? baseButtonExtraOptions.afterButtonPressed; @@ -107,7 +112,7 @@ class QuillToolbarIndentButtonState extends State { tooltip: tooltip, highlightElevation: 0, hoverElevation: 0, - size: iconSize * kIconButtonFactor, + size: iconSize * iconButtonFactor, icon: Icon(iconData, size: iconSize, color: iconColor), fillColor: iconFillColor, borderRadius: iconTheme?.borderRadius ?? 2, diff --git a/lib/src/widgets/toolbar/buttons/link_style.dart b/lib/src/widgets/toolbar/buttons/link_style.dart index a3c6a198..e301ebf2 100644 --- a/lib/src/widgets/toolbar/buttons/link_style.dart +++ b/lib/src/widgets/toolbar/buttons/link_style.dart @@ -67,6 +67,12 @@ class QuillToolbarLinkStyleButtonState return iconSize ?? baseFontSize; } + double get iconButtonFactor { + final baseIconFactor = baseButtonExtraOptions.iconButtonFactor; + final iconButtonFactor = options.iconButtonFactor; + return iconButtonFactor ?? baseIconFactor; + } + VoidCallback? get afterButtonPressed { return options.afterButtonPressed ?? baseButtonExtraOptions.afterButtonPressed; @@ -134,7 +140,7 @@ class QuillToolbarLinkStyleButtonState tooltip: tooltip, highlightElevation: 0, hoverElevation: 0, - size: iconSize * kIconButtonFactor, + size: iconSize * iconButtonFactor, icon: Icon( iconData, size: iconSize, diff --git a/lib/src/widgets/toolbar/buttons/link_style2.dart b/lib/src/widgets/toolbar/buttons/link_style2.dart index 751c860b..18f81286 100644 --- a/lib/src/widgets/toolbar/buttons/link_style2.dart +++ b/lib/src/widgets/toolbar/buttons/link_style2.dart @@ -75,6 +75,12 @@ class _QuillToolbarLinkStyleButton2State return iconSize ?? baseFontSize; } + double get iconButtonFactor { + final baseIconFactor = baseButtonExtraOptions.iconButtonFactor; + final iconButtonFactor = options.iconButtonFactor; + return iconButtonFactor ?? baseIconFactor; + } + VoidCallback? get afterButtonPressed { return options.afterButtonPressed ?? baseButtonExtraOptions.afterButtonPressed; @@ -142,7 +148,7 @@ class _QuillToolbarLinkStyleButton2State tooltip: tooltip, highlightElevation: 0, hoverElevation: 0, - size: iconSize * kIconButtonFactor, + size: iconSize * iconButtonFactor, icon: Icon( iconData, size: iconSize, diff --git a/lib/src/widgets/toolbar/buttons/search/search.dart b/lib/src/widgets/toolbar/buttons/search/search.dart index 0f8537f0..b263ad6d 100644 --- a/lib/src/widgets/toolbar/buttons/search/search.dart +++ b/lib/src/widgets/toolbar/buttons/search/search.dart @@ -27,6 +27,12 @@ class QuillToolbarSearchButton extends StatelessWidget { return iconSize ?? baseFontSize; } + double _iconButtonFactor(BuildContext context) { + final baseIconFactor = baseButtonExtraOptions(context).iconButtonFactor; + final iconButtonFactor = options.iconButtonFactor; + return iconButtonFactor ?? baseIconFactor; + } + VoidCallback? _afterButtonPressed(BuildContext context) { return options.afterButtonPressed ?? baseButtonExtraOptions(context).afterButtonPressed; @@ -68,6 +74,7 @@ class QuillToolbarSearchButton extends StatelessWidget { final tooltip = _tooltip(context); final iconData = _iconData(context); final iconSize = _iconSize(context); + final iconButtonFactor = _iconButtonFactor(context); final afterButtonPressed = _afterButtonPressed(context); final childBuilder = @@ -112,7 +119,7 @@ class QuillToolbarSearchButton extends StatelessWidget { ), highlightElevation: 0, hoverElevation: 0, - size: iconSize * kIconButtonFactor, + size: iconSize * iconButtonFactor, fillColor: iconFillColor, borderRadius: iconTheme?.borderRadius ?? 2, onPressed: () => _sharedOnPressed(context), diff --git a/lib/src/widgets/toolbar/buttons/select_alignment.dart b/lib/src/widgets/toolbar/buttons/select_alignment.dart index fac78d85..b969b115 100644 --- a/lib/src/widgets/toolbar/buttons/select_alignment.dart +++ b/lib/src/widgets/toolbar/buttons/select_alignment.dart @@ -66,6 +66,12 @@ class QuillToolbarSelectAlignmentButtonState return iconSize ?? baseFontSize; } + double get _iconButtonFactor { + final baseIconFactor = baseButtonExtraOptions.iconButtonFactor; + final iconButtonFactor = options.iconButtonFactor; + return iconButtonFactor ?? baseIconFactor; + } + VoidCallback? get _afterButtonPressed { return options.afterButtonPressed ?? baseButtonExtraOptions.afterButtonPressed; @@ -225,8 +231,8 @@ class QuillToolbarSelectAlignmentButtonState const EdgeInsets.symmetric(horizontal: !kIsWeb ? 1.0 : 5.0), child: ConstrainedBox( constraints: BoxConstraints.tightFor( - width: _iconSize * kIconButtonFactor, - height: _iconSize * kIconButtonFactor, + width: _iconSize * _iconButtonFactor, + height: _iconSize * _iconButtonFactor, ), child: UtilityWidgets.maybeTooltip( message: valueString[index] == Attribute.leftAlignment.value diff --git a/lib/src/widgets/toolbar/buttons/select_header_style.dart b/lib/src/widgets/toolbar/buttons/select_header_style.dart index 15a05597..7f252439 100644 --- a/lib/src/widgets/toolbar/buttons/select_header_style.dart +++ b/lib/src/widgets/toolbar/buttons/select_header_style.dart @@ -61,6 +61,12 @@ class QuillToolbarSelectHeaderStyleButtonsState return iconSize ?? baseFontSize; } + double get iconButtonFactor { + final baseIconFactor = baseButtonExtraOptions.iconButtonFactor; + final iconButtonFactor = options.iconButtonFactor; + return iconButtonFactor ?? baseIconFactor; + } + VoidCallback? get afterButtonPressed { return options.afterButtonPressed ?? baseButtonExtraOptions.afterButtonPressed; @@ -142,8 +148,8 @@ class QuillToolbarSelectHeaderStyleButtonsState padding: const EdgeInsets.symmetric(horizontal: !kIsWeb ? 1.0 : 5.0), child: ConstrainedBox( constraints: BoxConstraints.tightFor( - width: iconSize * kIconButtonFactor, - height: iconSize * kIconButtonFactor, + width: iconSize * iconButtonFactor, + height: iconSize * iconButtonFactor, ), child: UtilityWidgets.maybeTooltip( message: tooltip, diff --git a/lib/src/widgets/toolbar/buttons/toggle_style.dart b/lib/src/widgets/toolbar/buttons/toggle_style.dart index 439df53b..8e73226b 100644 --- a/lib/src/widgets/toolbar/buttons/toggle_style.dart +++ b/lib/src/widgets/toolbar/buttons/toggle_style.dart @@ -212,6 +212,7 @@ Widget defaultToggleStyleButtonBuilder( VoidCallback? onPressed, VoidCallback? afterPressed, [ double iconSize = kDefaultIconSize, + double iconButtonFactor = kIconButtonFactor, QuillIconTheme? iconTheme, ]) { final theme = Theme.of(context); @@ -234,7 +235,7 @@ Widget defaultToggleStyleButtonBuilder( return QuillToolbarIconButton( highlightElevation: 0, hoverElevation: 0, - size: iconSize * kIconButtonFactor, + size: iconSize * iconButtonFactor, icon: Icon(icon, size: iconSize, color: iconColor), fillColor: fill, onPressed: onPressed,