Merge branch 'CW-301-desktop-side-bar-ui' of https://github.com/cake-tech/cake_wallet into CW-311-remove-drawer-from-mac-os

This commit is contained in:
OmarHatem 2023-02-11 00:48:16 +02:00
commit 10b877f55e
9 changed files with 562 additions and 554 deletions

View file

@ -445,7 +445,10 @@ Route<dynamic> createRoute(RouteSettings settings) {
));
case Routes.ioniaWelcomePage:
return CupertinoPageRoute<void>(builder: (_) => getIt.get<IoniaWelcomePage>());
return CupertinoPageRoute<void>(
fullscreenDialog: true,
builder: (_) => getIt.get<IoniaWelcomePage>(),
);
case Routes.ioniaLoginPage:
return CupertinoPageRoute<void>( builder: (_) => getIt.get<IoniaLoginPage>());

View file

@ -1,7 +1,9 @@
import 'package:cake_wallet/entities/main_actions.dart';
import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_action_button.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/market_place_page.dart';
import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
class DesktopDashboardActions extends StatelessWidget {
final DashboardViewModel dashboardViewModel;
@ -10,6 +12,8 @@ class DesktopDashboardActions extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Observer(
builder: (_) {
return Column(
children: [
const SizedBox(height: 16),
@ -65,7 +69,12 @@ class DesktopDashboardActions extends StatelessWidget {
),
],
),
Expanded(
child: MarketPlacePage(dashboardViewModel: dashboardViewModel),
),
],
);
}
);
}
}

View file

