huypanha
/
flutter-quill
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement tooltips for toolbar buttons

Browse Source
pull/1175/head
BambinoUA 2 years ago
parent 6f67a2d9e4
commit fe2a8cc577
13 changed files with 186 additions and 123 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      lib/src/widgets/toolbar/clear_format_button.dart
  2. 3
      lib/src/widgets/toolbar/color_button.dart
  3. 3
      lib/src/widgets/toolbar/history_button.dart
  4. 3
      lib/src/widgets/toolbar/indent_button.dart
  5. 3
      lib/src/widgets/toolbar/link_style_button.dart
  6. 34
      lib/src/widgets/toolbar/quill_font_family_button.dart
  7. 34
      lib/src/widgets/toolbar/quill_font_size_button.dart
  8. 33
      lib/src/widgets/toolbar/quill_icon_button.dart
  9. 3
      lib/src/widgets/toolbar/search_button.dart
  10. 76
      lib/src/widgets/toolbar/select_alignment_button.dart
  11. 62
      lib/src/widgets/toolbar/select_header_style_button.dart
  12. 26
      lib/src/widgets/toolbar/toggle_check_list_button.dart
  13. 26
      lib/src/widgets/toolbar/toggle_style_button.dart

3
lib/src/widgets/toolbar/clear_format_button.dart
Unescape View File

