From e1711980c6387b14ac249a6173242705c05a9125 Mon Sep 17 00:00:00 2001 From: appflowy Date: Thu, 21 Apr 2022 20:32:48 +0800 Subject: [PATCH] chore: edit field --- .../grid/src/widgets/cell/cell_builder.dart | 108 ------------------ .../grid/src/widgets/cell/text_cell.dart | 16 +-- .../grid/src/widgets/row/row_detail.dart | 24 +++- .../lib/src/flowy_overlay/flowy_overlay.dart | 61 +++++++--- .../lib/style_widget/hover.dart | 14 ++- 5 files changed, 75 insertions(+), 148 deletions(-) diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart index 3304de6e51..015fea1c32 100755 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart @@ -1,10 +1,7 @@ import 'package:app_flowy/workspace/application/grid/row/row_service.dart'; -import 'package:flowy_infra/size.dart'; -import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/style_widget/hover.dart'; import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart' show FieldType; import 'package:flutter/widgets.dart'; -import 'package:provider/provider.dart'; import 'checkbox_cell.dart'; import 'date_cell.dart'; import 'number_cell.dart'; @@ -46,109 +43,4 @@ abstract class GridCellWidget extends HoverWidget { GridCellWidget({Key? key}) : super(key: key); } -abstract class B { - ValueNotifier get onFocus; -} - abstract class GridCellStyle {} - -// -abstract class HoverWidget extends StatefulWidget { - const HoverWidget({Key? key}) : super(key: key); - - ValueNotifier get onFocus; -} - -class FlowyHover2 extends StatefulWidget { - final HoverWidget child; - const FlowyHover2({required this.child, Key? key}) : super(key: key); - - @override - State createState() => _FlowyHover2State(); -} - -class _FlowyHover2State extends State { - late FlowyHoverState _hoverState; - - @override - void initState() { - _hoverState = FlowyHoverState(); - widget.child.onFocus.addListener(() { - _hoverState.onFocus = widget.child.onFocus.value; - }); - super.initState(); - } - - @override - void dispose() { - _hoverState.dispose(); - super.dispose(); - } - - @override - Widget build(BuildContext context) { - return ChangeNotifierProvider.value( - value: _hoverState, - child: MouseRegion( - cursor: SystemMouseCursors.click, - opaque: false, - onEnter: (p) => setState(() => _hoverState.onHover = true), - onExit: (p) => setState(() => _hoverState.onHover = false), - child: Stack( - fit: StackFit.expand, - alignment: AlignmentDirectional.center, - children: [ - const _HoverBackground(), - widget.child, - ], - ), - ), - ); - } -} - -class _HoverBackground extends StatelessWidget { - const _HoverBackground({Key? key}) : super(key: key); - - @override - Widget build(BuildContext context) { - final theme = context.watch(); - return Consumer( - builder: (context, state, child) { - if (state.onHover || state.onFocus) { - return FlowyHoverContainer( - style: HoverStyle( - borderRadius: Corners.s6Border, - hoverColor: theme.shader6, - ), - ); - } else { - return const SizedBox(); - } - }, - ); - } -} - -class FlowyHoverState extends ChangeNotifier { - bool _onHover = false; - bool _onFocus = false; - - set onHover(bool value) { - if (_onHover != value) { - _onHover = value; - notifyListeners(); - } - } - - bool get onHover => _onHover; - - set onFocus(bool value) { - if (_onFocus != value) { - _onFocus = value; - notifyListeners(); - } - } - - bool get onFocus => _onFocus; -} diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/text_cell.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/text_cell.dart index 688f8344f7..4c9c07697e 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/text_cell.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/text_cell.dart @@ -7,16 +7,9 @@ import 'cell_builder.dart'; class GridTextCellStyle extends GridCellStyle { String? placeholder; - Color? hoverColor; - bool filled; - InputBorder? inputBorder; - EdgeInsets? contentPadding; + GridTextCellStyle({ this.placeholder, - this.hoverColor, - this.filled = false, - this.inputBorder, - this.contentPadding, }); } @@ -79,12 +72,9 @@ class _GridTextCellState extends State { maxLines: 1, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500), decoration: InputDecoration( - contentPadding: widget.cellStyle?.contentPadding ?? EdgeInsets.zero, - border: widget.cellStyle?.inputBorder ?? InputBorder.none, + contentPadding: EdgeInsets.zero, + border: InputBorder.none, hintText: widget.cellStyle?.placeholder, - hoverColor: widget.cellStyle?.hoverColor ?? Colors.transparent, - filled: widget.cellStyle?.filled ?? false, - fillColor: Colors.transparent, isDense: true, ), ); diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/row_detail.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/row_detail.dart index 99e9f108cd..4ba31f783b 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/row_detail.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/row_detail.dart @@ -1,7 +1,9 @@ +import 'package:app_flowy/workspace/application/grid/field/field_service.dart'; import 'package:app_flowy/workspace/application/grid/row/row_detail_bloc.dart'; import 'package:app_flowy/workspace/application/grid/row/row_service.dart'; import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/prelude.dart'; import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/field_cell.dart'; +import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/field_editor.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/flowy_infra_ui.dart'; import 'package:flowy_infra_ui/style_widget/hover.dart'; @@ -108,14 +110,29 @@ class _RowDetailCell extends StatelessWidget { children: [ SizedBox( width: 150, - child: FieldCellButton(field: cellData.field, onTap: () {}), + child: FieldCellButton(field: cellData.field, onTap: () => _showFieldEditor(context)), ), const HSpace(10), - Expanded(child: FlowyHover2(child: cell)), + Expanded( + child: FlowyHover2( + child: cell, + contentPadding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4), + ), + ), ], ), ); } + + void _showFieldEditor(BuildContext context) { + FieldEditor( + gridId: cellData.gridId, + fieldContextLoader: FieldContextLoaderAdaptor( + gridId: cellData.gridId, + field: cellData.field, + ), + ).show(context); + } } GridCellStyle? _buildCellStyle(AppTheme theme, FieldType fieldType) { @@ -130,10 +147,7 @@ GridCellStyle? _buildCellStyle(AppTheme theme, FieldType fieldType) { return null; case FieldType.RichText: return GridTextCellStyle( - hoverColor: theme.shader6, - filled: true, placeholder: LocaleKeys.grid_row_textPlaceholder.tr(), - contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 10), ); case FieldType.SingleSelect: return null; diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart index 5768c52e60..bddbbd90b8 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/flowy_overlay.dart @@ -207,8 +207,14 @@ class FlowyOverlayState extends State { final reveredList = _overlayList.reversed.toList(); final firstItem = reveredList.removeAt(0); - firstItem.delegate?.didRemove(); _overlayList.remove(firstItem); + if (firstItem.delegate != null) { + firstItem.delegate!.didRemove(); + + if (firstItem.delegate!.asBarrier()) { + return; + } + } for (final element in reveredList) { if (element.delegate?.asBarrier() ?? false) { @@ -286,27 +292,23 @@ class FlowyOverlayState extends State { @override Widget build(BuildContext context) { - final overlays = _overlayList.map((item) => item.widget); - List children = [widget.child]; - - Widget? child; - if (overlays.isNotEmpty) { - child = Container( - color: style.barrierColor, - child: GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: _handleTapOnBackground, - ), - ); - - if (style.blur) { - child = BackdropFilter( - child: child, - filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4), + final overlays = _overlayList.map((item) { + var widget = item.widget; + if (item.delegate?.asBarrier() ?? false) { + widget = Container( + color: style.barrierColor, + child: GestureDetector( + behavior: HitTestBehavior.opaque, + onTap: _handleTapOnBackground, + child: widget, + ), ); } - } + return widget; + }).toList(); + List children = [widget.child]; + Widget? child = _renderBackground(overlays); if (child != null) { children.add(child); } @@ -335,4 +337,25 @@ class FlowyOverlayState extends State { void _handleTapOnBackground() { removeAll(); } + + Widget? _renderBackground(List overlays) { + Widget? child; + if (overlays.isNotEmpty) { + child = Container( + color: style.barrierColor, + child: GestureDetector( + behavior: HitTestBehavior.opaque, + onTap: _handleTapOnBackground, + ), + ); + + if (style.blur) { + child = BackdropFilter( + child: child, + filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4), + ); + } + } + return child; + } } diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart index e7c7b183cf..5189908192 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart @@ -110,7 +110,12 @@ abstract class HoverWidget extends StatefulWidget { class FlowyHover2 extends StatefulWidget { final HoverWidget child; - const FlowyHover2({required this.child, Key? key}) : super(key: key); + final EdgeInsets contentPadding; + const FlowyHover2({ + required this.child, + this.contentPadding = EdgeInsets.zero, + Key? key, + }) : super(key: key); @override State createState() => _FlowyHover2State(); @@ -144,11 +149,14 @@ class _FlowyHover2State extends State { onEnter: (p) => setState(() => _hoverState.onHover = true), onExit: (p) => setState(() => _hoverState.onHover = false), child: Stack( - fit: StackFit.expand, + fit: StackFit.loose, alignment: AlignmentDirectional.center, children: [ const _HoverBackground(), - widget.child, + Padding( + padding: widget.contentPadding, + child: widget.child, + ), ], ), ),