Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

config view list ui

Browse Source
This commit is contained in:
appflowy 2021-07-26 15:25:30 +08:00
parent 0191645d49
commit a4f4066dfa
4 changed files with 69 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app_flowy/assets/images/file_icon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

101
app_flowy/lib/workspace/presentation/app/app_widget.dart
View File

@ -6,12 +6,23 @@ import 'package:app_flowy/startup/startup.dart';
import 'package:expandable/expandable.dart'; import 'package:expandable/expandable.dart';
import 'package:flowy_infra/size.dart'; import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/widget/error_page.dart'; import 'package:flowy_infra_ui/widget/error_page.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flowy_sdk/protobuf/flowy-workspace/app_create.pb.dart'; import 'package:flowy_sdk/protobuf/flowy-workspace/app_create.pb.dart';
import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart'; import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:dartz/dartz.dart'; import 'package:dartz/dartz.dart';
class AppWidgetSize {
static double expandedIconSize = 24;
static double expandedIconRightSpace = 8;
static double scale = 1;
static double get expandedPadding =>
expandedIconSize * scale + expandedIconRightSpace;
}
class AppWidget extends MenuItem { class AppWidget extends MenuItem {
final App app; final App app;
AppWidget(this.app, {Key? key}) : super(key: ValueKey(app.id)); AppWidget(this.app, {Key? key}) : super(key: ValueKey(app.id));
@ -54,27 +65,24 @@ class AppWidget extends MenuItem {
child: ScrollOnExpand( child: ScrollOnExpand(
scrollOnExpand: true, scrollOnExpand: true,
scrollOnCollapse: false, scrollOnCollapse: false,
child: Card( child: Column(
clipBehavior: Clip.antiAlias, children: <Widget>[
child: Column( ExpandablePanel(
children: <Widget>[ theme: const ExpandableThemeData(
ExpandablePanel( headerAlignment: ExpandablePanelHeaderAlignment.center,
theme: const ExpandableThemeData( tapBodyToExpand: false,
headerAlignment: ExpandablePanelHeaderAlignment.center, tapBodyToCollapse: false,
tapBodyToExpand: false, iconPadding: EdgeInsets.zero,
tapBodyToCollapse: false, hasIcon: false,
iconPadding: EdgeInsets.zero,
hasIcon: false,
),
header: AppHeader(app),
expanded: Padding(
padding: EdgeInsets.only(left: Sizes.iconMed),
child: child,
),
collapsed: const SizedBox(),
), ),
], header: AppHeader(app),
), expanded: Padding(
padding: EdgeInsets.only(left: AppWidgetSize.expandedPadding),
child: child,
),
collapsed: const SizedBox(),
),
],
), ),
), ),
); );
@ -93,40 +101,35 @@ class AppHeader extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Row(
color: Colors.white, mainAxisAlignment: MainAxisAlignment.center,
child: Padding( crossAxisAlignment: CrossAxisAlignment.center,
padding: EdgeInsets.symmetric(vertical: Insets.m), children: [
child: Row( ExpandableIcon(
mainAxisAlignment: MainAxisAlignment.center, theme: ExpandableThemeData(
crossAxisAlignment: CrossAxisAlignment.center, expandIcon: Icons.arrow_drop_up,
children: [ collapseIcon: Icons.arrow_drop_down,
ExpandableIcon( iconColor: Colors.black,
theme: const ExpandableThemeData( iconSize: AppWidgetSize.expandedIconSize,
expandIcon: Icons.arrow_right, iconPadding: EdgeInsets.zero,
collapseIcon: Icons.arrow_drop_down, hasIcon: false,
iconColor: Colors.black, ),
iconSize: 24,
iconPadding: EdgeInsets.zero,
hasIcon: false,
),
),
Expanded(
child: Text(app.name),
),
SizedBox(
height: 30,
child: createViewPopupMenu(context),
),
],
), ),
), HSpace(AppWidgetSize.expandedIconRightSpace),
Expanded(
child: Text(
app.name,
style: const TextStyle(fontSize: 18),
),
),
_renderPopupMenu(context),
],
); );
} }
Widget createViewPopupMenu(BuildContext context) { Widget _renderPopupMenu(BuildContext context) {
return PopupMenuButton( return PopupMenuButton(
iconSize: 24, iconSize: 20,
tooltip: 'create new view', tooltip: 'create new view',
icon: const Icon(Icons.add), icon: const Icon(Icons.add),
padding: EdgeInsets.zero, padding: EdgeInsets.zero,

18
app_flowy/lib/workspace/presentation/app/view_list.dart
View File

@ -15,22 +15,22 @@ class ViewList extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
Log.info('ViewList build'); Log.info('ViewList build');
return views.fold( return views.fold(
() => const SizedBox( () => const SizedBox(),
height: 10,
),
(views) { (views) {
return Column( return Column(
children: buildViewWidgets(views), children: _renderViewWidgets(views),
).padding(vertical: Insets.sm); );
}, },
); );
} }
List<ViewWidget> buildViewWidgets(List<View> views) { List<Widget> _renderViewWidgets(List<View> views) {
var targetViews = views.map((view) { var targetViews = views.map((view) {
return ViewWidget( return Padding(
icon: const Icon(Icons.file_copy), padding: const EdgeInsets.symmetric(vertical: 6),
view: view, child: ViewWidget(
view: view,
),
); );
}).toList(growable: true); }).toList(growable: true);
return targetViews; return targetViews;

15
app_flowy/lib/workspace/presentation/view/view_widget.dart
View File

@ -1,13 +1,12 @@
import 'package:app_flowy/startup/startup.dart'; import 'package:app_flowy/startup/startup.dart';
import 'package:app_flowy/workspace/domain/page_stack/page_stack.dart'; import 'package:app_flowy/workspace/domain/page_stack/page_stack.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart'; import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class ViewWidget extends StatelessWidget { class ViewWidget extends StatelessWidget {
final View view; final View view;
final Widget icon; const ViewWidget({Key? key, required this.view}) : super(key: key);
const ViewWidget({Key? key, required this.view, required this.icon})
: super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -17,10 +16,12 @@ class ViewWidget extends StatelessWidget {
Row buildContent() { Row buildContent() {
return Row( return Row(
children: [ children: [
icon, const Image(
const SizedBox( fit: BoxFit.cover,
width: 4, width: 20,
), height: 20,
image: AssetImage('assets/images/file_icon.jpg')),
const HSpace(6),
Text( Text(
view.name, view.name,
textAlign: TextAlign.start, textAlign: TextAlign.start,