Skip to content

Commit

Permalink
add breathing effect to recent activity on desktop
Browse files Browse the repository at this point in the history
  • Loading branch information
@julian-CStack
julian-CStack committed Jun 27, 2024
1 parent 43071c0 commit c8a868a
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 153 deletions.
195 changes: 101 additions & 94 deletions lib/pages/wallet_view/transaction_views/tx_v2/transaction_v2_list_item.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import '../../../../utilities/text_styles.dart';
import '../../../../utilities/util.dart';
import '../../../../wallets/crypto_currency/crypto_currency.dart';
import '../../../../wallets/isar/providers/wallet_info_provider.dart';
import '../../../../widgets/breathing.dart';
import '../../../../widgets/desktop/desktop_dialog.dart';
import '../../../../widgets/desktop/desktop_dialog_close_button.dart';
import '../../../../widgets/trade_card.dart';
Expand Down Expand Up @@ -49,98 +50,100 @@ class TxListItem extends ConsumerWidget {
color: Theme.of(context).extension<StackColors>()!.popupBG,
borderRadius: radius,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TransactionCardV2(
key: UniqueKey(),
transaction: _tx,
),
TradeCard(
key: Key(
_tx.txid +
_tx.type.name +
_tx.hashCode.toString() +
trade.uuid,
), //
trade: trade,
onTap: () async {
if (Util.isDesktop) {
await showDialog<void>(
context: context,
builder: (context) => Navigator(
initialRoute: TradeDetailsView.routeName,
onGenerateRoute: RouteGenerator.generateRoute,
onGenerateInitialRoutes: (_, __) {
return [
FadePageRoute(
DesktopDialog(
maxHeight: null,
maxWidth: 580,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(
left: 32,
bottom: 16,
child: Breathing(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TransactionCardV2(
key: UniqueKey(),
transaction: _tx,
),
TradeCard(
key: Key(
_tx.txid +
_tx.type.name +
_tx.hashCode.toString() +
trade.uuid,
), //
trade: trade,
onTap: () async {
if (Util.isDesktop) {
await showDialog<void>(
context: context,
builder: (context) => Navigator(
initialRoute: TradeDetailsView.routeName,
onGenerateRoute: RouteGenerator.generateRoute,
onGenerateInitialRoutes: (_, __) {
return [
FadePageRoute(
DesktopDialog(
maxHeight: null,
maxWidth: 580,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(
left: 32,
bottom: 16,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Trade details",
style: STextStyles.desktopH3(
context),
),
DesktopDialogCloseButton(
onPressedOverride: Navigator.of(
context,
rootNavigator: true,
).pop,
),
],
),
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Trade details",
style:
STextStyles.desktopH3(context),
),
DesktopDialogCloseButton(
onPressedOverride: Navigator.of(
context,
rootNavigator: true,
).pop,
),
],
Flexible(
child: TradeDetailsView(
tradeId: trade.tradeId,
// TODO: [prio:med]
// transactionIfSentFromStack: tx,
transactionIfSentFromStack: null,
walletName: ref
.watch(pWalletName(_tx.walletId)),
walletId: _tx.walletId,
),
),
),
Flexible(
child: TradeDetailsView(
tradeId: trade.tradeId,
// TODO: [prio:med]
// transactionIfSentFromStack: tx,
transactionIfSentFromStack: null,
walletName: ref
.watch(pWalletName(_tx.walletId)),
walletId: _tx.walletId,
),
),
],
],
),
),
const RouteSettings(
name: TradeDetailsView.routeName,
),
),
const RouteSettings(
name: TradeDetailsView.routeName,
),
),
];
},
),
);
} else {
unawaited(
Navigator.of(context).pushNamed(
TradeDetailsView.routeName,
arguments: Tuple4(
trade.tradeId,
_tx,
_tx.walletId,
ref.read(pWalletName(_tx.walletId)),
];
},
),
);
} else {
unawaited(
Navigator.of(context).pushNamed(
TradeDetailsView.routeName,
arguments: Tuple4(
trade.tradeId,
_tx,
_tx.walletId,
ref.read(pWalletName(_tx.walletId)),
),
),
),
);
}
},
),
],
);
}
},
),
],
),
),
);
} else {
Expand All @@ -149,10 +152,12 @@ class TxListItem extends ConsumerWidget {
color: Theme.of(context).extension<StackColors>()!.popupBG,
borderRadius: radius,
),
child: TransactionCardV2(
// this may mess with combined firo transactions
key: UniqueKey(),
transaction: _tx,
child: Breathing(
child: TransactionCardV2(
// this may mess with combined firo transactions
key: UniqueKey(),
transaction: _tx,
),
),
);
}
Expand All @@ -165,9 +170,11 @@ class TxListItem extends ConsumerWidget {
color: Theme.of(context).extension<StackColors>()!.popupBG,
borderRadius: radius,
),
child: FusionTxGroupCard(
key: UniqueKey(),
group: group,
child: Breathing(
child: FusionTxGroupCard(
key: UniqueKey(),
group: group,
),
),
);
}
Expand Down
105 changes: 46 additions & 59 deletions lib/pages_desktop_specific/my_stack_view/wallet_summary_table.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.dart';