@ -1,6 +1,7 @@
import 'package:cake_wallet/entities/generate_name.dart';
import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/themes/theme_base.dart';
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:cake_wallet/utils/show_pop_up.dart';
import 'package:mobx/mobx.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
@ -24,18 +25,14 @@ class NewWalletPage extends BasePage {
final walletNameImage = Image.asset('assets/images/wallet_name.png');
final walletNameLightImage =
Image.asset('assets/images/wallet_name_light.png');
final walletNameLightImage = Image.asset('assets/images/wallet_name_light.png');
@override
String get title => S.current.new_wallet;
@override
Widget body(BuildContext context) => WalletNameForm(
_walletNewVM,
currentTheme.type == ThemeType.dark
? walletNameImage
: walletNameLightImage);
_walletNewVM, currentTheme.type == ThemeType.dark ? walletNameImage : walletNameLightImage);
}
class WalletNameForm extends StatefulWidget {
@ -64,11 +61,9 @@ class _WalletNameFormState extends State<WalletNameForm> {
@override
void initState() {
_stateReaction ??=
reaction((_) => _walletNewVM.state, (ExecutionState state) {
_stateReaction ??= reaction((_) => _walletNewVM.state, (ExecutionState state) {
if (state is ExecutedSuccessfullyState) {
Navigator.of(context)
.pushNamed(Routes.preSeed, arguments: _walletNewVM.type);
Navigator.of(context).pushNamed(Routes.preSeed, arguments: _walletNewVM.type);
}
if (state is FailureState) {
@ -90,18 +85,22 @@ class _WalletNameFormState extends State<WalletNameForm> {
@override
Widget build(BuildContext context) {
return Container(
return Padding(
padding: EdgeInsets.only(top: 24),
child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
content:
Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
content: Center(
child: ConstrainedBox(
constraints:
BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(left: 12, right: 12),
child: AspectRatio(
aspectRatio: aspectRatioImage,
child:
FittedBox(child: widget.walletImage, fit: BoxFit.fill)),
child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)),
),
Padding(
padding: EdgeInsets.only(top: 24),
@ -117,16 +116,12 @@ class _WalletNameFormState extends State<WalletNameForm> {
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w600,
color:
Theme.of(context).primaryTextTheme!.headline6!.color!),
color: Theme.of(context).primaryTextTheme!.headline6!.color!),
decoration: InputDecoration(
hintStyle: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: Theme.of(context)
.accentTextTheme!
.headline2!
.color!),
color: Theme.of(context).accentTextTheme!.headline2!.color!),
hintText: S.of(context).wallet_name,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
@ -194,14 +189,17 @@ class _WalletNameFormState extends State<WalletNameForm> {
Padding(
padding: EdgeInsets.only(top: 24),
child: SeedLanguageSelector(
key: _languageSelectorKey,
initialSelected: defaultSeedLanguage),
key: _languageSelectorKey, initialSelected: defaultSeedLanguage),
)
]
]),
bottomSectionPadding:
EdgeInsets.all(24),
bottomSection: Column(
],
),
),
),
bottomSectionPadding: EdgeInsets.all(24),
bottomSection: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column(
children: [
Observer(
builder: (context) {
@ -224,6 +222,7 @@ class _WalletNameFormState extends State<WalletNameForm> {
child: Text(S.of(context).advanced_privacy_settings),
),
],
),
)),
);
}

View file

@ -1,3 +1,4 @@
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:cw_core/wallet_type.dart';
import 'package:cake_wallet/themes/theme_base.dart';
import 'package:flutter/material.dart';
@ -13,8 +14,7 @@ class NewWalletTypePage extends BasePage {
final void Function(BuildContext, WalletType) onTypeSelected;
final walletTypeImage = Image.asset('assets/images/wallet_type.png');
final walletTypeLightImage =
Image.asset('assets/images/wallet_type_light.png');
final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png');
@override
String get title => S.current.wallet_list_restore_wallet;
@ -22,14 +22,11 @@ class NewWalletTypePage extends BasePage {
@override
Widget body(BuildContext context) => WalletTypeForm(
onTypeSelected: onTypeSelected,
walletImage: currentTheme.type == ThemeType.dark
? walletTypeImage
: walletTypeLightImage);
walletImage: currentTheme.type == ThemeType.dark ? walletTypeImage : walletTypeLightImage);
}
class WalletTypeForm extends StatefulWidget {
WalletTypeForm({required this.onTypeSelected,
required this.walletImage});
WalletTypeForm({required this.onTypeSelected, required this.walletImage});
final void Function(BuildContext, WalletType) onTypeSelected;
final Image walletImage;
@ -39,22 +36,16 @@ class WalletTypeForm extends StatefulWidget {
}
class WalletTypeFormState extends State<WalletTypeForm> {
WalletTypeFormState()
: types = availableWalletTypes;
WalletTypeFormState() : types = availableWalletTypes;
static const aspectRatioImage = 1.22;
final moneroIcon =
Image.asset('assets/images/monero_logo.png', height: 24, width: 24);
final bitcoinIcon =
Image.asset('assets/images/bitcoin.png', height: 24, width: 24);
final litecoinIcon =
Image.asset('assets/images/litecoin_icon.png', height: 24, width: 24);
final moneroIcon = Image.asset('assets/images/monero_logo.png', height: 24, width: 24);
final bitcoinIcon = Image.asset('assets/images/bitcoin.png', height: 24, width: 24);
final litecoinIcon = Image.asset('assets/images/litecoin_icon.png', height: 24, width: 24);
final walletTypeImage = Image.asset('assets/images/wallet_type.png');
final walletTypeLightImage =
Image.asset('assets/images/wallet_type_light.png');
final havenIcon =
Image.asset('assets/images/haven_logo.png', height: 24, width: 24);
final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png');
final havenIcon = Image.asset('assets/images/haven_logo.png', height: 24, width: 24);
WalletType? selected;
List<WalletType> types;
@ -69,7 +60,10 @@ class WalletTypeFormState extends State<WalletTypeForm> {
Widget build(BuildContext context) {
return ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
content: Column(
content: Center(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
@ -99,14 +93,19 @@ class WalletTypeFormState extends State<WalletTypeForm> {
))
],
),
),
),
bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
bottomSection: PrimaryButton(
bottomSection: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: PrimaryButton(
onPressed: () => onTypeSelected(),
text: S.of(context).seed_language_next,
color: Theme.of(context).accentTextTheme.bodyText1!.color!,
textColor: Colors.white,
isDisabled: selected == null,
),
),
);
}
@ -121,7 +120,8 @@ class WalletTypeFormState extends State<WalletTypeForm> {
case WalletType.haven:
return havenIcon;
default:
throw Exception('_iconFor: Incorrect Wallet Type. Cannot find icon for Wallet Type: ${type.toString()}');
throw Exception(
'_iconFor: Incorrect Wallet Type. Cannot find icon for Wallet Type: ${type.toString()}');
}
}

View file

