Skip to content
This repository has been archived by the owner on Sep 17, 2024. It is now read-only.

Commit

Permalink
Merge pull request #196 from MXCzkEVM/shatter_animation
Browse files Browse the repository at this point in the history 
Shatter animation
  • Loading branch information
@reasje
reasje authored May 9, 2024
2 parents 65a1924 + 4e84e7d commit 21ac83e
Show file tree
Hide file tree
Showing 6 changed files with 277 additions and 52 deletions.
8 changes: 6 additions & 2 deletions lib/features/dapps/helpers/book_marks_helper.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class BookMarksHelper {
);
}

void removeBookmark(Bookmark item) async {
void removeBookmarkDialog(Bookmark item, void Function() animation) async {
final result = await showAlertDialog(
context: context!,
title: '${translate('remove')!} ${item.title}',
Expand All @@ -32,7 +32,11 @@ class BookMarksHelper {
);

if (result != null && result) {
bookmarkUseCase.removeItem(item);
animation();
}
}

void removeBookmark(Bookmark item) async {
bookmarkUseCase.removeItem(item);
}
}
3 changes: 3 additions & 0 deletions lib/features/dapps/presentation/dapps_presenter.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,9 @@ class DAppsPagePresenter extends CompletePresenter<DAppsState> {
}
}

void removeBookmarkDialog(Bookmark item, void Function() animation) async =>
bookmarksHelper.removeBookmarkDialog(item, animation);

void removeBookmark(Bookmark item) async =>
bookmarksHelper.removeBookmark(item);

