feat: Add new page icon and refactor (#1449)

* refactor: port to popover action list for add new page

* feat: add icons to menu items for add new page

* chore: change translation for Doc to Document

Co-authored-by: nathan <nathan@appflowy.io>

frontend/app_flowy/assets/translations/en.json

@@ -221,7 +221,7 @@
     "menuName": "Grid"
   },
   "document": {
-    "menuName": "Doc",
+    "menuName": "Document",
     "date": {
       "timeHintTextInTwelveHour": "01:00 PM",
       "timeHintTextInTwentyFourHour": "13:00"

frontend/app_flowy/assets/translations/fr-FR.json

@@ -221,7 +221,7 @@
     "menuName": "Grille"
   },
   "document": {
-    "menuName": "Doc",
+    "menuName": "Document",
     "date": {
       "timeHintTextInTwelveHour": "01:00 PM",
       "timeHintTextInTwentyFourHour": "13:00"

frontend/app_flowy/assets/translations/id-ID.json

@@ -209,7 +209,7 @@
     "menuName": "Grid"
   },
   "document": {
-    "menuName": "Doc",
+    "menuName": "Dokter",
     "date": {
       "timeHintTextInTwelveHour": "01:00 PM",
       "timeHintTextInTwentyFourHour": "13:00"

frontend/app_flowy/assets/translations/pt-BR.json

@@ -220,10 +220,10 @@
     "menuName": "Grade"
   },
   "document": {
-    "menuName": "Doc",
+    "menuName": "Documento",
     "date": {
-      "timeHintTextInTwelveHour": "12:00 AM",
-      "timeHintTextInTwentyFourHour": "12:00"
+      "timeHintTextInTwelveHour": "01:00 PM",
+      "timeHintTextInTwentyFourHour": "13:00"
     }
   },
   "board": {

frontend/app_flowy/lib/plugins/blank/blank.dart

@@ -15,6 +15,9 @@ class BlankPluginBuilder extends PluginBuilder {
   @override
   String get menuName => "Blank";
 
+  @override
+  String get menuIcon => "";
+
   @override
   PluginType get pluginType => PluginType.blank;
 }

frontend/app_flowy/lib/plugins/board/board.dart

@@ -20,6 +20,9 @@ class BoardPluginBuilder implements PluginBuilder {
   @override
   String get menuName => "Board";
 
+  @override
+  String get menuIcon => "editor/board";
+
   @override
   PluginType get pluginType => PluginType.board;
 

frontend/app_flowy/lib/plugins/document/document.dart

@@ -38,6 +38,9 @@ class DocumentPluginBuilder extends PluginBuilder {
   @override
   String get menuName => LocaleKeys.document_menuName.tr();
 
+  @override
+  String get menuIcon => "editor/documents";
+
   @override
   PluginType get pluginType => PluginType.editor;
 

frontend/app_flowy/lib/plugins/grid/grid.dart

@@ -22,6 +22,9 @@ class GridPluginBuilder implements PluginBuilder {
   @override
   String get menuName => LocaleKeys.grid_menuName.tr();
 
+  @override
+  String get menuIcon => "editor/grid";
+
   @override
   PluginType get pluginType => PluginType.grid;
 

frontend/app_flowy/lib/plugins/trash/trash.dart

@@ -20,6 +20,9 @@ class TrashPluginBuilder extends PluginBuilder {
   @override
   String get menuName => "TrashPB";
 
+  @override
+  String get menuIcon => "editor/delete";
+
   @override
   PluginType get pluginType => PluginType.trash;
 }

frontend/app_flowy/lib/startup/plugin/plugin.dart

@@ -47,6 +47,8 @@ abstract class PluginBuilder {
 
   String get menuName;
 
+  String get menuIcon;
+
   PluginType get pluginType;
 
   ViewDataFormatPB get dataFormatType => ViewDataFormatPB.TreeFormat;

frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart

@@ -1,14 +1,14 @@
 import 'package:app_flowy/startup/plugin/plugin.dart';
+import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart';
+import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:styled_widget/styled_widget.dart';
 
 class AddButton extends StatelessWidget {
   final Function(PluginBuilder) onSelected;
+
   const AddButton({
     Key? key,
     required this.onSelected,
@@ -16,91 +16,47 @@ class AddButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final List<PopoverAction> actions = [];
+    actions.addAll(
+      pluginBuilders()
+          .map((pluginBuilder) =>
+              AddButtonActionWrapper(pluginBuilder: pluginBuilder))
+          .toList(),
+    );
+
+    return PopoverActionList<PopoverAction>(
+      direction: PopoverDirection.bottomWithLeftAligned,
+      actions: actions,
+      buildChild: (controller) {
         return FlowyIconButton(
           width: 22,
-      onPressed: () {
-        ActionList(
-          anchorContext: context,
-          onSelected: onSelected,
-        ).show(context);
-      },
+          onPressed: () => controller.show(),
           icon: svgWidget(
             "home/add",
             color: Theme.of(context).colorScheme.onSurface,
           ).padding(horizontal: 3, vertical: 3),
         );
-  }
+      },
+      onSelected: (action, controller) {
+        if (action is AddButtonActionWrapper) {
+          onSelected(action.pluginBuilder);
         }
 
-class ActionList {
-  final Function(PluginBuilder) onSelected;
-  final BuildContext anchorContext;
-  final String _identifier = 'DisclosureButtonActionList';
-
-  const ActionList({required this.anchorContext, required this.onSelected});
-
-  void show(BuildContext buildContext) {
-    final items = pluginBuilders().map(
-      (pluginBuilder) {
-        return CreateItem(
-          pluginBuilder: pluginBuilder,
-          onSelected: (builder) {
-            onSelected(builder);
-            FlowyOverlay.of(buildContext).remove(_identifier);
+        controller.close();
       },
     );
-      },
-    ).toList();
-
-    ListOverlay.showWithAnchor(
-      buildContext,
-      identifier: _identifier,
-      itemCount: items.length,
-      itemBuilder: (context, index) => items[index],
-      anchorContext: anchorContext,
-      anchorDirection: AnchorDirection.bottomRight,
-      constraints: BoxConstraints(
-        minWidth: 120,
-        maxWidth: 280,
-        minHeight: items.length * (CreateItem.height),
-        maxHeight: items.length * (CreateItem.height),
-      ),
-    );
   }
 }
 
-class CreateItem extends StatelessWidget {
-  static const double height = 30;
-  static const double verticalPadding = 6;
-
+class AddButtonActionWrapper extends ActionCell {
   final PluginBuilder pluginBuilder;
-  final Function(PluginBuilder) onSelected;
-  const CreateItem({
-    Key? key,
-    required this.pluginBuilder,
-    required this.onSelected,
-  }) : super(key: key);
+
+  AddButtonActionWrapper({required this.pluginBuilder});
 
   @override
-  Widget build(BuildContext context) {
-    return FlowyHover(
-      child: GestureDetector(
-        behavior: HitTestBehavior.opaque,
-        onTap: () => onSelected(pluginBuilder),
-        child: ConstrainedBox(
-          constraints: const BoxConstraints(
-            minWidth: 120,
-            minHeight: CreateItem.height,
-          ),
-          child: Align(
-            alignment: Alignment.centerLeft,
-            child: FlowyText.medium(
-              pluginBuilder.menuName,
-              fontSize: 12,
-            ).padding(horizontal: 10),
-          ),
-        ),
-      ),
-    );
-  }
+  Widget? icon(Color iconColor) =>
+      svgWidget(pluginBuilder.menuIcon, color: iconColor);
+
+  @override
+  String get name => pluginBuilder.menuName;
 }