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,27 +65,24 @@ class AppWidget extends MenuItem {
       child: ScrollOnExpand(
         scrollOnExpand: true,
         scrollOnCollapse: false,
-        child: Card(
-          clipBehavior: Clip.antiAlias,
-          child: Column(
-            children: <Widget>[
-              ExpandablePanel(
-                theme: const ExpandableThemeData(
-                  headerAlignment: ExpandablePanelHeaderAlignment.center,
-                  tapBodyToExpand: false,
-                  tapBodyToCollapse: false,
-                  iconPadding: EdgeInsets.zero,
-                  hasIcon: false,
-                ),
-                header: AppHeader(app),
-                expanded: Padding(
-                  padding: EdgeInsets.only(left: Sizes.iconMed),
-                  child: child,
-                ),
-                collapsed: const SizedBox(),
+        child: Column(
+          children: <Widget>[
+            ExpandablePanel(
+              theme: const ExpandableThemeData(
+                headerAlignment: ExpandablePanelHeaderAlignment.center,
+                tapBodyToExpand: false,
+                tapBodyToCollapse: false,
+                iconPadding: EdgeInsets.zero,
+                hasIcon: false,
               ),
-            ],
-          ),
+              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
   Widget build(BuildContext context) {
-    return Container(
-      color: Colors.white,
-      child: Padding(
-        padding: EdgeInsets.symmetric(vertical: Insets.m),
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.center,
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
-            ExpandableIcon(
-              theme: const ExpandableThemeData(
-                expandIcon: Icons.arrow_right,
-                collapseIcon: Icons.arrow_drop_down,
-                iconColor: Colors.black,
-                iconSize: 24,
-                iconPadding: EdgeInsets.zero,
-                hasIcon: false,
-              ),
-            ),
-            Expanded(
-              child: Text(app.name),
-            ),
-            SizedBox(
-              height: 30,
-              child: createViewPopupMenu(context),
-            ),
-          ],
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        ExpandableIcon(
+          theme: ExpandableThemeData(
+            expandIcon: Icons.arrow_drop_up,
+            collapseIcon: Icons.arrow_drop_down,
+            iconColor: Colors.black,
+            iconSize: AppWidgetSize.expandedIconSize,
+            iconPadding: EdgeInsets.zero,
+            hasIcon: false,
+          ),
         ),
-      ),
+        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(
-        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(
-        height: 10,
-      ),
+      () => const SizedBox(),
       (views) {
         return Column(
-          children: buildViewWidgets(views),
-        ).padding(vertical: Insets.sm);
+          children: _renderViewWidgets(views),
+        );
       },
     );
   }
 
-  List<ViewWidget> buildViewWidgets(List<View> views) {
+  List<Widget> _renderViewWidgets(List<View> views) {
     var targetViews = views.map((view) {
-      return ViewWidget(
-        icon: const Icon(Icons.file_copy),
-        view: view,
+      return Padding(
+        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, required this.icon})
-      : super(key: key);
+  const ViewWidget({Key? key, required this.view}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -17,10 +16,12 @@ class ViewWidget extends StatelessWidget {
   Row buildContent() {
     return Row(
       children: [
-        icon,
-        const SizedBox(
-          width: 4,
-        ),
+        const Image(
+            fit: BoxFit.cover,
+            width: 20,
+            height: 20,
+            image: AssetImage('assets/images/file_icon.jpg')),
+        const HSpace(6),
         Text(
           view.name,
           textAlign: TextAlign.start,