From 3a7f1f9c49854c035e66c4254050a4c7dbfa67e7 Mon Sep 17 00:00:00 2001
From: ryleedavis <rylee@cypherstack.com>
Date: Mon, 14 Nov 2022 19:27:36 -0700
Subject: [PATCH] layout fix for new contact
---
.../subviews/add_address_book_entry_view.dart | 659 ++++++++++++------
.../new_contact_address_entry_form.dart | 6 +-
2 files changed, 464 insertions(+), 201 deletions(-)
diff --git a/lib/pages/address_book_views/subviews/add_address_book_entry_view.dart b/lib/pages/address_book_views/subviews/add_address_book_entry_view.dart
index 588ca5b26..5835c80cd 100644
--- a/lib/pages/address_book_views/subviews/add_address_book_entry_view.dart
+++ b/lib/pages/address_book_views/subviews/add_address_book_entry_view.dart
@@ -224,7 +224,11 @@ class _AddAddressBookEntryViewState
const DesktopDialogCloseButton(),
],
),
- Expanded(child: child),
+ Expanded(
+ child: Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 10),
+ child: child,
+ )),
],
);
},
@@ -248,216 +252,473 @@ class _AddAddressBookEntryViewState
child: IntrinsicHeight(
child: Column(
children: [
- const SizedBox(
- height: 4,
- ),
- GestureDetector(
- onTap: () {
- if (_selectedEmoji != null) {
- setState(() {
- _selectedEmoji = null;
- });
- return;
- }
+ if (!isDesktop) const SizedBox(height: 4),
+ isDesktop
+ ? Row(
+ mainAxisAlignment:
+ MainAxisAlignment.spaceBetween,
+ children: [
+ GestureDetector(
+ onTap: () {
+ if (_selectedEmoji != null) {
+ setState(() {
+ _selectedEmoji = null;
+ });
+ return;
+ }
- ///TODO if desktop make dialog
- !isDesktop
- ? showModalBottomSheet<dynamic>(
- backgroundColor: Colors.transparent,
- context: context,
- shape: const RoundedRectangleBorder(
- borderRadius: BorderRadius.vertical(
- top: Radius.circular(20),
- ),
- ),
- builder: (_) => const EmojiSelectSheet(),
- ).then((value) {
- if (value is Emoji) {
- setState(() {
- _selectedEmoji = value;
- });
- }
- })
- : showDialog<dynamic>(
- context: context,
- builder: (context) {
- return DesktopDialog(
- maxHeight: 700,
- maxWidth: 700,
- child: Column(
- children: [
- Row(
- children: [
- Padding(
- padding:
- const EdgeInsets.all(32),
- child: Text(
- "Select emoji",
- style:
- STextStyles.desktopH3(
- context),
- textAlign: TextAlign.center,
- ),
+ ///TODO if desktop make dialog
+ !isDesktop
+ ? showModalBottomSheet<dynamic>(
+ backgroundColor:
+ Colors.transparent,
+ context: context,
+ shape:
+ const RoundedRectangleBorder(
+ borderRadius:
+ BorderRadius.vertical(
+ top: Radius.circular(20),
),
- ],
- ),
- Expanded(
- child: LayoutBuilder(
- builder:
- (context, constraints) {
- return SingleChildScrollView(
- scrollDirection:
- Axis.vertical,
- child: ConstrainedBox(
- constraints:
- BoxConstraints(
- minHeight: constraints
- .maxHeight,
- minWidth: constraints
- .maxWidth,
- ),
- child: IntrinsicHeight(
- child: Column(
- children: const [
- Padding(
- padding: EdgeInsets
- .symmetric(
- horizontal:
- 32),
- // child:
- // EmojiSelectSheet(),
+ ),
+ builder: (_) =>
+ const EmojiSelectSheet(),
+ ).then((value) {
+ if (value is Emoji) {
+ setState(() {
+ _selectedEmoji = value;
+ });
+ }
+ })
+ : showDialog<dynamic>(
+ context: context,
+ builder: (context) {
+ return DesktopDialog(
+ maxHeight: 700,
+ maxWidth: 700,
+ child: Column(
+ children: [
+ Row(
+ children: [
+ Padding(
+ padding:
+ const EdgeInsets
+ .all(32),
+ child: Text(
+ "Select emoji",
+ style: STextStyles
+ .desktopH3(
+ context),
+ textAlign:
+ TextAlign
+ .center,
),
- ],
+ ),
+ ],
+ ),
+ Expanded(
+ child: LayoutBuilder(
+ builder: (context,
+ constraints) {
+ return SingleChildScrollView(
+ scrollDirection:
+ Axis.vertical,
+ child:
+ ConstrainedBox(
+ constraints:
+ BoxConstraints(
+ minHeight:
+ constraints
+ .maxHeight,
+ minWidth:
+ constraints
+ .maxWidth,
+ ),
+ child:
+ IntrinsicHeight(
+ child: Column(
+ children: const [
+ Padding(
+ padding:
+ EdgeInsets.symmetric(horizontal: 32),
+ // child:
+ // EmojiSelectSheet(),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ },
),
),
+ ],
+ ),
+ );
+ }).then((value) {
+ if (value is Emoji) {
+ setState(() {
+ _selectedEmoji = value;
+ });
+ }
+ });
+ },
+ child: SizedBox(
+ height: 56,
+ width: 56,
+ child: Stack(
+ children: [
+ Container(
+ height: 56,
+ width: 56,
+ decoration: BoxDecoration(
+ borderRadius:
+ BorderRadius.circular(24),
+ color: Theme.of(context)
+ .extension<StackColors>()!
+ .textFieldActiveBG,
+ ),
+ child: Center(
+ child: _selectedEmoji == null
+ ? SvgPicture.asset(
+ Assets.svg.user,
+ height: 30,
+ width: 30,
+ )
+ : Text(
+ _selectedEmoji!.char,
+ style: STextStyles
+ .pageTitleH1(context),
),
- );
- },
+ ),
+ ),
+ Align(
+ alignment: Alignment.bottomRight,
+ child: Container(
+ height: 14,
+ width: 14,
+ decoration: BoxDecoration(
+ borderRadius:
+ BorderRadius.circular(14),
+ color: Theme.of(context)
+ .extension<StackColors>()!
+ .accentColorDark),
+ child: Center(
+ child: _selectedEmoji == null
+ ? SvgPicture.asset(
+ Assets.svg.plus,
+ color: Theme.of(context)
+ .extension<
+ StackColors>()!
+ .textWhite,
+ width: 12,
+ height: 12,
+ )
+ : SvgPicture.asset(
+ Assets.svg.thickX,
+ color: Theme.of(context)
+ .extension<
+ StackColors>()!
+ .textWhite,
+ width: 8,
+ height: 8,
+ ),
),
),
- ],
- ),
- );
- }).then((value) {
- if (value is Emoji) {
- setState(() {
- _selectedEmoji = value;
- });
- }
- });
- },
- child: SizedBox(
- height: 48,
- width: 48,
- child: Stack(
- children: [
- Container(
- height: 48,
- width: 48,
- decoration: BoxDecoration(
- borderRadius: BorderRadius.circular(24),
- color: Theme.of(context)
- .extension<StackColors>()!
- .textFieldActiveBG,
- ),
- child: Center(
- child: _selectedEmoji == null
- ? SvgPicture.asset(
- Assets.svg.user,
- height: 24,
- width: 24,
)
- : Text(
- _selectedEmoji!.char,
- style: STextStyles.pageTitleH1(
- context),
- ),
- ),
- ),
- Align(
- alignment: Alignment.bottomRight,
- child: Container(
- height: 14,
- width: 14,
- decoration: BoxDecoration(
- borderRadius: BorderRadius.circular(14),
- color: Theme.of(context)
- .extension<StackColors>()!
- .accentColorDark),
- child: Center(
- child: _selectedEmoji == null
- ? SvgPicture.asset(
- Assets.svg.plus,
- color: Theme.of(context)
- .extension<StackColors>()!
- .textWhite,
- width: 12,
- height: 12,
- )
- : SvgPicture.asset(
- Assets.svg.thickX,
- color: Theme.of(context)
- .extension<StackColors>()!
- .textWhite,
- width: 8,
- height: 8,
- ),
+ ],
+ ),
),
),
- )
- ],
- ),
- ),
- ),
- const SizedBox(
- height: 8,
- ),
- ClipRRect(
- borderRadius: BorderRadius.circular(
- Constants.size.circularBorderRadius,
- ),
- child: TextField(
- autocorrect: Util.isDesktop ? false : true,
- enableSuggestions: Util.isDesktop ? false : true,
- controller: nameController,
- focusNode: nameFocusNode,
- style: STextStyles.field(context),
- decoration: standardInputDecoration(
- "Enter contact name",
- nameFocusNode,
- context,
- ).copyWith(
- suffixIcon: ref
- .read(contactNameIsNotEmptyStateProvider
- .state)
- .state
- ? Padding(
- padding: const EdgeInsets.only(right: 0),
- child: UnconstrainedBox(
- child: Row(
- children: [
- TextFieldIconButton(
- child: const XIcon(),
- onTap: () async {
- setState(() {
- nameController.text = "";
- });
- },
- ),
- ],
- ),
+ const SizedBox(width: 8),
+ SizedBox(
+ width: isDesktop ? 450 : null,
+ child: ClipRRect(
+ borderRadius: BorderRadius.circular(
+ Constants.size.circularBorderRadius,
),
- )
- : null,
- ),
- onChanged: (newValue) {
- ref
- .read(
- contactNameIsNotEmptyStateProvider.state)
- .state = newValue.isNotEmpty;
- },
- ),
- ),
+ child: TextField(
+ autocorrect:
+ Util.isDesktop ? false : true,
+ enableSuggestions:
+ Util.isDesktop ? false : true,
+ controller: nameController,
+ focusNode: nameFocusNode,
+ style: STextStyles.field(context),
+ decoration: standardInputDecoration(
+ "Enter contact name",
+ nameFocusNode,
+ context,
+ ).copyWith(
+ labelStyle:
+ STextStyles.fieldLabel(context),
+ suffixIcon: ref
+ .read(
+ contactNameIsNotEmptyStateProvider
+ .state)
+ .state
+ ? Padding(
+ padding:
+ const EdgeInsets.only(
+ right: 0),
+ child: UnconstrainedBox(
+ child: Row(
+ children: [
+ TextFieldIconButton(
+ child: const XIcon(),
+ onTap: () async {
+ setState(() {
+ nameController
+ .text = "";
+ });
+ },
+ ),
+ ],
+ ),
+ ),
+ )
+ : null,
+ ),
+ onChanged: (newValue) {
+ ref
+ .read(
+ contactNameIsNotEmptyStateProvider
+ .state)
+ .state = newValue.isNotEmpty;
+ },
+ ),
+ ),
+ ),
+ ],
+ )
+ : Column(
+ children: [
+ GestureDetector(
+ onTap: () {
+ if (_selectedEmoji != null) {
+ setState(() {
+ _selectedEmoji = null;
+ });
+ return;
+ }
+
+ ///TODO if desktop make dialog
+ !isDesktop
+ ? showModalBottomSheet<dynamic>(
+ backgroundColor:
+ Colors.transparent,
+ context: context,
+ shape:
+ const RoundedRectangleBorder(
+ borderRadius:
+ BorderRadius.vertical(
+ top: Radius.circular(20),
+ ),
+ ),
+ builder: (_) =>
+ const EmojiSelectSheet(),
+ ).then((value) {
+ if (value is Emoji) {
+ setState(() {
+ _selectedEmoji = value;
+ });
+ }
+ })
+ : showDialog<dynamic>(
+ context: context,
+ builder: (context) {
+ return DesktopDialog(
+ maxHeight: 700,
+ maxWidth: 700,
+ child: Column(
+ children: [
+ Row(
+ children: [
+ Padding(
+ padding:
+ const EdgeInsets
+ .all(32),
+ child: Text(
+ "Select emoji",
+ style: STextStyles
+ .desktopH3(
+ context),
+ textAlign:
+ TextAlign
+ .center,
+ ),
+ ),
+ ],
+ ),
+ Expanded(
+ child: LayoutBuilder(
+ builder: (context,
+ constraints) {
+ return SingleChildScrollView(
+ scrollDirection:
+ Axis.vertical,
+ child:
+ ConstrainedBox(
+ constraints:
+ BoxConstraints(
+ minHeight:
+ constraints
+ .maxHeight,
+ minWidth:
+ constraints
+ .maxWidth,
+ ),
+ child:
+ IntrinsicHeight(
+ child: Column(
+ children: const [
+ Padding(
+ padding:
+ EdgeInsets.symmetric(horizontal: 32),
+ // child:
+ // EmojiSelectSheet(),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ },
+ ),
+ ),
+ ],
+ ),
+ );
+ }).then((value) {
+ if (value is Emoji) {
+ setState(() {
+ _selectedEmoji = value;
+ });
+ }
+ });
+ },
+ child: SizedBox(
+ height: 48,
+ width: 48,
+ child: Stack(
+ children: [
+ Container(
+ height: 48,
+ width: 48,
+ decoration: BoxDecoration(
+ borderRadius:
+ BorderRadius.circular(24),
+ color: Theme.of(context)
+ .extension<StackColors>()!
+ .textFieldActiveBG,
+ ),
+ child: Center(
+ child: _selectedEmoji == null
+ ? SvgPicture.asset(
+ Assets.svg.user,
+ height: 24,
+ width: 24,
+ )
+ : Text(
+ _selectedEmoji!.char,
+ style: STextStyles
+ .pageTitleH1(context),
+ ),
+ ),
+ ),
+ Align(
+ alignment: Alignment.bottomRight,
+ child: Container(
+ height: 14,
+ width: 14,
+ decoration: BoxDecoration(
+ borderRadius:
+ BorderRadius.circular(14),
+ color: Theme.of(context)
+ .extension<StackColors>()!
+ .accentColorDark),
+ child: Center(
+ child: _selectedEmoji == null
+ ? SvgPicture.asset(
+ Assets.svg.plus,
+ color: Theme.of(context)
+ .extension<
+ StackColors>()!
+ .textWhite,
+ width: 12,
+ height: 12,
+ )
+ : SvgPicture.asset(
+ Assets.svg.thickX,
+ color: Theme.of(context)
+ .extension<
+ StackColors>()!
+ .textWhite,
+ width: 8,
+ height: 8,
+ ),
+ ),
+ ),
+ )
+ ],
+ ),
+ ),
+ ),
+ const SizedBox(height: 8),
+ ClipRRect(
+ borderRadius: BorderRadius.circular(
+ Constants.size.circularBorderRadius,
+ ),
+ child: TextField(
+ autocorrect:
+ Util.isDesktop ? false : true,
+ enableSuggestions:
+ Util.isDesktop ? false : true,
+ controller: nameController,
+ focusNode: nameFocusNode,
+ style: STextStyles.field(context),
+ decoration: standardInputDecoration(
+ "Enter contact name",
+ nameFocusNode,
+ context,
+ ).copyWith(
+ suffixIcon: ref
+ .read(
+ contactNameIsNotEmptyStateProvider
+ .state)
+ .state
+ ? Padding(
+ padding: const EdgeInsets.only(
+ right: 0),
+ child: UnconstrainedBox(
+ child: Row(
+ children: [
+ TextFieldIconButton(
+ child: const XIcon(),
+ onTap: () async {
+ setState(() {
+ nameController
+ .text = "";
+ });
+ },
+ ),
+ ],
+ ),
+ ),
+ )
+ : null,
+ ),
+ onChanged: (newValue) {
+ ref
+ .read(
+ contactNameIsNotEmptyStateProvider
+ .state)
+ .state = newValue.isNotEmpty;
+ },
+ ),
+ ),
+ ],
+ ),
+ if (!isDesktop) const SizedBox(height: 8),
if (forms.length <= 1)
const SizedBox(
height: 8,
diff --git a/lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart b/lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart
index ce98cee10..b6cf0aad4 100644
--- a/lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart
+++ b/lib/pages/address_book_views/subviews/new_contact_address_entry_form.dart
@@ -14,14 +14,13 @@ import 'package:stackwallet/utilities/enums/coin_enum.dart';
import 'package:stackwallet/utilities/logger.dart';
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/clipboard_icon.dart';
import 'package:stackwallet/widgets/icon_widgets/qrcode_icon.dart';
import 'package:stackwallet/widgets/icon_widgets/x_icon.dart';
import 'package:stackwallet/widgets/stack_text_field.dart';
import 'package:stackwallet/widgets/textfield_icon_button.dart';
-import 'package:stackwallet/utilities/util.dart';
-
class NewContactAddressEntryForm extends ConsumerStatefulWidget {
const NewContactAddressEntryForm({
Key? key,
@@ -70,6 +69,7 @@ class _NewContactAddressEntryFormState
@override
Widget build(BuildContext context) {
+ final isDesktop = Util.isDesktop;
return Column(
children: [
TextField(
@@ -168,6 +168,7 @@ class _NewContactAddressEntryFormState
addressLabelFocusNode,
context,
).copyWith(
+ labelStyle: isDesktop ? STextStyles.fieldLabel(context) : null,
suffixIcon: addressLabelController.text.isNotEmpty
? Padding(
padding: const EdgeInsets.only(right: 0),
@@ -212,6 +213,7 @@ class _NewContactAddressEntryFormState
addressFocusNode,
context,
).copyWith(
+ labelStyle: isDesktop ? STextStyles.fieldLabel(context) : null,
suffixIcon: UnconstrainedBox(
child: Row(
children: [