Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2024-12-22 19:49:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'newdesign' into CWA-200-implement-menu-screen

Browse source 
# Conflicts:
#	lib/src/screens/dashboard/dashboard_page.dart
This commit is contained in:
Oleksandr Sobol 2020-05-01 22:13:58 +03:00
commit 204ae22054
9 changed files with 89 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/images/2.0x/header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 186 B

BIN
assets/images/3.0x/header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 231 B

BIN
assets/images/header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 153 B

2
lib/palette.dart
View file

@ -74,6 +74,8 @@ class PaletteDark {
static const Color backgroundStart = Color.fromRGBO(231, 240, 253, 1.0); static const Color backgroundStart = Color.fromRGBO(231, 240, 253, 1.0);
static const Color backgroundEnd = Color.fromRGBO(172, 203, 238, 1.0); static const Color backgroundEnd = Color.fromRGBO(172, 203, 238, 1.0);
static const Color mainBackgroundColor = Color.fromRGBO(70, 85, 133, 1.0);
static const Color borderCardColor = Color.fromRGBO(81, 96, 147, 1.0);
static const Color walletCardTopStartSync = Color.fromRGBO(89, 104, 152, 1.0); static const Color walletCardTopStartSync = Color.fromRGBO(89, 104, 152, 1.0);
static const Color walletCardBottomStartSync = Color.fromRGBO(70, 85, 133, 1.0); static const Color walletCardBottomStartSync = Color.fromRGBO(70, 85, 133, 1.0);
static const Color walletCardTopEndSync = Color.fromRGBO(70, 85, 133, 1.0); static const Color walletCardTopEndSync = Color.fromRGBO(70, 85, 133, 1.0);

15
lib/src/screens/base_page.dart
View file

@ -81,9 +81,10 @@ abstract class BasePage extends StatelessWidget {
leading: leading(context), leading: leading(context),
middle: middle(context), middle: middle(context),
trailing: trailing(context), trailing: trailing(context),
backgroundColor: _isDarkTheme backgroundColor: backgroundColor);
/*backgroundColor: _isDarkTheme
? Theme.of(context).backgroundColor ? Theme.of(context).backgroundColor
: backgroundColor); : backgroundColor);*/
case AppBarStyle.withShadow: case AppBarStyle.withShadow:
return NavBar.withShadow( return NavBar.withShadow(
@ -91,9 +92,10 @@ abstract class BasePage extends StatelessWidget {
leading: leading(context), leading: leading(context),
middle: middle(context), middle: middle(context),
trailing: trailing(context), trailing: trailing(context),
backgroundColor: _isDarkTheme backgroundColor: backgroundColor);
/*backgroundColor: _isDarkTheme
? Theme.of(context).backgroundColor ? Theme.of(context).backgroundColor
: backgroundColor); : backgroundColor);*/
default: default:
return NavBar( return NavBar(
@ -101,9 +103,10 @@ abstract class BasePage extends StatelessWidget {
leading: leading(context), leading: leading(context),
middle: middle(context), middle: middle(context),
trailing: trailing(context), trailing: trailing(context),
backgroundColor: _isDarkTheme backgroundColor: backgroundColor);
/*backgroundColor: _isDarkTheme
? Theme.of(context).backgroundColor ? Theme.of(context).backgroundColor
: backgroundColor); : backgroundColor);*/
} }
} }

55
lib/src/screens/dashboard/dashboard_page.dart
View file

@ -4,13 +4,31 @@ import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/wallet_card.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/wallet_card.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/trade_history_panel.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/trade_history_panel.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/menu_widget.dart';
class DashboardPage extends BasePage { class DashboardPage extends BasePage {
final _bodyKey = GlobalKey(); final _bodyKey = GlobalKey();
@override @override
ObstructingPreferredSizeWidget appBar(BuildContext context) => null; Color get backgroundColor => PaletteDark.mainBackgroundColor;
@override
Widget trailing(BuildContext context) {
final menuButton = Image.asset('assets/images/header.png');
return SizedBox(
height: 37,
width: 37,
child: ButtonTheme(
minWidth: double.minPositive,
child: FlatButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
padding: EdgeInsets.all(0),
onPressed: () {},
child: menuButton),
),
);
}
@override @override
Widget body(BuildContext context) => DashboardPageBody(key: _bodyKey); Widget body(BuildContext context) => DashboardPageBody(key: _bodyKey);
@ -24,46 +42,17 @@ class DashboardPageBody extends StatefulWidget {
} }
class DashboardPageBodyState extends State<DashboardPageBody> { class DashboardPageBodyState extends State<DashboardPageBody> {
final menuButton = Image.asset('assets/images/menu_button.png');
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final List<Color> colors = [PaletteDark.backgroundStart, PaletteDark.backgroundEnd];
return SafeArea( return SafeArea(
child: Container( child: Container(
decoration: BoxDecoration( color: PaletteDark.mainBackgroundColor,
gradient: LinearGradient(
colors: colors
)
),
child: Column( child: Column(
children: <Widget>[ children: <Widget>[
Padding( Padding(
padding: EdgeInsets.only(top: 14), padding: EdgeInsets.only(left: 20, top: 10),
child: Container(
width: double.infinity,
alignment: Alignment.centerRight,
child: SizedBox(
height: 37,
width: 37,
child: ButtonTheme(
minWidth: double.minPositive,
child: FlatButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
padding: EdgeInsets.all(0),
onPressed: () => showDialog<void>(
builder: (_) => MenuWidget(),
context: context
),
child: menuButton),
),
),
)
),
Padding(
padding: EdgeInsets.only(left: 20, top: 23),
child: WalletCard(), child: WalletCard(),
), ),
SizedBox( SizedBox(

2
lib/src/screens/dashboard/widgets/button_header.dart
View file

@ -274,7 +274,7 @@ class ButtonHeader extends SliverPersistentHeaderDelegate {
width: 48, width: 48,
alignment: Alignment.center, alignment: Alignment.center,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: PaletteDark.borderCardColor,
shape: BoxShape.circle shape: BoxShape.circle
), ),
child: image, child: image,

51
lib/src/screens/dashboard/widgets/wallet_card.dart
View file

@ -24,7 +24,7 @@ class WalletCardState extends State<WalletCard> {
final _balanceObserverKey = GlobalKey(); final _balanceObserverKey = GlobalKey();
final _addressObserverKey = GlobalKey(); final _addressObserverKey = GlobalKey();
final List<Color> colorsSync = [PaletteDark.walletCardTopEndSync, PaletteDark.walletCardBottomEndSync]; final List<Color> colorsSync = [PaletteDark.walletCardSubAddressField, PaletteDark.walletCardBottomEndSync];
double cardWidth; double cardWidth;
double cardHeight; double cardHeight;
double screenWidth; double screenWidth;
@ -45,12 +45,12 @@ class WalletCardState extends State<WalletCard> {
} }
void afterLayout(dynamic _) { void afterLayout(dynamic _) {
screenWidth = MediaQuery.of(context).size.width; screenWidth = MediaQuery.of(context).size.width - 20;
setState(() { setState(() {
cardWidth = screenWidth; cardWidth = screenWidth;
opacity = 1; opacity = 1;
}); });
Timer(Duration(milliseconds: 350), () => Timer(Duration(milliseconds: 500), () =>
setState(() => isDraw = true) setState(() => isDraw = true)
); );
} }
@ -67,14 +67,27 @@ class WalletCardState extends State<WalletCard> {
height: cardHeight, height: cardHeight,
duration: Duration(milliseconds: 500), duration: Duration(milliseconds: 500),
curve: Curves.fastOutSlowIn, curve: Curves.fastOutSlowIn,
padding: EdgeInsets.only(
top: 1,
left: 1,
bottom: 1
),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)), borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
gradient: LinearGradient( color: PaletteDark.borderCardColor,
colors: [PaletteDark.walletCardTopStartSync.withOpacity(opacity), boxShadow: [
PaletteDark.walletCardBottomStartSync.withOpacity(opacity)], BoxShadow(
begin: Alignment.topCenter, color: PaletteDark.historyPanel.withOpacity(0.5),
end: Alignment.bottomCenter blurRadius: 8,
) offset: Offset(5, 5))
]
),
child: Container(
width: cardWidth,
height: cardHeight,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
color: PaletteDark.historyPanel
), ),
child: InkWell( child: InkWell(
onTap: () => setState(() => isFrontSide = !isFrontSide), onTap: () => setState(() => isFrontSide = !isFrontSide),
@ -83,6 +96,7 @@ class WalletCardState extends State<WalletCard> {
: backSide() : backSide()
), ),
), ),
),
); );
} }
@ -99,6 +113,7 @@ class WalletCardState extends State<WalletCard> {
final status = syncStore.status; final status = syncStore.status;
final statusText = status.title(); final statusText = status.title();
final progress = syncStore.status.progress(); final progress = syncStore.status.progress();
final indicatorWidth = progress * cardWidth;
String shortAddress = walletStore.subaddress.address; String shortAddress = walletStore.subaddress.address;
shortAddress = shortAddress.replaceRange(4, shortAddress.length - 4, '...'); shortAddress = shortAddress.replaceRange(4, shortAddress.length - 4, '...');
@ -125,7 +140,7 @@ class WalletCardState extends State<WalletCard> {
children: <Widget>[ children: <Widget>[
Container( Container(
height: cardHeight, height: cardHeight,
width: progress * cardWidth, width: indicatorWidth,
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)), borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
gradient: LinearGradient( gradient: LinearGradient(
@ -135,6 +150,18 @@ class WalletCardState extends State<WalletCard> {
) )
), ),
), ),
progress != 1
? Positioned(
left: indicatorWidth,
top: 0,
bottom: 0,
child: Container(
width: 1,
height: cardHeight,
color: PaletteDark.borderCardColor,
)
)
: Offstage(),
isDraw ? Positioned( isDraw ? Positioned(
left: 20, left: 20,
right: 20, right: 20,
@ -303,7 +330,7 @@ class WalletCardState extends State<WalletCard> {
final walletStore = Provider.of<WalletStore>(context); final walletStore = Provider.of<WalletStore>(context);
final rightArrow = Image.asset('assets/images/right_arrow.png'); final rightArrow = Image.asset('assets/images/right_arrow.png');
double messageBoxHeight = 0; double messageBoxHeight = 0;
double messageBoxWidth = cardWidth - 30; double messageBoxWidth = cardWidth - 10;
return Observer( return Observer(
key: _addressObserverKey, key: _addressObserverKey,
@ -358,7 +385,7 @@ class WalletCardState extends State<WalletCard> {
try { try {
_addressObserverKey.currentState.setState(() { _addressObserverKey.currentState.setState(() {
messageBoxHeight = 0; messageBoxHeight = 0;
messageBoxWidth = cardWidth - 30; messageBoxWidth = cardWidth - 10;
}); });
} catch(e) { } catch(e) {
print('${e.toString()}'); print('${e.toString()}');

15
lib/src/widgets/nav_bar.dart
View file

@ -19,8 +19,9 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
middle: middle, middle: middle,
trailing: trailing, trailing: trailing,
height: _height, height: _height,
backgroundColor: backgroundColor: backgroundColor);
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor); /*backgroundColor:
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor);*/
} }
factory NavBar.withShadow( factory NavBar.withShadow(
@ -37,12 +38,14 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
middle: middle, middle: middle,
trailing: trailing, trailing: trailing,
height: 80, height: 80,
backgroundColor: backgroundColor: backgroundColor,
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor, /*backgroundColor:
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor,*/
decoration: BoxDecoration( decoration: BoxDecoration(
color: _isDarkTheme color: backgroundColor,
/*_isDarkTheme
? Theme.of(context).backgroundColor ? Theme.of(context).backgroundColor
: backgroundColor, : backgroundColor,*/
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Color.fromRGBO(132, 141, 198, 0.11), color: Color.fromRGBO(132, 141, 198, 0.11),