From fcb1888abc7b8333ae469663c873f1b87062ce73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Zl=C3=A1mal?= Date: Wed, 28 Feb 2024 06:30:50 +0100 Subject: [PATCH 1/6] Added possibility t ochoose size of toolbar buttons --- lib/components/toolbar/color_bar.dart | 17 ++++++-- lib/components/toolbar/toolbar.dart | 45 ++++++++++++++-------- lib/components/toolbar/toolbar_button.dart | 21 +++++++++- lib/data/prefs.dart | 11 ++++++ lib/i18n/strings.g.dart | 15 ++++++++ lib/pages/editor/editor.dart | 1 + lib/pages/home/settings.dart | 38 ++++++++++++++++++ 7 files changed, 127 insertions(+), 21 deletions(-) diff --git a/lib/components/toolbar/color_bar.dart b/lib/components/toolbar/color_bar.dart index cccc1bb1aa..03b47fba90 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'; @@ -11,18 +12,20 @@ import 'package:saber/i18n/strings.g.dart'; typedef NamedColor = ({String name, Color color}); class ColorBar extends StatefulWidget { - const ColorBar({ + ColorBar({ super.key, required this.axis, 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; @@ -267,7 +270,11 @@ class _ColorBarState extends State { color: Colors.transparent, shape: BoxShape.circle, ), - child: Center(child: FaIcon(FontAwesomeIcons.droplet, size: 16)), + child: Center(child: FaIcon(FontAwesomeIcons.droplet, size: switch (widget.toolbarSize) { + ToolbarSize.small => 12.0, + ToolbarSize.normal => 16.0, + ToolbarSize.big => 22.0, + })), ), ), @@ -294,7 +301,11 @@ class _ColorBarState extends State { return Center( child: Padding( - padding: const EdgeInsets.all(8), + padding: const EdgeInsets.all(switch (widget.toolbarSize) { + ToolbarSize.small => 4.0, + ToolbarSize.normal => 8.0, + ToolbarSize.big => 12.0, + }), child: SingleChildScrollView( scrollDirection: widget.axis, child: widget.axis == Axis.horizontal diff --git a/lib/components/toolbar/toolbar.dart b/lib/components/toolbar/toolbar.dart index d7179df019..aa3ef1d34c 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,16 @@ class _ToolbarState extends State { Prefs.editorToolbarAlignment.value == AxisDirection.right; final buttonPadding = isToolbarVertical - ? Toolbar._buttonPaddingVertical - : Toolbar._buttonPaddingHorizontal; + ? EdgeInsets.symmetric(vertical: switch (widget.toolbarSize) { + ToolbarSize.small => 2.0, + ToolbarSize.normal => 6.0, + ToolbarSize.big => 8.0, + }) + : EdgeInsets.symmetric(horizontal: switch (widget.toolbarSize) { + ToolbarSize.small => 2.0, + ToolbarSize.normal => 6.0, + ToolbarSize.big => 8.0, + }); final currentColor = switch (widget.currentTool) { Pen pen => pen.color, @@ -253,6 +259,7 @@ class _ToolbarState extends State { setColor: widget.setColor, currentColor: currentColor, invert: invert, + toolbarSize: widget.toolbarSize, ), ), ValueListenableBuilder( @@ -310,12 +317,18 @@ class _ToolbarState extends State { ); }), Center( - child: Padding( - padding: const EdgeInsets.all(8), + child: Padding(// distance between toolbars + padding: EdgeInsets.all(switch (widget.toolbarSize) { + ToolbarSize.small => 2, + ToolbarSize.normal => 8, + ToolbarSize.big => 12,}), child: Wrap( direction: isToolbarVertical ? Axis.vertical : Axis.horizontal, alignment: WrapAlignment.center, - runSpacing: 8, + runSpacing: switch (widget.toolbarSize) { // gap between lines + ToolbarSize.small => 2, + ToolbarSize.normal => 8, + ToolbarSize.big => 12,}, children: [ ToolbarIconButton( tooltip: Pen.currentPen.name, @@ -334,7 +347,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 +366,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 +385,7 @@ class _ToolbarState extends State { } }, padding: buttonPadding, - child: const FaIcon(Highlighter.highlighterIcon, size: 16), + child: const FaIcon(Highlighter.highlighterIcon), ), ValueListenableBuilder( valueListenable: showColorOptions, @@ -434,7 +447,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 +455,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..c7089d3ab4 100644 --- a/lib/components/toolbar/toolbar_button.dart +++ b/lib/components/toolbar/toolbar_button.dart @@ -1,4 +1,13 @@ import 'package:flutter/material.dart'; +import 'package:saber/data/prefs.dart'; + + +/// toolbar button size +enum ToolbarSize { + big, + normal, + small, +} class ToolbarIconButton extends StatelessWidget { const ToolbarIconButton({ @@ -19,6 +28,7 @@ class ToolbarIconButton extends StatelessWidget { final EdgeInsets padding; final Widget child; + @override Widget build(BuildContext context) { var colorScheme = Theme.of(context).colorScheme; @@ -35,11 +45,18 @@ class ToolbarIconButton extends StatelessWidget { disabledColor: colorScheme.onSurface.withOpacity(0.4), onPressed: (enabled) ? onPressed : null, tooltip: tooltip, - iconSize: 20, - splashRadius: 20, + iconSize: switch (Prefs.editorToolbarSize.value) { + ToolbarSize.small => 12, + ToolbarSize.normal => 16, + ToolbarSize.big => 22,}, + splashRadius: switch (Prefs.editorToolbarSize.value) { + ToolbarSize.small => 12, + ToolbarSize.normal => 16, + ToolbarSize.big => 22,}, visualDensity: VisualDensity.compact, icon: child, ), ); } } + diff --git a/lib/data/prefs.dart b/lib/data/prefs.dart index 45c0564b9f..7d2bb96152 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'; @@ -69,6 +70,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; @@ -171,6 +173,8 @@ abstract class Prefs { editorToolbarAlignment = PlainPref('editorToolbarAlignment', AxisDirection.down); + editorToolbarSize = + PlainPref('editorToolbarSize', ToolbarSize.normal); // normal size editorToolbarShowInFullscreen = PlainPref('editorToolbarShowInFullscreen', true); editorFingerDrawing = PlainPref('editorFingerDrawing', true); @@ -387,6 +391,7 @@ class PlainPref extends IPref { T == ThemeMode || T == TargetPlatform || T == LayoutSize || + T == ToolbarSize || T == ToolId || T == CanvasBackgroundPattern || T == DateTime); @@ -461,6 +466,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) { @@ -522,6 +529,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 1f67eb824a..b053d4e2bb 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'; @@ -519,6 +521,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/pages/editor/editor.dart b/lib/pages/editor/editor.dart index faca2a3ece..9d563a76a2 100644 --- a/lib/pages/editor/editor.dart +++ b/lib/pages/editor/editor.dart @@ -1498,6 +1498,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 33dd90dd2e..2ea694d644 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: 12, + semanticLabel: t.settings.editorToolbarSizes.small)), + ToggleButtonsOption( + ToolbarSize.normal.index, + Icon(FontAwesomeIcons.pencil, size: 18, + semanticLabel: t.settings.editorToolbarSizes.normal)), + ToggleButtonsOption( + ToolbarSize.big.index, + Icon(FontAwesomeIcons.pencil, size: 22, + semanticLabel: t.settings.editorToolbarSizes.big)), + ], + ), SettingsSwitch( title: t.settings.prefLabels.editorToolbarShowInFullscreen, icon: cupertino ? CupertinoIcons.fullscreen : Icons.fullscreen, From 5a03db0623f48a23e51b71eac4aa758382aee28b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Zl=C3=A1mal?= Date: Fri, 1 Mar 2024 20:26:47 +0100 Subject: [PATCH 2/6] size of colorbar - not finished --- lib/components/toolbar/color_bar.dart | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/lib/components/toolbar/color_bar.dart b/lib/components/toolbar/color_bar.dart index 03b47fba90..6590b07bbf 100644 --- a/lib/components/toolbar/color_bar.dart +++ b/lib/components/toolbar/color_bar.dart @@ -12,7 +12,7 @@ import 'package:saber/i18n/strings.g.dart'; typedef NamedColor = ({String name, Color color}); class ColorBar extends StatefulWidget { - ColorBar({ + const ColorBar({ super.key, required this.axis, required this.setColor, @@ -270,11 +270,8 @@ class _ColorBarState extends State { color: Colors.transparent, shape: BoxShape.circle, ), - child: Center(child: FaIcon(FontAwesomeIcons.droplet, size: switch (widget.toolbarSize) { - ToolbarSize.small => 12.0, - ToolbarSize.normal => 16.0, - ToolbarSize.big => 22.0, - })), + child: Center(child: FaIcon(FontAwesomeIcons.droplet) + ), ), ), @@ -301,7 +298,7 @@ class _ColorBarState extends State { return Center( child: Padding( - padding: const EdgeInsets.all(switch (widget.toolbarSize) { + padding: EdgeInsets.all(switch (widget.toolbarSize) { ToolbarSize.small => 4.0, ToolbarSize.normal => 8.0, ToolbarSize.big => 12.0, From 3a00584a052ce82891631ec204a769f474bd653a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Zl=C3=A1mal?= Date: Mon, 18 Mar 2024 18:32:43 +0100 Subject: [PATCH 3/6] Implemented toolbar button size in toolbars. ToolbarSize extended by ToolbarSizeGet to enable getting different size parameters directly --- lib/components/toolbar/color_bar.dart | 22 +++++-- lib/components/toolbar/color_option.dart | 7 ++- lib/components/toolbar/pen_modal.dart | 14 +++-- lib/components/toolbar/size_picker.dart | 19 +++--- lib/components/toolbar/toolbar.dart | 26 +++----- lib/components/toolbar/toolbar_button.dart | 73 +++++++++++++++++++++- lib/pages/home/settings.dart | 6 +- 7 files changed, 126 insertions(+), 41 deletions(-) diff --git a/lib/components/toolbar/color_bar.dart b/lib/components/toolbar/color_bar.dart index 6590b07bbf..2e6e19ef82 100644 --- a/lib/components/toolbar/color_bar.dart +++ b/lib/components/toolbar/color_bar.dart @@ -180,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.getButtonSize(), ), for (String colorString in Prefs.pinnedColors.value) ColorOption( isSelected: widget.currentColor?.withAlpha(255).value == int.parse(colorString), enabled: widget.currentColor != null, + diameter: widget.toolbarSize.getColorOptionDiameter(), onTap: () => widget.setColor(Color(int.parse(colorString))), onLongPress: () => setState(() => ColorBar.toggleColorPinned(colorString)), @@ -206,8 +208,9 @@ class _ColorBarState extends State { ), ], - const ColorOptionSeparatorIcon( + ColorOptionSeparatorIcon( icon: Icons.history, + size: widget.toolbarSize.getButtonSize(), ), // recent colors @@ -216,6 +219,7 @@ class _ColorBarState extends State { isSelected: widget.currentColor?.withAlpha(255).value == int.parse(colorString), enabled: widget.currentColor != null, + diameter: widget.toolbarSize.getColorOptionDiameter(), onTap: () => widget.setColor(Color(int.parse(colorString))), onLongPress: () => setState(() => ColorBar.toggleColorPinned(colorString)), @@ -240,6 +244,7 @@ class _ColorBarState extends State { ColorOption( isSelected: false, enabled: widget.currentColor != null, + diameter: widget.toolbarSize.getColorOptionDiameter(), onTap: null, tooltip: null, child: DecoratedBox( @@ -254,8 +259,9 @@ class _ColorBarState extends State { ), ), - const ColorOptionSeparatorIcon( + ColorOptionSeparatorIcon( icon: Icons.palette, + size: widget.toolbarSize.getButtonSize(), ), // custom color @@ -263,17 +269,20 @@ class _ColorBarState extends State { isSelected: widget.currentColor?.withAlpha(255).value == pickedColor.value, enabled: true, + diameter: widget.toolbarSize.getColorOptionDiameter(), onTap: () => openColorPicker(context), tooltip: t.editor.colors.colorPicker, - child: const DecoratedBox( + child: DecoratedBox( decoration: BoxDecoration( color: Colors.transparent, shape: BoxShape.circle, ), - child: Center(child: FaIcon(FontAwesomeIcons.droplet) + child: Center(child: FaIcon(FontAwesomeIcons.droplet, + size: widget.toolbarSize.getButtonSize(), + ) + ), ), ), - ), // color presets for (NamedColor namedColor in ColorBar.colorPresets) @@ -281,6 +290,7 @@ class _ColorBarState extends State { isSelected: widget.currentColor?.withAlpha(255).value == namedColor.color.value, enabled: widget.currentColor != null, + diameter: widget.toolbarSize.getColorOptionDiameter(), onTap: () => widget.setColor(namedColor.color), tooltip: namedColor.name, child: DecoratedBox( 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..c3bd445d3e 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.getPenModalSize(), + height: widget.toolbarSize.getPenModalSize() / 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.getPenModalSize(), + height: widget.toolbarSize.getPenModalSize() / 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.getPenModalSize(), 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 0ea85ff5ac..8378f84d3a 100644 --- a/lib/components/toolbar/size_picker.dart +++ b/lib/components/toolbar/size_picker.dart @@ -1,5 +1,7 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; +import 'package:saber/components/toolbar/toolbar_button.dart'; +import 'package:saber/data/extensions/list_extensions.dart'; import 'package:saber/data/tools/pen.dart'; import 'package:saber/i18n/strings.g.dart'; @@ -7,9 +9,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 +41,20 @@ class _SizePickerState extends State { t.editor.penOptions.size, style: TextStyle( color: colorScheme.onSurface.withOpacity(0.8), - fontSize: 10, + fontSize: widget.toolbarSize.getSizePickerFontSize(), height: 1, ), ), Text(_prettyNum(widget.pen.options.size)), ], ), - const SizedBox(width: 8), + SizedBox(width: widget.toolbarSize.getToolbarPadding()), Padding( - padding: const EdgeInsets.symmetric(vertical: 8), + padding: EdgeInsets.symmetric(vertical: widget.toolbarSize.getToolbarPadding()), child: _SizeSlider( pen: widget.pen, setState: setState, + toolbarSize: widget.toolbarSize, ), ), ], @@ -63,15 +68,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.getSizePickerSize().width, 0, 1); final stepsFromMin = (relX * pen.sizeStepsBetweenMinAndMax).round(); final newSize = pen.sizeMin + stepsFromMin * pen.sizeStep; if (newSize == pen.options.size) return; @@ -87,7 +92,7 @@ class _SizeSlider extends StatelessWidget { onHorizontalDragStart: (details) => onDrag(details.localPosition.dx), onHorizontalDragUpdate: (details) => onDrag(details.localPosition.dx), child: CustomPaint( - size: _size, + size: toolbarSize.getSizePickerSize(), painter: _SizeSliderPainter( minSize: pen.sizeMin, maxSize: pen.sizeMax, diff --git a/lib/components/toolbar/toolbar.dart b/lib/components/toolbar/toolbar.dart index aa3ef1d34c..c18c2e1b57 100644 --- a/lib/components/toolbar/toolbar.dart +++ b/lib/components/toolbar/toolbar.dart @@ -166,16 +166,8 @@ class _ToolbarState extends State { Prefs.editorToolbarAlignment.value == AxisDirection.right; final buttonPadding = isToolbarVertical - ? EdgeInsets.symmetric(vertical: switch (widget.toolbarSize) { - ToolbarSize.small => 2.0, - ToolbarSize.normal => 6.0, - ToolbarSize.big => 8.0, - }) - : EdgeInsets.symmetric(horizontal: switch (widget.toolbarSize) { - ToolbarSize.small => 2.0, - ToolbarSize.normal => 6.0, - ToolbarSize.big => 8.0, - }); + ? EdgeInsets.symmetric(vertical: widget.toolbarSize.getToolbarPadding()) + : EdgeInsets.symmetric(horizontal: widget.toolbarSize.getToolbarPadding()); final currentColor = switch (widget.currentTool) { Pen pen => pen.color, @@ -225,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, @@ -304,6 +299,7 @@ class _ToolbarState extends State { buttonOptions: QuillSimpleToolbarButtonOptions( base: QuillToolbarBaseButtonOptions( iconTheme: iconTheme, + iconSize: widget.toolbarSize.getButtonSize(), // set toolbar button size ), ), showUndo: false, @@ -318,17 +314,11 @@ class _ToolbarState extends State { }), Center( child: Padding(// distance between toolbars - padding: EdgeInsets.all(switch (widget.toolbarSize) { - ToolbarSize.small => 2, - ToolbarSize.normal => 8, - ToolbarSize.big => 12,}), + padding: EdgeInsets.all(widget.toolbarSize.getToolbarPadding()), child: Wrap( direction: isToolbarVertical ? Axis.vertical : Axis.horizontal, alignment: WrapAlignment.center, - runSpacing: switch (widget.toolbarSize) { // gap between lines - ToolbarSize.small => 2, - ToolbarSize.normal => 8, - ToolbarSize.big => 12,}, + runSpacing: widget.toolbarSize.getToolbarPadding(), // gap between lines children: [ ToolbarIconButton( tooltip: Pen.currentPen.name, diff --git a/lib/components/toolbar/toolbar_button.dart b/lib/components/toolbar/toolbar_button.dart index c7089d3ab4..fb570ebd0d 100644 --- a/lib/components/toolbar/toolbar_button.dart +++ b/lib/components/toolbar/toolbar_button.dart @@ -1,7 +1,6 @@ import 'package:flutter/material.dart'; import 'package:saber/data/prefs.dart'; - /// toolbar button size enum ToolbarSize { big, @@ -9,6 +8,77 @@ enum ToolbarSize { small, } +extension ToolbarSizeGet on ToolbarSize { + + double getButtonSize(){ + /// return size of toolbar button + switch (this){ + case ToolbarSize.small: + return(12.0); + case ToolbarSize.normal: + return(18.0); + case ToolbarSize.big: + return(22.0); + } + } + + double getToolbarPadding(){ + /// return padding of toolbar + switch (this){ + case ToolbarSize.small: + return(2.0); + case ToolbarSize.normal: + return(6.0); + case ToolbarSize.big: + return(8.0); + } + } + double getColorOptionDiameter(){ + /// return diameter of color option circle + switch (this){ + case ToolbarSize.small: + return(18.0); + case ToolbarSize.normal: + return(25.0); + case ToolbarSize.big: + return(30.0); + } + } + + double getPenModalSize(){ + /// return Size of PenModal icons + switch (this){ + case ToolbarSize.small: + return(22); + case ToolbarSize.normal: + return(32); + case ToolbarSize.big: + return(40); + } + } + + double getSizePickerFontSize(){ + /// return Size of font in pen Size picker + switch (this){ + case ToolbarSize.small: + return(8); + case ToolbarSize.normal: + return(10); + case ToolbarSize.big: + return(14); + } + } + + Size getSizePickerSize(){ + /// return Size of SizePicker slider + return( + Size(150, getColorOptionDiameter()) + ); + } + +} + + class ToolbarIconButton extends StatelessWidget { const ToolbarIconButton({ super.key, @@ -60,3 +130,4 @@ class ToolbarIconButton extends StatelessWidget { } } + diff --git a/lib/pages/home/settings.dart b/lib/pages/home/settings.dart index 2ea694d644..62bd002ad8 100644 --- a/lib/pages/home/settings.dart +++ b/lib/pages/home/settings.dart @@ -406,15 +406,15 @@ class _SettingsPageState extends State { options: [ ToggleButtonsOption( ToolbarSize.small.index, - Icon(FontAwesomeIcons.pencil, size: 12, + Icon(FontAwesomeIcons.pencil, size: ToolbarSize.small.getButtonSize(), semanticLabel: t.settings.editorToolbarSizes.small)), ToggleButtonsOption( ToolbarSize.normal.index, - Icon(FontAwesomeIcons.pencil, size: 18, + Icon(FontAwesomeIcons.pencil, size: ToolbarSize.normal.getButtonSize(), semanticLabel: t.settings.editorToolbarSizes.normal)), ToggleButtonsOption( ToolbarSize.big.index, - Icon(FontAwesomeIcons.pencil, size: 22, + Icon(FontAwesomeIcons.pencil, size: ToolbarSize.big.getButtonSize(), semanticLabel: t.settings.editorToolbarSizes.big)), ], ), From 155acbc0990e7e0a2997c4cce421784cfbeb2203 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Zl=C3=A1mal?= Date: Mon, 18 Mar 2024 20:16:30 +0100 Subject: [PATCH 4/6] removed unused import --- lib/components/toolbar/size_picker.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/components/toolbar/size_picker.dart b/lib/components/toolbar/size_picker.dart index 3c40e33f94..863c07e5a6 100644 --- a/lib/components/toolbar/size_picker.dart +++ b/lib/components/toolbar/size_picker.dart @@ -1,7 +1,6 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:saber/components/toolbar/toolbar_button.dart'; -import 'package:saber/data/extensions/list_extensions.dart'; import 'package:saber/data/tools/pen.dart'; import 'package:saber/i18n/strings.g.dart'; From a6b285dd6daa9f0a87c82511ef67bfc79fd1f83c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Zl=C3=A1mal?= Date: Mon, 18 Mar 2024 20:17:03 +0100 Subject: [PATCH 5/6] set padding according to toolbar size --- lib/components/toolbar/color_bar.dart | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/lib/components/toolbar/color_bar.dart b/lib/components/toolbar/color_bar.dart index 2e6e19ef82..1d6ad71334 100644 --- a/lib/components/toolbar/color_bar.dart +++ b/lib/components/toolbar/color_bar.dart @@ -308,11 +308,7 @@ class _ColorBarState extends State { return Center( child: Padding( - padding: EdgeInsets.all(switch (widget.toolbarSize) { - ToolbarSize.small => 4.0, - ToolbarSize.normal => 8.0, - ToolbarSize.big => 12.0, - }), + padding: EdgeInsets.all(widget.toolbarSize.getToolbarPadding()), child: SingleChildScrollView( scrollDirection: widget.axis, child: widget.axis == Axis.horizontal From a58825e755831e20e84313ca8e6d293a3083fa9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Zl=C3=A1mal?= Date: Fri, 10 May 2024 10:15:20 +0200 Subject: [PATCH 6/6] refactored code using Dart's enhanced enum addes strings.i18n.yaml --- lib/components/toolbar/color_bar.dart | 22 ++--- lib/components/toolbar/pen_modal.dart | 10 +- lib/components/toolbar/size_picker.dart | 10 +- lib/components/toolbar/toolbar.dart | 10 +- lib/components/toolbar/toolbar_button.dart | 106 +++++---------------- lib/i18n/strings.i18n.yaml | 1 + lib/pages/home/settings.dart | 6 +- 7 files changed, 54 insertions(+), 111 deletions(-) diff --git a/lib/components/toolbar/color_bar.dart b/lib/components/toolbar/color_bar.dart index 1d6ad71334..d6144b774e 100644 --- a/lib/components/toolbar/color_bar.dart +++ b/lib/components/toolbar/color_bar.dart @@ -182,14 +182,14 @@ class _ColorBarState extends State { if (Prefs.pinnedColors.value.isNotEmpty) ...[ ColorOptionSeparatorIcon( icon: Icons.pin_drop, - size: widget.toolbarSize.getButtonSize(), + 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.getColorOptionDiameter(), + diameter: widget.toolbarSize.colorOptionDiameter, onTap: () => widget.setColor(Color(int.parse(colorString))), onLongPress: () => setState(() => ColorBar.toggleColorPinned(colorString)), @@ -210,7 +210,7 @@ class _ColorBarState extends State { ColorOptionSeparatorIcon( icon: Icons.history, - size: widget.toolbarSize.getButtonSize(), + size: widget.toolbarSize.buttonSize, ), // recent colors @@ -219,7 +219,7 @@ class _ColorBarState extends State { isSelected: widget.currentColor?.withAlpha(255).value == int.parse(colorString), enabled: widget.currentColor != null, - diameter: widget.toolbarSize.getColorOptionDiameter(), + diameter: widget.toolbarSize.colorOptionDiameter, onTap: () => widget.setColor(Color(int.parse(colorString))), onLongPress: () => setState(() => ColorBar.toggleColorPinned(colorString)), @@ -244,7 +244,7 @@ class _ColorBarState extends State { ColorOption( isSelected: false, enabled: widget.currentColor != null, - diameter: widget.toolbarSize.getColorOptionDiameter(), + diameter: widget.toolbarSize.colorOptionDiameter, onTap: null, tooltip: null, child: DecoratedBox( @@ -261,7 +261,7 @@ class _ColorBarState extends State { ColorOptionSeparatorIcon( icon: Icons.palette, - size: widget.toolbarSize.getButtonSize(), + size: widget.toolbarSize.buttonSize, ), // custom color @@ -269,16 +269,16 @@ class _ColorBarState extends State { isSelected: widget.currentColor?.withAlpha(255).value == pickedColor.value, enabled: true, - diameter: widget.toolbarSize.getColorOptionDiameter(), + diameter: widget.toolbarSize.colorOptionDiameter, onTap: () => openColorPicker(context), tooltip: t.editor.colors.colorPicker, child: DecoratedBox( - decoration: BoxDecoration( + decoration: const BoxDecoration( color: Colors.transparent, shape: BoxShape.circle, ), child: Center(child: FaIcon(FontAwesomeIcons.droplet, - size: widget.toolbarSize.getButtonSize(), + size: widget.toolbarSize.buttonSize, ) ), ), @@ -290,7 +290,7 @@ class _ColorBarState extends State { isSelected: widget.currentColor?.withAlpha(255).value == namedColor.color.value, enabled: widget.currentColor != null, - diameter: widget.toolbarSize.getColorOptionDiameter(), + diameter: widget.toolbarSize.colorOptionDiameter, onTap: () => widget.setColor(namedColor.color), tooltip: namedColor.name, child: DecoratedBox( @@ -308,7 +308,7 @@ class _ColorBarState extends State { return Center( child: Padding( - padding: EdgeInsets.all(widget.toolbarSize.getToolbarPadding()), + padding: EdgeInsets.all(widget.toolbarSize.padding), child: SingleChildScrollView( scrollDirection: widget.axis, child: widget.axis == Axis.horizontal diff --git a/lib/components/toolbar/pen_modal.dart b/lib/components/toolbar/pen_modal.dart index c3bd445d3e..92505afecf 100644 --- a/lib/components/toolbar/pen_modal.dart +++ b/lib/components/toolbar/pen_modal.dart @@ -63,8 +63,8 @@ class _PenModalState extends State { tooltip: t.editor.pens.fountainPen, icon: SvgPicture.asset( 'assets/images/scribble_fountain.svg', - width: widget.toolbarSize.getPenModalSize(), - height: widget.toolbarSize.getPenModalSize() / 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 @@ -88,8 +88,8 @@ class _PenModalState extends State { tooltip: t.editor.pens.ballpointPen, icon: SvgPicture.asset( 'assets/images/scribble_ballpoint.svg', - width: widget.toolbarSize.getPenModalSize(), - height: widget.toolbarSize.getPenModalSize() / 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 @@ -101,7 +101,7 @@ class _PenModalState extends State { onPressed: () => setState(() { widget.setTool(ShapePen()); }), - iconSize: widget.toolbarSize.getPenModalSize(), + 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 863c07e5a6..d6ff0484b8 100644 --- a/lib/components/toolbar/size_picker.dart +++ b/lib/components/toolbar/size_picker.dart @@ -40,16 +40,16 @@ class _SizePickerState extends State { t.editor.penOptions.size, style: TextStyle( color: colorScheme.onSurface.withOpacity(0.8), - fontSize: widget.toolbarSize.getSizePickerFontSize(), + fontSize: widget.toolbarSize.sizePickerFontSize, height: 1, ), ), Text(_prettyNum(widget.pen.options.size)), ], ), - SizedBox(width: widget.toolbarSize.getToolbarPadding()), + SizedBox(width: widget.toolbarSize.padding), Padding( - padding: EdgeInsets.symmetric(vertical: widget.toolbarSize.getToolbarPadding()), + padding: EdgeInsets.symmetric(vertical: widget.toolbarSize.padding), child: _SizeSlider( pen: widget.pen, setState: setState, @@ -75,7 +75,7 @@ class _SizeSlider extends StatelessWidget { final void Function(void Function()) setState; void onDrag(double localDx) { - final relX = clampDouble(localDx / toolbarSize.getSizePickerSize().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; @@ -91,7 +91,7 @@ class _SizeSlider extends StatelessWidget { onHorizontalDragStart: (details) => onDrag(details.localPosition.dx), onHorizontalDragUpdate: (details) => onDrag(details.localPosition.dx), child: CustomPaint( - size: toolbarSize.getSizePickerSize(), + 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 c18c2e1b57..c6c27bd0e2 100644 --- a/lib/components/toolbar/toolbar.dart +++ b/lib/components/toolbar/toolbar.dart @@ -166,8 +166,8 @@ class _ToolbarState extends State { Prefs.editorToolbarAlignment.value == AxisDirection.right; final buttonPadding = isToolbarVertical - ? EdgeInsets.symmetric(vertical: widget.toolbarSize.getToolbarPadding()) - : EdgeInsets.symmetric(horizontal: widget.toolbarSize.getToolbarPadding()); + ? EdgeInsets.symmetric(vertical: widget.toolbarSize.padding) + : EdgeInsets.symmetric(horizontal: widget.toolbarSize.padding); final currentColor = switch (widget.currentTool) { Pen pen => pen.color, @@ -299,7 +299,7 @@ class _ToolbarState extends State { buttonOptions: QuillSimpleToolbarButtonOptions( base: QuillToolbarBaseButtonOptions( iconTheme: iconTheme, - iconSize: widget.toolbarSize.getButtonSize(), // set toolbar button size + iconSize: widget.toolbarSize.buttonSize, // set toolbar button size ), ), showUndo: false, @@ -314,11 +314,11 @@ class _ToolbarState extends State { }), Center( child: Padding(// distance between toolbars - padding: EdgeInsets.all(widget.toolbarSize.getToolbarPadding()), + padding: EdgeInsets.all(widget.toolbarSize.padding), child: Wrap( direction: isToolbarVertical ? Axis.vertical : Axis.horizontal, alignment: WrapAlignment.center, - runSpacing: widget.toolbarSize.getToolbarPadding(), // gap between lines + runSpacing: widget.toolbarSize.padding, // gap between lines children: [ ToolbarIconButton( tooltip: Pen.currentPen.name, diff --git a/lib/components/toolbar/toolbar_button.dart b/lib/components/toolbar/toolbar_button.dart index fb570ebd0d..504c448bb9 100644 --- a/lib/components/toolbar/toolbar_button.dart +++ b/lib/components/toolbar/toolbar_button.dart @@ -1,81 +1,28 @@ import 'package:flutter/material.dart'; import 'package:saber/data/prefs.dart'; -/// toolbar button size -enum ToolbarSize { - big, - normal, - small, -} - -extension ToolbarSizeGet on ToolbarSize { - - double getButtonSize(){ - /// return size of toolbar button - switch (this){ - case ToolbarSize.small: - return(12.0); - case ToolbarSize.normal: - return(18.0); - case ToolbarSize.big: - return(22.0); - } - } - - double getToolbarPadding(){ - /// return padding of toolbar - switch (this){ - case ToolbarSize.small: - return(2.0); - case ToolbarSize.normal: - return(6.0); - case ToolbarSize.big: - return(8.0); - } - } - double getColorOptionDiameter(){ - /// return diameter of color option circle - switch (this){ - case ToolbarSize.small: - return(18.0); - case ToolbarSize.normal: - return(25.0); - case ToolbarSize.big: - return(30.0); - } - } - - double getPenModalSize(){ - /// return Size of PenModal icons - switch (this){ - case ToolbarSize.small: - return(22); - case ToolbarSize.normal: - return(32); - case ToolbarSize.big: - return(40); - } - } - - double getSizePickerFontSize(){ - /// return Size of font in pen Size picker - switch (this){ - case ToolbarSize.small: - return(8); - case ToolbarSize.normal: - return(10); - case ToolbarSize.big: - return(14); - } - } - - Size getSizePickerSize(){ - /// return Size of SizePicker slider - return( - Size(150, getColorOptionDiameter()) - ); +/// 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 } @@ -115,14 +62,8 @@ class ToolbarIconButton extends StatelessWidget { disabledColor: colorScheme.onSurface.withOpacity(0.4), onPressed: (enabled) ? onPressed : null, tooltip: tooltip, - iconSize: switch (Prefs.editorToolbarSize.value) { - ToolbarSize.small => 12, - ToolbarSize.normal => 16, - ToolbarSize.big => 22,}, - splashRadius: switch (Prefs.editorToolbarSize.value) { - ToolbarSize.small => 12, - ToolbarSize.normal => 16, - ToolbarSize.big => 22,}, + iconSize: Prefs.editorToolbarSize.value.buttonSize, + splashRadius: Prefs.editorToolbarSize.value.buttonSize, visualDensity: VisualDensity.compact, icon: child, ), @@ -131,3 +72,4 @@ class ToolbarIconButton extends StatelessWidget { } + 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/home/settings.dart b/lib/pages/home/settings.dart index c0e62a1993..c6db3f3a81 100644 --- a/lib/pages/home/settings.dart +++ b/lib/pages/home/settings.dart @@ -406,15 +406,15 @@ class _SettingsPageState extends State { options: [ ToggleButtonsOption( ToolbarSize.small.index, - Icon(FontAwesomeIcons.pencil, size: ToolbarSize.small.getButtonSize(), + Icon(FontAwesomeIcons.pencil, size: ToolbarSize.small.buttonSize, semanticLabel: t.settings.editorToolbarSizes.small)), ToggleButtonsOption( ToolbarSize.normal.index, - Icon(FontAwesomeIcons.pencil, size: ToolbarSize.normal.getButtonSize(), + Icon(FontAwesomeIcons.pencil, size: ToolbarSize.normal.buttonSize, semanticLabel: t.settings.editorToolbarSizes.normal)), ToggleButtonsOption( ToolbarSize.big.index, - Icon(FontAwesomeIcons.pencil, size: ToolbarSize.big.getButtonSize(), + Icon(FontAwesomeIcons.pencil, size: ToolbarSize.big.buttonSize, semanticLabel: t.settings.editorToolbarSizes.big)), ], ),