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
2024-08-30 18:12:39 +00:00 · 2023-08-15 16:28:55 +02:00 · 2023-08-15 16:28:55 +02:00 · ee14d31194
commit ee14d31194
parent 00ee4be723
5 changed files with 91 additions and 105 deletions
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_choice_button.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_editor.dart
+++ b/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: orderButton),
-        const HSpace(16),
-        deleteButton
+        SizedBox(
+          height: 26,
+          child: DatabaseSortItemOrderButton(
+            sortInfo: sortInfo,
+            popoverMutex: popoverMutex,
+          ),
+        ),
+        const HSpace(6),
+        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() =>
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/sort/sort_menu.dart
+++ b/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) {
--- a/frontend/appflowy_flutter/lib/plugins/database_view/tar_bar/setting_menu.dart
+++ b/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),
            ],
          ),
        );
--- a/frontend/resources/translations/en.json
+++ b/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": {