From 7c3f6ccf4e3b96a607e78774fe051bcf6f584271 Mon Sep 17 00:00:00 2001 From: Ellet Hnewa <73608287+ellet0@users.noreply.github.com> Date: Wed, 20 Dec 2023 22:56:29 +0300 Subject: [PATCH] Feature/change icon button data (#1634) * Add a way to change almost properties of IconButton in QuillIconTheme for both selected and unselected state --------- Co-authored-by: Ellet --- CHANGELOG.md | 3 + .../presentation/quill/my_quill_toolbar.dart | 18 +++ .../formula/toolbar/formula_button.dart | 1 + .../embeds/image/toolbar/image_button.dart | 3 +- .../others/camera_button/camera_button.dart | 3 +- .../embeds/video/toolbar/video_button.dart | 3 +- lib/src/models/themes/quill_icon_theme.dart | 114 ++++++++++++++++-- .../toolbar/buttons/clear_format_button.dart | 2 +- .../toolbar/buttons/color/color_button.dart | 6 +- .../toolbar/buttons/custom_button_button.dart | 1 + .../toolbar/buttons/font_family_button.dart | 14 ++- .../toolbar/buttons/font_size_button.dart | 16 ++- .../select_header_style_buttons.dart | 15 ++- .../toolbar/buttons/history_button.dart | 3 +- .../toolbar/buttons/indent_button.dart | 3 +- .../toolbar/buttons/link_style2_button.dart | 1 + .../toolbar/buttons/link_style_button.dart | 1 + .../toolbar/buttons/quill_icon_button.dart | 48 ++++++-- .../toolbar/buttons/search/search_button.dart | 1 + .../toolbar/buttons/toggle_style_button.dart | 4 +- 20 files changed, 214 insertions(+), 46 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c8720cfc..3ec51d63 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ All notable changes to this project will be documented in this file. +## 9.1.0 +* Fix the simple toolbar by add properties of `IconButton` and fix some buttons + ## 9.1.0-dev.2 * Fix the history buttons diff --git a/example/lib/presentation/quill/my_quill_toolbar.dart b/example/lib/presentation/quill/my_quill_toolbar.dart index 1614528d..fc5cebaa 100644 --- a/example/lib/presentation/quill/my_quill_toolbar.dart +++ b/example/lib/presentation/quill/my_quill_toolbar.dart @@ -202,6 +202,24 @@ class MyQuillToolbar extends StatelessWidget { controller: controller, showAlignmentButtons: true, multiRowsDisplay: true, + buttonOptions: QuillSimpleToolbarButtonOptions( + base: QuillToolbarBaseButtonOptions( + afterButtonPressed: focusNode.requestFocus + // globalIconSize: 20, + // iconTheme: QuillIconTheme( + // iconButtonSelectedData: IconButtonData( + // style: IconButton.styleFrom( + // foregroundColor: Colors.amberAccent, + // ), + // ), + // iconButtonUnselectedData: IconButtonData( + // style: IconButton.styleFrom( + // foregroundColor: Colors.amberAccent, + // ), + // ), + // ), + ), + ), customButtons: [ QuillToolbarCustomButtonOptions( icon: const Icon(Icons.add_alarm_rounded), diff --git a/flutter_quill_extensions/lib/embeds/formula/toolbar/formula_button.dart b/flutter_quill_extensions/lib/embeds/formula/toolbar/formula_button.dart index 757df66e..9fab66a9 100644 --- a/flutter_quill_extensions/lib/embeds/formula/toolbar/formula_button.dart +++ b/flutter_quill_extensions/lib/embeds/formula/toolbar/formula_button.dart @@ -94,6 +94,7 @@ class QuillToolbarFormulaButton extends StatelessWidget { tooltip: tooltip, onPressed: () => _sharedOnPressed(context), isSelected: false, + iconTheme: iconTheme, ); } diff --git a/flutter_quill_extensions/lib/embeds/image/toolbar/image_button.dart b/flutter_quill_extensions/lib/embeds/image/toolbar/image_button.dart index bd87c22b..aa1be7ad 100644 --- a/flutter_quill_extensions/lib/embeds/image/toolbar/image_button.dart +++ b/flutter_quill_extensions/lib/embeds/image/toolbar/image_button.dart @@ -104,8 +104,7 @@ class QuillToolbarImageButton extends StatelessWidget { tooltip: tooltip, isSelected: false, onPressed: () => _sharedOnPressed(context), - iconSelectedStyle: _iconTheme(context)?.iconButtonSelectedStyle, - iconUnselectedStyle: _iconTheme(context)?.iconButtonUnselectedStyle, + iconTheme: _iconTheme(context), ); } diff --git a/flutter_quill_extensions/lib/embeds/others/camera_button/camera_button.dart b/flutter_quill_extensions/lib/embeds/others/camera_button/camera_button.dart index fb051f28..08e286a2 100644 --- a/flutter_quill_extensions/lib/embeds/others/camera_button/camera_button.dart +++ b/flutter_quill_extensions/lib/embeds/others/camera_button/camera_button.dart @@ -112,8 +112,7 @@ class QuillToolbarCameraButton extends StatelessWidget { isSelected: false, // isDesktop(supportWeb: false) ? null : onPressed: () => _sharedOnPressed(context), - iconSelectedStyle: iconTheme?.iconButtonSelectedStyle, - iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle, + iconTheme: iconTheme, ); } diff --git a/flutter_quill_extensions/lib/embeds/video/toolbar/video_button.dart b/flutter_quill_extensions/lib/embeds/video/toolbar/video_button.dart index 323ba5dc..d190406e 100644 --- a/flutter_quill_extensions/lib/embeds/video/toolbar/video_button.dart +++ b/flutter_quill_extensions/lib/embeds/video/toolbar/video_button.dart @@ -109,8 +109,7 @@ class QuillToolbarVideoButton extends StatelessWidget { tooltip: tooltip, isSelected: false, onPressed: () => _sharedOnPressed(context), - iconSelectedStyle: _iconTheme(context)?.iconButtonSelectedStyle, - iconUnselectedStyle: _iconTheme(context)?.iconButtonUnselectedStyle, + iconTheme: _iconTheme(context), ); } diff --git a/lib/src/models/themes/quill_icon_theme.dart b/lib/src/models/themes/quill_icon_theme.dart index bcbc2b6e..68983d66 100644 --- a/lib/src/models/themes/quill_icon_theme.dart +++ b/lib/src/models/themes/quill_icon_theme.dart @@ -1,21 +1,121 @@ +// ignore_for_file: public_member_api_docs, sort_constructors_first import 'package:flutter/material.dart'; @immutable class QuillIconTheme { const QuillIconTheme({ - this.padding, this.iconButtonSelectedStyle, this.iconButtonUnselectedStyle, - // this.iconSelectedFillColor, - // this.iconUnselectedFillColor, + this.iconButtonSelectedData, + this.iconButtonUnselectedData, }); + @Deprecated('Please use iconButtonUnselectedData instead') final ButtonStyle? iconButtonUnselectedStyle; + @Deprecated('Please use iconButtonSelectedData instead') final ButtonStyle? iconButtonSelectedStyle; - // final Color? iconSelectedFillColor; - // final Color? iconUnselectedFillColor; + final IconButtonData? iconButtonUnselectedData; + final IconButtonData? iconButtonSelectedData; + + QuillIconTheme copyWith({ + IconButtonData? iconButtonUnselectedData, + IconButtonData? iconButtonSelectedData, + }) { + return QuillIconTheme( + iconButtonUnselectedData: + iconButtonUnselectedData ?? this.iconButtonUnselectedData, + iconButtonSelectedData: + iconButtonSelectedData ?? this.iconButtonSelectedData, + ); + } +} + +@immutable +class IconButtonData { + const IconButtonData({ + this.iconSize, + this.visualDensity, + this.padding, + this.alignment, + this.splashRadius, + this.color, + this.focusColor, + this.hoverColor, + this.highlightColor, + this.splashColor, + this.disabledColor, + this.mouseCursor, + this.autofocus = false, + this.tooltip, + this.enableFeedback, + this.constraints, + this.style, + this.isSelected, + this.selectedIcon, + }); + + final double? iconSize; + final VisualDensity? visualDensity; + final EdgeInsetsGeometry? padding; + final AlignmentGeometry? alignment; + final double? splashRadius; + final Color? color; + final Color? focusColor; + final Color? hoverColor; + final Color? highlightColor; + final Color? splashColor; + final Color? disabledColor; + final MouseCursor? mouseCursor; + final bool autofocus; + final String? tooltip; + final bool? enableFeedback; + final BoxConstraints? constraints; + final ButtonStyle? style; + final bool? isSelected; + final Widget? selectedIcon; - ///The padding for icons - final EdgeInsets? padding; + IconButtonData copyWith({ + double? iconSize, + VisualDensity? visualDensity, + EdgeInsetsGeometry? padding, + AlignmentGeometry? alignment, + double? splashRadius, + Color? color, + Color? focusColor, + Color? hoverColor, + Color? highlightColor, + Color? splashColor, + Color? disabledColor, + MouseCursor? mouseCursor, + bool? autofocus, + String? tooltip, + bool? enableFeedback, + BoxConstraints? constraints, + ButtonStyle? style, + bool? isSelected, + Widget? selectedIcon, + }) { + return IconButtonData( + iconSize: iconSize ?? this.iconSize, + visualDensity: visualDensity ?? this.visualDensity, + padding: padding ?? this.padding, + alignment: alignment ?? this.alignment, + splashRadius: splashRadius ?? this.splashRadius, + color: color ?? this.color, + focusColor: focusColor ?? this.focusColor, + hoverColor: hoverColor ?? this.hoverColor, + highlightColor: highlightColor ?? this.highlightColor, + splashColor: splashColor ?? this.splashColor, + disabledColor: disabledColor ?? this.disabledColor, + mouseCursor: mouseCursor ?? this.mouseCursor, + autofocus: autofocus ?? this.autofocus, + tooltip: tooltip ?? this.tooltip, + enableFeedback: enableFeedback ?? this.enableFeedback, + constraints: constraints ?? this.constraints, + style: style ?? this.style, + isSelected: isSelected ?? this.isSelected, + selectedIcon: selectedIcon ?? this.selectedIcon, + ); + } } diff --git a/lib/src/widgets/toolbar/buttons/clear_format_button.dart b/lib/src/widgets/toolbar/buttons/clear_format_button.dart index e718cd8e..41df3834 100644 --- a/lib/src/widgets/toolbar/buttons/clear_format_button.dart +++ b/lib/src/widgets/toolbar/buttons/clear_format_button.dart @@ -114,7 +114,7 @@ class QuillToolbarClearFormatButton extends StatelessWidget { isSelected: false, onPressed: _sharedOnPressed, afterPressed: afterButtonPressed, - iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle, + iconTheme: iconTheme, ); } } diff --git a/lib/src/widgets/toolbar/buttons/color/color_button.dart b/lib/src/widgets/toolbar/buttons/color/color_button.dart index fe4e093c..587b4a33 100644 --- a/lib/src/widgets/toolbar/buttons/color/color_button.dart +++ b/lib/src/widgets/toolbar/buttons/color/color_button.dart @@ -193,12 +193,14 @@ class QuillToolbarColorButtonState extends State { ); } - return IconButton( + return QuillToolbarIconButton( tooltip: tooltip, - iconSize: iconSize * iconButtonFactor, + isSelected: false, + iconTheme: iconTheme, icon: Icon( iconData, color: widget.isBackground ? iconColorBackground : iconColor, + size: iconSize * iconButtonFactor, ), onPressed: _showColorPicker, ); diff --git a/lib/src/widgets/toolbar/buttons/custom_button_button.dart b/lib/src/widgets/toolbar/buttons/custom_button_button.dart index 3f83bf10..4f99aa9a 100644 --- a/lib/src/widgets/toolbar/buttons/custom_button_button.dart +++ b/lib/src/widgets/toolbar/buttons/custom_button_button.dart @@ -85,6 +85,7 @@ class QuillToolbarCustomButton extends StatelessWidget { tooltip: tooltip, onPressed: () => _onPressed(context), afterPressed: afterButtonPressed, + iconTheme: iconTheme, ); } } diff --git a/lib/src/widgets/toolbar/buttons/font_family_button.dart b/lib/src/widgets/toolbar/buttons/font_family_button.dart index a400c67a..45414e43 100644 --- a/lib/src/widgets/toolbar/buttons/font_family_button.dart +++ b/lib/src/widgets/toolbar/buttons/font_family_button.dart @@ -190,10 +190,16 @@ class QuillToolbarFontFamilyButtonState child: _buildContent(context), ); } - return IconButton( - // tooltip: , // TODO: Use this here - visualDensity: VisualDensity.compact, - style: iconTheme?.iconButtonUnselectedStyle, + return QuillToolbarIconButton( + isSelected: false, + iconTheme: iconTheme?.copyWith( + iconButtonSelectedData: const IconButtonData( + visualDensity: VisualDensity.compact, + ), + iconButtonUnselectedData: const IconButtonData( + visualDensity: VisualDensity.compact, + ), + ), onPressed: _onPressed, icon: _buildContent(context), ); diff --git a/lib/src/widgets/toolbar/buttons/font_size_button.dart b/lib/src/widgets/toolbar/buttons/font_size_button.dart index dc62835f..67b2ecb3 100644 --- a/lib/src/widgets/toolbar/buttons/font_size_button.dart +++ b/lib/src/widgets/toolbar/buttons/font_size_button.dart @@ -1,13 +1,14 @@ import 'package:flutter/material.dart'; import '../../../../extensions.dart'; + import '../../../extensions/quill_configurations_ext.dart'; import '../../../l10n/extensions/localizations.dart'; -import '../../../models/config/quill_configurations.dart'; import '../../../models/documents/attribute.dart'; import '../../../models/themes/quill_icon_theme.dart'; import '../../../utils/font.dart'; import '../../quill/quill_controller.dart'; +import '../base_toolbar.dart'; class QuillToolbarFontSizeButton extends StatefulWidget { QuillToolbarFontSizeButton({ @@ -150,10 +151,17 @@ class QuillToolbarFontSizeButtonState child: _buildContent(context), ); } - return IconButton( + return QuillToolbarIconButton( tooltip: tooltip, - visualDensity: VisualDensity.compact, - style: iconTheme?.iconButtonUnselectedStyle, + isSelected: false, + iconTheme: iconTheme?.copyWith( + iconButtonSelectedData: const IconButtonData( + visualDensity: VisualDensity.compact, + ), + iconButtonUnselectedData: const IconButtonData( + visualDensity: VisualDensity.compact, + ), + ), onPressed: _onPressed, icon: _buildContent(context), ); diff --git a/lib/src/widgets/toolbar/buttons/hearder_style/select_header_style_buttons.dart b/lib/src/widgets/toolbar/buttons/hearder_style/select_header_style_buttons.dart index 5268ddee..57ff5d64 100644 --- a/lib/src/widgets/toolbar/buttons/hearder_style/select_header_style_buttons.dart +++ b/lib/src/widgets/toolbar/buttons/hearder_style/select_header_style_buttons.dart @@ -155,12 +155,17 @@ class QuillToolbarSelectHeaderStyleButtonsState width: iconSize * iconButtonFactor, height: iconSize * iconButtonFactor, ), - child: IconButton( + child: QuillToolbarIconButton( tooltip: tooltip, - visualDensity: VisualDensity.compact, - style: isSelected - ? iconTheme?.iconButtonSelectedStyle - : iconTheme?.iconButtonUnselectedStyle, + iconTheme: iconTheme?.copyWith( + iconButtonSelectedData: const IconButtonData( + visualDensity: VisualDensity.compact, + ), + iconButtonUnselectedData: const IconButtonData( + visualDensity: VisualDensity.compact, + ), + ), + isSelected: isSelected, onPressed: () => _sharedOnPressed(attribute), icon: Text( _valueToText[attribute] ?? diff --git a/lib/src/widgets/toolbar/buttons/history_button.dart b/lib/src/widgets/toolbar/buttons/history_button.dart index 21271a7f..0527c3fa 100644 --- a/lib/src/widgets/toolbar/buttons/history_button.dart +++ b/lib/src/widgets/toolbar/buttons/history_button.dart @@ -104,8 +104,7 @@ class QuillToolbarHistoryButtonState extends State { size: iconSize * iconButtonFactor, ), isSelected: false, - iconSelectedStyle: iconTheme?.iconButtonSelectedStyle, - iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle, + iconTheme: iconTheme, onPressed: _canPressed ? _updateHistory : null, afterPressed: afterButtonPressed, ); diff --git a/lib/src/widgets/toolbar/buttons/indent_button.dart b/lib/src/widgets/toolbar/buttons/indent_button.dart index 6778f790..2c96de42 100644 --- a/lib/src/widgets/toolbar/buttons/indent_button.dart +++ b/lib/src/widgets/toolbar/buttons/indent_button.dart @@ -116,8 +116,7 @@ class QuillToolbarIndentButtonState extends State { isSelected: false, onPressed: _sharedOnPressed, afterPressed: afterButtonPressed, - iconSelectedStyle: iconTheme?.iconButtonSelectedStyle, - iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle, + iconTheme: iconTheme, ); } } diff --git a/lib/src/widgets/toolbar/buttons/link_style2_button.dart b/lib/src/widgets/toolbar/buttons/link_style2_button.dart index 0c24d4ec..7f2a2658 100644 --- a/lib/src/widgets/toolbar/buttons/link_style2_button.dart +++ b/lib/src/widgets/toolbar/buttons/link_style2_button.dart @@ -156,6 +156,7 @@ class _QuillToolbarLinkStyleButton2State ), isSelected: isToggled, onPressed: _openLinkDialog, + iconTheme: iconTheme, afterPressed: afterButtonPressed, ); } diff --git a/lib/src/widgets/toolbar/buttons/link_style_button.dart b/lib/src/widgets/toolbar/buttons/link_style_button.dart index 484ffc87..2670ff6e 100644 --- a/lib/src/widgets/toolbar/buttons/link_style_button.dart +++ b/lib/src/widgets/toolbar/buttons/link_style_button.dart @@ -149,6 +149,7 @@ class QuillToolbarLinkStyleButtonState isSelected: isToggled, onPressed: () => _openLinkDialog(context), afterPressed: afterButtonPressed, + iconTheme: iconTheme, ); } diff --git a/lib/src/widgets/toolbar/buttons/quill_icon_button.dart b/lib/src/widgets/toolbar/buttons/quill_icon_button.dart index a21e4c7a..2bf75ebe 100644 --- a/lib/src/widgets/toolbar/buttons/quill_icon_button.dart +++ b/lib/src/widgets/toolbar/buttons/quill_icon_button.dart @@ -1,16 +1,16 @@ import 'package:flutter/material.dart'; +import '../../../models/themes/quill_icon_theme.dart'; + class QuillToolbarIconButton extends StatelessWidget { const QuillToolbarIconButton({ required this.onPressed, required this.icon, required this.isSelected, + required this.iconTheme, this.afterPressed, this.tooltip, - this.padding, super.key, - this.iconSelectedStyle, - this.iconUnselectedStyle, }); final VoidCallback? onPressed; @@ -18,25 +18,37 @@ class QuillToolbarIconButton extends StatelessWidget { final Widget icon; final String? tooltip; - final EdgeInsets? padding; final bool isSelected; - final ButtonStyle? iconUnselectedStyle; - final ButtonStyle? iconSelectedStyle; + final QuillIconTheme? iconTheme; @override Widget build(BuildContext context) { if (isSelected) { return IconButton.filled( tooltip: tooltip, - padding: padding, onPressed: onPressed, icon: icon, - style: iconSelectedStyle, + style: iconTheme?.iconButtonSelectedData?.style, + visualDensity: iconTheme?.iconButtonSelectedData?.visualDensity, + iconSize: iconTheme?.iconButtonSelectedData?.iconSize, + padding: iconTheme?.iconButtonSelectedData?.padding, + alignment: iconTheme?.iconButtonSelectedData?.alignment, + splashRadius: iconTheme?.iconButtonSelectedData?.splashRadius, + color: iconTheme?.iconButtonSelectedData?.color, + focusColor: iconTheme?.iconButtonSelectedData?.focusColor, + hoverColor: iconTheme?.iconButtonSelectedData?.hoverColor, + highlightColor: iconTheme?.iconButtonSelectedData?.highlightColor, + splashColor: iconTheme?.iconButtonSelectedData?.splashColor, + disabledColor: iconTheme?.iconButtonSelectedData?.disabledColor, + mouseCursor: iconTheme?.iconButtonSelectedData?.mouseCursor, + autofocus: iconTheme?.iconButtonSelectedData?.autofocus ?? false, + enableFeedback: iconTheme?.iconButtonSelectedData?.enableFeedback, + constraints: iconTheme?.iconButtonSelectedData?.constraints, + selectedIcon: iconTheme?.iconButtonSelectedData?.selectedIcon, ); } return IconButton( tooltip: tooltip, - padding: padding, onPressed: onPressed != null ? () { onPressed?.call(); @@ -44,7 +56,23 @@ class QuillToolbarIconButton extends StatelessWidget { } : null, icon: icon, - style: iconUnselectedStyle, + style: iconTheme?.iconButtonUnselectedData?.style, + visualDensity: iconTheme?.iconButtonUnselectedData?.visualDensity, + iconSize: iconTheme?.iconButtonUnselectedData?.iconSize, + padding: iconTheme?.iconButtonUnselectedData?.padding, + alignment: iconTheme?.iconButtonUnselectedData?.alignment, + splashRadius: iconTheme?.iconButtonUnselectedData?.splashRadius, + color: iconTheme?.iconButtonUnselectedData?.color, + focusColor: iconTheme?.iconButtonUnselectedData?.focusColor, + hoverColor: iconTheme?.iconButtonUnselectedData?.hoverColor, + highlightColor: iconTheme?.iconButtonUnselectedData?.highlightColor, + splashColor: iconTheme?.iconButtonUnselectedData?.splashColor, + disabledColor: iconTheme?.iconButtonUnselectedData?.disabledColor, + mouseCursor: iconTheme?.iconButtonUnselectedData?.mouseCursor, + autofocus: iconTheme?.iconButtonUnselectedData?.autofocus ?? false, + enableFeedback: iconTheme?.iconButtonUnselectedData?.enableFeedback, + constraints: iconTheme?.iconButtonUnselectedData?.constraints, + selectedIcon: iconTheme?.iconButtonUnselectedData?.selectedIcon, ); } } diff --git a/lib/src/widgets/toolbar/buttons/search/search_button.dart b/lib/src/widgets/toolbar/buttons/search/search_button.dart index bba06036..c98afe13 100644 --- a/lib/src/widgets/toolbar/buttons/search/search_button.dart +++ b/lib/src/widgets/toolbar/buttons/search/search_button.dart @@ -122,6 +122,7 @@ class QuillToolbarSearchButton extends StatelessWidget { isSelected: false, onPressed: () => _sharedOnPressed(context), afterPressed: afterButtonPressed, + iconTheme: iconTheme, ); } diff --git a/lib/src/widgets/toolbar/buttons/toggle_style_button.dart b/lib/src/widgets/toolbar/buttons/toggle_style_button.dart index 41c503fd..46408b94 100644 --- a/lib/src/widgets/toolbar/buttons/toggle_style_button.dart +++ b/lib/src/widgets/toolbar/buttons/toggle_style_button.dart @@ -256,8 +256,6 @@ Widget defaultToggleStyleButtonBuilder( isSelected: isEnabled ? isToggled == true : false, onPressed: onPressed, afterPressed: afterPressed, - padding: iconTheme?.padding, - iconUnselectedStyle: iconTheme?.iconButtonUnselectedStyle, - iconSelectedStyle: iconTheme?.iconButtonSelectedStyle, + iconTheme: iconTheme, ); }