feat: user screen style tweaks

This commit is contained in:
Rongjian Zhang 2019-09-05 17:58:14 +08:00
parent a589e518bb
commit c78c010fab
4 changed files with 123 additions and 112 deletions

View File

@ -139,11 +139,7 @@ class _HomeState extends State<Home> {
return CupertinoApp(
home: CupertinoTheme(
data: CupertinoThemeData(
textTheme: CupertinoTextThemeData(
// primaryColor: Palette.primary,
textStyle: TextStyle(color: PrimerColors.gray900),
),
primaryColor: PrimerColors.gray900,
primaryColor: PrimerColors.blue500,
),
child: CupertinoTabScaffold(
tabBar: CupertinoTabBar(items: _buildNavigationItems()),

View File

@ -117,6 +117,7 @@ class _UserScreenState extends State<UserScreen> {
text: itemText,
rightWidget: Icon(CupertinoIcons.right_chevron,
size: 18, color: PrimerColors.gray300),
onTap: onTap,
);
}
@ -181,13 +182,14 @@ class _UserScreenState extends State<UserScreen> {
var contributions = data[1];
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
padding: EdgeInsets.all(12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Avatar(url: payload['avatarUrl'], size: 24),
Avatar(url: payload['avatarUrl'], size: 30),
SizedBox(width: 10),
Expanded(
child: Column(
@ -196,96 +198,101 @@ class _UserScreenState extends State<UserScreen> {
Row(children: <Widget>[
Text(
payload['name'] ?? widget.login,
style: TextStyle(color: PrimerColors.blue500),
style: TextStyle(
color: PrimerColors.blue500, fontSize: 16),
),
Text(
'(${widget.login})',
style: TextStyle(color: PrimerColors.gray500),
style: TextStyle(
color: PrimerColors.gray500, fontSize: 16),
),
]),
SizedBox(height: 4),
Text(
payload['bio'] == null ||
(payload['bio'] as String).isEmpty
? 'No bio'
: payload['bio'],
style: TextStyle(color: PrimerColors.gray500),
style: TextStyle(
color: PrimerColors.gray500, fontSize: 15),
),
SizedBox(height: 8),
],
),
)
],
),
),
BorderView(),
Row(children: <Widget>[
EntryItem(
count: payload['repositories']['totalCount'],
text: 'Repositories',
screenBuilder: (context) => ReposScreen(login: widget.login),
),
EntryItem(
count: payload['starredRepositories']['totalCount'],
text: 'Stars',
screenBuilder: (context) =>
ReposScreen(login: widget.login, star: true),
),
EntryItem(
count: payload['followers']['totalCount'],
text: 'Followers',
screenBuilder: (context) => UsersScreen(login: widget.login),
),
EntryItem(
count: payload['following']['totalCount'],
text: 'Following',
screenBuilder: (context) =>
UsersScreen(login: widget.login, following: true),
),
]),
BorderView(height: 10),
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: PrimerColors.gray100),
top: BorderSide(color: PrimerColors.gray100),
),
),
child: Row(
children: <Widget>[
EntryItem(
count: payload['repositories']['totalCount'],
text: 'Repositories',
screenBuilder: (context) =>
ReposScreen(login: widget.login),
),
EntryItem(
count: payload['starredRepositories']['totalCount'],
text: 'Stars',
screenBuilder: (context) =>
ReposScreen(login: widget.login, star: true),
),
EntryItem(
count: payload['followers']['totalCount'],
text: 'Followers',
screenBuilder: (context) =>
UsersScreen(login: widget.login),
),
EntryItem(
count: payload['following']['totalCount'],
text: 'Following',
screenBuilder: (context) =>
UsersScreen(login: widget.login, following: true),
),
],
),
),
SizedBox(height: 10, child: Container(color: PrimerColors.gray100)),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
padding: EdgeInsets.all(10),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SvgPicture.string(contributions),
padding: EdgeInsets.all(10),
),
),
SizedBox(height: 10, child: Container(color: PrimerColors.gray100)),
TableViewSeperator(),
BorderView(height: 10),
TableView(items: [
_buildTableViewItem(
iconData: Octicons.organization,
placeholder: 'Company',
text: payload['company']),
iconData: Octicons.organization,
placeholder: 'Company',
text: payload['company'],
),
_buildTableViewItem(
iconData: Octicons.location,
placeholder: 'Location',
text: payload['location']),
iconData: Octicons.location,
placeholder: 'Location',
text: payload['location'],
),
_buildTableViewItem(
iconData: Octicons.mail,
placeholder: 'Email',
text: payload['email'],
onTap: () {
launch('mailto:' + payload['email']);
}),
iconData: Octicons.mail,
placeholder: 'Email',
text: payload['email'],
onTap: (payload['email'] as String).isEmpty
? null
: () {
launch('mailto:' + payload['email']);
},
),
_buildTableViewItem(
iconData: Octicons.link,
placeholder: 'Website',
text: payload['websiteUrl']),
iconData: Octicons.link,
placeholder: 'Website',
text: payload['websiteUrl'],
onTap: payload['websiteUrl'] == null
? null
: () {
var url = payload['websiteUrl'] as String;
if (!url.startsWith('http')) {
url = 'http://$url';
}
launch(url);
},
),
]),
TableViewSeperator(),
_buildRepos(payload),
// _buildRepos(payload),
],
);
},

