pimhwang
/
ESSE
mirror of https://github.com/CympleTech/ESSE.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

update file page UI

pull/18/head
Sun 4 years ago
parent
2d69a45bbf
commit
ef28b610ef
1 changed files with 176 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 321
      lib/apps/file/list.dart

321
lib/apps/file/list.dart
Unescape View File

@ -12,19 +12,14 @@ class FilesList extends StatefulWidget {
} }
const List FILE_DIRECTORY = [ const List FILE_DIRECTORY = [
["Recent", Icons.label_rounded], ["Starred", Icons.star],
["Starred", Icons.star_rounded], ["Documents", Icons.description],
["Home", Icons.home_rounded], ["Pictures", Icons.photo],
["Documents", Icons.my_library_books_rounded], ["Media", Icons.music_video],
["Pictures", Icons.collections_rounded], ["Trash", Icons.auto_delete],
["Music", Icons.my_library_music_rounded],
["Videos", Icons.video_collection_rounded],
["Trash", Icons.auto_delete_rounded],
]; ];
class _FilesListState extends State<FilesList> { class _FilesListState extends State<FilesList> {
int chooseIndex = 0;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
@ -35,37 +30,35 @@ class _FilesListState extends State<FilesList> {
// //
} }
changeItem(int index, bool isDesktop) { changeItem(String name, bool isDesktop) {
setState(() { setState(() {
chooseIndex = index; // chooseIndex = index;
// loadFolder(isDesktop, index); // loadFolder(isDesktop, index);
}); });
} }
Widget item(int index, ColorScheme color, bool isDesktop) { Widget item(String name, IconData icon, ColorScheme color, bool isDesktop) {
return GestureDetector( return Container(
behavior: HitTestBehavior.opaque, width: 140,
onTap: () => changeItem(index, isDesktop), height: 50,
child: SizedBox( decoration: BoxDecoration(
height: 55.0, color: color.surface,
borderRadius: BorderRadius.circular(15.0),
),
child: InkWell(
onTap: () => changeItem(name, isDesktop),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Container( Padding(
width: 45.0, padding: const EdgeInsets.only(left: 16.0, right: 8.0),
height: 45.0, child: Icon(icon, color: color.primary),
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)
),
), ),
chooseIndex == index Expanded(
? Text(FILE_DIRECTORY[index][0], style: TextStyle(fontSize: 16.0, color: color.primary)) child: Text(name, style: TextStyle(fontSize: 14.0))
: Text(FILE_DIRECTORY[index][0], style: TextStyle(fontSize: 16.0)) )
], ]
), )),
),
); );
} }
@ -75,6 +68,10 @@ class _FilesListState extends State<FilesList> {
final lang = AppLocalizations.of(context); final lang = AppLocalizations.of(context);
final isDesktop = isDisplayDesktop(context); final isDesktop = isDisplayDesktop(context);
final List<Widget> widgets = FILE_DIRECTORY.map(
(i) => item(i[0], i[1], color, isDesktop)
).toList();
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: Text(lang.files + ' (${lang.wip})'), title: Text(lang.files + ' (${lang.wip})'),
@ -84,30 +81,61 @@ class _FilesListState extends State<FilesList> {
), ),
), ),
body: Padding( body: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0), padding: const EdgeInsets.all(10.0),
child: ListView.builder( child: ListView(
itemCount: FILE_DIRECTORY.length, children: [
itemBuilder: (BuildContext ctx, int index) => item(index, color, isDesktop), 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: <Widget> [
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 { class FileItem extends StatelessWidget {
final String title; final String name;
const FilePage({Key key, this.title}) : super(key: key); const FileItem({Key key, this.name}) : super(key: key);
String remove_dir(String name) { String remove_dir(String name) {
if (name.endsWith('.dir')) { if (name.endsWith('.dir')) {
final i = name.lastIndexOf('.'); final i = name.lastIndexOf('.');
return name.substring(0, i); return name.substring(0, i);
} }
return name; return name;
} }
Widget item(String name) { @override
Widget build(BuildContext context) {
final trueName = remove_dir(name); final trueName = remove_dir(name);
return Container( return Container(
width: 80.0, width: 80.0,
@ -118,17 +146,22 @@ class FilePage extends StatelessWidget {
Container( Container(
height: 60.0, height: 60.0,
width: 60.0, width: 60.0,
padding: const EdgeInsets.only(bottom: 10.0),
child: fileIcon(name, 48.0), child: fileIcon(name, 48.0),
), ),
Tooltip( Tooltip(
message: trueName, 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -137,111 +170,109 @@ class FilePage extends StatelessWidget {
final lang = AppLocalizations.of(context); final lang = AppLocalizations.of(context);
return Scaffold( return Scaffold(
body: SafeArea( body: Padding(
child: Padding( padding: const EdgeInsets.all(10.0),
padding: const EdgeInsets.all(10.0), child: Column(
child: Column( mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: isDesktop ? CrossAxisAlignment.start : CrossAxisAlignment.center,
crossAxisAlignment: isDesktop ? CrossAxisAlignment.start : CrossAxisAlignment.center, children: <Widget>[
children: <Widget>[ Row(
Row( children: [
children: [ if (!isDesktop)
if (!isDesktop) GestureDetector(
GestureDetector( onTap: () => Navigator.pop(context),
onTap: () => Navigator.pop(context), child: Container(width: 20.0, child: Icon(Icons.arrow_back, color: color.primary)),
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<int>(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
), ),
const SizedBox(width: 15.0), color: const Color(0xFFEDEDED),
Expanded(child: Text(title, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0))), child: Icon(Icons.add_rounded, color: color.primary),
PopupMenuButton<int>( onSelected: (int value) {
shape: RoundedRectangleBorder( if (value == 0) {
borderRadius: BorderRadius.circular(15) // new post
), } else if (value == 1) {
color: const Color(0xFFEDEDED), // new folder
child: Icon(Icons.add_rounded, color: color.primary), } else if (value == 2) {
onSelected: (int value) { // upload file
if (value == 0) {
// new post
} else if (value == 1) {
// new folder
} else if (value == 2) {
// upload file
}
},
itemBuilder: (context) {
return <PopupMenuEntry<int>>[
PopupMenuItem<int>(value: 0,
child: Text('New Post', style: TextStyle(color: Colors.black, fontSize: 16.0)),
),
PopupMenuItem<int>(value: 1,
child: Text('New Folder', style: TextStyle(color: Colors.black, fontSize: 16.0)),
),
PopupMenuItem<int>(value: 2,
child: Text('Upload File', style: TextStyle(color: Colors.black, fontSize: 16.0)),
),
];
} }
), },
const SizedBox(width: 15.0), itemBuilder: (context) {
GestureDetector( return <PopupMenuEntry<int>>[
onTap: () {}, // view_module_rounded PopupMenuItem<int>(value: 0,
child: Container(width: 20.0, child: Icon(Icons.view_list_rounded, color: color.primary)), child: Text('New Post', style: TextStyle(color: Colors.black, fontSize: 16.0)),
), ),
const SizedBox(width: 10.0), PopupMenuItem<int>(value: 1,
child: Text('New Folder', style: TextStyle(color: Colors.black, fontSize: 16.0)),
),
PopupMenuItem<int>(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: <Widget> [
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: <Widget> [
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'),
],
)
) )
] )
) ]
) )
) )
); );

Write Preview
Loading…
Cancel
Save