fix: overflow and alignment in sort editor (#3201)

* fix: overflow and alignment in sort editor

Closes: #3196 #3197

* fix: add and delete button on row

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_choice_button.dart

@@ -23,19 +23,17 @@ class SortChoiceButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final borderSide = BorderSide(
-      color: AFThemeExtension.of(context).toggleOffFill,
-      width: 1.0,
-    );
-
-    final decoration = BoxDecoration(
-      color: Colors.transparent,
-      border: Border.fromBorderSide(borderSide),
-      borderRadius: const BorderRadius.all(Radius.circular(14)),
-    );
-
     return FlowyButton(
-      decoration: decoration,
+      decoration: BoxDecoration(
+        color: Colors.transparent,
+        border: Border.fromBorderSide(
+          BorderSide(
+            color: AFThemeExtension.of(context).toggleOffFill,
+            width: 1.0,
+          ),
+        ),
+        borderRadius: const BorderRadius.all(Radius.circular(14)),
+      ),
       useIntrinsicWidth: true,
       text: FlowyText(
         text,

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart

@@ -23,12 +23,13 @@ class SortEditor extends StatefulWidget {
   final String viewId;
   final List<SortInfo> sortInfos;
   final FieldController fieldController;
+
   const SortEditor({
+    super.key,
     required this.viewId,
     required this.fieldController,
     required this.sortInfos,
-    Key? key,
-  }) : super(key: key);
+  });
 
   @override
   State<SortEditor> createState() => _SortEditorState();
@@ -47,20 +48,33 @@ class _SortEditorState extends State<SortEditor> {
       )..add(const SortEditorEvent.initial()),
       child: BlocBuilder<SortEditorBloc, SortEditorState>(
         builder: (context, state) {
-          return IntrinsicWidth(
-            child: IntrinsicHeight(
-              child: Column(
-                children: [
-                  _SortList(popoverMutex: popoverMutex),
-                  DatabaseAddSortButton(
-                    viewId: widget.viewId,
-                    fieldController: widget.fieldController,
+          return Column(
+            children: [
+              ...state.sortInfos.map(
+                (info) => Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 6),
+                  child: DatabaseSortItem(
+                    sortInfo: info,
                     popoverMutex: popoverMutex,
                   ),
-                  DatabaseDeleteSortButton(popoverMutex: popoverMutex),
+                ),
+              ),
+              Row(
+                children: [
+                  Flexible(
+                    child: DatabaseAddSortButton(
+                      viewId: widget.viewId,
+                      fieldController: widget.fieldController,
+                      popoverMutex: popoverMutex,
+                    ),
+                  ),
+                  const HSpace(6),
+                  Flexible(
+                    child: DatabaseDeleteSortButton(popoverMutex: popoverMutex),
+                  ),
                 ],
               ),
-            ),
+            ],
           );
         },
       ),
@@ -68,77 +82,48 @@ class _SortEditorState extends State<SortEditor> {
   }
 }
 
-class _SortList extends StatelessWidget {
-  final PopoverMutex popoverMutex;
-  const _SortList({required this.popoverMutex, Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return BlocBuilder<SortEditorBloc, SortEditorState>(
-      builder: (context, state) {
-        final List<Widget> children = state.sortInfos
-            .map(
-              (info) => Padding(
-                padding: const EdgeInsets.symmetric(vertical: 6),
-                child: DatabaseSortItem(
-                  sortInfo: info,
-                  popoverMutex: popoverMutex,
-                ),
-              ),
-            )
-            .toList();
-
-        return Column(
-          children: children,
-        );
-      },
-    );
-  }
-}
-
 class DatabaseSortItem extends StatelessWidget {
   final SortInfo sortInfo;
   final PopoverMutex popoverMutex;
+
   const DatabaseSortItem({
+    super.key,
     required this.popoverMutex,
     required this.sortInfo,
-    Key? key,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
-    final nameButton = SortChoiceButton(
-      text: sortInfo.fieldInfo.name,
-      editable: false,
-      onTap: () {},
-    );
-    final orderButton = DatabaseSortItemOrderButton(
-      sortInfo: sortInfo,
-      popoverMutex: popoverMutex,
-    );
-
     final deleteButton = FlowyIconButton(
       width: 26,
-      onPressed: () {
-        context
-            .read<SortEditorBloc>()
-            .add(SortEditorEvent.deleteSort(sortInfo));
-      },
+      onPressed: () => context
+          .read<SortEditorBloc>()
+          .add(SortEditorEvent.deleteSort(sortInfo)),
       iconPadding: const EdgeInsets.all(5),
       hoverColor: AFThemeExtension.of(context).lightGreyHover,
-      icon: FlowySvg(
-        FlowySvgs.close_s,
-        color: Theme.of(context).iconTheme.color,
-      ),
+      icon: svgWidget("home/close", color: Theme.of(context).iconTheme.color),
     );
 
     return Row(
       children: [
-        SizedBox(height: 26, child: nameButton),
+        SizedBox(
+          height: 26,
+          child: SortChoiceButton(
+            text: sortInfo.fieldInfo.name,
+            editable: false,
+          ),
+        ),
+        const HSpace(6),
+        SizedBox(
+          height: 26,
+          child: DatabaseSortItemOrderButton(
+            sortInfo: sortInfo,
+            popoverMutex: popoverMutex,
+          ),
+        ),
         const HSpace(6),
-        SizedBox(height: 26, child: orderButton),
-        const HSpace(16),
-        deleteButton
+        const Spacer(),
+        deleteButton,
       ],
     );
   }
@@ -147,12 +132,11 @@ class DatabaseSortItem extends StatelessWidget {
 extension SortConditionExtension on SortConditionPB {
   String get title {
     switch (this) {
-      case SortConditionPB.Ascending:
-        return LocaleKeys.grid_sort_ascending.tr();
       case SortConditionPB.Descending:
         return LocaleKeys.grid_sort_descending.tr();
+      default:
+        return LocaleKeys.grid_sort_ascending.tr();
     }
-    return "";
   }
 }
 
@@ -160,12 +144,13 @@ class DatabaseAddSortButton extends StatefulWidget {
   final String viewId;
   final FieldController fieldController;
   final PopoverMutex popoverMutex;
+
   const DatabaseAddSortButton({
+    super.key,
     required this.viewId,
     required this.fieldController,
     required this.popoverMutex,
-    Key? key,
-  }) : super(key: key);
+  });
 
   @override
   State<DatabaseAddSortButton> createState() => _DatabaseAddSortButtonState();
@@ -207,8 +192,10 @@ class _DatabaseAddSortButtonState extends State<DatabaseAddSortButton> {
 
 class DatabaseDeleteSortButton extends StatelessWidget {
   final PopoverMutex popoverMutex;
-  const DatabaseDeleteSortButton({required this.popoverMutex, Key? key})
-      : super(key: key);
+  const DatabaseDeleteSortButton({
+    super.key,
+    required this.popoverMutex,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -217,7 +204,7 @@ class DatabaseDeleteSortButton extends StatelessWidget {
         return SizedBox(
           height: GridSize.popoverItemHeight,
           child: FlowyButton(
-            text: FlowyText.medium(LocaleKeys.grid_sort_deleteSort.tr()),
+            text: FlowyText.medium(LocaleKeys.grid_sort_deleteAllSorts.tr()),
             onTap: () {
               context
                   .read<SortEditorBloc>()
@@ -235,10 +222,10 @@ class DatabaseSortItemOrderButton extends StatefulWidget {
   final SortInfo sortInfo;
   final PopoverMutex popoverMutex;
   const DatabaseSortItemOrderButton({
+    super.key,
     required this.popoverMutex,
     required this.sortInfo,
-    Key? key,
-  }) : super(key: key);
+  });
 
   @override
   State<DatabaseSortItemOrderButton> createState() =>

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_menu.dart

@@ -16,10 +16,11 @@ import 'sort_info.dart';
 
 class SortMenu extends StatelessWidget {
   final FieldController fieldController;
+
   const SortMenu({
+    super.key,
     required this.fieldController,
-    Key? key,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -33,20 +34,24 @@ class SortMenu extends StatelessWidget {
           if (state.sortInfos.isNotEmpty) {
             return AppFlowyPopover(
               controller: PopoverController(),
-              constraints: BoxConstraints.loose(const Size(340, 200)),
+              constraints: BoxConstraints.loose(const Size(320, 200)),
               direction: PopoverDirection.bottomWithLeftAligned,
+              offset: const Offset(0, 5),
               popupBuilder: (BuildContext popoverContext) {
-                return SortEditor(
-                  viewId: state.viewId,
-                  fieldController: context.read<SortMenuBloc>().fieldController,
-                  sortInfos: state.sortInfos,
+                return SingleChildScrollView(
+                  child: SortEditor(
+                    viewId: state.viewId,
+                    fieldController:
+                        context.read<SortMenuBloc>().fieldController,
+                    sortInfos: state.sortInfos,
+                  ),
                 );
               },
               child: SortChoiceChip(sortInfos: state.sortInfos),
             );
-          } else {
-            return const SizedBox();
           }
+
+          return const SizedBox.shrink();
         },
       ),
     );
@@ -58,10 +63,10 @@ class SortChoiceChip extends StatelessWidget {
   final VoidCallback? onTap;
 
   const SortChoiceChip({
-    Key? key,
+    super.key,
     required this.sortInfos,
     this.onTap,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {

frontend/appflowy_flutter/lib/plugins/database_view/tar_bar/setting_menu.dart

@@ -60,13 +60,9 @@ class _DatabaseViewSettingContent extends StatelessWidget {
         return _wrapPadding(
           Row(
             children: [
-              SortMenu(
-                fieldController: fieldController,
-              ),
+              SortMenu(fieldController: fieldController),
               const HSpace(6),
-              FilterMenu(
-                fieldController: fieldController,
-              ),
+              FilterMenu(fieldController: fieldController),
             ],
           ),
         );

frontend/resources/translations/en.json

@@ -409,7 +409,7 @@
     "sort": {
       "ascending": "Ascending",
       "descending": "Descending",
-      "deleteSort": "Delete sort",
+      "deleteAllSorts": "Delete all sorts",
       "addSort": "Add sort"
     },
     "row": {