CWA-207 | applied new design to pin code page; added pin alert dialog; added barrier dismissible property to base alert page

This commit is contained in:
Oleksandr Sobol 2020-04-27 20:31:39 +03:00
parent 4b34ca3111
commit 03d3ff87f2
11 changed files with 122 additions and 43 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 897 B

After

Width:  |  Height:  |  Size: 762 B

BIN
assets/images/2.0x/face.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 836 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
assets/images/3.0x/face.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 505 B

After

Width:  |  Height:  |  Size: 431 B

BIN
assets/images/face.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 497 B

View file

@ -8,6 +8,7 @@ import 'package:cake_wallet/src/stores/auth/auth_store.dart';
import 'package:cake_wallet/src/screens/pin_code/pin_code.dart';
import 'package:cake_wallet/src/stores/settings/settings_store.dart';
import 'package:cake_wallet/src/domain/common/biometric_auth.dart';
import 'package:cake_wallet/palette.dart';
typedef OnAuthenticationFinished = void Function(bool, AuthPageState);
@ -24,6 +25,8 @@ class AuthPage extends StatefulWidget {
class AuthPageState extends State<AuthPage> {
final _key = GlobalKey<ScaffoldState>();
final _pinCodeKey = GlobalKey<PinCodeState>();
final _backArrowImageDarkTheme =
Image.asset('assets/images/back_arrow_dark_theme.png');
void changeProcessText(String text) {
_key.currentState.showSnackBar(
@ -121,8 +124,22 @@ class AuthPageState extends State<AuthPage> {
return Scaffold(
key: _key,
appBar: CupertinoNavigationBar(
leading: widget.closable ? CloseButton() : Container(),
backgroundColor: Theme.of(context).backgroundColor,
leading: widget.closable
? SizedBox(
height: 37,
width: 20,
child: ButtonTheme(
minWidth: double.minPositive,
child: FlatButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
padding: EdgeInsets.all(0),
onPressed: () => Navigator.of(context).pop(),
child: _backArrowImageDarkTheme),
),
)
: Container(),
backgroundColor: PaletteDark.historyPanel,
border: null,
),
resizeToAvoidBottomPadding: false,

View file

@ -30,7 +30,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
static const sixPinLength = 6;
static const fourPinLength = 4;
static final deleteIconImage = Image.asset('assets/images/delete_icon.png');
static final backArrowImage = Image.asset('assets/images/back_arrow.png');
static final faceImage = Image.asset('assets/images/face.png');
final _gridViewKey = GlobalKey();
int pinLength = defaultPinLength;
@ -91,12 +91,15 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
Widget body(BuildContext context) {
return SafeArea(
child: Container(
color: Theme.of(context).backgroundColor,
color: PaletteDark.historyPanel,
padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
child: Column(children: <Widget>[
Spacer(flex: 2),
Text(title,
style: TextStyle(fontSize: 24, color: Palette.wildDarkBlue)),
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white)),
Spacer(flex: 3),
Container(
width: 180,
@ -111,8 +114,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
height: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: isFilled ? Palette.deepPurple : Colors.transparent,
border: Border.all(color: Palette.wildDarkBlue),
color: isFilled ? Colors.white : PaletteDark.walletCardAddressField,
));
}),
),
@ -127,7 +129,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
},
child: Text(
_changePinLengthText(),
style: TextStyle(fontSize: 16.0, color: Palette.wildDarkBlue),
style: TextStyle(fontSize: 14.0, color: PaletteDark.walletCardText),
))
],
Spacer(flex: 1),
@ -149,9 +151,11 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
return Container(
margin: EdgeInsets.only(
left: marginLeft, right: marginRight),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).buttonColor,
child: FlatButton(
onPressed: () {},
color: PaletteDark.historyPanel,
shape: CircleBorder(),
child: faceImage,
),
);
} else if (index == 10) {
@ -162,7 +166,7 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
left: marginLeft, right: marginRight),
child: FlatButton(
onPressed: () => _pop(),
color: Theme.of(context).buttonColor,
color: PaletteDark.historyPanel,
shape: CircleBorder(),
child: deleteIconImage,
),
@ -176,14 +180,13 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
left: marginLeft, right: marginRight),
child: FlatButton(
onPressed: () => _push(index),
color: Theme.of(context)
.accentTextTheme
.title
.backgroundColor,
color: PaletteDark.historyPanel,
shape: CircleBorder(),
child: Text('$index',
style: TextStyle(
fontSize: 23.0, color: Palette.blueGrey)),
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Colors.white)),
),
);
}),

