From ef28b610ef644a96f5cf6c7f643b345325b93eaa Mon Sep 17 00:00:00 2001 From: Sun Date: Thu, 3 Jun 2021 12:10:48 +0800 Subject: [PATCH] update file page UI --- lib/apps/file/list.dart | 321 ++++++++++++++++++++++------------------ 1 file changed, 176 insertions(+), 145 deletions(-) diff --git a/lib/apps/file/list.dart b/lib/apps/file/list.dart index 0ce8a67..be2cead 100644 --- a/lib/apps/file/list.dart +++ b/lib/apps/file/list.dart @@ -12,19 +12,14 @@ class FilesList extends StatefulWidget { } const List FILE_DIRECTORY = [ - ["Recent", Icons.label_rounded], - ["Starred", Icons.star_rounded], - ["Home", Icons.home_rounded], - ["Documents", Icons.my_library_books_rounded], - ["Pictures", Icons.collections_rounded], - ["Music", Icons.my_library_music_rounded], - ["Videos", Icons.video_collection_rounded], - ["Trash", Icons.auto_delete_rounded], + ["Starred", Icons.star], + ["Documents", Icons.description], + ["Pictures", Icons.photo], + ["Media", Icons.music_video], + ["Trash", Icons.auto_delete], ]; class _FilesListState extends State { - int chooseIndex = 0; - @override void initState() { super.initState(); @@ -35,37 +30,35 @@ class _FilesListState extends State { // } - changeItem(int index, bool isDesktop) { + changeItem(String name, bool isDesktop) { setState(() { - chooseIndex = index; + // chooseIndex = index; // loadFolder(isDesktop, index); }); } - Widget item(int index, ColorScheme color, bool isDesktop) { - return GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: () => changeItem(index, isDesktop), - child: SizedBox( - height: 55.0, + Widget item(String name, IconData icon, ColorScheme color, bool isDesktop) { + return Container( + width: 140, + height: 50, + decoration: BoxDecoration( + color: color.surface, + borderRadius: BorderRadius.circular(15.0), + ), + child: InkWell( + onTap: () => changeItem(name, isDesktop), child: Row( + mainAxisAlignment: MainAxisAlignment.center, children: [ - Container( - width: 45.0, - height: 45.0, - margin: const EdgeInsets.only(left: 20.0, right: 15.0), - child: Icon(FILE_DIRECTORY[index][1], size: 24.0, color: color.primary), - decoration: BoxDecoration( - color: color.surface, - borderRadius: BorderRadius.circular(15.0) - ), + Padding( + padding: const EdgeInsets.only(left: 16.0, right: 8.0), + child: Icon(icon, color: color.primary), ), - chooseIndex == index - ? Text(FILE_DIRECTORY[index][0], style: TextStyle(fontSize: 16.0, color: color.primary)) - : Text(FILE_DIRECTORY[index][0], style: TextStyle(fontSize: 16.0)) - ], - ), - ), + Expanded( + child: Text(name, style: TextStyle(fontSize: 14.0)) + ) + ] + )), ); } @@ -75,6 +68,10 @@ class _FilesListState extends State { final lang = AppLocalizations.of(context); final isDesktop = isDisplayDesktop(context); + final List widgets = FILE_DIRECTORY.map( + (i) => item(i[0], i[1], color, isDesktop) + ).toList(); + return Scaffold( appBar: AppBar( title: Text(lang.files + ' (${lang.wip})'), @@ -84,30 +81,61 @@ class _FilesListState extends State { ), ), body: Padding( - padding: const EdgeInsets.symmetric(vertical: 10.0), - child: ListView.builder( - itemCount: FILE_DIRECTORY.length, - itemBuilder: (BuildContext ctx, int index) => item(index, color, isDesktop), + padding: const EdgeInsets.all(10.0), + child: ListView( + children: [ + const SizedBox(height: 10.0), + Wrap( + spacing: 8.0, + runSpacing: 8.0, + alignment: WrapAlignment.start, + children: widgets + ), + const SizedBox(height: 36.0), + Text('Recents', style: Theme.of(context).textTheme.title), + const SizedBox(height: 16.0), + Wrap( + spacing: 4.0, + runSpacing: 8.0, + alignment: WrapAlignment.start, + children: [ + FileItem(name: 'myworks.dir'), + FileItem(name: 'ESSE-infos-public.dir'), + FileItem(name: 'personal.dir'), + FileItem(name: 'others.dir'), + FileItem(name: 'logo.jpg'), + FileItem(name: 'cat.png'), + FileItem(name: 'what-is-esse_en.doc'), + FileItem(name: '20210101-customers.xls'), + FileItem(name: 'product.pdf'), + FileItem(name: 'deck.ppt'), + FileItem(name: 'coder.md'), + FileItem(name: 'how-to-live-in-happy.mp4'), + FileItem(name: 'something_important'), + FileItem(name: 'car.json'), + ], + ), + ] ) ), ); } } -class FilePage extends StatelessWidget { - final String title; - const FilePage({Key key, this.title}) : super(key: key); +class FileItem extends StatelessWidget { + final String name; + const FileItem({Key key, this.name}) : super(key: key); String remove_dir(String name) { if (name.endsWith('.dir')) { final i = name.lastIndexOf('.'); return name.substring(0, i); } - return name; } - Widget item(String name) { + @override + Widget build(BuildContext context) { final trueName = remove_dir(name); return Container( width: 80.0, @@ -118,17 +146,22 @@ class FilePage extends StatelessWidget { Container( height: 60.0, width: 60.0, - padding: const EdgeInsets.only(bottom: 10.0), child: fileIcon(name, 48.0), ), Tooltip( message: trueName, - child: Text(trueName, style: TextStyle(fontSize: 16.0), maxLines: 1, overflow: TextOverflow.ellipsis), + child: Text(trueName, + style: TextStyle(fontSize: 14.0), maxLines: 1, overflow: TextOverflow.ellipsis), ) ] ) ); } +} + +class FilePage extends StatelessWidget { + final String title; + const FilePage({Key key, this.title}) : super(key: key); @override Widget build(BuildContext context) { @@ -137,111 +170,109 @@ class FilePage extends StatelessWidget { final lang = AppLocalizations.of(context); return Scaffold( - body: SafeArea( - child: Padding( - padding: const EdgeInsets.all(10.0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: isDesktop ? CrossAxisAlignment.start : CrossAxisAlignment.center, - children: [ - Row( - children: [ - if (!isDesktop) - GestureDetector( - onTap: () => Navigator.pop(context), - child: Container(width: 20.0, child: Icon(Icons.arrow_back, color: color.primary)), + body: Padding( + padding: const EdgeInsets.all(10.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: isDesktop ? CrossAxisAlignment.start : CrossAxisAlignment.center, + children: [ + Row( + children: [ + if (!isDesktop) + GestureDetector( + onTap: () => Navigator.pop(context), + child: Container(width: 20.0, child: Icon(Icons.arrow_back, color: color.primary)), + ), + const SizedBox(width: 15.0), + Expanded(child: Text(title, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0))), + PopupMenuButton( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(15) ), - const SizedBox(width: 15.0), - Expanded(child: Text(title, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0))), - PopupMenuButton( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(15) - ), - color: const Color(0xFFEDEDED), - child: Icon(Icons.add_rounded, color: color.primary), - onSelected: (int value) { - if (value == 0) { - // new post - } else if (value == 1) { - // new folder - } else if (value == 2) { - // upload file - } - }, - itemBuilder: (context) { - return >[ - PopupMenuItem(value: 0, - child: Text('New Post', style: TextStyle(color: Colors.black, fontSize: 16.0)), - ), - PopupMenuItem(value: 1, - child: Text('New Folder', style: TextStyle(color: Colors.black, fontSize: 16.0)), - ), - PopupMenuItem(value: 2, - child: Text('Upload File', style: TextStyle(color: Colors.black, fontSize: 16.0)), - ), - ]; + color: const Color(0xFFEDEDED), + child: Icon(Icons.add_rounded, color: color.primary), + onSelected: (int value) { + if (value == 0) { + // new post + } else if (value == 1) { + // new folder + } else if (value == 2) { + // upload file } - ), - const SizedBox(width: 15.0), - GestureDetector( - onTap: () {}, // view_module_rounded - child: Container(width: 20.0, child: Icon(Icons.view_list_rounded, color: color.primary)), - ), - const SizedBox(width: 10.0), + }, + itemBuilder: (context) { + return >[ + PopupMenuItem(value: 0, + child: Text('New Post', style: TextStyle(color: Colors.black, fontSize: 16.0)), + ), + PopupMenuItem(value: 1, + child: Text('New Folder', style: TextStyle(color: Colors.black, fontSize: 16.0)), + ), + PopupMenuItem(value: 2, + child: Text('Upload File', style: TextStyle(color: Colors.black, fontSize: 16.0)), + ), + ]; + } + ), + const SizedBox(width: 15.0), + GestureDetector( + onTap: () {}, // view_module_rounded + child: Container(width: 20.0, child: Icon(Icons.view_list_rounded, color: color.primary)), + ), + const SizedBox(width: 10.0), + ], + ), + SizedBox(height: 5.0), + Row( + children: [ + const SizedBox(width: 15.0), + InkWell( + onTap: () { + print('Home'); + }, + child: Text('Home', style: TextStyle(fontSize: 14.0, color: Color(0xFFADB0BB))) + ), + Text('/', style: TextStyle(fontSize: 14.0, color: Color(0xFFADB0BB))), + InkWell( + onTap: () { + print('Home/workspace'); + }, + child: Text('workspace', style: TextStyle(fontSize: 14.0, color: Color(0xFFADB0BB))) + ), + Text('/', style: TextStyle(fontSize: 14.0, color: Color(0xFFADB0BB))), + InkWell( + onTap: () { + print('Home/workspace/cymple'); + }, + child: Text('cymple', style: TextStyle(fontSize: 14.0, color: Color(0xFFADB0BB))) + ), + ] + ), + SizedBox(height: 15.0), + Expanded( + child: Wrap( + spacing: 4.0, + runSpacing: 16.0, + alignment: WrapAlignment.start, + children: [ + FileItem(name: 'myworks.dir'), + FileItem(name: 'ESSE-infos-public.dir'), + FileItem(name: 'personal.dir'), + FileItem(name: 'others.dir'), + FileItem(name: 'logo.jpg'), + FileItem(name: 'cat.png'), + FileItem(name: 'what-is-esse_en.doc'), + FileItem(name: '20210101-customers.xls'), + FileItem(name: 'product.pdf'), + FileItem(name: 'deck.ppt'), + FileItem(name: 'coder.md'), + FileItem(name: 'how-to-live-in-happy.mp4'), + FileItem(name: 'something_important'), + FileItem(name: 'car.json'), ], - ), - SizedBox(height: 5.0), - Row( - children: [ - const SizedBox(width: 15.0), - InkWell( - onTap: () { - print('Home'); - }, - child: Text('Home', style: TextStyle(fontSize: 14.0, color: Color(0xFFADB0BB))) - ), - Text('/', style: TextStyle(fontSize: 14.0, color: Color(0xFFADB0BB))), - InkWell( - onTap: () { - print('Home/workspace'); - }, - child: Text('workspace', style: TextStyle(fontSize: 14.0, color: Color(0xFFADB0BB))) - ), - Text('/', style: TextStyle(fontSize: 14.0, color: Color(0xFFADB0BB))), - InkWell( - onTap: () { - print('Home/workspace/cymple'); - }, - child: Text('cymple', style: TextStyle(fontSize: 14.0, color: Color(0xFFADB0BB))) - ), - ] - ), - SizedBox(height: 15.0), - Expanded( - child: Wrap( - spacing: 4.0, - runSpacing: 16.0, - alignment: WrapAlignment.start, - children: [ - item('myworks.dir'), - item('ESSE-infos-public.dir'), - item('personal.dir'), - item('others.dir'), - item('logo.jpg'), - item('cat.png'), - item('what-is-esse_en.doc'), - item('20210101-customers.xls'), - item('product.pdf'), - item('deck.ppt'), - item('coder.md'), - item('how-to-live-in-happy.mp4'), - item('something_important'), - item('car.json'), - ], - ) ) - ] - ) + ) + ] ) ) );