mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2024-12-23 03:49:22 +00:00
desktop emoji select
This commit is contained in:
julian
parent
682966dab8
commit
11735cdaf7
2 changed files with 151 additions and 169 deletions
|
|
@ -191,33 +191,33 @@ class _AddAddressBookEntryViewState
|
|||
style: STextStyles.desktopH3(context),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
AppBarIconButton(
|
||||
key:
|
||||
const Key("addAddressBookEntryFavoriteButtonKey"),
|
||||
size: 36,
|
||||
shadows: const [],
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.background,
|
||||
icon: SvgPicture.asset(
|
||||
Assets.svg.star,
|
||||
color: _isFavorite
|
||||
? Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.favoriteStarActive
|
||||
: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.favoriteStarInactive,
|
||||
width: 20,
|
||||
height: 20,
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_isFavorite = !_isFavorite;
|
||||
});
|
||||
},
|
||||
),
|
||||
// const SizedBox(width: 10),
|
||||
// AppBarIconButton(
|
||||
// key:
|
||||
// const Key("addAddressBookEntryFavoriteButtonKey"),
|
||||
// size: 36,
|
||||
// shadows: const [],
|
||||
// color: Theme.of(context)
|
||||
// .extension<StackColors>()!
|
||||
// .background,
|
||||
// icon: SvgPicture.asset(
|
||||
// Assets.svg.star,
|
||||
// color: _isFavorite
|
||||
// ? Theme.of(context)
|
||||
// .extension<StackColors>()!
|
||||
// .favoriteStarActive
|
||||
// : Theme.of(context)
|
||||
// .extension<StackColors>()!
|
||||
// .favoriteStarInactive,
|
||||
// width: 20,
|
||||
// height: 20,
|
||||
// ),
|
||||
// onPressed: () {
|
||||
// setState(() {
|
||||
// _isFavorite = !_isFavorite;
|
||||
// });
|
||||
// },
|
||||
// ),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
|
@ -225,10 +225,11 @@ class _AddAddressBookEntryViewState
|
|||
],
|
||||
),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||
child: child,
|
||||
)),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
|
|
@ -292,66 +293,17 @@ class _AddAddressBookEntryViewState
|
|||
: showDialog<dynamic>(
|
||||
context: context,
|
||||
builder: (context) {
|
||||
return DesktopDialog(
|
||||
return const 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(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
maxWidth: 600,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: 32,
|
||||
right: 20,
|
||||
top: 32,
|
||||
bottom: 32,
|
||||
),
|
||||
child: EmojiSelectSheet(),
|
||||
),
|
||||
);
|
||||
}).then((value) {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|||
import 'package:stackwallet/utilities/constants.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/conditional_parent.dart';
|
||||
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
|
||||
|
||||
class EmojiSelectSheet extends ConsumerWidget {
|
||||
const EmojiSelectSheet({
|
||||
|
|
@ -16,7 +19,9 @@ class EmojiSelectSheet extends ConsumerWidget {
|
|||
|
||||
@override
|
||||
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 availableWidth = size.width - (2 * horizontalPadding);
|
||||
final int emojisPerRow =
|
||||
|
|
@ -24,90 +29,115 @@ class EmojiSelectSheet extends ConsumerWidget {
|
|||
|
||||
final itemCount = Emoji.all().length;
|
||||
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context).extension<StackColors>()!.popupBG,
|
||||
borderRadius: const BorderRadius.vertical(
|
||||
top: Radius.circular(20),
|
||||
return ConditionalParent(
|
||||
condition: !isDesktop,
|
||||
builder: (child) => Container(
|
||||
decoration: BoxDecoration(
|
||||
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(
|
||||
maxHeight: maxHeight,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: horizontalPadding,
|
||||
right: horizontalPadding,
|
||||
top: 10,
|
||||
bottom: 0,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Center(
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Theme.of(context)
|
||||
.extension<StackColors>()!
|
||||
.textFieldDefaultBG,
|
||||
borderRadius: BorderRadius.circular(
|
||||
Constants.size.circularBorderRadius,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
if (!isDesktop)
|
||||
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,
|
||||
),
|
||||
Text(
|
||||
"Select emoji",
|
||||
style: STextStyles.pageTitleH2(context),
|
||||
textAlign: TextAlign.left,
|
||||
),
|
||||
const SizedBox(
|
||||
height: 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),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 24,
|
||||
),
|
||||
],
|
||||
),
|
||||
if (!isDesktop)
|
||||
const SizedBox(
|
||||
height: 36,
|
||||
),
|
||||
Text(
|
||||
"Select emoji",
|
||||
style: isDesktop
|
||||
? STextStyles.desktopH3(context)
|
||||
: STextStyles.pageTitleH2(context),
|
||||
textAlign: TextAlign.left,
|
||||
),
|
||||
),
|
||||
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,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue