feat: user screen style tweaks
This commit is contained in:
parent
a589e518bb
commit
c78c010fab
|
@ -139,11 +139,7 @@ class _HomeState extends State<Home> {
|
||||||
return CupertinoApp(
|
return CupertinoApp(
|
||||||
home: CupertinoTheme(
|
home: CupertinoTheme(
|
||||||
data: CupertinoThemeData(
|
data: CupertinoThemeData(
|
||||||
textTheme: CupertinoTextThemeData(
|
primaryColor: PrimerColors.blue500,
|
||||||
// primaryColor: Palette.primary,
|
|
||||||
textStyle: TextStyle(color: PrimerColors.gray900),
|
|
||||||
),
|
|
||||||
primaryColor: PrimerColors.gray900,
|
|
||||||
),
|
),
|
||||||
child: CupertinoTabScaffold(
|
child: CupertinoTabScaffold(
|
||||||
tabBar: CupertinoTabBar(items: _buildNavigationItems()),
|
tabBar: CupertinoTabBar(items: _buildNavigationItems()),
|
||||||
|
|
|
@ -117,6 +117,7 @@ class _UserScreenState extends State<UserScreen> {
|
||||||
text: itemText,
|
text: itemText,
|
||||||
rightWidget: Icon(CupertinoIcons.right_chevron,
|
rightWidget: Icon(CupertinoIcons.right_chevron,
|
||||||
size: 18, color: PrimerColors.gray300),
|
size: 18, color: PrimerColors.gray300),
|
||||||
|
onTap: onTap,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -181,13 +182,14 @@ class _UserScreenState extends State<UserScreen> {
|
||||||
var contributions = data[1];
|
var contributions = data[1];
|
||||||
|
|
||||||
return Column(
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Container(
|
Container(
|
||||||
padding: EdgeInsets.all(10),
|
padding: EdgeInsets.all(12),
|
||||||
child: Row(
|
child: Row(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Avatar(url: payload['avatarUrl'], size: 24),
|
Avatar(url: payload['avatarUrl'], size: 30),
|
||||||
SizedBox(width: 10),
|
SizedBox(width: 10),
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Column(
|
child: Column(
|
||||||
|
@ -196,96 +198,101 @@ class _UserScreenState extends State<UserScreen> {
|
||||||
Row(children: <Widget>[
|
Row(children: <Widget>[
|
||||||
Text(
|
Text(
|
||||||
payload['name'] ?? widget.login,
|
payload['name'] ?? widget.login,
|
||||||
style: TextStyle(color: PrimerColors.blue500),
|
style: TextStyle(
|
||||||
|
color: PrimerColors.blue500, fontSize: 16),
|
||||||
),
|
),
|
||||||
Text(
|
Text(
|
||||||
'(${widget.login})',
|
'(${widget.login})',
|
||||||
style: TextStyle(color: PrimerColors.gray500),
|
style: TextStyle(
|
||||||
|
color: PrimerColors.gray500, fontSize: 16),
|
||||||
),
|
),
|
||||||
]),
|
]),
|
||||||
|
SizedBox(height: 4),
|
||||||
Text(
|
Text(
|
||||||
payload['bio'] == null ||
|
payload['bio'] == null ||
|
||||||
(payload['bio'] as String).isEmpty
|
(payload['bio'] as String).isEmpty
|
||||||
? 'No bio'
|
? 'No bio'
|
||||||
: payload['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(
|
Container(
|
||||||
decoration: BoxDecoration(
|
padding: EdgeInsets.all(10),
|
||||||
border: Border(
|
child: SingleChildScrollView(
|
||||||
bottom: BorderSide(color: PrimerColors.gray100),
|
scrollDirection: Axis.horizontal,
|
||||||
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(
|
|
||||||
child: SvgPicture.string(contributions),
|
child: SvgPicture.string(contributions),
|
||||||
padding: EdgeInsets.all(10),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
SizedBox(height: 10, child: Container(color: PrimerColors.gray100)),
|
BorderView(height: 10),
|
||||||
TableViewSeperator(),
|
|
||||||
TableView(items: [
|
TableView(items: [
|
||||||
_buildTableViewItem(
|
_buildTableViewItem(
|
||||||
iconData: Octicons.organization,
|
iconData: Octicons.organization,
|
||||||
placeholder: 'Company',
|
placeholder: 'Company',
|
||||||
text: payload['company']),
|
text: payload['company'],
|
||||||
|
),
|
||||||
_buildTableViewItem(
|
_buildTableViewItem(
|
||||||
iconData: Octicons.location,
|
iconData: Octicons.location,
|
||||||
placeholder: 'Location',
|
placeholder: 'Location',
|
||||||
text: payload['location']),
|
text: payload['location'],
|
||||||
|
),
|
||||||
_buildTableViewItem(
|
_buildTableViewItem(
|
||||||
iconData: Octicons.mail,
|
iconData: Octicons.mail,
|
||||||
placeholder: 'Email',
|
placeholder: 'Email',
|
||||||
text: payload['email'],
|
text: payload['email'],
|
||||||
onTap: () {
|
onTap: (payload['email'] as String).isEmpty
|
||||||
launch('mailto:' + payload['email']);
|
? null
|
||||||
}),
|
: () {
|
||||||
|
launch('mailto:' + payload['email']);
|
||||||
|
},
|
||||||
|
),
|
||||||
_buildTableViewItem(
|
_buildTableViewItem(
|
||||||
iconData: Octicons.link,
|
iconData: Octicons.link,
|
||||||
placeholder: 'Website',
|
placeholder: 'Website',
|
||||||
text: payload['websiteUrl']),
|
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),
|
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
@ -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) {
|
K ifNotNull<T, K>(T value, K Function(T v) builder) {
|
||||||
return value == null ? null : builder(value);
|
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),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -36,19 +36,40 @@ class TableView extends StatelessWidget {
|
||||||
|
|
||||||
TableView({this.headerText, @required this.items});
|
TableView({this.headerText, @required this.items});
|
||||||
|
|
||||||
static const _border = SizedBox(
|
static final _border = BorderView();
|
||||||
height: 1,
|
static final _seperator = BorderView();
|
||||||
child: const DecoratedBox(
|
|
||||||
decoration: const BoxDecoration(color: PrimerColors.gray200),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
static const _seperator = SizedBox(
|
Widget _buildItem(TableViewItem item) {
|
||||||
height: 1,
|
var widget = Container(
|
||||||
child: const DecoratedBox(
|
height: 44,
|
||||||
decoration: const BoxDecoration(color: PrimerColors.gray200),
|
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
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
@ -68,36 +89,7 @@ class TableView extends StatelessWidget {
|
||||||
)
|
)
|
||||||
]),
|
]),
|
||||||
_border,
|
_border,
|
||||||
...join(
|
...join(_seperator, items.map(_buildItem).toList()),
|
||||||
_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(),
|
|
||||||
),
|
|
||||||
_border,
|
_border,
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue