config view list ui

app_flowy/lib/workspace/presentation/app/app_widget.dart

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

app_flowy/lib/workspace/presentation/app/view_list.dart

@@ -15,22 +15,22 @@ class ViewList extends StatelessWidget {
   Widget build(BuildContext context) {
     Log.info('ViewList build');
     return views.fold(
-      () => const SizedBox(
+      () => const SizedBox(),
-        height: 10,
-      ),
       (views) {
         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) {
-      return ViewWidget(
+      return Padding(
-        icon: const Icon(Icons.file_copy),
+        padding: const EdgeInsets.symmetric(vertical: 6),
+        child: ViewWidget(
           view: view,
+        ),
       );
     }).toList(growable: true);
     return targetViews;

app_flowy/lib/workspace/presentation/view/view_widget.dart

@@ -1,13 +1,12 @@
 import 'package:app_flowy/startup/startup.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:flutter/material.dart';
 
 class ViewWidget extends StatelessWidget {
   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
   Widget build(BuildContext context) {
@@ -17,10 +16,12 @@ class ViewWidget extends StatelessWidget {
   Row buildContent() {
     return Row(
       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(
           view.name,
           textAlign: TextAlign.start,