enable app widget selectable

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

@@ -4,9 +4,10 @@ import 'package:app_flowy/workspace/presentation/app/view_list.dart';
 import 'package:app_flowy/workspace/presentation/widgets/menu/menu_list.dart';
 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_infra_ui/style_widget/styled_text_button.dart';
+import 'package:flowy_infra_ui/style_widget/styled_icon_button.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';
@@ -46,11 +47,9 @@ class AppWidget extends MenuItem {
         builder: (context, state) {
           final child = state.map(
             initial: (_) => BlocBuilder<AppBloc, AppState>(
-              builder: (context, state) {
-                return ViewList(state.views);
-              },
+              builder: (context, state) => _renderViewList(state.views),
             ),
-            loadViews: (s) => ViewList(some(s.views)),
+            loadViews: (s) => _renderViewList(some(s.views)),
             loadFail: (s) => FlowyErrorPage(s.error.toString()),
           );
 
@@ -61,21 +60,25 @@ class AppWidget extends MenuItem {
   }
 
   ExpandableNotifier expandableWrapper(BuildContext context, Widget child) {
+    final controller = ExpandableController(initialExpanded: false);
     return ExpandableNotifier(
+      controller: controller,
       child: ScrollOnExpand(
         scrollOnExpand: true,
         scrollOnCollapse: false,
         child: Column(
           children: <Widget>[
             ExpandablePanel(
+              // controller: controller,
               theme: const ExpandableThemeData(
                 headerAlignment: ExpandablePanelHeaderAlignment.center,
                 tapBodyToExpand: false,
                 tapBodyToCollapse: false,
+                tapHeaderToExpand: false,
                 iconPadding: EdgeInsets.zero,
                 hasIcon: false,
               ),
-              header: AppHeader(app),
+              header: AppHeader(app, controller: controller),
               expanded: child,
               collapsed: const SizedBox(),
             ),
@@ -85,15 +88,24 @@ class AppWidget extends MenuItem {
     );
   }
 
+  Widget _renderViewList(Option<List<View>> views) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      child: ViewList(views),
+    );
+  }
+
   @override
   MenuItemType get type => MenuItemType.app;
 }
 
 class AppHeader extends StatelessWidget {
+  final ExpandableController controller;
   final App app;
   const AppHeader(
     this.app, {
     Key? key,
+    required this.controller,
   }) : super(key: key);
 
   @override
@@ -102,37 +114,45 @@ class AppHeader extends StatelessWidget {
       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,
+        InkWell(
+          onTap: () => controller.toggle(),
+          child: 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(
+          child: StyledTextButton(
             app.name,
-            style: const TextStyle(fontSize: 18),
+            onPressed: () {
+              debugPrint('show app document');
+            },
           ),
         ),
-        _renderPopupMenu(context),
+        StyledIconButton(
+          icon: const Icon(Icons.add),
+          onPressed: () {
+            debugPrint('add view');
+          },
+        ),
       ],
     );
   }
 
-  Widget _renderPopupMenu(BuildContext context) {
-    return PopupMenuButton(
-        iconSize: 20,
-        tooltip: 'create new view',
-        icon: const Icon(Icons.add),
-        padding: EdgeInsets.zero,
-        onSelected: (viewType) => _createView(viewType as ViewType, context),
-        itemBuilder: (context) => menuItemBuilder());
-  }
+  // return PopupMenuButton(
+  //     iconSize: 20,
+  //     tooltip: 'create new view',
+  //     icon: const Icon(Icons.add),
+  //     padding: EdgeInsets.zero,
+  //     onSelected: (viewType) => _createView(viewType as ViewType, context),
+  //     itemBuilder: (context) => menuItemBuilder());
 
   List<PopupMenuEntry> menuItemBuilder() {
     return ViewType.values

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

@@ -25,7 +25,7 @@ class ViewList extends StatelessWidget {
   List<Widget> _renderViews(List<View> views) {
     var targetViews = views.map((view) {
       return Padding(
-        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
+        padding: const EdgeInsets.symmetric(vertical: 2),
         child: ViewWidget(
           view: view,
         ),

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

@@ -5,7 +5,7 @@ import 'package:app_flowy/workspace/presentation/app/app_widget.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';
-import 'package:flowy_infra_ui/style_widget/styled_more.dart';
+import 'package:flowy_infra_ui/style_widget/styled_icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/styled_hover.dart';
 
 class ViewWidget extends StatelessWidget {
@@ -61,9 +61,7 @@ class ViewWidget extends StatelessWidget {
 
     return Padding(
       padding: padding,
-      child: Flexible(
-        child: Row(children: children),
-      ),
+      child: Row(children: children),
     );
   }
 

app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart

@@ -5,7 +5,7 @@ import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pbenum.dart';
 import 'package:flutter/material.dart';
-import 'package:flowy_infra_ui/style_widget/styled_more.dart';
+import 'package:flowy_infra_ui/style_widget/styled_icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/styled_text.dart';
 
 class HomeTopBar extends StatelessWidget {
@@ -47,14 +47,18 @@ class HomeTopBar extends StatelessWidget {
       fontSize: 12,
       borderRadius: BorderRadius.circular(6),
       color: Colors.lightBlue,
-      press: () {},
+      press: () {
+        debugPrint('share page');
+      },
     );
   }
 
   Widget _renderMoreButton() {
     return StyledMore(
       width: 24,
-      onPressed: () {},
+      onPressed: () {
+        debugPrint('show more');
+      },
     );
   }
 }

app_flowy/lib/workspace/presentation/widgets/menu/menu_user.dart

@@ -6,6 +6,7 @@ import 'package:flowy_sdk/protobuf/flowy-user/user_detail.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flowy_infra_ui/style_widget/styled_text.dart';
+import 'package:flowy_infra_ui/style_widget/styled_icon_button.dart';
 
 class MenuUser extends MenuItem {
   final UserDetail user;
@@ -50,11 +51,13 @@ class MenuUser extends MenuItem {
   }
 
   Widget _renderDropButton(BuildContext context) {
-    return IconButton(
+    return StyledIconButton(
+      width: 30,
+      iconRatio: 0.8,
       icon: const Icon(Icons.arrow_drop_down),
-      alignment: Alignment.center,
-      padding: EdgeInsets.zero,
-      onPressed: () {},
+      onPressed: () {
+        debugPrint('show user profile');
+      },
     );
   }
 

app_flowy/packages/flowy_infra_ui/lib/style_widget/styled_icon_button.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+class StyledIconButton extends StatelessWidget {
+  final double width;
+  final double? height;
+  final double iconRatio;
+  final Icon icon;
+  final VoidCallback? onPressed;
+
+  const StyledIconButton({
+    Key? key,
+    this.height,
+    this.onPressed,
+    this.width = 30,
+    required this.icon,
+    this.iconRatio = 0.5,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width,
+      height: height ?? width,
+      child: IconButton(
+        icon: icon,
+        padding: EdgeInsets.zero,
+        iconSize: width * iconRatio,
+        alignment: Alignment.center,
+        onPressed: onPressed,
+      ),
+    );
+  }
+}
+
+class StyledMore extends StatelessWidget {
+  final double width;
+  final double? height;
+  final VoidCallback? onPressed;
+
+  const StyledMore({
+    Key? key,
+    this.height,
+    this.onPressed,
+    required this.width,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return StyledIconButton(
+      width: width,
+      height: height,
+      icon: const Icon(Icons.more_vert),
+    );
+  }
+}

app_flowy/packages/flowy_infra_ui/lib/style_widget/styled_more.dart

@@ -1,29 +0,0 @@
-import 'package:flutter/material.dart';
-
-class StyledMore extends StatelessWidget {
-  final double width;
-  final double? height;
-  final VoidCallback? onPressed;
-
-  const StyledMore({
-    Key? key,
-    required this.width,
-    this.height,
-    this.onPressed,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return SizedBox(
-      width: width,
-      height: height ?? width,
-      child: IconButton(
-        icon: const Icon(Icons.more_vert),
-        padding: EdgeInsets.zero,
-        iconSize: width / 2,
-        alignment: Alignment.center,
-        onPressed: onPressed,
-      ),
-    );
-  }
-}

app_flowy/packages/flowy_infra_ui/lib/style_widget/styled_text.dart

@@ -7,7 +7,7 @@ class StyledText extends StatelessWidget {
   const StyledText(
     this.title, {
     Key? key,
-    this.overflow = TextOverflow.fade,
+    this.overflow = TextOverflow.ellipsis,
     this.fontSize = 16,
   }) : super(key: key);
 

app_flowy/packages/flowy_infra_ui/lib/style_widget/styled_text_button.dart

@@ -0,0 +1,54 @@
+import 'package:flowy_infra_ui/style_widget/styled_hover.dart';
+import 'package:flowy_infra_ui/style_widget/styled_text.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+class StyledTextButton extends StatelessWidget {
+  final String text;
+  final double fontSize;
+  final VoidCallback? onPressed;
+  final EdgeInsets padding;
+  const StyledTextButton(this.text,
+      {Key? key,
+      this.onPressed,
+      this.fontSize = 16,
+      this.padding = const EdgeInsets.symmetric(horizontal: 8, vertical: 6)})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onPressed,
+      child: StyledHover(
+        color: Colors.grey.shade300,
+        borderRadius: BorderRadius.circular(8),
+        builder: (context, onHover) => _render(),
+      ),
+    );
+  }
+
+  Widget _render() {
+    return Padding(
+      padding: padding,
+      child: Align(
+        alignment: Alignment.centerLeft,
+        child: StyledText(text, fontSize: fontSize),
+      ),
+    );
+  }
+}
+// return TextButton(
+    //   style: ButtonStyle(
+    //     textStyle: MaterialStateProperty.all(TextStyle(fontSize: fontSize)),
+    //     alignment: Alignment.centerLeft,
+    //     foregroundColor: MaterialStateProperty.all(Colors.black),
+    //     padding: MaterialStateProperty.all<EdgeInsets>(
+    //         const EdgeInsets.symmetric(horizontal: 2)),
+    //   ),
+    //   onPressed: onPressed,
+    //   child: Text(
+    //     text,
+    //     overflow: TextOverflow.ellipsis,
+    //     softWrap: false,
+    //   ),
+    // );