From c14fdb4a1d003b8c39c0b4790e57706030150a13 Mon Sep 17 00:00:00 2001 From: Rongjian Zhang Date: Sun, 15 Sep 2019 00:01:15 +0800 Subject: [PATCH] refactor: files list with table view --- lib/screens/object.dart | 90 ++++++++++++++----------------------- lib/utils/utils.dart | 2 +- lib/widgets/table_view.dart | 41 ++++++++--------- 3 files changed, 53 insertions(+), 80 deletions(-) diff --git a/lib/screens/object.dart b/lib/screens/object.dart index f33b122..e52bcf1 100644 --- a/lib/screens/object.dart +++ b/lib/screens/object.dart @@ -2,6 +2,7 @@ import 'package:flutter_highlight/themes/github.dart'; import 'package:git_touch/screens/image_view.dart'; import 'package:git_touch/widgets/app_bar_title.dart'; import 'package:git_touch/widgets/markdown_view.dart'; +import 'package:git_touch/widgets/table_view.dart'; import 'package:path/path.dart' as path; import 'package:flutter/material.dart'; import 'package:flutter_highlight/flutter_highlight.dart'; @@ -42,29 +43,21 @@ class ObjectScreen extends StatelessWidget { static const _iconDefaultColor = PrimerColors.blue300; - List _buildIcon(item) { + Widget _buildIcon(item) { switch (item['type']) { case 'blob': - return [ - SizedBox(width: 6), - SetiIcon(item['name'], size: 28), - SizedBox(width: 6), - ]; + return SetiIcon(item['name'], size: 36); case 'tree': case 'commit': - return [ - SizedBox(width: 10), - Icon( - item['type'] == 'tree' - ? Octicons.file_directory - : Octicons.file_submodule, - color: _iconDefaultColor, - size: 20, - ), - SizedBox(width: 10), - ]; + return Icon( + item['type'] == 'tree' + ? Octicons.file_directory + : Octicons.file_submodule, + color: _iconDefaultColor, + size: 24, + ); default: - return []; + throw 'Should not be here'; } } @@ -91,44 +84,28 @@ class ObjectScreen extends StatelessWidget { Widget _buildTree(payload) { var entries = payload['entries'] as List; - return Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: join( - borderView, - entries.map((item) { - return Link( - screenBuilder: item['type'] == 'commit' - ? null - : (context) { - // TODO: All image types - var ext = path.extension(item['name']); - if (ext.isNotEmpty) ext = ext.substring(1); - if (['png', 'jpg', 'jpeg', 'gif', 'webp'].contains(ext)) { - return ImageView(NetworkImage('$rawUrl/' + item['name'])); - } - return ObjectScreen( - name: name, - owner: owner, - branch: branch, - paths: [...paths, item['name']], - type: item['type'], - ); - }, - child: Container( - height: 40, - child: Row( - children: [ - ..._buildIcon(item), - Expanded( - child: Text(item['name'], - style: TextStyle( - fontSize: 16, color: PrimerColors.gray900))) - ], - ), - ), - ); - }).toList(), - ), + return TableView( + items: entries.map((item) { + return TableViewItem( + leftWidget: _buildIcon(item), + text: Text(item['name']), + screenBuilder: (_) { + if (item['type'] == 'commit') return null; + // TODO: All image types + var ext = path.extension(item['name']); + if (ext.isNotEmpty) ext = ext.substring(1); + if (['png', 'jpg', 'jpeg', 'gif', 'webp'].contains(ext)) { + return ImageView(NetworkImage('$rawUrl/' + item['name'])); + } + return ObjectScreen( + name: name, + owner: owner, + branch: branch, + paths: [...paths, item['name']], + type: item['type'], + ); + }); + }), ); } @@ -148,6 +125,7 @@ class ObjectScreen extends StatelessWidget { language: extname.isEmpty ? 'plaintext' : extname, theme: githubTheme, padding: EdgeInsets.all(10), + textStyle: TextStyle(fontFamily: monospaceFont), ), ); } diff --git a/lib/utils/utils.dart b/lib/utils/utils.dart index fd8f305..83bec19 100644 --- a/lib/utils/utils.dart +++ b/lib/utils/utils.dart @@ -147,7 +147,7 @@ class BorderView extends StatelessWidget { const BorderView({ this.height = 1, - this.color = PrimerColors.gray200, + this.color = PrimerColors.gray100, this.leftPadding = 0, }); diff --git a/lib/widgets/table_view.dart b/lib/widgets/table_view.dart index 5772bfa..5c133d7 100644 --- a/lib/widgets/table_view.dart +++ b/lib/widgets/table_view.dart @@ -24,7 +24,7 @@ class TableViewItem { final bool hideRightChevron; TableViewItem({ - this.text, + @required this.text, this.leftIconData, this.leftWidget, this.rightWidget, @@ -36,42 +36,37 @@ class TableViewItem { class TableView extends StatelessWidget { final String headerText; - final List items; + final Iterable items; TableView({this.headerText, @required this.items}); Widget _buildItem(TableViewItem item) { if (item == null) return null; + var leftWidget = item.leftWidget ?? Icon(item.leftIconData); + // Container( + // width: 24, + // height: 24, + // // decoration: BoxDecoration( + // // borderRadius: BorderRadius.circular(4), color: PrimerColors.blue400), + // child: Icon(iconData, size: 24, color: PrimerColors.gray600), + // ) + var widget = DefaultTextStyle( style: TextStyle(fontSize: 16, color: PrimerColors.gray900), overflow: TextOverflow.ellipsis, - child: Container( + child: SizedBox( height: 44, child: Row(children: [ - if (item.leftIconData != null) ...[ - SizedBox(width: 12), - Icon(item.leftIconData), - // Container( - // width: 24, - // height: 24, - // // decoration: BoxDecoration( - // // borderRadius: BorderRadius.circular(4), color: PrimerColors.blue400), - // child: Icon(iconData, size: 24, color: PrimerColors.gray600), - // ) - ], - if (item.leftWidget != null) ...[ - SizedBox(width: 12), - item.leftWidget, - ], - SizedBox(width: 12), + SizedBox(width: 44, child: leftWidget), Expanded(child: item.text), if (item.rightWidget != null) item.rightWidget, - if ((item.onTap != null || item.screenBuilder != null) & - !item.hideRightChevron) + if ((item.onTap != null || item.screenBuilder != null) && + !item.hideRightChevron) ...[ Icon(CupertinoIcons.right_chevron, - size: 24, color: PrimerColors.gray400), - SizedBox(width: 4), + size: 24, color: PrimerColors.gray300), + SizedBox(width: 4), + ], ]), ), );