View file

@ -7,12 +7,17 @@ import 'package:cake_wallet/src/screens/pin_code/pin_code.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/stores/settings/settings_store.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/src/screens/setup_pin_code/widgets/pin_alert_dialog.dart';
class SetupPinCodePage extends BasePage {
SetupPinCodePage({this.onPinCodeSetup});
final Function(BuildContext, String) onPinCodeSetup;
@override
Color get backgroundColor => PaletteDark.historyPanel;
@override
String get title => S.current.setup_pin;
@ -58,37 +63,28 @@ class _SetupPinCodeFormState<WidgetType extends SetupPinCodeForm>
showDialog<void>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
content: Text(S.of(context).setup_successful),
actions: <Widget>[
FlatButton(
child: Text(S.of(context).ok),
onPressed: () {
Navigator.of(context).pop();
widget.onPinCodeSetup(context, pin);
reset();
},
),
],
);
return PinAlertDialog(
pinTitleText: S.current.setup_pin,
pinContentText: S.of(context).setup_successful,
pinActionButtonText: S.of(context).ok,
pinBarrierDismissible: false,
pinAction: () {
Navigator.of(context).pop();
widget.onPinCodeSetup(context, pin);
reset();
});
});
} else {
showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: Text(S.of(context).pin_is_incorrect),
actions: <Widget>[
FlatButton(
child: Text(S.of(context).ok),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
return PinAlertDialog(
pinTitleText: S.current.setup_pin,
pinContentText: S.of(context).pin_is_incorrect,
pinActionButtonText: S.of(context).ok,
pinBarrierDismissible: true,
pinAction: () => Navigator.of(context).pop());
});
reset();

View file

@ -0,0 +1,60 @@
import 'dart:ui';
import 'package:cake_wallet/src/widgets/base_alert_dialog.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class PinAlertDialog extends BaseAlertDialog {
PinAlertDialog({
@required this.pinTitleText,
@required this.pinContentText,
@required this.pinActionButtonText,
@required this.pinAction,
@required this.pinBarrierDismissible
});
final String pinTitleText;
final String pinContentText;
final String pinActionButtonText;
final VoidCallback pinAction;
final bool pinBarrierDismissible;
@override
String get titleText => pinTitleText;
@override
String get contentText => pinContentText;
@override
bool get barrierDismissible => pinBarrierDismissible;
@override
Widget actionButtons(BuildContext context) {
return Container(
width: 300,
height: 52,
padding: EdgeInsets.only(left: 12, right: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24),
bottomRight: Radius.circular(24)
),
color: Colors.white
),
child: ButtonTheme(
minWidth: double.infinity,
child: FlatButton(
onPressed: pinAction,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Text(
pinActionButtonText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Colors.blue,
decoration: TextDecoration.none,
),
)),
),
);
}
}

View file

@ -9,6 +9,7 @@ class BaseAlertDialog extends StatelessWidget {
String get rightActionButtonText => '';
VoidCallback get actionLeft => () {};
VoidCallback get actionRight => () {};
bool get barrierDismissible => true;
Widget title(BuildContext context) {
return Text(
@ -113,7 +114,9 @@ class BaseAlertDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => Navigator.of(context).pop(),
onTap: () => barrierDismissible
? Navigator.of(context).pop()
: null,
child: Container(
color: Colors.transparent,
child: BackdropFilter(