From 75bfad3471cc72def785e8e247b44a2ad57e37a9 Mon Sep 17 00:00:00 2001 From: julian Date: Sun, 2 Apr 2023 13:48:14 -0600 Subject: [PATCH] desktop address list card styling --- .../receive_view/addresses/address_card.dart | 163 +++++++----------- .../sub_widgets/desktop_address_list.dart | 41 +++-- lib/widgets/rounded_container.dart | 8 +- 3 files changed, 93 insertions(+), 119 deletions(-) diff --git a/lib/pages/receive_view/addresses/address_card.dart b/lib/pages/receive_view/addresses/address_card.dart index fdf3201d1..092809f94 100644 --- a/lib/pages/receive_view/addresses/address_card.dart +++ b/lib/pages/receive_view/addresses/address_card.dart @@ -1,13 +1,17 @@ import 'dart:async'; import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'package:isar/isar.dart'; import 'package:stackwallet/db/main_db.dart'; import 'package:stackwallet/models/isar/models/isar_models.dart'; import 'package:stackwallet/pages/receive_view/addresses/address_tag.dart'; +import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/clipboard_interface.dart'; import 'package:stackwallet/utilities/enums/coin_enum.dart'; import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/util.dart'; +import 'package:stackwallet/widgets/conditional_parent.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart'; class AddressCard extends StatefulWidget { @@ -31,6 +35,8 @@ class AddressCard extends StatefulWidget { } class _AddressCardState extends State { + final isDesktop = Util.isDesktop; + late Stream stream; late final Address address; @@ -74,115 +80,64 @@ class _AddressCardState extends State { label = snapshot.data!; } - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (label!.value.isNotEmpty) - Text( - label!.value, - style: STextStyles.itemSubtitle(context), - textAlign: TextAlign.left, + return ConditionalParent( + condition: isDesktop, + builder: (child) => Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SvgPicture.asset( + Assets.svg.iconFor(coin: widget.coin), + width: 32, + height: 32, ), - // Row( - // mainAxisAlignment: MainAxisAlignment.spaceBetween, - // children: [ - // - // CustomTextButton( - // text: "Edit label", - // textSize: 14, - // onTap: () { - // Navigator.of(context).pushNamed( - // EditAddressLabelView.routeName, - // arguments: label!.id, - // ); - // }, - // ), - // ], - // ), - if (label!.value.isNotEmpty) const SizedBox( - height: 8, + width: 12, ), - Row( - children: [ - Expanded( - child: Text( - address.value, - style: STextStyles.itemSubtitle12(context), - ), + Expanded( + child: child, + ), + ], + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (label!.value.isNotEmpty) + Text( + label!.value, + style: STextStyles.itemSubtitle(context), + textAlign: TextAlign.left, ), - ], - ), - const SizedBox( - height: 10, - ), - - if (label!.tags != null && label!.tags!.isNotEmpty) - Wrap( - spacing: 10, - runSpacing: 10, - children: label!.tags! - .map( - (e) => AddressTag( - tag: e, - ), - ) - .toList(), + if (label!.value.isNotEmpty) + SizedBox( + height: isDesktop ? 2 : 8, + ), + Row( + children: [ + Expanded( + child: Text( + address.value, + style: STextStyles.itemSubtitle12(context), + ), + ), + ], ), - // Row( - // children: [ - // Expanded( - // child: SecondaryButton( - // label: "Copy address", - // icon: CopyIcon( - // color: Theme.of(context) - // .extension()! - // .buttonTextSecondary, - // ), - // onPressed: () async { - // await widget.clipboard.setData( - // ClipboardData( - // text: address.value, - // ), - // ); - // if (mounted) { - // unawaited( - // showFloatingFlushBar( - // type: FlushBarType.info, - // message: "Copied to clipboard", - // context: context, - // ), - // ); - // } - // }, - // ), - // ), - // const SizedBox( - // width: 12, - // ), - // Expanded( - // child: SecondaryButton( - // label: "Show QR Code", - // icon: QrCodeIcon( - // color: Theme.of(context) - // .extension()! - // .buttonTextSecondary, - // ), - // onPressed: () { - // showDialog( - // context: context, - // builder: (context) => AddressQrPopup( - // addressString: address.value, - // coin: widget.coin, - // clipboard: widget.clipboard, - // ), - // ); - // }, - // ), - // ), - // ], - // ) - ], + const SizedBox( + height: 10, + ), + if (label!.tags != null && label!.tags!.isNotEmpty) + Wrap( + spacing: 10, + runSpacing: 10, + children: label!.tags! + .map( + (e) => AddressTag( + tag: e, + ), + ) + .toList(), + ), + ], + ), ); }, ), diff --git a/lib/pages_desktop_specific/addresses/sub_widgets/desktop_address_list.dart b/lib/pages_desktop_specific/addresses/sub_widgets/desktop_address_list.dart index 6e0cf3794..e0f2a31fa 100644 --- a/lib/pages_desktop_specific/addresses/sub_widgets/desktop_address_list.dart +++ b/lib/pages_desktop_specific/addresses/sub_widgets/desktop_address_list.dart @@ -13,6 +13,7 @@ import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/utilities/util.dart'; import 'package:stackwallet/widgets/icon_widgets/x_icon.dart'; +import 'package:stackwallet/widgets/rounded_white_container.dart'; import 'package:stackwallet/widgets/stack_text_field.dart'; import 'package:stackwallet/widgets/textfield_icon_button.dart'; @@ -196,20 +197,32 @@ class _DesktopAddressListState extends ConsumerState { height: isDesktop ? 20 : 16, ), Expanded( - child: ListView.separated( - shrinkWrap: true, - itemCount: ids.length, - separatorBuilder: (_, __) => Container( - height: 10, - ), - itemBuilder: (_, index) => AddressCard( - key: Key("addressCardDesktop_key_${ids[index]}"), - walletId: widget.walletId, - addressId: ids[index], - coin: coin, - onPressed: () { - ref.read(desktopSelectedAddressId.state).state = ids[index]; - }, + child: SingleChildScrollView( + child: RoundedWhiteContainer( + padding: EdgeInsets.zero, + child: ListView.separated( + shrinkWrap: true, + itemCount: ids.length, + separatorBuilder: (_, __) => Container( + height: 1, + color: Theme.of(context) + .extension()! + .backgroundAppBar, + ), + itemBuilder: (_, index) => Padding( + padding: const EdgeInsets.all(4), + child: AddressCard( + key: Key("addressCardDesktop_key_${ids[index]}"), + walletId: widget.walletId, + addressId: ids[index], + coin: coin, + onPressed: () { + ref.read(desktopSelectedAddressId.state).state = + ids[index]; + }, + ), + ), + ), ), ), ), diff --git a/lib/widgets/rounded_container.dart b/lib/widgets/rounded_container.dart index 7f8456da8..5b64c7d50 100644 --- a/lib/widgets/rounded_container.dart +++ b/lib/widgets/rounded_container.dart @@ -31,6 +31,12 @@ class RoundedContainer extends StatelessWidget { return ConditionalParent( condition: onPressed != null, builder: (child) => RawMaterialButton( + fillColor: color, + elevation: 0, + highlightElevation: 0, + disabledElevation: 0, + hoverElevation: 0, + focusElevation: 0, padding: const EdgeInsets.all(0), materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, shape: RoundedRectangleBorder( @@ -45,7 +51,7 @@ class RoundedContainer extends StatelessWidget { width: width, height: height, decoration: BoxDecoration( - color: color, + color: onPressed != null ? Colors.transparent : color, borderRadius: BorderRadius.circular( Constants.size.circularBorderRadius * radiusMultiplier, ),