Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2025-01-10 12:44:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

desktop emoji select

Browse source
This commit is contained in:
julian 2022-11-17 12:56:10 -06:00
parent 682966dab8
commit 11735cdaf7
2 changed files with 151 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

132
lib/pages/address_book_views/subviews/add_address_book_entry_view.dart
View file

@ -191,33 +191,33 @@ class _AddAddressBookEntryViewState
style: STextStyles.desktopH3(context), style: STextStyles.desktopH3(context),
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
const SizedBox(width: 10), // const SizedBox(width: 10),
AppBarIconButton( // AppBarIconButton(
key: // key:
const Key("addAddressBookEntryFavoriteButtonKey"), // const Key("addAddressBookEntryFavoriteButtonKey"),
size: 36, // size: 36,
shadows: const [], // shadows: const [],
color: Theme.of(context) // color: Theme.of(context)
.extension<StackColors>()! // .extension<StackColors>()!
.background, // .background,
icon: SvgPicture.asset( // icon: SvgPicture.asset(
Assets.svg.star, // Assets.svg.star,
color: _isFavorite // color: _isFavorite
? Theme.of(context) // ? Theme.of(context)
.extension<StackColors>()! // .extension<StackColors>()!
.favoriteStarActive // .favoriteStarActive
: Theme.of(context) // : Theme.of(context)
.extension<StackColors>()! // .extension<StackColors>()!
.favoriteStarInactive, // .favoriteStarInactive,
width: 20, // width: 20,
height: 20, // height: 20,
), // ),
onPressed: () { // onPressed: () {
setState(() { // setState(() {
_isFavorite = !_isFavorite; // _isFavorite = !_isFavorite;
}); // });
}, // },
), // ),
], ],
), ),
), ),
@ -225,10 +225,11 @@ class _AddAddressBookEntryViewState
], ],
), ),
Expanded( Expanded(
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10), padding: const EdgeInsets.symmetric(horizontal: 10),
child: child, child: child,
)), ),
),
], ],
); );
}, },
@ -292,66 +293,17 @@ class _AddAddressBookEntryViewState
: showDialog<dynamic>( : showDialog<dynamic>(
context: context, context: context,
builder: (context) { builder: (context) {
return DesktopDialog( return const DesktopDialog(
maxHeight: 700, maxHeight: 700,
maxWidth: 700, maxWidth: 600,
child: Column( child: Padding(
children: [ padding: EdgeInsets.only(
Row( left: 32,
children: [ right: 20,
Padding( top: 32,
padding: bottom: 32,
const EdgeInsets ),
.all(32), child: EmojiSelectSheet(),
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) { }).then((value) {

188
lib/widgets/emoji_select_sheet.dart
View file

@ -4,6 +4,9 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/utilities/constants.dart'; import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/conditional_parent.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
class EmojiSelectSheet extends ConsumerWidget { class EmojiSelectSheet extends ConsumerWidget {
const EmojiSelectSheet({ const EmojiSelectSheet({
@ -16,7 +19,9 @@ class EmojiSelectSheet extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final size = MediaQuery.of(context).size; final isDesktop = Util.isDesktop;
final size = isDesktop ? const Size(600, 700) : MediaQuery.of(context).size;
final double maxHeight = size.height * 0.60; final double maxHeight = size.height * 0.60;
final double availableWidth = size.width - (2 * horizontalPadding); final double availableWidth = size.width - (2 * horizontalPadding);
final int emojisPerRow = final int emojisPerRow =
@ -24,90 +29,115 @@ class EmojiSelectSheet extends ConsumerWidget {
final itemCount = Emoji.all().length; final itemCount = Emoji.all().length;
return Container( return ConditionalParent(
decoration: BoxDecoration( condition: !isDesktop,
color: Theme.of(context).extension<StackColors>()!.popupBG, builder: (child) => Container(
borderRadius: const BorderRadius.vertical( decoration: BoxDecoration(
top: Radius.circular(20), color: Theme.of(context).extension<StackColors>()!.popupBG,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(20),
),
),
child: LimitedBox(
maxHeight: maxHeight,
child: Padding(
padding: EdgeInsets.only(
left: horizontalPadding,
right: horizontalPadding,
top: 10,
bottom: 0,
),
child: child,
),
), ),
), ),
child: LimitedBox( child: Column(
maxHeight: maxHeight, mainAxisSize: MainAxisSize.min,
child: Padding( crossAxisAlignment: CrossAxisAlignment.stretch,
padding: EdgeInsets.only( children: [
left: horizontalPadding, if (!isDesktop)
right: horizontalPadding, Center(
top: 10, child: Container(
bottom: 0, decoration: BoxDecoration(
), color: Theme.of(context)
child: Column( .extension<StackColors>()!
mainAxisSize: MainAxisSize.min, .textFieldDefaultBG,
crossAxisAlignment: CrossAxisAlignment.stretch, borderRadius: BorderRadius.circular(
children: [ Constants.size.circularBorderRadius,
Center(
child: Container(
decoration: BoxDecoration(
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
), ),
width: 60,
height: 4,
), ),
width: 60,
height: 4,
), ),
const SizedBox( ),
height: 36, if (!isDesktop)
), const SizedBox(
Text( height: 36,
"Select emoji", ),
style: STextStyles.pageTitleH2(context), Text(
textAlign: TextAlign.left, "Select emoji",
), style: isDesktop
const SizedBox( ? STextStyles.desktopH3(context)
height: 16, : STextStyles.pageTitleH2(context),
), textAlign: TextAlign.left,
Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: GridView.builder(
itemCount: itemCount,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: emojisPerRow,
),
itemBuilder: (context, index) {
final emoji = Emoji.all()[index];
return GestureDetector(
onTap: () {
Navigator.of(context).pop(emoji);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.transparent,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(emoji.char),
),
),
);
},
),
)
],
),
),
const SizedBox(
height: 24,
),
],
), ),
), SizedBox(
height: isDesktop ? 28 : 16,
),
Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: GridView.builder(
itemCount: itemCount,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: emojisPerRow,
),
itemBuilder: (context, index) {
final emoji = Emoji.all()[index];
return GestureDetector(
onTap: () {
Navigator.of(context).pop(emoji);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.transparent,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
emoji.char,
style: isDesktop
? STextStyles.desktopTextSmall(context)
: null,
),
),
),
);
},
),
)
],
),
),
SizedBox(
height: isDesktop ? 20 : 24,
),
if (isDesktop)
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SecondaryButton(
label: "Cancel",
width: 248,
buttonHeight: ButtonHeight.l,
onPressed: Navigator.of(context).pop,
),
],
),
],
), ),
); );
} }