Toolbar dividers fixes + Docs updates (#2071)

* Simple toolbar buttons + dividers fixes

* Simple toolbar buttons + dividers fixes

* readme update

* Toolbar buttons fix
pull/2074/head^2^2 v10.1.1
Raman Rasliuk 8 months ago committed by GitHub
parent 8589b856e8
commit e028ccf59e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 5
      README.md
  2. 11
      flutter_quill_extensions/README.md
  3. 494
      lib/src/toolbar/simple_toolbar.dart

@ -94,8 +94,9 @@ dependencies:
```yaml ```yaml
dependencies: dependencies:
flutter_quill: flutter_quill:
git: https://github.com/singerdmx/flutter-quill.git git:
ref: v<latest-version-here> url: https://github.com/singerdmx/flutter-quill.git
ref: v<latest-version-here>
``` ```
> [!TIP] > [!TIP]

@ -50,9 +50,10 @@ dependencies:
```yaml ```yaml
dependencies: dependencies:
flutter_quill_extensions: flutter_quill_extensions:
git: https://github.com/singerdmx/flutter-quill.git git:
path: flutter_quill_extensions url: https://github.com/singerdmx/flutter-quill.git
ref: v<latest-version-here> ref: v<latest-version-here>
path: flutter_quill_extensions
``` ```
## 🛠 Platform Specific Configurations ## 🛠 Platform Specific Configurations
@ -103,8 +104,8 @@ Set the `embedBuilders` and `embedToolbar` params in configurations of `QuillEdi
**Quill Toolbar**: **Quill Toolbar**:
```dart ```dart
QuillToolbar( QuillToolbar.simple(
configurations: QuillToolbarConfigurations( configurations: QuillSimpleToolbarConfigurations(
embedButtons: FlutterQuillEmbeds.toolbarButtons(), embedButtons: FlutterQuillEmbeds.toolbarButtons(),
), ),
), ),

@ -23,34 +23,6 @@ class QuillSimpleToolbar extends StatelessWidget
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theEmbedButtons = configurations.embedButtons; final theEmbedButtons = configurations.embedButtons;
final isButtonGroupShown = [
configurations.showFontFamily ||
configurations.showFontSize ||
configurations.showBoldButton ||
configurations.showItalicButton ||
configurations.showSmallButton ||
configurations.showUnderLineButton ||
configurations.showLineHeightButton ||
configurations.showStrikeThrough ||
configurations.showInlineCode ||
configurations.showColorButton ||
configurations.showBackgroundColorButton ||
configurations.showClearFormat ||
theEmbedButtons?.isNotEmpty == true,
configurations.showLeftAlignment ||
configurations.showCenterAlignment ||
configurations.showRightAlignment ||
configurations.showJustifyAlignment ||
configurations.showDirection,
configurations.showHeaderStyle,
configurations.showListNumbers ||
configurations.showListBullets ||
configurations.showListCheck ||
configurations.showCodeBlock,
configurations.showQuote || configurations.showIndent,
configurations.showLink || configurations.showSearchButton
];
List<Widget> childrenBuilder(BuildContext context) { List<Widget> childrenBuilder(BuildContext context) {
final toolbarConfigurations = final toolbarConfigurations =
context.requireQuillSimpleToolbarConfigurations; context.requireQuillSimpleToolbarConfigurations;
@ -68,251 +40,232 @@ class QuillSimpleToolbar extends StatelessWidget
space: configurations.sectionDividerSpace, space: configurations.sectionDividerSpace,
)); ));
return [ final groups = [
if (configurations.showUndo) [
QuillToolbarHistoryButton( if (configurations.showUndo)
isUndo: true, QuillToolbarHistoryButton(
options: toolbarConfigurations.buttonOptions.undoHistory, isUndo: true,
controller: globalController, options: toolbarConfigurations.buttonOptions.undoHistory,
), controller: globalController,
if (configurations.showRedo) ),
QuillToolbarHistoryButton( if (configurations.showRedo)
isUndo: false, QuillToolbarHistoryButton(
options: toolbarConfigurations.buttonOptions.redoHistory, isUndo: false,
controller: globalController, options: toolbarConfigurations.buttonOptions.redoHistory,
), controller: globalController,
if (configurations.showFontFamily) ),
QuillToolbarFontFamilyButton( if (configurations.showFontFamily)
options: toolbarConfigurations.buttonOptions.fontFamily, QuillToolbarFontFamilyButton(
controller: globalController, options: toolbarConfigurations.buttonOptions.fontFamily,
), controller: globalController,
if (configurations.showFontSize) ),
QuillToolbarFontSizeButton( if (configurations.showFontSize)
options: toolbarConfigurations.buttonOptions.fontSize, QuillToolbarFontSizeButton(
controller: globalController, options: toolbarConfigurations.buttonOptions.fontSize,
), controller: globalController,
if (configurations.showBoldButton) ),
QuillToolbarToggleStyleButton( if (configurations.showBoldButton)
attribute: Attribute.bold, QuillToolbarToggleStyleButton(
options: toolbarConfigurations.buttonOptions.bold, attribute: Attribute.bold,
controller: globalController, options: toolbarConfigurations.buttonOptions.bold,
), controller: globalController,
if (configurations.showItalicButton)
QuillToolbarToggleStyleButton(
attribute: Attribute.italic,
options: toolbarConfigurations.buttonOptions.italic,
controller: globalController,
),
if (configurations.showUnderLineButton)
QuillToolbarToggleStyleButton(
attribute: Attribute.underline,
options: toolbarConfigurations.buttonOptions.underLine,
controller: globalController,
),
if (configurations.showStrikeThrough)
QuillToolbarToggleStyleButton(
attribute: Attribute.strikeThrough,
options: toolbarConfigurations.buttonOptions.strikeThrough,
controller: globalController,
),
if (configurations.showInlineCode)
QuillToolbarToggleStyleButton(
attribute: Attribute.inlineCode,
options: toolbarConfigurations.buttonOptions.inlineCode,
controller: globalController,
),
if (configurations.showSubscript)
QuillToolbarToggleStyleButton(
attribute: Attribute.subscript,
options: toolbarConfigurations.buttonOptions.subscript,
controller: globalController,
),
if (configurations.showSuperscript)
QuillToolbarToggleStyleButton(
attribute: Attribute.superscript,
options: toolbarConfigurations.buttonOptions.superscript,
controller: globalController,
),
if (configurations.showSmallButton)
QuillToolbarToggleStyleButton(
attribute: Attribute.small,
options: toolbarConfigurations.buttonOptions.small,
controller: globalController,
),
if (configurations.showColorButton)
QuillToolbarColorButton(
controller: globalController,
isBackground: false,
options: toolbarConfigurations.buttonOptions.color,
),
if (configurations.showBackgroundColorButton)
QuillToolbarColorButton(
options: toolbarConfigurations.buttonOptions.backgroundColor,
controller: globalController,
isBackground: true,
),
if (configurations.showClearFormat)
QuillToolbarClearFormatButton(
controller: globalController,
options: toolbarConfigurations.buttonOptions.clearFormat,
),
if (theEmbedButtons != null)
for (final builder in theEmbedButtons)
builder(
globalController,
globalIconSize ?? kDefaultIconSize,
context.quillToolbarBaseButtonOptions?.iconTheme,
configurations.dialogTheme),
if (configurations.showDividers &&
isButtonGroupShown[0] &&
(isButtonGroupShown[1] ||
isButtonGroupShown[2] ||
isButtonGroupShown[3] ||
isButtonGroupShown[4] ||
isButtonGroupShown[5]))
divider,
if (configurations.showAlignmentButtons)
QuillToolbarSelectAlignmentButtons(
controller: globalController,
options: toolbarConfigurations.buttonOptions.selectAlignmentButtons
.copyWith(
showLeftAlignment: configurations.showLeftAlignment,
showCenterAlignment: configurations.showCenterAlignment,
showRightAlignment: configurations.showRightAlignment,
showJustifyAlignment: configurations.showJustifyAlignment,
), ),
), if (configurations.showItalicButton)
if (configurations.showDirection) QuillToolbarToggleStyleButton(
QuillToolbarToggleStyleButton( attribute: Attribute.italic,
attribute: Attribute.rtl, options: toolbarConfigurations.buttonOptions.italic,
options: toolbarConfigurations.buttonOptions.direction, controller: globalController,
controller: globalController, ),
), if (configurations.showUnderLineButton)
if (configurations.showDividers && QuillToolbarToggleStyleButton(
isButtonGroupShown[1] && attribute: Attribute.underline,
(isButtonGroupShown[2] || options: toolbarConfigurations.buttonOptions.underLine,
isButtonGroupShown[3] || controller: globalController,
isButtonGroupShown[4] || ),
isButtonGroupShown[5])) if (configurations.showStrikeThrough)
divider, QuillToolbarToggleStyleButton(
if (configurations.showLineHeightButton) attribute: Attribute.strikeThrough,
QuillToolbarSelectLineHeightStyleDropdownButton( options: toolbarConfigurations.buttonOptions.strikeThrough,
controller: globalController, controller: globalController,
options: toolbarConfigurations ),
.buttonOptions.selectLineHeightStyleDropdownButton, if (configurations.showInlineCode)
), QuillToolbarToggleStyleButton(
if (configurations.showHeaderStyle) ...[ attribute: Attribute.inlineCode,
if (configurations.headerStyleType.isOriginal) options: toolbarConfigurations.buttonOptions.inlineCode,
QuillToolbarSelectHeaderStyleDropdownButton( controller: globalController,
),
if (configurations.showSubscript)
QuillToolbarToggleStyleButton(
attribute: Attribute.subscript,
options: toolbarConfigurations.buttonOptions.subscript,
controller: globalController,
),
if (configurations.showSuperscript)
QuillToolbarToggleStyleButton(
attribute: Attribute.superscript,
options: toolbarConfigurations.buttonOptions.superscript,
controller: globalController,
),
if (configurations.showSmallButton)
QuillToolbarToggleStyleButton(
attribute: Attribute.small,
options: toolbarConfigurations.buttonOptions.small,
controller: globalController,
),
if (configurations.showColorButton)
QuillToolbarColorButton(
controller: globalController,
isBackground: false,
options: toolbarConfigurations.buttonOptions.color,
),
if (configurations.showBackgroundColorButton)
QuillToolbarColorButton(
options: toolbarConfigurations.buttonOptions.backgroundColor,
controller: globalController,
isBackground: true,
),
if (configurations.showClearFormat)
QuillToolbarClearFormatButton(
controller: globalController,
options: toolbarConfigurations.buttonOptions.clearFormat,
),
if (theEmbedButtons != null)
for (final builder in theEmbedButtons)
builder(
globalController,
globalIconSize ?? kDefaultIconSize,
context.quillToolbarBaseButtonOptions?.iconTheme,
configurations.dialogTheme),
],
[
if (configurations.showAlignmentButtons)
QuillToolbarSelectAlignmentButtons(
controller: globalController, controller: globalController,
options: toolbarConfigurations options: toolbarConfigurations
.buttonOptions.selectHeaderStyleDropdownButton, .buttonOptions.selectAlignmentButtons
) .copyWith(
else showLeftAlignment: configurations.showLeftAlignment,
QuillToolbarSelectHeaderStyleButtons( showCenterAlignment: configurations.showCenterAlignment,
showRightAlignment: configurations.showRightAlignment,
showJustifyAlignment: configurations.showJustifyAlignment,
),
),
if (configurations.showDirection)
QuillToolbarToggleStyleButton(
attribute: Attribute.rtl,
options: toolbarConfigurations.buttonOptions.direction,
controller: globalController, controller: globalController,
options:
toolbarConfigurations.buttonOptions.selectHeaderStyleButtons,
), ),
], ],
if (configurations.showDividers && [
configurations.showHeaderStyle && if (configurations.showLineHeightButton)
isButtonGroupShown[2] && QuillToolbarSelectLineHeightStyleDropdownButton(
(isButtonGroupShown[3] || controller: globalController,
isButtonGroupShown[4] || options: toolbarConfigurations
isButtonGroupShown[5])) .buttonOptions.selectLineHeightStyleDropdownButton,
divider, ),
if (configurations.showListNumbers) if (configurations.showHeaderStyle) ...[
QuillToolbarToggleStyleButton( if (configurations.headerStyleType.isOriginal)
attribute: Attribute.ol, QuillToolbarSelectHeaderStyleDropdownButton(
options: toolbarConfigurations.buttonOptions.listNumbers, controller: globalController,
controller: globalController, options: toolbarConfigurations
), .buttonOptions.selectHeaderStyleDropdownButton,
if (configurations.showListBullets) )
QuillToolbarToggleStyleButton( else
attribute: Attribute.ul, QuillToolbarSelectHeaderStyleButtons(
options: toolbarConfigurations.buttonOptions.listBullets, controller: globalController,
controller: globalController, options: toolbarConfigurations
), .buttonOptions.selectHeaderStyleButtons,
if (configurations.showListCheck) ),
QuillToolbarToggleCheckListButton( ],
options: toolbarConfigurations.buttonOptions.toggleCheckList, ],
controller: globalController, [
), if (configurations.showListNumbers)
if (configurations.showCodeBlock) QuillToolbarToggleStyleButton(
QuillToolbarToggleStyleButton( attribute: Attribute.ol,
attribute: Attribute.codeBlock, options: toolbarConfigurations.buttonOptions.listNumbers,
options: toolbarConfigurations.buttonOptions.codeBlock, controller: globalController,
controller: globalController, ),
), if (configurations.showListBullets)
if (configurations.showDividers && QuillToolbarToggleStyleButton(
isButtonGroupShown[3] && attribute: Attribute.ul,
(isButtonGroupShown[4] || isButtonGroupShown[5])) ...[ options: toolbarConfigurations.buttonOptions.listBullets,
divider, controller: globalController,
),
if (configurations.showListCheck)
QuillToolbarToggleCheckListButton(
options: toolbarConfigurations.buttonOptions.toggleCheckList,
controller: globalController,
),
if (configurations.showCodeBlock)
QuillToolbarToggleStyleButton(
attribute: Attribute.codeBlock,
options: toolbarConfigurations.buttonOptions.codeBlock,
controller: globalController,
),
],
[
if (configurations.showQuote)
QuillToolbarToggleStyleButton(
options: toolbarConfigurations.buttonOptions.quote,
controller: globalController,
attribute: Attribute.blockQuote,
),
if (configurations.showIndent)
QuillToolbarIndentButton(
controller: globalController,
isIncrease: true,
options: toolbarConfigurations.buttonOptions.indentIncrease,
),
if (configurations.showIndent)
QuillToolbarIndentButton(
controller: globalController,
isIncrease: false,
options: toolbarConfigurations.buttonOptions.indentDecrease,
),
], ],
if (configurations.showQuote) [
QuillToolbarToggleStyleButton( if (configurations.showLink)
options: toolbarConfigurations.buttonOptions.quote, toolbarConfigurations.linkStyleType.isOriginal
controller: globalController, ? QuillToolbarLinkStyleButton(
attribute: Attribute.blockQuote, controller: globalController,
), options: toolbarConfigurations.buttonOptions.linkStyle,
if (configurations.showIndent) )
QuillToolbarIndentButton( : QuillToolbarLinkStyleButton2(
controller: globalController, controller: globalController,
isIncrease: true, options: toolbarConfigurations.buttonOptions.linkStyle2,
options: toolbarConfigurations.buttonOptions.indentIncrease, ),
), if (configurations.showSearchButton)
if (configurations.showIndent) switch (configurations.searchButtonType) {
QuillToolbarIndentButton( SearchButtonType.legacy => QuillToolbarLegacySearchButton(
controller: globalController,
isIncrease: false,
options: toolbarConfigurations.buttonOptions.indentDecrease,
),
if (configurations.showDividers &&
isButtonGroupShown[4] &&
isButtonGroupShown[5])
divider,
if (configurations.showLink)
toolbarConfigurations.linkStyleType.isOriginal
? QuillToolbarLinkStyleButton(
controller: globalController, controller: globalController,
options: toolbarConfigurations.buttonOptions.linkStyle, options: toolbarConfigurations.buttonOptions.search,
) ),
: QuillToolbarLinkStyleButton2( SearchButtonType.modern => QuillToolbarSearchButton(
controller: globalController, controller: globalController,
options: toolbarConfigurations.buttonOptions.linkStyle2, options: toolbarConfigurations.buttonOptions.search,
), ),
if (configurations.showSearchButton) },
switch (configurations.searchButtonType) { if (configurations.showClipboardCut)
SearchButtonType.legacy => QuillToolbarLegacySearchButton( QuillToolbarClipboardButton(
controller: globalController, options: toolbarConfigurations.buttonOptions.clipboardCut,
options: toolbarConfigurations.buttonOptions.search, controller: globalController,
), clipboardAction: ClipboardAction.cut,
SearchButtonType.modern => QuillToolbarSearchButton( ),
controller: globalController, if (configurations.showClipboardCopy)
options: toolbarConfigurations.buttonOptions.search, QuillToolbarClipboardButton(
), options: toolbarConfigurations.buttonOptions.clipboardCopy,
}, controller: globalController,
if (configurations.showClipboardCut) clipboardAction: ClipboardAction.copy,
QuillToolbarClipboardButton( ),
options: toolbarConfigurations.buttonOptions.clipboardCut, if (configurations.showClipboardPaste)
controller: globalController, QuillToolbarClipboardButton(
clipboardAction: ClipboardAction.cut, options: toolbarConfigurations.buttonOptions.clipboardPaste,
), controller: globalController,
if (configurations.showClipboardCopy) clipboardAction: ClipboardAction.paste,
QuillToolbarClipboardButton( ),
options: toolbarConfigurations.buttonOptions.clipboardCopy, ],
controller: globalController, [
clipboardAction: ClipboardAction.copy,
),
if (configurations.showClipboardPaste)
QuillToolbarClipboardButton(
options: toolbarConfigurations.buttonOptions.clipboardPaste,
controller: globalController,
clipboardAction: ClipboardAction.paste,
),
if (configurations.customButtons.isNotEmpty) ...[
if (configurations.showDividers) divider,
for (final customButton in configurations.customButtons) for (final customButton in configurations.customButtons)
QuillToolbarCustomButton( QuillToolbarCustomButton(
options: customButton, options: customButton,
@ -320,6 +273,21 @@ class QuillSimpleToolbar extends StatelessWidget
), ),
], ],
]; ];
final buttonsAll = <Widget>[];
for (var i = 0; i < groups.length; i++) {
final buttons = groups[i];
if (buttons.isNotEmpty) {
if (buttonsAll.isNotEmpty) {
buttonsAll.add(divider);
}
buttonsAll.addAll(buttons);
}
}
return buttonsAll;
} }
return QuillSimpleToolbarProvider( return QuillSimpleToolbarProvider(

Loading…
Cancel
Save