@ -12,6 +12,7 @@ class ClearFormatButton extends StatefulWidget {
this.iconSize = kDefaultIconSize,
this.iconTheme,
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -22,6 +23,7 @@ class ClearFormatButton extends StatefulWidget {
final QuillIconTheme? iconTheme;
final VoidCallback? afterButtonPressed;
final String? tooltip;
@override
_ClearFormatButtonState createState() => _ClearFormatButtonState();
@ -36,6 +38,7 @@ class _ClearFormatButtonState extends State<ClearFormatButton> {
final fillColor =
widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor;
return QuillIconButton(
tooltip: widget.tooltip,
highlightElevation: 0,
hoverElevation: 0,
size: widget.iconSize * kIconButtonFactor,

3
lib/src/widgets/toolbar/color_button.dart
Unescape View File

@ -21,6 +21,7 @@ class ColorButton extends StatefulWidget {
this.iconSize = kDefaultIconSize,
this.iconTheme,
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -30,6 +31,7 @@ class ColorButton extends StatefulWidget {
final QuillController controller;
final QuillIconTheme? iconTheme;
final VoidCallback? afterButtonPressed;
final String? tooltip;
@override
_ColorButtonState createState() => _ColorButtonState();
@ -119,6 +121,7 @@ class _ColorButtonState extends State<ColorButton> {
: (widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor);
return QuillIconButton(
tooltip: widget.tooltip,
highlightElevation: 0,
hoverElevation: 0,
size: widget.iconSize * kIconButtonFactor,

3
lib/src/widgets/toolbar/history_button.dart
Unescape View File

@ -12,6 +12,7 @@ class HistoryButton extends StatefulWidget {
this.iconSize = kDefaultIconSize,
this.iconTheme,
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -21,6 +22,7 @@ class HistoryButton extends StatefulWidget {
final QuillController controller;
final QuillIconTheme? iconTheme;
final VoidCallback? afterButtonPressed;
final String? tooltip;
@override
_HistoryButtonState createState() => _HistoryButtonState();
@ -41,6 +43,7 @@ class _HistoryButtonState extends State<HistoryButton> {
_setIconColor();
});
return QuillIconButton(
tooltip: widget.tooltip,
highlightElevation: 0,
hoverElevation: 0,
size: widget.iconSize * 1.77,

3
lib/src/widgets/toolbar/indent_button.dart
Unescape View File

@ -12,6 +12,7 @@ class IndentButton extends StatefulWidget {
this.iconSize = kDefaultIconSize,
this.iconTheme,
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -22,6 +23,7 @@ class IndentButton extends StatefulWidget {
final VoidCallback? afterButtonPressed;
final QuillIconTheme? iconTheme;
final String? tooltip;
@override
_IndentButtonState createState() => _IndentButtonState();
@ -37,6 +39,7 @@ class _IndentButtonState extends State<IndentButton> {
final iconFillColor =
widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor;
return QuillIconButton(
tooltip: widget.tooltip,
highlightElevation: 0,
hoverElevation: 0,
size: widget.iconSize * 1.77,

3
lib/src/widgets/toolbar/link_style_button.dart
Unescape View File

@ -17,6 +17,7 @@ class LinkStyleButton extends StatefulWidget {
this.iconTheme,
this.dialogTheme,
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -26,6 +27,7 @@ class LinkStyleButton extends StatefulWidget {
final QuillIconTheme? iconTheme;
final QuillDialogTheme? dialogTheme;
final VoidCallback? afterButtonPressed;
final String? tooltip;
@override
_LinkStyleButtonState createState() => _LinkStyleButtonState();
@ -63,6 +65,7 @@ class _LinkStyleButtonState extends State<LinkStyleButton> {
final isToggled = _getLinkAttributeValue() != null;
final pressedHandler = () => _openLinkDialog(context);
return QuillIconButton(
tooltip: widget.tooltip,
highlightElevation: 0,
hoverElevation: 0,
size: widget.iconSize * kIconButtonFactor,

34
lib/src/widgets/toolbar/quill_font_family_button.dart
Unescape View File

@ -4,6 +4,7 @@ import '../../models/documents/attribute.dart';
import '../../models/documents/style.dart';
import '../../models/themes/quill_icon_theme.dart';
import '../../translations/toolbar.i18n.dart';
import '../../utils/widgets.dart';
import '../controller.dart';
class QuillFontFamilyButton extends StatefulWidget {
@ -19,6 +20,7 @@ class QuillFontFamilyButton extends StatefulWidget {
this.highlightElevation = 1,
this.iconTheme,
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -33,6 +35,7 @@ class QuillFontFamilyButton extends StatefulWidget {
final Attribute attribute;
final QuillController controller;
final VoidCallback? afterButtonPressed;
final String? tooltip;
@override
_QuillFontFamilyButtonState createState() => _QuillFontFamilyButtonState();
@ -88,20 +91,23 @@ class _QuillFontFamilyButtonState extends State<QuillFontFamilyButton> {
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints.tightFor(height: widget.iconSize * 1.81),
child: RawMaterialButton(
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2)),
fillColor: widget.fillColor,
elevation: 0,
hoverElevation: widget.hoverElevation,
highlightElevation: widget.hoverElevation,
onPressed: () {
_showMenu();
widget.afterButtonPressed?.call();
},
child: _buildContent(context),
child: UtilityWidgets.maybeTooltip(
message: widget.tooltip,
child: RawMaterialButton(
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2)),
fillColor: widget.fillColor,
elevation: 0,
hoverElevation: widget.hoverElevation,
highlightElevation: widget.hoverElevation,
onPressed: () {
_showMenu();
widget.afterButtonPressed?.call();
},
child: _buildContent(context),
),
),
);
}

34
lib/src/widgets/toolbar/quill_font_size_button.dart
Unescape View File

@ -5,6 +5,7 @@ import '../../models/documents/style.dart';
import '../../models/themes/quill_icon_theme.dart';
import '../../translations/toolbar.i18n.dart';
import '../../utils/font.dart';
import '../../utils/widgets.dart';
import '../controller.dart';
class QuillFontSizeButton extends StatefulWidget {
@ -20,6 +21,7 @@ class QuillFontSizeButton extends StatefulWidget {
this.highlightElevation = 1,
this.iconTheme,
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -34,6 +36,7 @@ class QuillFontSizeButton extends StatefulWidget {
final Attribute attribute;
final QuillController controller;
final VoidCallback? afterButtonPressed;
final String? tooltip;
@override
_QuillFontSizeButtonState createState() => _QuillFontSizeButtonState();
@ -89,20 +92,23 @@ class _QuillFontSizeButtonState extends State<QuillFontSizeButton> {
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints.tightFor(height: widget.iconSize * 1.81),
child: RawMaterialButton(
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2)),
fillColor: widget.fillColor,
elevation: 0,
hoverElevation: widget.hoverElevation,
highlightElevation: widget.hoverElevation,
onPressed: () {
_showMenu();
widget.afterButtonPressed?.call();
},
child: _buildContent(context),
child: UtilityWidgets.maybeTooltip(
message: widget.tooltip,
child: RawMaterialButton(
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2)),
fillColor: widget.fillColor,
elevation: 0,
hoverElevation: widget.hoverElevation,
highlightElevation: widget.hoverElevation,
onPressed: () {
_showMenu();
widget.afterButtonPressed?.call();
},
child: _buildContent(context),
),
),
);
}

33
lib/src/widgets/toolbar/quill_icon_button.dart
Unescape View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import '../../utils/widgets.dart';
class QuillIconButton extends StatelessWidget {
const QuillIconButton({
required this.onPressed,
@ -10,6 +12,7 @@ class QuillIconButton extends StatelessWidget {
this.hoverElevation = 1,
this.highlightElevation = 1,
this.borderRadius = 2,
this.tooltip,
Key? key,
}) : super(key: key);
@ -21,24 +24,28 @@ class QuillIconButton extends StatelessWidget {
final double hoverElevation;
final double highlightElevation;
final double borderRadius;
final String? tooltip;
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints.tightFor(width: size, height: size),
child: RawMaterialButton(
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadius)),
fillColor: fillColor,
elevation: 0,
hoverElevation: hoverElevation,
highlightElevation: hoverElevation,
onPressed: () {
onPressed?.call();
afterPressed?.call();
},
child: icon,
child: UtilityWidgets.maybeTooltip(
message: tooltip,
child: RawMaterialButton(
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadius)),
fillColor: fillColor,
elevation: 0,
hoverElevation: hoverElevation,
highlightElevation: hoverElevation,
onPressed: () {
onPressed?.call();
afterPressed?.call();
},
child: icon,
),
),
);
}

3
lib/src/widgets/toolbar/search_button.dart
Unescape View File

@ -15,6 +15,7 @@ class SearchButton extends StatelessWidget {
this.iconTheme,
this.dialogTheme,
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -27,6 +28,7 @@ class SearchButton extends StatelessWidget {
final QuillDialogTheme? dialogTheme;
final VoidCallback? afterButtonPressed;
final String? tooltip;
@override
Widget build(BuildContext context) {
@ -37,6 +39,7 @@ class SearchButton extends StatelessWidget {
iconTheme?.iconUnselectedFillColor ?? (fillColor ?? theme.canvasColor);
return QuillIconButton(
tooltip: tooltip,
icon: Icon(icon, size: iconSize, color: iconColor),
highlightElevation: 0,
hoverElevation: 0,

76
lib/src/widgets/toolbar/select_alignment_button.dart
Unescape View File

@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
import '../../models/documents/attribute.dart';
import '../../models/documents/style.dart';
import '../../models/themes/quill_icon_theme.dart';
import '../../utils/widgets.dart';
import '../controller.dart';
import '../toolbar.dart';
@ -17,6 +18,7 @@ class SelectAlignmentButton extends StatefulWidget {
this.showRightAlignment,
this.showJustifyAlignment,
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -29,6 +31,7 @@ class SelectAlignmentButton extends StatefulWidget {
final bool? showRightAlignment;
final bool? showJustifyAlignment;
final VoidCallback? afterButtonPressed;
final String? tooltip;
@override
_SelectAlignmentButtonState createState() => _SelectAlignmentButtonState();
@ -93,40 +96,45 @@ class _SelectAlignmentButtonState extends State<SelectAlignmentButton> {
width: widget.iconSize * kIconButtonFactor,
height: widget.iconSize * kIconButtonFactor,
),
child: RawMaterialButton(
hoverElevation: 0,
highlightElevation: 0,
elevation: 0,
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
widget.iconTheme?.borderRadius ?? 2)),
fillColor: _valueToText[_value] == _valueString[index]
? (widget.iconTheme?.iconSelectedFillColor ??
Theme.of(context).primaryColor)
: (widget.iconTheme?.iconUnselectedFillColor ??
theme.canvasColor),
onPressed: () {
_valueAttribute[index] == Attribute.leftAlignment
? widget.controller
.formatSelection(Attribute.clone(Attribute.align, null))
: widget.controller.formatSelection(_valueAttribute[index]);
widget.afterButtonPressed?.call();
},
child: Icon(
_valueString[index] == Attribute.leftAlignment.value
? Icons.format_align_left
: _valueString[index] == Attribute.centerAlignment.value
? Icons.format_align_center
: _valueString[index] == Attribute.rightAlignment.value
? Icons.format_align_right
: Icons.format_align_justify,
size: widget.iconSize,
color: _valueToText[_value] == _valueString[index]
? (widget.iconTheme?.iconSelectedColor ??
theme.primaryIconTheme.color)
: (widget.iconTheme?.iconUnselectedColor ??
theme.iconTheme.color),
child: UtilityWidgets.maybeTooltip(
message: widget.tooltip,
child: RawMaterialButton(
hoverElevation: 0,
highlightElevation: 0,
elevation: 0,
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
widget.iconTheme?.borderRadius ?? 2)),
fillColor: _valueToText[_value] == _valueString[index]
? (widget.iconTheme?.iconSelectedFillColor ??
Theme.of(context).primaryColor)
: (widget.iconTheme?.iconUnselectedFillColor ??
theme.canvasColor),
onPressed: () {
_valueAttribute[index] == Attribute.leftAlignment
? widget.controller.formatSelection(
Attribute.clone(Attribute.align, null))
: widget.controller
.formatSelection(_valueAttribute[index]);
widget.afterButtonPressed?.call();
},
child: Icon(
_valueString[index] == Attribute.leftAlignment.value
? Icons.format_align_left
: _valueString[index] == Attribute.centerAlignment.value
? Icons.format_align_center
: _valueString[index] ==
Attribute.rightAlignment.value
? Icons.format_align_right
: Icons.format_align_justify,
size: widget.iconSize,
color: _valueToText[_value] == _valueString[index]
? (widget.iconTheme?.iconSelectedColor ??
theme.primaryIconTheme.color)
: (widget.iconTheme?.iconUnselectedColor ??
theme.iconTheme.color),
),
),
),
),

62
lib/src/widgets/toolbar/select_header_style_button.dart
Unescape View File

@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
import '../../models/documents/attribute.dart';
import '../../models/documents/style.dart';
import '../../models/themes/quill_icon_theme.dart';
import '../../utils/widgets.dart';
import '../controller.dart';
import '../toolbar.dart';
@ -20,6 +21,7 @@ class SelectHeaderStyleButton extends StatefulWidget {
Attribute.h3,
],
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -29,6 +31,7 @@ class SelectHeaderStyleButton extends StatefulWidget {
final QuillIconTheme? iconTheme;
final List<Attribute> attributes;
final VoidCallback? afterButtonPressed;
final String? tooltip;
@override
_SelectHeaderStyleButtonState createState() =>
@ -79,34 +82,37 @@ class _SelectHeaderStyleButtonState extends State<SelectHeaderStyleButton> {
width: widget.iconSize * kIconButtonFactor,
height: widget.iconSize * kIconButtonFactor,
),
child: RawMaterialButton(
hoverElevation: 0,
highlightElevation: 0,
elevation: 0,
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2)),
fillColor: isSelected
? (widget.iconTheme?.iconSelectedFillColor ??
Theme.of(context).primaryColor)
: (widget.iconTheme?.iconUnselectedFillColor ??
theme.canvasColor),
onPressed: () {
final _attribute = _selectedAttribute == attribute
? Attribute.header
: attribute;
widget.controller.formatSelection(_attribute);
widget.afterButtonPressed?.call();
},
child: Text(
_valueToText[attribute] ?? '',
style: style.copyWith(
color: isSelected
? (widget.iconTheme?.iconSelectedColor ??
theme.primaryIconTheme.color)
: (widget.iconTheme?.iconUnselectedColor ??
theme.iconTheme.color),
child: UtilityWidgets.maybeTooltip(
message: widget.tooltip,
child: RawMaterialButton(
hoverElevation: 0,
highlightElevation: 0,
elevation: 0,
visualDensity: VisualDensity.compact,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
widget.iconTheme?.borderRadius ?? 2)),
fillColor: isSelected
? (widget.iconTheme?.iconSelectedFillColor ??
Theme.of(context).primaryColor)
: (widget.iconTheme?.iconUnselectedFillColor ??
theme.canvasColor),
onPressed: () {
final _attribute = _selectedAttribute == attribute
? Attribute.header
: attribute;
widget.controller.formatSelection(_attribute);
widget.afterButtonPressed?.call();
},
child: Text(
_valueToText[attribute] ?? '',
style: style.copyWith(
color: isSelected
? (widget.iconTheme?.iconSelectedColor ??
theme.primaryIconTheme.color)
: (widget.iconTheme?.iconUnselectedColor ??
theme.iconTheme.color),
),
),
),
),

26
lib/src/widgets/toolbar/toggle_check_list_button.dart
Unescape View File

@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import '../../models/documents/attribute.dart';
import '../../models/documents/style.dart';
import '../../models/themes/quill_icon_theme.dart';
import '../../utils/widgets.dart';
import '../controller.dart';
import '../toolbar.dart';
@ -16,6 +17,7 @@ class ToggleCheckListButton extends StatefulWidget {
this.childBuilder = defaultToggleStyleButtonBuilder,
this.iconTheme,
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -32,6 +34,7 @@ class ToggleCheckListButton extends StatefulWidget {
final QuillIconTheme? iconTheme;
final VoidCallback? afterButtonPressed;
final String? tooltip;
@override
_ToggleCheckListButtonState createState() => _ToggleCheckListButtonState();
@ -91,16 +94,19 @@ class _ToggleCheckListButtonState extends State<ToggleCheckListButton> {
@override
Widget build(BuildContext context) {
return widget.childBuilder(
context,
Attribute.unchecked,
widget.icon,
widget.fillColor,
_isToggled,
_toggleAttribute,
widget.afterButtonPressed,
widget.iconSize,
widget.iconTheme,
return UtilityWidgets.maybeTooltip(
message: widget.tooltip,
child: widget.childBuilder(
context,
Attribute.unchecked,
widget.icon,
widget.fillColor,
_isToggled,
_toggleAttribute,
widget.afterButtonPressed,
widget.iconSize,
widget.iconTheme,
),
);
}

26
lib/src/widgets/toolbar/toggle_style_button.dart
Unescape View File

@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import '../../models/documents/attribute.dart';
import '../../models/documents/style.dart';
import '../../models/themes/quill_icon_theme.dart';
import '../../utils/widgets.dart';
import '../controller.dart';
import '../toolbar.dart';
@ -28,6 +29,7 @@ class ToggleStyleButton extends StatefulWidget {
this.childBuilder = defaultToggleStyleButtonBuilder,
this.iconTheme,
this.afterButtonPressed,
this.tooltip,
Key? key,
}) : super(key: key);
@ -46,6 +48,7 @@ class ToggleStyleButton extends StatefulWidget {
final QuillIconTheme? iconTheme;
final VoidCallback? afterButtonPressed;
final String? tooltip;
@override
_ToggleStyleButtonState createState() => _ToggleStyleButtonState();
@ -65,16 +68,19 @@ class _ToggleStyleButtonState extends State<ToggleStyleButton> {
@override
Widget build(BuildContext context) {
return widget.childBuilder(
context,
widget.attribute,
widget.icon,
widget.fillColor,
_isToggled,
_toggleAttribute,
widget.afterButtonPressed,
widget.iconSize,
widget.iconTheme,
return UtilityWidgets.maybeTooltip(
message: widget.tooltip,
child: widget.childBuilder(
context,
widget.attribute,
widget.icon,
widget.fillColor,
_isToggled,
_toggleAttribute,
widget.afterButtonPressed,
widget.iconSize,
widget.iconTheme,
),
);
}

Write Preview
Loading…
Cancel
Save