@ -1,17 +1,19 @@
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:cake_wallet/utils/show_bar.dart';
import 'package:another_flushbar/flushbar.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:flutter/services.dart';
class PinCodeWidget extends StatefulWidget {
PinCodeWidget(
{required Key key,
PinCodeWidget({
required Key key,
required this.onFullPin,
required this.initialPinLength,
required this.onChangedPin,
required this.hasLengthSwitcher,
this.onChangedPinLength,})
: super(key: key);
this.onChangedPinLength,
}) : super(key: key);
final void Function(String pin, PinCodeState state) onFullPin;
final void Function(String pin) onChangedPin;
@ -75,8 +77,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
void setDefaultPinLength() => changePinLength(widget.initialPinLength);
void calculateAspectRatio() {
final renderBox =
_gridViewKey.currentContext!.findRenderObject() as RenderBox;
final renderBox = _gridViewKey.currentContext!.findRenderObject() as RenderBox;
final cellWidth = renderBox.size.width / 3;
final cellHeight = renderBox.size.height / 4;
@ -89,8 +90,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
void changeProcessText(String text) {
hideProgressText();
_progressBar = createBar<void>(text, duration: null)
..show(_key.currentContext!);
_progressBar = createBar<void>(text, duration: null)..show(_key.currentContext!);
}
void close() {
@ -104,8 +104,8 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
}
@override
Widget build(BuildContext context) => Scaffold(
key: _key, body: body(context), resizeToAvoidBottomInset: false);
Widget build(BuildContext context) =>
Scaffold(key: _key, body: body(context), resizeToAvoidBottomInset: false);
Widget body(BuildContext context) {
final deleteIconImage = Image.asset(
@ -117,10 +117,26 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
color: Theme.of(context).primaryTextTheme!.headline6!.color!,
);
return Container(
return RawKeyboardListener(
focusNode: FocusNode(),
autofocus: true,
onKey: (keyEvent) {
if (keyEvent is RawKeyDownEvent) {
if (keyEvent.logicalKey.keyLabel == "Backspace") {
_pop();
return;
}
int? number = int.tryParse(keyEvent.character ?? '');
if (number != null) {
_push(number);
}
}
},
child: Container(
color: Theme.of(context).backgroundColor,
padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
child: Column(children: <Widget>[
child: Column(
children: <Widget>[
Spacer(flex: 2),
Text(title,
style: TextStyle(
@ -165,19 +181,24 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.normal,
color: Theme.of(context)
.accentTextTheme!
.bodyText2!
.decorationColor!),
))
color: Theme.of(context).accentTextTheme!.bodyText2!.decorationColor!),
),
)
],
Spacer(flex: 1),
Flexible(
flex: 24,
child: Center(
child: ConstrainedBox(
constraints: BoxConstraints(
maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint,
),
child: Container(
key: _gridViewKey,
child: _aspectRatio > 0
? GridView.count(
? ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
child: GridView.count(
shrinkWrap: true,
crossAxisCount: 3,
childAspectRatio: _aspectRatio,
@ -188,8 +209,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
if (index == 9) {
return Container(
margin: EdgeInsets.only(
left: marginLeft, right: marginRight),
margin: EdgeInsets.only(left: marginLeft, right: marginRight),
child: TextButton(
onPressed: () => null,
// (widget.hasLengthSwitcher ||
@ -232,13 +252,13 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
index = 0;
} else if (index == 11) {
return Container(
margin: EdgeInsets.only(
left: marginLeft, right: marginRight),
margin: EdgeInsets.only(left: marginLeft, right: marginRight),
child: TextButton(
onPressed: () => _pop(),
// FIX-ME: Style
//color: Theme.of(context).backgroundColor,
//shape: CircleBorder(),
style: TextButton.styleFrom(
backgroundColor: Theme.of(context).backgroundColor,
shape: CircleBorder(),
),
child: deleteIconImage,
),
);
@ -247,13 +267,13 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
}
return Container(
margin: EdgeInsets.only(
left: marginLeft, right: marginRight),
margin: EdgeInsets.only(left: marginLeft, right: marginRight),
child: TextButton(
onPressed: () => _push(index),
// FIX-ME: Style
//color: Theme.of(context).backgroundColor,
//shape: CircleBorder(),
style: TextButton.styleFrom(
backgroundColor: Theme.of(context).backgroundColor,
shape: CircleBorder(),
),
child: Text('$index',
style: TextStyle(
fontSize: 30.0,
@ -265,9 +285,16 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
),
);
}),
),
)
: null))
]),
: null,
),
),
),
)
],
),
),
);
}

View file