View File

@ -118,3 +118,19 @@ List<T> joinAll<T>(T seperator, List<List<T>> xss) {
K ifNotNull<T, K>(T value, K Function(T v) builder) {
return value == null ? null : builder(value);
}
class BorderView extends StatelessWidget {
final double height;
BorderView({this.height = 1});
@override
Widget build(BuildContext context) {
return SizedBox(
height: height,
child: const DecoratedBox(
decoration: const BoxDecoration(color: PrimerColors.gray100),
),
);
}
}

View File

@ -36,19 +36,40 @@ class TableView extends StatelessWidget {
TableView({this.headerText, @required this.items});
static const _border = SizedBox(
height: 1,
child: const DecoratedBox(
decoration: const BoxDecoration(color: PrimerColors.gray200),
),
);
static final _border = BorderView();
static final _seperator = BorderView();
static const _seperator = SizedBox(
height: 1,
child: const DecoratedBox(
decoration: const BoxDecoration(color: PrimerColors.gray200),
),
);
Widget _buildItem(TableViewItem item) {
var widget = Container(
height: 44,
child: Row(children: [
...(item.leftWidget == null
? []
: [
SizedBox(width: 12),
item.leftWidget,
]),
SizedBox(width: 12),
Expanded(
child: DefaultTextStyle(
child: item.text,
style: TextStyle(fontSize: 18, color: PrimerColors.gray900),
),
),
...(item.rightWidget == null ? [] : [item.rightWidget]),
SizedBox(width: 12),
]),
);
if (item.onTap == null && item.screenBuilder == null) {
return widget;
}
return Link(
onTap: item.onTap,
screenBuilder: item.screenBuilder,
child: widget,
);
}
@override
Widget build(BuildContext context) {
@ -68,36 +89,7 @@ class TableView extends StatelessWidget {
)
]),
_border,
...join(
_seperator,
items.map((item) {
return Link(
onTap: item.onTap,
screenBuilder: item.screenBuilder,
child: Container(
height: 44,
child: Row(children: [
...(item.leftWidget == null
? []
: [
SizedBox(width: 12),
item.leftWidget,
]),
SizedBox(width: 12),
Expanded(
child: DefaultTextStyle(
child: item.text,
style:
TextStyle(fontSize: 18, color: PrimerColors.gray900),
),
),
...(item.rightWidget == null ? [] : [item.rightWidget]),
SizedBox(width: 12),
]),
),
);
}).toList(),
),
...join(_seperator, items.map(_buildItem).toList()),
_border,
],
);