Expand Down
5 changes: 2 additions & 3 deletions lib/features/dapps/presentation/responsive_layout/dapp_card_layout.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,14 +97,14 @@ List<Widget> getList(List<Dapp> dapps, DAppsPagePresenter actions,

for (int i = 0; i < dapps.length; i++) {
final item = dapps[i];
final dappCard = item is Bookmark
final isBookMark = item is Bookmark;
final dappCard = isBookMark
? NewDAppCard(
index: i,
width: itemWidth,
dapp: item,
isEditMode: state.isEditMode,
onTap: state.isEditMode ? null : () => actions.openDapp(item.url),
onRemoveTap: (item) => actions.removeBookmark(item as Bookmark),
mainAxisCount: mainAxisCount,
)
: NewDAppCard(
Expand All @@ -120,7 +120,6 @@ List<Widget> getList(List<Dapp> dapps, DAppsPagePresenter actions,
item.app!.url!,
);
},
onRemoveTap: null,
mainAxisCount: mainAxisCount,
);
dappCards.add(dappCard);
Expand Down
118 changes: 71 additions & 47 deletions lib/features/dapps/presentation/responsive_layout/new_dapp_card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ import 'package:mxc_logic/mxc_logic.dart';
import 'package:mxc_ui/mxc_ui.dart';
import 'package:reorderable_grid_view/reorderable_grid_view.dart';
import '../dapps_presenter.dart';
import 'shatter_widget.dart';

class NewDAppCard extends HookConsumerWidget {
final Dapp dapp;
final int index;
final double width;
final bool isEditMode;
final VoidCallback? onTap;
final void Function(Bookmark?)? onRemoveTap;
final int mainAxisCount;
const NewDAppCard({
super.key,
Expand All @@ -29,12 +29,16 @@ class NewDAppCard extends HookConsumerWidget {
required this.dapp,
required this.isEditMode,
required this.onTap,
required this.onRemoveTap,
required this.mainAxisCount,
});

Widget cardBox(BuildContext context, {double? ratioFactor}) {
// final icons = dapp.reviewApi!.icons!;
Widget cardBox(
BuildContext context, {
double? ratioFactor,
DAppsPagePresenter? actions,
void Function()? shatter,
bool animated = false,
}) {
final image = dapp is Bookmark
? (dapp as Bookmark).image ?? '${(dapp as Bookmark).url}/favicon.ico'
: dapp.reviewApi!.icon!;
Expand All @@ -44,7 +48,15 @@ class NewDAppCard extends HookConsumerWidget {
(mainAxisCount == CardMainAxisCount.mobile ? 0.3 : 0.2));
return GestureDetector(
onTap: () {
if (onTap != null) onTap!();
if (animated) {
Navigator.pop(context);
Future.delayed(
const Duration(milliseconds: 500),
() => onTap!(),
);
} else if (onTap != null) {
onTap!();
}
},
child: Column(
mainAxisSize: MainAxisSize.max,
Expand Down Expand Up @@ -97,12 +109,13 @@ class NewDAppCard extends HookConsumerWidget {
),
),
),
if (isEditMode && onRemoveTap != null)
if (isEditMode && dapp is Bookmark)
Positioned(
top: -6,
left: -6,
child: GestureDetector(
onTap: () => onRemoveTap!(dapp as Bookmark),
onTap: () => actions!
.removeBookmarkDialog(dapp as Bookmark, shatter!),
child: const Icon(
Icons.remove_circle_rounded,
),
Expand Down Expand Up @@ -138,6 +151,7 @@ class NewDAppCard extends HookConsumerWidget {
final dappAbout =
dapp is Bookmark ? (dapp as Bookmark).title : dapp.app!.description!;
final dappUrl = dapp is Bookmark ? (dapp as Bookmark).url : dapp.app!.url!;
final isBookMark = dapp is Bookmark;

final animationController = useAnimationController(
duration: const Duration(milliseconds: 75),
Expand Down Expand Up @@ -189,7 +203,7 @@ class NewDAppCard extends HookConsumerWidget {
onPressed: () => popWrapper(actions.addBookmark, context)),
];

getBookMarkContextMenuAction() => [
getBookMarkContextMenuAction(void Function() shatter) => [
CupertinoContextMenuAction(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
Expand Down Expand Up @@ -220,56 +234,66 @@ class NewDAppCard extends HookConsumerWidget {
CupertinoContextMenuAction(
isDestructiveAction: true,
trailingIcon: Icons.remove_circle_outline_rounded,
onPressed: () => popWrapper(
onRemoveTap != null
? () => onRemoveTap!(dapp as Bookmark)
: null,
context),
onPressed: () => popWrapper(() async {
actions.removeBookmarkDialog(dapp as Bookmark, shatter);
}, context),
child: Text(FlutterI18n.translate(context, 'remove_dapp'),
style: FontTheme.of(context).body1Cl()))
];

final contextMenuActions = onRemoveTap != null
? getBookMarkContextMenuAction()
: getDAppMarkContextMenuAction();

final size = (mainAxisCount == CardMainAxisCount.mobile ? 0.5 : 0.3);
final sizeLimit =
(mainAxisCount == CardMainAxisCount.mobile ? 0.6000 : 0.6666);

return isEditMode
? ReorderableItemView(
key: Key(dappUrl),
index: index,
child: AnimatedBuilder(
animation: animationController,
builder: (context, child) {
return Transform.rotate(
angle: animationController.value *
(pi / 8), // Adjust the range of rotation
child: child,
);
},
child: SizedBox.expand(child: cardBox(context)),
),
)
: CupertinoContextMenu.builder(
builder: (context, animation) {
return SizedBox(
width: MediaQuery.of(context).size.width /
(mainAxisCount - animation.value),
height: MediaQuery.of(context).size.width /
(mainAxisCount - animation.value),
child: cardBox(
context,
ratioFactor: animation.value < sizeLimit
? null
: (size * animation.value),
),
Widget getCardItem({void Function()? shatter}) {
final contextMenuActions = dapp is Bookmark?
? getBookMarkContextMenuAction(shatter!)
: getDAppMarkContextMenuAction();
if (isEditMode) {
return ReorderableItemView(
key: Key(dappUrl),
index: index,
child: AnimatedBuilder(
animation: animationController,
builder: (context, child) {
return Transform.rotate(
angle: animationController.value *
(pi / 8), // Adjust the range of rotation
child: child,
);
},
actions: contextMenuActions,
child: SizedBox.expand(
child: cardBox(context, shatter: shatter, actions: actions)),
),
);
}
return CupertinoContextMenu.builder(
builder: (context, animation) {
return SizedBox(
width: MediaQuery.of(context).size.width /
(mainAxisCount - animation.value),
height: MediaQuery.of(context).size.width /
(mainAxisCount - animation.value),
child: cardBox(context,
ratioFactor: animation.value < sizeLimit
? null
: (size * animation.value),
shatter: shatter,
actions: actions,
animated: animation.value != 0.0),
);
},
actions: contextMenuActions,
);
}

return isBookMark
? ShatteringWidget(
builder: (shatter) {
return getCardItem(shatter: shatter);
},
onShatterCompleted: () => actions.removeBookmark(dapp as Bookmark))
: getCardItem();
}
}

Expand Down
Loading

0 comments on commit 21ac83e

Please sign in to comment.