import '../../pages/wallets_view/wallets_overview.dart';
import '../../providers/providers.dart';
import '../../themes/coin_icon_provider.dart';
Expand All @@ -21,6 +22,7 @@ import '../../utilities/amount/amount.dart';
import '../../utilities/text_styles.dart';
import '../../wallets/crypto_currency/crypto_currency.dart';
import '../../wallets/isar/providers/all_wallets_info_provider.dart';
import '../../widgets/breathing.dart';
import '../../widgets/conditional_parent.dart';
import '../../widgets/desktop/desktop_dialog.dart';
import '../../widgets/desktop/desktop_dialog_close_button.dart';
Expand Down Expand Up @@ -146,71 +148,56 @@ class _DesktopWalletSummaryRowState

@override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (_) => setState(
() => _hovering = true,
),
onExit: (_) => setState(
() => _hovering = false,
),
child: AnimatedScale(
scale: _hovering ? 1.00 : 0.98,
duration: const Duration(
milliseconds: 200,
),
child: RoundedWhiteContainer(
padding: const EdgeInsets.all(20),
hoverColor: Colors.transparent,
onPressed: _onPressed,
child: Row(
children: [
Expanded(
flex: 4,
child: Row(
children: [
SvgPicture.file(
File(
ref.watch(coinIconProvider(widget.coin)),
),
width: 28,
height: 28,
),
const SizedBox(
width: 10,
return Breathing(
child: RoundedWhiteContainer(
padding: const EdgeInsets.all(20),
hoverColor: Colors.transparent,
onPressed: _onPressed,
child: Row(
children: [
Expanded(
flex: 4,
child: Row(
children: [
SvgPicture.file(
File(
ref.watch(coinIconProvider(widget.coin)),
),
Text(
widget.coin.prettyName,
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
width: 28,
height: 28,
),
const SizedBox(
width: 10,
),
Text(
widget.coin.prettyName,
style: STextStyles.desktopTextExtraSmall(context).copyWith(
color:
Theme.of(context).extension<StackColors>()!.textDark,
),
],
),
),
Expanded(
flex: 4,
child: Text(
widget.walletCount == 1
? "${widget.walletCount} wallet"
: "${widget.walletCount} wallets",
style: STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
),
],
),
Expanded(
flex: 6,
child: TablePriceInfo(
coin: widget.coin,
),
Expanded(
flex: 4,
child: Text(
widget.walletCount == 1
? "${widget.walletCount} wallet"
: "${widget.walletCount} wallets",
style: STextStyles.desktopTextExtraSmall(context).copyWith(
color:
Theme.of(context).extension<StackColors>()!.textSubtitle1,
),
),
],
),
),
Expanded(
flex: 6,
child: TablePriceInfo(
coin: widget.coin,
),
),
],
),
),
);
Expand Down
32 changes: 32 additions & 0 deletions lib/widgets/breathing.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import 'package:flutter/material.dart';

class Breathing extends StatefulWidget {
const Breathing({super.key, required this.child});

final Widget child;

@override
State<Breathing> createState() => _BreathingState();
}

class _BreathingState extends State<Breathing> {
bool _hovering = false;
@override
Widget build(BuildContext context) {
return MouseRegion(
onEnter: (_) => setState(
() => _hovering = true,
),
onExit: (_) => setState(
() => _hovering = false,
),
child: AnimatedScale(
scale: _hovering ? 1.00 : 0.98,
duration: const Duration(
milliseconds: 200,
),
child: widget.child,
),
);
}
}

0 comments on commit c8a868a

Please sign in to comment.