Skip to content

Commit

Permalink
Improve add dialog ui and toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@CodeDoctorDE
CodeDoctorDE committed Oct 12, 2024
1 parent 9fa0e96 commit fb73473
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 107 deletions.
14 changes: 14 additions & 0 deletions app/lib/dialogs/import/add.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ class _AddDialogState extends State<AddDialog> {
Expanded(
child: Align(
child: SearchBar(
autoFocus: true,
constraints:
const BoxConstraints(maxWidth: 200, minHeight: 50),
leading:
Expand Down Expand Up @@ -239,6 +240,19 @@ class _AddDialogState extends State<AddDialog> {
),
const SizedBox(height: 16),
],
if (tools.isEmpty &&
shapes.isEmpty &&
textures.isEmpty &&
actions.isEmpty)
Padding(
padding: const EdgeInsets.symmetric(
vertical: 64, horizontal: 16),
child: Text(
AppLocalizations.of(context).noElements,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyLarge,
),
),
if (tools.isNotEmpty) ...[
_ToolsListView(
isMobile: isMobile,
Expand Down
23 changes: 21 additions & 2 deletions app/lib/views/edit.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,9 +207,9 @@ class _EditToolbarState extends State<EditToolbar> {
final bloc = context.read<DocumentBloc>();
final cubit = context.read<CurrentIndexCubit>();
final importService = context.read<ImportService>();
showDialog(
showGeneralDialog(
context: context,
builder: (ctx) => MultiBlocProvider(
pageBuilder: (ctx, _, __) => MultiBlocProvider(
providers: [
BlocProvider.value(value: bloc),
BlocProvider.value(value: cubit),
Expand All @@ -219,6 +219,25 @@ class _EditToolbarState extends State<EditToolbar> {
child: const AddDialog(),
),
),
barrierDismissible: true,
barrierLabel: MaterialLocalizations.of(context)
.modalBarrierDismissLabel,
transitionDuration:
const Duration(milliseconds: 200),
transitionBuilder: (context, animation,
secondaryAnimation, child) {
// Animate the dialog from bottom to center
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 1),
end: Offset.zero,
)
.chain(CurveTween(
curve: Curves.easeOutQuart))
.animate(animation),
child: child,
);
},
);
},
child: PhosphorIcon(
Expand Down
200 changes: 96 additions & 104 deletions app/lib/views/toolbar/color.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,114 +122,106 @@ class _ColorToolbarViewState extends State<ColorToolbarView> {
pack = document.getPack(colorPalette!.pack);
palette = pack?.getPalette(colorPalette!.name);
}
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
if (!(palette?.colors.contains(color) ?? false)) ...[
ColorButton(
color: Color(widget.color),
selected: true,
onTap: addColor,
),
if (palette != null) const VerticalDivider(),
],
if (palette != null)
Expanded(
child: Scrollbar(
controller: _scrollController,
child: ListView(
controller: _scrollController,
scrollDirection: Axis.horizontal,
children: [
...List.generate(palette.colors.length, (index) {
final value = palette!.colors[index];
void changeColor() async {
var palette = pack?.getPalette(colorPalette!.name);
final settingsCubit = context.read<SettingsCubit>();
final response = await showDialog<
ColorPickerResponse<ColorPickerToolbarAction>>(
context: context,
builder: (context) =>
ColorPicker<ColorPickerToolbarAction>(
value: Color(value),
suggested: settingsCubit.state.recentColors
.map((e) => Color(e))
.toList(),
secondaryActions: (close) => [
OutlinedButton(
onPressed: () =>
close(ColorPickerToolbarAction.delete),
child:
Text(AppLocalizations.of(context).delete),
),
],
),
);
if (response == null) return;
if (response.action ==
ColorPickerToolbarAction.delete) {
palette = palette?.copyWith(
colors: List<int>.from(palette.colors)
..removeAt(index),
);
} else {
palette = palette?.copyWith(
colors: List<int>.from(palette.colors)
..[index] = response.color,
);
}
bloc.add(PackUpdated(
colorPalette!.pack, pack!.setPalette(palette!)));
widget.onChanged(response.color);
setState(() {});
}

return ColorButton(
color: Color(value),
selected: value == color,
onTap: () => widget.onChanged(value),
onSecondaryTap: changeColor,
onLongPress: changeColor,
);
}),
Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: addColor,
borderRadius: BorderRadius.circular(12),
child: const AspectRatio(
aspectRatio: 1,
child: PhosphorIcon(PhosphorIconsLight.plus),
return Scrollbar(
controller: _scrollController,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
controller: _scrollController,
children: [
if (!(palette?.colors.contains(color) ?? false)) ...[
ColorButton(
color: Color(widget.color),
selected: true,
onTap: addColor,
),
if (palette != null) const VerticalDivider(),
],
if (palette != null) ...[
...List.generate(palette.colors.length, (index) {
final value = palette!.colors[index];
void changeColor() async {
var palette = pack?.getPalette(colorPalette!.name);
final settingsCubit = context.read<SettingsCubit>();
final response = await showDialog<
ColorPickerResponse<ColorPickerToolbarAction>>(
context: context,
builder: (context) => ColorPicker<ColorPickerToolbarAction>(
value: Color(value),
suggested: settingsCubit.state.recentColors
.map((e) => Color(e))
.toList(),
secondaryActions: (close) => [
OutlinedButton(
onPressed: () =>
close(ColorPickerToolbarAction.delete),
child: Text(AppLocalizations.of(context).delete),
),
),
],
),
]),
)),
AspectRatio(
aspectRatio: 1,
child: IconButton(
onPressed: () async {
final result = await showDialog<PackAssetLocation>(
context: context,
builder: (context) => BlocProvider.value(
value: bloc,
child: SelectPackAssetDialog(
type: PackAssetType.palette,
selected: colorPalette,
),
));
);
if (response == null) return;
if (response.action == ColorPickerToolbarAction.delete) {
palette = palette?.copyWith(
colors: List<int>.from(palette.colors)..removeAt(index),
);
} else {
palette = palette?.copyWith(
colors: List<int>.from(palette.colors)
..[index] = response.color,
);
}
bloc.add(PackUpdated(
colorPalette!.pack, pack!.setPalette(palette!)));
widget.onChanged(response.color);
setState(() {});
}

return ColorButton(
color: Color(value),
selected: value == color,
onTap: () => widget.onChanged(value),
onSecondaryTap: changeColor,
onLongPress: changeColor,
);
}),
Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: addColor,
borderRadius: BorderRadius.circular(12),
child: const AspectRatio(
aspectRatio: 1,
child: PhosphorIcon(PhosphorIconsLight.plus),
),
),
),
],
AspectRatio(
aspectRatio: 1,
child: IconButton(
onPressed: () async {
final result = await showDialog<PackAssetLocation>(
context: context,
builder: (context) => BlocProvider.value(
value: bloc,
child: SelectPackAssetDialog(
type: PackAssetType.palette,
selected: colorPalette,
),
));

if (result == null) return;
setState(() {
colorPalette = result;
});
},
icon: const PhosphorIcon(PhosphorIconsLight.package),
tooltip: AppLocalizations.of(context).selectAsset,
if (result == null) return;
setState(() {
colorPalette = result;
});
},
icon: const PhosphorIcon(PhosphorIconsLight.package),
tooltip: AppLocalizations.of(context).selectAsset,
),
),
),
],
],
),
);
} catch (e) {
return Container();
Expand Down
5 changes: 4 additions & 1 deletion app/lib/views/toolbar/view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,10 @@ class _ToolbarViewState extends State<ToolbarView> {
key: _animatedKey,
curve: Curves.fastOutSlowIn,
duration: const Duration(milliseconds: 200),
child: child,
child: AnimatedSize(
duration: const Duration(milliseconds: 100),
curve: Curves.fastOutSlowIn,
child: child),
);
}),
),
Expand Down
4 changes: 4 additions & 0 deletions metadata/en-US/changelogs/118.txt
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
* Add bit mapping of buttons in pointer test
* Add autofocus to add dialog search bar
* Add transition when opening add dialog
* Add size transition to toolbar
* Change color toolbar to not have the full width
* Fix pasting with label tool replaces text instead of appending
* Fix unstable sort algorithm if layer is the same
* Fix switching data directory not working
Expand Down

0 comments on commit fb73473

Please sign in to comment.