@ -1,4 +1,5 @@
import 'package:cake_wallet/themes/theme_base.dart';
import 'package:cake_wallet/utils/responsive_layout_util.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
@ -38,36 +39,30 @@ class WelcomePage extends BasePage {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme
.of(context)
.backgroundColor,
backgroundColor: Theme.of(context).backgroundColor,
resizeToAvoidBottomInset: false,
body: body(context));
}
@override
Widget body(BuildContext context) {
final welcomeImage = currentTheme.type == ThemeType.dark
? welcomeImageDark : welcomeImageLight;
final welcomeImage = currentTheme.type == ThemeType.dark ? welcomeImageDark : welcomeImageLight;
final newWalletImage = Image.asset('assets/images/new_wallet.png',
height: 12,
width: 12,
color: Theme
.of(context)
.accentTextTheme!
.headline5!
.decorationColor!);
color: Theme.of(context).accentTextTheme!.headline5!.decorationColor!);
final restoreWalletImage = Image.asset('assets/images/restore_wallet.png',
height: 12,
width: 12,
color: Theme.of(context)
.primaryTextTheme!
.headline6!
.color!);
height: 12, width: 12, color: Theme.of(context).primaryTextTheme!.headline6!.color!);
return WillPopScope(onWillPop: () async => false, child: Container(
return WillPopScope(
onWillPop: () async => false,
child: Container(
padding: EdgeInsets.only(top: 64, bottom: 24, left: 24, right: 24),
child: Center(
child: ConstrainedBox(
constraints:
BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
@ -75,9 +70,7 @@ class WelcomePage extends BasePage {
flex: 2,
child: AspectRatio(
aspectRatio: aspectRatioImage,
child: FittedBox(child: welcomeImage, fit: BoxFit.fill)
)
),
child: FittedBox(child: welcomeImage, fit: BoxFit.fill))),
Flexible(
flex: 3,
child: Column(
@ -88,17 +81,11 @@ class WelcomePage extends BasePage {
Padding(
padding: EdgeInsets.only(top: 24),
child: Text(
S
.of(context)
.welcome,
S.of(context).welcome,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Theme
.of(context)
.accentTextTheme!
.headline2!
.color!,
color: Theme.of(context).accentTextTheme!.headline2!.color!,
),
textAlign: TextAlign.center,
),
@ -110,10 +97,7 @@ class WelcomePage extends BasePage {
style: TextStyle(
fontSize: 36,
fontWeight: FontWeight.bold,
color: Theme.of(context)
.primaryTextTheme!
.headline6!
.color!,
color: Theme.of(context).primaryTextTheme!.headline6!.color!,
),
textAlign: TextAlign.center,
),
@ -125,11 +109,7 @@ class WelcomePage extends BasePage {
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Theme
.of(context)
.accentTextTheme!
.headline2!
.color!,
color: Theme.of(context).accentTextTheme!.headline2!.color!,
),
textAlign: TextAlign.center,
),
@ -139,16 +119,11 @@ class WelcomePage extends BasePage {
Column(
children: <Widget>[
Text(
S
.of(context)
.please_make_selection,
S.of(context).please_make_selection,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.normal,
color: Theme.of(context)
.accentTextTheme!
.headline2!
.color!,
color: Theme.of(context).accentTextTheme!.headline2!.color!,
),
textAlign: TextAlign.center,
),
@ -156,16 +131,14 @@ class WelcomePage extends BasePage {
padding: EdgeInsets.only(top: 24),
child: PrimaryImageButton(
onPressed: () =>
Navigator.pushNamed(context,
Routes.newWalletFromWelcome),
Navigator.pushNamed(context, Routes.newWalletFromWelcome),
image: newWalletImage,
text: S.of(context).create_new,
color: Theme.of(context)
.accentTextTheme!
.subtitle2!
.decorationColor!,
textColor: Theme
.of(context)
textColor: Theme.of(context)
.accentTextTheme!
.headline5!
.decorationColor!,
@ -178,25 +151,18 @@ class WelcomePage extends BasePage {
Navigator.pushNamed(context, Routes.restoreOptions);
},
image: restoreWalletImage,
text: S
.of(context)
.restore_wallet,
color: Theme.of(context)
.accentTextTheme!
.caption!
.color!,
textColor: Theme.of(context)
.primaryTextTheme!
.headline6!
.color!),
text: S.of(context).restore_wallet,
color: Theme.of(context).accentTextTheme!.caption!.color!,
textColor:
Theme.of(context).primaryTextTheme!.headline6!.color!),
)
],
)
],
)
)
))
],
)
));
),
),
)));
}
}

View file

@ -17,6 +17,9 @@ class MarketPlaceItem extends StatelessWidget {
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
hoverColor: Colors.transparent,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
child: Stack(
children: [
Container(

View file

@ -74,7 +74,7 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
children: [
if (leading != null) Flexible(child: leading!),
if (middle != null) middle!,
if (trailing != null) trailing!,
trailing ?? const SizedBox(),
],
),
),

View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
class ResponsiveLayoutUtil {
static const double _kMobileThreshold = 900;
static const double kDesktopMaxWidthConstraint = 400;
const ResponsiveLayoutUtil._();