Merge pull request #438 from AppFlowy-IO/grid_bug_fix

chore: fix some ui bugs

Author: appflowy

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

@@ -28,7 +28,7 @@ class GridPluginBuilder implements PluginBuilder {
 
 class GridPluginConfig implements PluginConfig {
   @override
-  bool get creatable => false;
+  bool get creatable => true;
 }
 
 class GridPlugin extends Plugin {

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/extension.dart

@@ -108,15 +108,16 @@ class SelectOptionTextField extends StatelessWidget {
           }
 
           return TextField(
+            autofocus: true,
             controller: editController,
             focusNode: focusNode,
             onChanged: onChanged,
             onSubmitted: onSubmitted,
             maxLines: 1,
             style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
             decoration: InputDecoration(
-              border: OutlineInputBorder(
-                borderSide: BorderSide(color: theme.shader3, width: 1.0),
+              enabledBorder: OutlineInputBorder(
+                borderSide: BorderSide(color: theme.main1, width: 1.0),
                 borderRadius: Corners.s10Border,
               ),
               isDense: true,

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart

@@ -4,6 +4,7 @@ import 'package:app_flowy/workspace/application/grid/cell_bloc/selection_editor_
 import 'package:app_flowy/workspace/application/grid/row/row_service.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/type_option/edit_option_pannel.dart';
+import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/type_option/widget.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -53,7 +54,9 @@ class SelectOptionEditor extends StatelessWidget with FlowyOverlayDelegate {
             shrinkWrap: true,
             slivers: [
               SliverToBoxAdapter(child: _TextField()),
-              const SliverToBoxAdapter(child: VSpace(10)),
+              const SliverToBoxAdapter(child: VSpace(6)),
+              const SliverToBoxAdapter(child: TypeOptionSeparator()),
+              const SliverToBoxAdapter(child: VSpace(6)),
               const SliverToBoxAdapter(child: _Title()),
               const SliverToBoxAdapter(child: _OptionList()),
             ],
@@ -104,7 +107,9 @@ class _OptionList extends StatelessWidget {
   Widget build(BuildContext context) {
     return BlocBuilder<SelectOptionEditorBloc, SelectOptionEditorState>(
       builder: (context, state) {
-        final cells = state.options.map((option) => _SelectOptionCell(option)).toList();
+        final cells = state.options.map((option) {
+          return _SelectOptionCell(option, state.selectedOptions.contains(option));
+        }).toList();
         final list = ListView.separated(
           shrinkWrap: true,
           controller: ScrollController(),
@@ -175,7 +180,8 @@ class _Title extends StatelessWidget {
 
 class _SelectOptionCell extends StatelessWidget {
   final SelectOption option;
-  const _SelectOptionCell(this.option, {Key? key}) : super(key: key);
+  final bool isSelected;
+  const _SelectOptionCell(this.option, this.isSelected, {Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -194,6 +200,10 @@ class _SelectOptionCell extends StatelessWidget {
               const Spacer(),
             ];
 
+            if (isSelected) {
+              children.add(svgWidget("grid/checkmark"));
+            }
+
             if (onHover) {
               children.add(FlowyIconButton(
                 width: 28,

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/toolbar/grid_setting.dart

@@ -37,10 +37,8 @@ class GridSettingList extends StatelessWidget {
       onAction: (action, settingContext) {
         switch (action) {
           case GridSettingAction.filter:
-            // TODO: Handle this case.
             break;
           case GridSettingAction.sortBy:
-            // TODO: Handle this case.
             break;
           case GridSettingAction.properties:
             GridPropertyList(gridId: settingContext.gridId, fields: settingContext.fields).show(context);
@@ -130,7 +128,7 @@ class _SettingItem extends StatelessWidget {
       height: GridSize.typeOptionItemHeight,
       child: FlowyButton(
         isSelected: isSelected,
-        text: FlowyText.medium(action.title(), fontSize: 12),
+        text: FlowyText.medium(action.title(), fontSize: 12, color: action.enable() ? null : theme.shader4),
         hoverColor: theme.hover,
         onTap: () {
           context.read<GridSettingBloc>().add(GridSettingEvent.performAction(action));
@@ -163,4 +161,13 @@ extension _GridSettingExtension on GridSettingAction {
         return LocaleKeys.grid_settings_Properties.tr();
     }
   }
+
+  bool enable() {
+    switch (this) {
+      case GridSettingAction.properties:
+        return true;
+      default:
+        return false;
+    }
+  }
 }

frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart

@@ -322,7 +322,9 @@ class FlowyOverlayState extends State<FlowyOverlay> {
     // //   'app content was created above the Navigator with the WidgetsApp builder parameter.',
     // // );
     // // ...
+
     return MaterialApp(
+      theme: Theme.of(context),
       debugShowCheckedModeBanner: false,
       home: Stack(
         children: children..addAll(overlays),

frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart

@@ -98,7 +98,7 @@ class _RoundedInputFieldState extends State<RoundedInputField> {
             contentPadding: widget.contentPadding,
             hintText: widget.hintText,
             hintStyle: TextStyle(color: widget.normalBorderColor),
-            border: OutlineInputBorder(
+            enabledBorder: OutlineInputBorder(
               borderSide: BorderSide(
                 color: borderColor,
                 width: 1.0,

frontend/app_flowy/pubspec.lock

@@ -645,7 +645,7 @@ packages:
       name: js
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.6.4"
+    version: "0.6.3"
   json_annotation:
     dependency: transitive
     description:
@@ -799,7 +799,7 @@ packages:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.1"
+    version: "1.8.0"
   path_drawing:
     dependency: transitive
     description:
@@ -1133,21 +1133,21 @@ packages:
       name: test
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.20.1"
+    version: "1.19.5"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.9"
+    version: "0.4.8"
   test_core:
     dependency: transitive
     description:
       name: test_core
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.11"
+    version: "0.4.9"
   textfield_tags:
     dependency: "direct main"
     description:
@@ -1361,5 +1361,5 @@ packages:
     source: hosted
     version: "8.0.0"
 sdks:
-  dart: ">=2.16.0-100.0.dev <3.0.0"
+  dart: ">=2.15.0-116.0.dev <3.0.0"
   flutter: ">=2.5.0"