add breathing effect to recent activity on desktop

This commit is contained in:
julian 2024-06-27 14:53:39 -06:00
parent 43071c01df
commit c8a868a840
3 changed files with 180 additions and 154 deletions

View file

@ -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';
@ -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 {
@ -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,
),
),
);
}
@ -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,
),
),
);
}

View file

@ -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';
@ -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';
@ -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,
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)),
),
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,
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: 6,
child: TablePriceInfo(
coin: widget.coin,
),
],
),
),
],
),
),
);

View file

@ -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,
),
);
}
}