Skip to content

feat: Customizable toolbar button size #1182

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat: Customizable toolbar button size #1182

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fcb1888
Added possibility t ochoose size of toolbar buttons
QubaB Feb 28, 2024
5a03db0
size of colorbar - not finished
QubaB Mar 1, 2024
3a00584
Implemented toolbar button size in toolbars.
QubaB Mar 18, 2024
c04e4f0
Merge branch 'main' into ToolbatButtonSize
QubaB Mar 18, 2024
155acbc
removed unused import
QubaB Mar 18, 2024
a6b285d
set padding according to toolbar size
QubaB Mar 18, 2024
a58825e
refactored code using Dart's enhanced enum
QubaB May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 21 additions & 7 deletions lib/components/toolbar/color_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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<Color> setColor;
final Color? currentColor;
final bool invert;
final ToolbarSize toolbarSize; // size of toolbar button

static List<NamedColor> get colorPresets =>
Prefs.preferGreyscale.value ? greyScaleColorOptions : normalColorOptions;
Expand Down Expand Up @@ -177,14 +180,16 @@ class _ColorBarState extends State<ColorBar> {
final children = <Widget>[
// 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)),
Expand All @@ -203,8 +208,9 @@ class _ColorBarState extends State<ColorBar> {
),
],

const ColorOptionSeparatorIcon(
ColorOptionSeparatorIcon(
icon: Icons.history,
size: widget.toolbarSize.getButtonSize(),
),

// recent colors
Expand All @@ -213,6 +219,7 @@ class _ColorBarState extends State<ColorBar> {
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)),
Expand All @@ -237,6 +244,7 @@ class _ColorBarState extends State<ColorBar> {
ColorOption(
isSelected: false,
enabled: widget.currentColor != null,
diameter: widget.toolbarSize.getColorOptionDiameter(),
onTap: null,
tooltip: null,
child: DecoratedBox(
Expand All @@ -251,32 +259,38 @@ class _ColorBarState extends State<ColorBar> {
),
),

const ColorOptionSeparatorIcon(
ColorOptionSeparatorIcon(
icon: Icons.palette,
size: widget.toolbarSize.getButtonSize(),
),

// custom color
ColorOption(
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, size: 16)),
child: Center(child: FaIcon(FontAwesomeIcons.droplet,
size: widget.toolbarSize.getButtonSize(),
)
),
),
),
),

// color presets
for (NamedColor namedColor in ColorBar.colorPresets)
ColorOption(
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(
Expand All @@ -294,7 +308,7 @@ class _ColorBarState extends State<ColorBar> {

return Center(
child: Padding(
padding: const EdgeInsets.all(8),
padding: EdgeInsets.all(widget.toolbarSize.getToolbarPadding()),
child: SingleChildScrollView(
scrollDirection: widget.axis,
child: widget.axis == Axis.horizontal
Expand Down
7 changes: 5 additions & 2 deletions lib/components/toolbar/color_option.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ class ColorOption extends StatelessWidget {
this.onLongPress,
required this.tooltip,
required this.child,
required this.diameter,
});

final bool isSelected;
Expand All @@ -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) {
Expand Down Expand Up @@ -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) {
Expand All @@ -75,7 +78,7 @@ class ColorOptionSeparatorIcon extends StatelessWidget {
),
child: Icon(
icon,
size: 16,
size: size,
color: Color.lerp(
colorScheme.onSurface,
colorScheme.primary,
Expand Down
14 changes: 10 additions & 4 deletions lib/components/toolbar/pen_modal.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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<PenModal> createState() => _PenModalState();
}
Expand All @@ -39,6 +43,7 @@ class _PenModalState extends State<PenModal> {
children: [
SizePicker(
pen: currentPen,
toolbarSize: widget.toolbarSize,
),
if (currentPen is! Highlighter && currentPen is! Pencil) ...[
const SizedBox(width: 8),
Expand All @@ -58,8 +63,8 @@ class _PenModalState extends State<PenModal> {
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
Expand All @@ -83,8 +88,8 @@ class _PenModalState extends State<PenModal> {
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
Expand All @@ -96,6 +101,7 @@ class _PenModalState extends State<PenModal> {
onPressed: () => setState(() {
widget.setTool(ShapePen());
}),
iconSize: widget.toolbarSize.getPenModalSize(),
style: TextButton.styleFrom(
foregroundColor: Pen.currentPen.icon == ShapePen.shapePenIcon
? Theme.of(context).colorScheme.secondary
Expand Down
18 changes: 11 additions & 7 deletions lib/components/toolbar/size_picker.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
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';

class SizePicker extends StatefulWidget {
const SizePicker({
super.key,
required this.pen,
required this.toolbarSize,
});

final Pen pen;
final ToolbarSize toolbarSize;

@override
State<SizePicker> createState() => _SizePickerState();
Expand Down Expand Up @@ -37,19 +40,20 @@ class _SizePickerState extends State<SizePicker> {
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,
),
),
],
Expand All @@ -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.getSizePickerSize().width, 0, 1);
final stepsFromMin = (relX * pen.sizeStepsBetweenMinAndMax).round();
final newSize = pen.sizeMin + stepsFromMin * pen.sizeStep;
if (newSize == pen.options.size) return;
Expand All @@ -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.getSizePickerSize(),
painter: _SizeSliderPainter(
minSize: pen.sizeMin,
maxSize: pen.sizeMax,
Expand Down
Loading