From 964e7e2662aa8b50d577c9656ca4d238456e0eb4 Mon Sep 17 00:00:00 2001 From: CodeDoctorDE Date: Sun, 22 Sep 2024 10:55:36 +0200 Subject: [PATCH] Improve ui with toolbar position --- app/lib/views/edit.dart | 208 ++++++++++++++++-------------- metadata/en-US/changelogs/114.txt | 2 + 2 files changed, 110 insertions(+), 100 deletions(-) diff --git a/app/lib/views/edit.dart b/app/lib/views/edit.dart index 0a130eb614e2..8997dcbdbdca 100644 --- a/app/lib/views/edit.dart +++ b/app/lib/views/edit.dart @@ -70,16 +70,15 @@ class _EditToolbarState extends State { buildWhen: (previous, current) => previous.inputConfiguration != current.inputConfiguration || previous.toolbarSize != current.toolbarSize || - previous.toolbarRows != current.toolbarRows, + previous.toolbarRows != current.toolbarRows || + previous.toolbarPosition != current.toolbarPosition, builder: (context, settings) { final shortcuts = settings.inputConfiguration.getShortcuts(); final size = settings.toolbarSize.size; final fullSize = (size + 4) * settings.toolbarRows; return SizedBox( height: widget.direction == Axis.horizontal ? fullSize : null, - width: widget.direction == Axis.horizontal - ? null - : (fullSize + 20), + width: widget.direction == Axis.horizontal ? null : fullSize, child: BlocBuilder( buildWhen: (previous, current) => previous is! DocumentLoadSuccess || @@ -294,10 +293,19 @@ class _EditToolbarState extends State { selected: selected, alwaysShowBottom: e.isAction(), highlighted: highlighted, - bottomIcon: e.isAction() - ? const PhosphorIcon( - PhosphorIconsLight.playCircle) - : null, + bottomIcon: PhosphorIcon(e.isAction() + ? PhosphorIconsLight.playCircle + : switch (settings.toolbarPosition) { + ToolbarPosition.bottom => + PhosphorIconsLight.caretUp, + ToolbarPosition.top || + ToolbarPosition.inline => + PhosphorIconsLight.caretDown, + ToolbarPosition.left => + PhosphorIconsLight.caretRight, + ToolbarPosition.right => + PhosphorIconsLight.caretLeft, + }), selectedIcon: _buildIcon(icon, size, color), icon: _buildIcon(icon, size, color), onPressed: () { @@ -349,102 +357,102 @@ class _EditToolbarState extends State { }, ), BlocBuilder( - builder: (context, windowState) => Row( - children: [ - IconButton( - icon: const PhosphorIcon(PhosphorIconsLight.wrench), - tooltip: AppLocalizations.of(context).tools, - selectedIcon: - const PhosphorIcon(PhosphorIconsFill.wrench), - isSelected: currentIndex.selection?.selected.any( - (element) => element is UtilitiesState) ?? - false, - onPressed: () { - final cubit = context.read(); - final state = - cubit.state.cameraViewport.utilities.element; - cubit.changeSelection(state); - }, + builder: (context, windowState) { + final children = [ + IconButton( + icon: const PhosphorIcon(PhosphorIconsLight.wrench), + tooltip: AppLocalizations.of(context).tools, + selectedIcon: const PhosphorIcon(PhosphorIconsFill.wrench), + isSelected: currentIndex.selection?.selected + .any((element) => element is UtilitiesState) ?? + false, + onPressed: () { + final cubit = context.read(); + final state = cubit.state.cameraViewport.utilities.element; + cubit.changeSelection(state); + }, + ), + if (windowState.fullScreen && + tools.every((e) => e is! FullScreenTool)) + IconButton( + icon: const PhosphorIcon(PhosphorIconsLight.arrowsIn), + tooltip: AppLocalizations.of(context).exitFullScreen, + onPressed: () { + context.read().changeFullScreen(false); + }, + ), + BlocBuilder( + builder: (context, currentIndex) { + final utilitiesState = currentIndex.utilitiesState; + Widget buildButton( + bool selected, + UtilitiesState Function() update, + PhosphorIconData icon, + String title) => + CheckboxMenuButton( + value: selected, + trailingIcon: PhosphorIcon(icon), + onChanged: (value) => context + .read() + .updateUtilities(utilities: update()), + child: Text(title), + ); + + return MenuAnchor( + menuChildren: [ + buildButton( + utilitiesState.lockLayer, + () => utilitiesState.copyWith( + lockLayer: !utilitiesState.lockLayer, + ), + PhosphorIconsLight.stack, + AppLocalizations.of(context).layer, ), - if (windowState.fullScreen && - tools.every((e) => e is! FullScreenTool)) - IconButton( - icon: - const PhosphorIcon(PhosphorIconsLight.arrowsIn), - tooltip: - AppLocalizations.of(context).exitFullScreen, - onPressed: () { - context - .read() - .changeFullScreen(false); - }, + buildButton( + utilitiesState.lockZoom, + () => utilitiesState.copyWith( + lockZoom: !utilitiesState.lockZoom, ), - BlocBuilder( - builder: (context, currentIndex) { - final utilitiesState = currentIndex.utilitiesState; - Widget buildButton( - bool selected, - UtilitiesState Function() update, - PhosphorIconData icon, - String title) => - CheckboxMenuButton( - value: selected, - trailingIcon: PhosphorIcon(icon), - onChanged: (value) => context - .read() - .updateUtilities(utilities: update()), - child: Text(title), - ); - - return MenuAnchor( - menuChildren: [ - buildButton( - utilitiesState.lockLayer, - () => utilitiesState.copyWith( - lockLayer: !utilitiesState.lockLayer, - ), - PhosphorIconsLight.stack, - AppLocalizations.of(context).layer, - ), - buildButton( - utilitiesState.lockZoom, - () => utilitiesState.copyWith( - lockZoom: !utilitiesState.lockZoom, - ), - PhosphorIconsLight.magnifyingGlassPlus, - AppLocalizations.of(context).zoom, - ), - buildButton( - utilitiesState.lockHorizontal, - () => utilitiesState.copyWith( - lockHorizontal: - !utilitiesState.lockHorizontal, - ), - PhosphorIconsLight.arrowsHorizontal, - AppLocalizations.of(context).horizontal, - ), - buildButton( - utilitiesState.lockVertical, - () => utilitiesState.copyWith( - lockVertical: !utilitiesState.lockVertical, - ), - PhosphorIconsLight.arrowsVertical, - AppLocalizations.of(context).vertical, - ), - ], - style: const MenuStyle( - alignment: Alignment.bottomLeft, - ), - builder: defaultMenuButton( - icon: const PhosphorIcon( - PhosphorIconsLight.lockKey), - tooltip: AppLocalizations.of(context).lock, - ), - ); - }, + PhosphorIconsLight.magnifyingGlassPlus, + AppLocalizations.of(context).zoom, + ), + buildButton( + utilitiesState.lockHorizontal, + () => utilitiesState.copyWith( + lockHorizontal: !utilitiesState.lockHorizontal, + ), + PhosphorIconsLight.arrowsHorizontal, + AppLocalizations.of(context).horizontal, + ), + buildButton( + utilitiesState.lockVertical, + () => utilitiesState.copyWith( + lockVertical: !utilitiesState.lockVertical, + ), + PhosphorIconsLight.arrowsVertical, + AppLocalizations.of(context).vertical, ), ], - )), + style: const MenuStyle( + alignment: Alignment.bottomLeft, + ), + builder: defaultMenuButton( + icon: const PhosphorIcon(PhosphorIconsLight.lockKey), + tooltip: AppLocalizations.of(context).lock, + ), + ); + }, + ), + ]; + if (widget.direction == Axis.horizontal) { + return Row( + children: children, + ); + } + return Column( + children: children, + ); + }), ], ]); } diff --git a/metadata/en-US/changelogs/114.txt b/metadata/en-US/changelogs/114.txt index 19e91f2ec790..6c733ef7a170 100644 --- a/metadata/en-US/changelogs/114.txt +++ b/metadata/en-US/changelogs/114.txt @@ -2,7 +2,9 @@ * Update baking image rendering * Change default sorting to modified descending * Change floating action button in toolbar to be small to improve rounded corners +* Change bottom icon in toolbar items to toolbar position * Improve size of add dialog +* Fix size of vertical toolbar position * Fix wrong settings page of inputs and behaviors routes * Fix file system refreshing on cancelling moving a file * Fix file not saved in certain cases