From 6d9b43f909cc609cd98fe03db412e2c41c384d3e Mon Sep 17 00:00:00 2001 From: BambinoUA <45417992+bambinoua@users.noreply.github.com> Date: Tue, 18 Apr 2023 19:04:19 +0300 Subject: [PATCH] Dropdown tweaks (#1182) --- lib/src/utils/widgets.dart | 10 +++ .../toolbar/quill_font_family_button.dart | 63 ++++++++++++++----- .../toolbar/quill_font_size_button.dart | 42 +++++++++---- 3 files changed, 88 insertions(+), 27 deletions(-) diff --git a/lib/src/utils/widgets.dart b/lib/src/utils/widgets.dart index 1b560e84..c27777f0 100644 --- a/lib/src/utils/widgets.dart +++ b/lib/src/utils/widgets.dart @@ -1,5 +1,7 @@ import 'package:flutter/material.dart'; +typedef WidgetWrapper = Widget Function(Widget child); + /// Provides utiulity widgets. abstract class UtilityWidgets { /// Conditionally wraps the [child] with [Tooltip] widget if [message] @@ -8,4 +10,12 @@ abstract class UtilityWidgets { (message ?? '').isNotEmpty ? Tooltip(message: message!, child: child) : child; + + /// Conditionally wraps the [child] with [wrapper] widget if [enabled] + /// is true. + static Widget maybeWidget( + {required WidgetWrapper wrapper, + required Widget child, + bool enabled = false}) => + enabled ? wrapper(child) : child; } diff --git a/lib/src/widgets/toolbar/quill_font_family_button.dart b/lib/src/widgets/toolbar/quill_font_family_button.dart index d214bf64..8108c200 100644 --- a/lib/src/widgets/toolbar/quill_font_family_button.dart +++ b/lib/src/widgets/toolbar/quill_font_family_button.dart @@ -25,9 +25,16 @@ class QuillFontFamilyButton extends StatefulWidget { this.style, this.width, this.renderFontFamilies = true, - this.alignment, + this.initialValue, + this.labelOverflow = TextOverflow.visible, + this.overrideTooltipByFontFamily = false, + this.itemHeight, + this.itemPadding, + this.defaultItemColor = Colors.red, Key? key, - }) : super(key: key); + }) : assert(rawItemsMap.length > 0), + assert(initialValue == null || initialValue.length > 0), + super(key: key); final double iconSize; final Color? fillColor; @@ -46,7 +53,12 @@ class QuillFontFamilyButton extends StatefulWidget { final TextStyle? style; final double? width; final bool renderFontFamilies; - final AlignmentGeometry? alignment; + final String? initialValue; + final TextOverflow labelOverflow; + final bool overrideTooltipByFontFamily; + final double? itemHeight; + final EdgeInsets? itemPadding; + final Color? defaultItemColor; @override _QuillFontFamilyButtonState createState() => _QuillFontFamilyButtonState(); @@ -60,7 +72,7 @@ class _QuillFontFamilyButtonState extends State { @override void initState() { super.initState(); - _currentValue = _defaultDisplayText = 'Font'.i18n; + _currentValue = _defaultDisplayText = widget.initialValue ?? 'Font'.i18n; widget.controller.addListener(_didChangeEditingValue); } @@ -105,8 +117,18 @@ class _QuillFontFamilyButtonState extends State { height: widget.iconSize * 1.81, width: widget.width, ), - child: UtilityWidgets.maybeTooltip( - message: widget.tooltip, + child: UtilityWidgets.maybeWidget( + enabled: (widget.tooltip ?? '').isNotEmpty || + widget.overrideTooltipByFontFamily, + wrapper: (child) { + var effectiveTooltip = widget.tooltip ?? ''; + if (widget.overrideTooltipByFontFamily) { + effectiveTooltip = effectiveTooltip.isNotEmpty + ? '$effectiveTooltip: $_currentValue' + : '${'Font'.i18n}: $_currentValue'; + } + return Tooltip(message: effectiveTooltip, child: child); + }, child: RawMaterialButton( visualDensity: VisualDensity.compact, shape: RoundedRectangleBorder( @@ -146,12 +168,16 @@ class _QuillFontFamilyButtonState extends State { PopupMenuItem( key: ValueKey(fontFamily.key), value: fontFamily.value, + height: widget.itemHeight ?? kMinInteractiveDimension, + padding: widget.itemPadding, child: Text( fontFamily.key.toString(), style: TextStyle( - fontFamily: - widget.renderFontFamilies ? fontFamily.value : null, - color: fontFamily.value == 'Clear' ? Colors.red : null), + fontFamily: widget.renderFontFamilies ? fontFamily.value : null, + color: fontFamily.value == 'Clear' + ? widget.defaultItemColor + : null, + ), ), ), ], @@ -177,18 +203,27 @@ class _QuillFontFamilyButtonState extends State { Widget _buildContent(BuildContext context) { final theme = Theme.of(context); - return Container( - alignment: widget.alignment ?? Alignment.center, + final hasFinalWidth = widget.width != null; + return Padding( padding: widget.padding ?? const EdgeInsets.fromLTRB(10, 0, 0, 0), child: Row( - mainAxisSize: MainAxisSize.min, + mainAxisSize: !hasFinalWidth ? MainAxisSize.min : MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Text(_currentValue, + UtilityWidgets.maybeWidget( + enabled: hasFinalWidth, + wrapper: (child) => Expanded(child: child), + child: Text( + _currentValue, + maxLines: 1, + overflow: widget.labelOverflow, style: widget.style ?? TextStyle( fontSize: widget.iconSize / 1.15, color: widget.iconTheme?.iconUnselectedColor ?? - theme.iconTheme.color)), + theme.iconTheme.color), + ), + ), const SizedBox(width: 3), Icon(Icons.arrow_drop_down, size: widget.iconSize / 1.15, diff --git a/lib/src/widgets/toolbar/quill_font_size_button.dart b/lib/src/widgets/toolbar/quill_font_size_button.dart index 83d39747..e445c0ae 100644 --- a/lib/src/widgets/toolbar/quill_font_size_button.dart +++ b/lib/src/widgets/toolbar/quill_font_size_button.dart @@ -26,9 +26,13 @@ class QuillFontSizeButton extends StatefulWidget { this.style, this.width, this.initialValue, - this.alignment, + this.labelOverflow = TextOverflow.visible, + this.itemHeight, + this.itemPadding, + this.defaultItemColor = Colors.red, Key? key, }) : assert(rawItemsMap.length > 0), + assert(initialValue == null || initialValue.length > 0), super(key: key); final double iconSize; @@ -48,7 +52,10 @@ class QuillFontSizeButton extends StatefulWidget { final TextStyle? style; final double? width; final String? initialValue; - final AlignmentGeometry? alignment; + final TextOverflow labelOverflow; + final double? itemHeight; + final EdgeInsets? itemPadding; + final Color? defaultItemColor; @override _QuillFontSizeButtonState createState() => _QuillFontSizeButtonState(); @@ -148,10 +155,13 @@ class _QuillFontSizeButtonState extends State { PopupMenuItem( key: ValueKey(fontSize.key), value: fontSize.value, + height: widget.itemHeight ?? kMinInteractiveDimension, + padding: widget.itemPadding, child: Text( fontSize.key.toString(), - style: - TextStyle(color: fontSize.value == '0' ? Colors.red : null), + style: TextStyle( + color: fontSize.value == '0' ? widget.defaultItemColor : null, + ), ), ), ], @@ -177,18 +187,24 @@ class _QuillFontSizeButtonState extends State { Widget _buildContent(BuildContext context) { final theme = Theme.of(context); - return Container( - alignment: widget.alignment ?? Alignment.center, + final hasFinalWidth = widget.width != null; + return Padding( padding: widget.padding ?? const EdgeInsets.fromLTRB(10, 0, 0, 0), child: Row( - mainAxisSize: MainAxisSize.min, + mainAxisSize: !hasFinalWidth ? MainAxisSize.min : MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Text(_currentValue, - style: widget.style ?? - TextStyle( - fontSize: widget.iconSize / 1.15, - color: widget.iconTheme?.iconUnselectedColor ?? - theme.iconTheme.color)), + UtilityWidgets.maybeWidget( + enabled: hasFinalWidth, + wrapper: (child) => Expanded(child: child), + child: Text(_currentValue, + overflow: widget.labelOverflow, + style: widget.style ?? + TextStyle( + fontSize: widget.iconSize / 1.15, + color: widget.iconTheme?.iconUnselectedColor ?? + theme.iconTheme.color)), + ), const SizedBox(width: 3), Icon(Icons.arrow_drop_down, size: widget.iconSize / 1.15,