diff --git a/lib/components/toolbar/color_bar.dart b/lib/components/toolbar/color_bar.dart index cccc1bb1aa..d6144b774e 100644 --- a/lib/components/toolbar/color_bar.dart +++ b/lib/components/toolbar/color_bar.dart @@ -4,6 +4,7 @@ import 'package:flutter_colorpicker/flutter_colorpicker.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:saber/components/theming/adaptive_alert_dialog.dart'; import 'package:saber/components/toolbar/color_option.dart'; +import 'package:saber/components/toolbar/toolbar_button.dart'; import 'package:saber/data/extensions/color_extensions.dart'; import 'package:saber/data/prefs.dart'; import 'package:saber/i18n/strings.g.dart'; @@ -17,12 +18,14 @@ class ColorBar extends StatefulWidget { required this.setColor, required this.currentColor, required this.invert, + required this.toolbarSize, }); final Axis axis; final ValueChanged setColor; final Color? currentColor; final bool invert; + final ToolbarSize toolbarSize; // size of toolbar button static List get colorPresets => Prefs.preferGreyscale.value ? greyScaleColorOptions : normalColorOptions; @@ -177,14 +180,16 @@ class _ColorBarState extends State { final children = [ // pinned colors if (Prefs.pinnedColors.value.isNotEmpty) ...[ - const ColorOptionSeparatorIcon( + ColorOptionSeparatorIcon( icon: Icons.pin_drop, + size: widget.toolbarSize.buttonSize, ), for (String colorString in Prefs.pinnedColors.value) ColorOption( isSelected: widget.currentColor?.withAlpha(255).value == int.parse(colorString), enabled: widget.currentColor != null, + diameter: widget.toolbarSize.colorOptionDiameter, onTap: () => widget.setColor(Color(int.parse(colorString))), onLongPress: () => setState(() => ColorBar.toggleColorPinned(colorString)), @@ -203,8 +208,9 @@ class _ColorBarState extends State { ), ], - const ColorOptionSeparatorIcon( + ColorOptionSeparatorIcon( icon: Icons.history, + size: widget.toolbarSize.buttonSize, ), // recent colors @@ -213,6 +219,7 @@ class _ColorBarState extends State { isSelected: widget.currentColor?.withAlpha(255).value == int.parse(colorString), enabled: widget.currentColor != null, + diameter: widget.toolbarSize.colorOptionDiameter, onTap: () => widget.setColor(Color(int.parse(colorString))), onLongPress: () => setState(() => ColorBar.toggleColorPinned(colorString)), @@ -237,6 +244,7 @@ class _ColorBarState extends State { ColorOption( isSelected: false, enabled: widget.currentColor != null, + diameter: widget.toolbarSize.colorOptionDiameter, onTap: null, tooltip: null, child: DecoratedBox( @@ -251,8 +259,9 @@ class _ColorBarState extends State { ), ), - const ColorOptionSeparatorIcon( + ColorOptionSeparatorIcon( icon: Icons.palette, + size: widget.toolbarSize.buttonSize, ), // custom color @@ -260,16 +269,20 @@ class _ColorBarState extends State { isSelected: widget.currentColor?.withAlpha(255).value == pickedColor.value, enabled: true, + diameter: widget.toolbarSize.colorOptionDiameter, onTap: () => openColorPicker(context), tooltip: t.editor.colors.colorPicker, - child: const DecoratedBox( - decoration: BoxDecoration( + child: DecoratedBox( + decoration: const BoxDecoration( color: Colors.transparent, shape: BoxShape.circle, ), - child: Center(child: FaIcon(FontAwesomeIcons.droplet, size: 16)), + child: Center(child: FaIcon(FontAwesomeIcons.droplet, + size: widget.toolbarSize.buttonSize, + ) + ), + ), ), - ), // color presets for (NamedColor namedColor in ColorBar.colorPresets) @@ -277,6 +290,7 @@ class _ColorBarState extends State { isSelected: widget.currentColor?.withAlpha(255).value == namedColor.color.value, enabled: widget.currentColor != null, + diameter: widget.toolbarSize.colorOptionDiameter, onTap: () => widget.setColor(namedColor.color), tooltip: namedColor.name, child: DecoratedBox( @@ -294,7 +308,7 @@ class _ColorBarState extends State { return Center( child: Padding( - padding: const EdgeInsets.all(8), + padding: EdgeInsets.all(widget.toolbarSize.padding), child: SingleChildScrollView( scrollDirection: widget.axis, child: widget.axis == Axis.horizontal diff --git a/lib/components/toolbar/color_option.dart b/lib/components/toolbar/color_option.dart index a78e633114..ac1f74d8c6 100644 --- a/lib/components/toolbar/color_option.dart +++ b/lib/components/toolbar/color_option.dart @@ -9,6 +9,7 @@ class ColorOption extends StatelessWidget { this.onLongPress, required this.tooltip, required this.child, + required this.diameter, }); final bool isSelected; @@ -18,7 +19,7 @@ class ColorOption extends StatelessWidget { final String? tooltip; final Widget child; - static const double diameter = 25; + final double diameter; @override Widget build(BuildContext context) { @@ -61,9 +62,11 @@ class ColorOptionSeparatorIcon extends StatelessWidget { const ColorOptionSeparatorIcon({ super.key, required this.icon, + required this.size, }); final IconData icon; + final double size; @override Widget build(BuildContext context) { @@ -75,7 +78,7 @@ class ColorOptionSeparatorIcon extends StatelessWidget { ), child: Icon( icon, - size: 16, + size: size, color: Color.lerp( colorScheme.onSurface, colorScheme.primary, diff --git a/lib/components/toolbar/pen_modal.dart b/lib/components/toolbar/pen_modal.dart index b80be71a38..92505afecf 100644 --- a/lib/components/toolbar/pen_modal.dart +++ b/lib/components/toolbar/pen_modal.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:saber/components/toolbar/size_picker.dart'; +import 'package:saber/components/toolbar/toolbar_button.dart'; import 'package:saber/data/tools/_tool.dart'; import 'package:saber/data/tools/highlighter.dart'; import 'package:saber/data/tools/pen.dart'; @@ -14,11 +15,14 @@ class PenModal extends StatefulWidget { super.key, required this.getTool, required this.setTool, + required this.toolbarSize, }); final Tool Function() getTool; final void Function(Pen) setTool; + final ToolbarSize toolbarSize; + @override State createState() => _PenModalState(); } @@ -39,6 +43,7 @@ class _PenModalState extends State { children: [ SizePicker( pen: currentPen, + toolbarSize: widget.toolbarSize, ), if (currentPen is! Highlighter && currentPen is! Pencil) ...[ const SizedBox(width: 8), @@ -58,8 +63,8 @@ class _PenModalState extends State { tooltip: t.editor.pens.fountainPen, icon: SvgPicture.asset( 'assets/images/scribble_fountain.svg', - width: 32, - height: 32 / 508 * 374, + width: widget.toolbarSize.penModalSize, + height: widget.toolbarSize.penModalSize / 508 * 374, theme: SvgTheme( currentColor: Pen.currentPen.icon == Pen.fountainPenIcon ? Theme.of(context).colorScheme.secondary @@ -83,8 +88,8 @@ class _PenModalState extends State { tooltip: t.editor.pens.ballpointPen, icon: SvgPicture.asset( 'assets/images/scribble_ballpoint.svg', - width: 32, - height: 32 / 508 * 374, + width: widget.toolbarSize.penModalSize, + height: widget.toolbarSize.penModalSize / 508 * 374, theme: SvgTheme( currentColor: Pen.currentPen.icon == Pen.ballpointPenIcon ? Theme.of(context).colorScheme.secondary @@ -96,6 +101,7 @@ class _PenModalState extends State { onPressed: () => setState(() { widget.setTool(ShapePen()); }), + iconSize: widget.toolbarSize.penModalSize, style: TextButton.styleFrom( foregroundColor: Pen.currentPen.icon == ShapePen.shapePenIcon ? Theme.of(context).colorScheme.secondary diff --git a/lib/components/toolbar/size_picker.dart b/lib/components/toolbar/size_picker.dart index 61f64872da..d6ff0484b8 100644 --- a/lib/components/toolbar/size_picker.dart +++ b/lib/components/toolbar/size_picker.dart @@ -1,5 +1,6 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; +import 'package:saber/components/toolbar/toolbar_button.dart'; import 'package:saber/data/tools/pen.dart'; import 'package:saber/i18n/strings.g.dart'; @@ -7,9 +8,11 @@ class SizePicker extends StatefulWidget { const SizePicker({ super.key, required this.pen, + required this.toolbarSize, }); final Pen pen; + final ToolbarSize toolbarSize; @override State createState() => _SizePickerState(); @@ -37,19 +40,20 @@ class _SizePickerState extends State { t.editor.penOptions.size, style: TextStyle( color: colorScheme.onSurface.withOpacity(0.8), - fontSize: 10, + fontSize: widget.toolbarSize.sizePickerFontSize, height: 1, ), ), Text(_prettyNum(widget.pen.options.size)), ], ), - const SizedBox(width: 8), + SizedBox(width: widget.toolbarSize.padding), Padding( - padding: const EdgeInsets.symmetric(vertical: 8), + padding: EdgeInsets.symmetric(vertical: widget.toolbarSize.padding), child: _SizeSlider( pen: widget.pen, setState: setState, + toolbarSize: widget.toolbarSize, ), ), ], @@ -63,15 +67,15 @@ class _SizeSlider extends StatelessWidget { super.key, required this.pen, required this.setState, + required this.toolbarSize, }); final Pen pen; + final ToolbarSize toolbarSize; final void Function(void Function()) setState; - static const Size _size = Size(150, 25); - void onDrag(double localDx) { - final relX = clampDouble(localDx / _size.width, 0, 1); + final relX = clampDouble(localDx / toolbarSize.sizePickerSize.width, 0, 1); final stepsFromMin = (relX * pen.sizeStepsBetweenMinAndMax).round(); final newSize = pen.sizeMin + stepsFromMin * pen.sizeStep; if (newSize == pen.options.size) return; @@ -87,7 +91,7 @@ class _SizeSlider extends StatelessWidget { onHorizontalDragStart: (details) => onDrag(details.localPosition.dx), onHorizontalDragUpdate: (details) => onDrag(details.localPosition.dx), child: CustomPaint( - size: _size, + size: toolbarSize.sizePickerSize, painter: _SizeSliderPainter( minSize: pen.sizeMin, maxSize: pen.sizeMax, diff --git a/lib/components/toolbar/toolbar.dart b/lib/components/toolbar/toolbar.dart index d7179df019..c6c27bd0e2 100644 --- a/lib/components/toolbar/toolbar.dart +++ b/lib/components/toolbar/toolbar.dart @@ -25,7 +25,7 @@ import 'package:saber/data/tools/select.dart'; import 'package:saber/i18n/strings.g.dart'; class Toolbar extends StatefulWidget { - const Toolbar({ +const Toolbar({ super.key, required this.readOnly, required this.setTool, @@ -46,6 +46,7 @@ class Toolbar extends StatefulWidget { required this.exportAsSba, required this.exportAsPdf, required this.exportAsPng, + required this.toolbarSize, }); final bool readOnly; @@ -76,13 +77,10 @@ class Toolbar extends StatefulWidget { final Future Function(BuildContext)? exportAsPdf; final Future Function(BuildContext)? exportAsPng; + final ToolbarSize toolbarSize; // size of toolbar button + @override State createState() => _ToolbarState(); - - static const EdgeInsets _buttonPaddingHorizontal = - EdgeInsets.symmetric(horizontal: 6); - static const EdgeInsets _buttonPaddingVertical = - EdgeInsets.symmetric(vertical: 6); } class _ToolbarState extends State { @@ -168,8 +166,8 @@ class _ToolbarState extends State { Prefs.editorToolbarAlignment.value == AxisDirection.right; final buttonPadding = isToolbarVertical - ? Toolbar._buttonPaddingVertical - : Toolbar._buttonPaddingHorizontal; + ? EdgeInsets.symmetric(vertical: widget.toolbarSize.padding) + : EdgeInsets.symmetric(horizontal: widget.toolbarSize.padding); final currentColor = switch (widget.currentTool) { Pen pen => pen.color, @@ -219,14 +217,17 @@ class _ToolbarState extends State { ToolOptions.pen => PenModal( getTool: () => Pen.currentPen, setTool: widget.setTool, + toolbarSize: widget.toolbarSize, ), ToolOptions.highlighter => PenModal( getTool: () => Highlighter.currentHighlighter, setTool: widget.setTool, + toolbarSize: widget.toolbarSize, ), ToolOptions.pencil => PenModal( getTool: () => Pencil.currentPencil, setTool: widget.setTool, + toolbarSize: widget.toolbarSize, ), ToolOptions.select => SelectionBar( duplicateSelection: widget.duplicateSelection, @@ -253,6 +254,7 @@ class _ToolbarState extends State { setColor: widget.setColor, currentColor: currentColor, invert: invert, + toolbarSize: widget.toolbarSize, ), ), ValueListenableBuilder( @@ -297,6 +299,7 @@ class _ToolbarState extends State { buttonOptions: QuillSimpleToolbarButtonOptions( base: QuillToolbarBaseButtonOptions( iconTheme: iconTheme, + iconSize: widget.toolbarSize.buttonSize, // set toolbar button size ), ), showUndo: false, @@ -310,12 +313,12 @@ class _ToolbarState extends State { ); }), Center( - child: Padding( - padding: const EdgeInsets.all(8), + child: Padding(// distance between toolbars + padding: EdgeInsets.all(widget.toolbarSize.padding), child: Wrap( direction: isToolbarVertical ? Axis.vertical : Axis.horizontal, alignment: WrapAlignment.center, - runSpacing: 8, + runSpacing: widget.toolbarSize.padding, // gap between lines children: [ ToolbarIconButton( tooltip: Pen.currentPen.name, @@ -334,7 +337,7 @@ class _ToolbarState extends State { } }, padding: buttonPadding, - child: FaIcon(Pen.currentPen.icon, size: 16), + child: FaIcon(Pen.currentPen.icon), ), ToolbarIconButton( tooltip: t.editor.pens.pencil, @@ -353,7 +356,7 @@ class _ToolbarState extends State { } }, padding: buttonPadding, - child: const FaIcon(Pencil.pencilIcon, size: 16), + child: const FaIcon(Pencil.pencilIcon), ), ToolbarIconButton( tooltip: t.editor.pens.highlighter, @@ -372,7 +375,7 @@ class _ToolbarState extends State { } }, padding: buttonPadding, - child: const FaIcon(Highlighter.highlighterIcon, size: 16), + child: const FaIcon(Highlighter.highlighterIcon), ), ValueListenableBuilder( valueListenable: showColorOptions, @@ -434,7 +437,7 @@ class _ToolbarState extends State { }, padding: buttonPadding, // TODO: use [Icons.stylusLaserPointer] when it's available - child: const FaIcon(FontAwesomeIcons.circleDot, size: 16), + child: const FaIcon(FontAwesomeIcons.circleDot), ), ToolbarIconButton( tooltip: t.editor.toolbar.toggleEraser, @@ -442,7 +445,7 @@ class _ToolbarState extends State { enabled: !widget.readOnly, onPressed: toggleEraser, padding: buttonPadding, - child: const FaIcon(FontAwesomeIcons.eraser, size: 16), + child: const FaIcon(FontAwesomeIcons.eraser), ), ToolbarIconButton( tooltip: t.editor.toolbar.photo, diff --git a/lib/components/toolbar/toolbar_button.dart b/lib/components/toolbar/toolbar_button.dart index 0e7a8dafd2..504c448bb9 100644 --- a/lib/components/toolbar/toolbar_button.dart +++ b/lib/components/toolbar/toolbar_button.dart @@ -1,4 +1,30 @@ import 'package:flutter/material.dart'; +import 'package:saber/data/prefs.dart'; + +/// toolbar buttons sizes +enum ToolbarSize{ + small(buttonSize: 12, padding: 2, colorOptionDiameter: 18, penModalSize: 22, sizePickerFontSize: 8, sizePickerSize: Size(150,18)), + normal(buttonSize: 18, padding: 6, colorOptionDiameter: 28, penModalSize: 32, sizePickerFontSize: 10, sizePickerSize: Size(150,28)), + big(buttonSize: 22, padding: 8, colorOptionDiameter: 30, penModalSize: 40, sizePickerFontSize: 14, sizePickerSize: Size(150,30)); + + const ToolbarSize({ + required this.buttonSize, + required this.padding, + required this.colorOptionDiameter, + required this.penModalSize, + required this.sizePickerFontSize, + required this.sizePickerSize, + } + ); + + final double buttonSize; // size of button + final double padding; // padding between button + final double colorOptionDiameter; // diameter of color option cirle + final double penModalSize; // Size of PenModal icons + final double sizePickerFontSize; //Size of font in pen Size picker + final Size sizePickerSize; // width and height of pen size picker height should be colorOptionDiameter +} + class ToolbarIconButton extends StatelessWidget { const ToolbarIconButton({ @@ -19,6 +45,7 @@ class ToolbarIconButton extends StatelessWidget { final EdgeInsets padding; final Widget child; + @override Widget build(BuildContext context) { var colorScheme = Theme.of(context).colorScheme; @@ -35,11 +62,14 @@ class ToolbarIconButton extends StatelessWidget { disabledColor: colorScheme.onSurface.withOpacity(0.4), onPressed: (enabled) ? onPressed : null, tooltip: tooltip, - iconSize: 20, - splashRadius: 20, + iconSize: Prefs.editorToolbarSize.value.buttonSize, + splashRadius: Prefs.editorToolbarSize.value.buttonSize, visualDensity: VisualDensity.compact, icon: child, ), ); } } + + + diff --git a/lib/data/prefs.dart b/lib/data/prefs.dart index 972db3cd07..4724f47feb 100644 --- a/lib/data/prefs.dart +++ b/lib/data/prefs.dart @@ -10,6 +10,7 @@ import 'package:nextcloud/provisioning_api.dart'; import 'package:perfect_freehand/perfect_freehand.dart'; import 'package:saber/components/canvas/_canvas_background_painter.dart'; import 'package:saber/components/navbar/responsive_navbar.dart'; +import 'package:saber/components/toolbar/toolbar_button.dart'; import 'package:saber/data/flavor_config.dart'; import 'package:saber/data/nextcloud/nextcloud_client_extension.dart'; import 'package:saber/data/tools/_tool.dart'; @@ -70,6 +71,7 @@ abstract class Prefs { static late final PlainPref hyperlegibleFont; static late final PlainPref editorToolbarAlignment; + static late final PlainPref editorToolbarSize; static late final PlainPref editorToolbarShowInFullscreen; static late final PlainPref editorFingerDrawing; static late final PlainPref editorAutoInvert; @@ -174,6 +176,8 @@ abstract class Prefs { editorToolbarAlignment = PlainPref('editorToolbarAlignment', AxisDirection.down); + editorToolbarSize = + PlainPref('editorToolbarSize', ToolbarSize.normal); // normal size editorToolbarShowInFullscreen = PlainPref('editorToolbarShowInFullscreen', true); editorFingerDrawing = PlainPref('editorFingerDrawing', true); @@ -392,6 +396,7 @@ class PlainPref extends IPref { T == ThemeMode || T == TargetPlatform || T == LayoutSize || + T == ToolbarSize || T == ToolId || T == CanvasBackgroundPattern || T == DateTime); @@ -466,6 +471,8 @@ class PlainPref extends IPref { } } else if (T == AxisDirection) { return await _prefs!.setInt(key, (value as AxisDirection).index); + } else if (T == ToolbarSize) { + return await _prefs!.setInt(key, (value as ToolbarSize).index); } else if (T == ThemeMode) { return await _prefs!.setInt(key, (value as ThemeMode).index); } else if (T == TargetPlatform) { @@ -527,6 +534,10 @@ class PlainPref extends IPref { } else if (T == AxisDirection) { final index = _prefs!.getInt(key); return index != null ? AxisDirection.values[index] as T? : null; + } else if (T == ToolbarSize) { + final index = _prefs!.getInt(key); + if (index == null) return null; + return ToolbarSize.values[index] as T?; } else if (T == ThemeMode) { final index = _prefs!.getInt(key); return index != null ? ThemeMode.values[index] as T? : null; diff --git a/lib/i18n/strings.g.dart b/lib/i18n/strings.g.dart index 5a83a501f1..cf53caeff6 100644 --- a/lib/i18n/strings.g.dart +++ b/lib/i18n/strings.g.dart @@ -195,6 +195,7 @@ class _StringsSettingsEn { late final _StringsSettingsPrefDescriptionsEn prefDescriptions = _StringsSettingsPrefDescriptionsEn._(_root); late final _StringsSettingsThemeModesEn themeModes = _StringsSettingsThemeModesEn._(_root); late final _StringsSettingsLayoutSizesEn layoutSizes = _StringsSettingsLayoutSizesEn._(_root); + late final _StringsSettingsEditorToolbarSizesEn editorToolbarSizes = _StringsSettingsEditorToolbarSizesEn._(_root); late final _StringsSettingsAccentColorPickerEn accentColorPicker = _StringsSettingsAccentColorPickerEn._(_root); String get systemLanguage => 'Default'; List get axisDirections => [ @@ -456,6 +457,7 @@ class _StringsSettingsPrefLabelsEn { String get changeAdsConsent => 'Change ads consent'; String get allowInsecureConnections => 'Allow insecure connections'; String get editorToolbarAlignment => 'Toolbar position'; + String get editorToolbarSize => 'Toolbar button size'; String get editorToolbarShowInFullscreen => 'Show the toolbar in fullscreen mode'; String get editorAutoInvert => 'Invert notes in dark mode'; String get preferGreyscale => 'Prefer greyscale colors'; @@ -521,6 +523,19 @@ class _StringsSettingsLayoutSizesEn { String get tablet => 'Tablet'; } +// Path: settings.layoutSizes +class _StringsSettingsEditorToolbarSizesEn { + _StringsSettingsEditorToolbarSizesEn._(this._root); + + final Translations _root; // ignore: unused_field + + // Translations + String get small => 'Small'; + String get normal => 'Normal'; + String get big => 'Big'; +} + + // Path: settings.accentColorPicker class _StringsSettingsAccentColorPickerEn { _StringsSettingsAccentColorPickerEn._(this._root); diff --git a/lib/i18n/strings.i18n.yaml b/lib/i18n/strings.i18n.yaml index 9cc3fd77d5..ff5460d29a 100644 --- a/lib/i18n/strings.i18n.yaml +++ b/lib/i18n/strings.i18n.yaml @@ -76,6 +76,7 @@ settings: changeAdsConsent: Change ads consent allowInsecureConnections: Allow insecure connections editorToolbarAlignment: Toolbar position + editorToolbarSize: Toolbar button size editorToolbarShowInFullscreen: Show the toolbar in fullscreen mode editorAutoInvert: Invert notes in dark mode preferGreyscale: Prefer greyscale colors diff --git a/lib/pages/editor/editor.dart b/lib/pages/editor/editor.dart index 613f30aa36..4b7d9e626d 100644 --- a/lib/pages/editor/editor.dart +++ b/lib/pages/editor/editor.dart @@ -1517,6 +1517,7 @@ class EditorState extends State { exportAsSba: exportAsSba, exportAsPdf: exportAsPdf, exportAsPng: null, + toolbarSize: Prefs.editorToolbarSize.value, ), ), ); diff --git a/lib/pages/home/settings.dart b/lib/pages/home/settings.dart index b70d2bc715..c6db3f3a81 100644 --- a/lib/pages/home/settings.dart +++ b/lib/pages/home/settings.dart @@ -16,6 +16,7 @@ import 'package:saber/components/settings/settings_switch.dart'; import 'package:saber/components/settings/update_manager.dart'; import 'package:saber/components/theming/adaptive_alert_dialog.dart'; import 'package:saber/components/theming/adaptive_toggle_buttons.dart'; +import 'package:saber/components/toolbar/toolbar_button.dart'; import 'package:saber/data/flavor_config.dart'; import 'package:saber/data/locales.dart'; import 'package:saber/data/prefs.dart'; @@ -84,6 +85,12 @@ abstract class _SettingsPrefs { (AxisDirection value) => value.index, (int value) => AxisDirection.values[value], ); + + static final editorToolbarSize = TransformedPref( + Prefs.editorToolbarSize, + (ToolbarSize value) => value.index, + (int value) => ToolbarSize.values[value], + ); } class _SettingsPageState extends State { @@ -380,6 +387,37 @@ class _SettingsPageState extends State { ], afterChange: (_) => setState(() {}), ), + + SettingsSelection( + title: t.settings.prefLabels.editorToolbarSize, + subtitle: switch (Prefs.editorToolbarSize.value) { + ToolbarSize.small => t.settings.editorToolbarSizes.small, + ToolbarSize.normal => t.settings.editorToolbarSizes.normal, + ToolbarSize.big => t.settings.editorToolbarSizes.big, + }, + afterChange: (_) => setState(() {}), + iconBuilder: (i) => switch (ToolbarSize.values[i]) { + ToolbarSize.small => FontAwesomeIcons.pencil, + ToolbarSize.normal => FontAwesomeIcons.pencil, + ToolbarSize.big => FontAwesomeIcons.pencil, + }, + pref: _SettingsPrefs.editorToolbarSize, + optionsWidth: 60, + options: [ + ToggleButtonsOption( + ToolbarSize.small.index, + Icon(FontAwesomeIcons.pencil, size: ToolbarSize.small.buttonSize, + semanticLabel: t.settings.editorToolbarSizes.small)), + ToggleButtonsOption( + ToolbarSize.normal.index, + Icon(FontAwesomeIcons.pencil, size: ToolbarSize.normal.buttonSize, + semanticLabel: t.settings.editorToolbarSizes.normal)), + ToggleButtonsOption( + ToolbarSize.big.index, + Icon(FontAwesomeIcons.pencil, size: ToolbarSize.big.buttonSize, + semanticLabel: t.settings.editorToolbarSizes.big)), + ], + ), SettingsSwitch( title: t.settings.prefLabels.editorToolbarShowInFullscreen, icon: cupertino ? CupertinoIcons.fullscreen : Icons.fullscreen,