chore: edit field

This commit is contained in:
appflowy 2022-04-21 20:32:48 +08:00
parent f66adb53c9
commit e1711980c6
5 changed files with 75 additions and 148 deletions

View File

@ -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<bool> get onFocus;
}
abstract class GridCellStyle {}
//
abstract class HoverWidget extends StatefulWidget {
const HoverWidget({Key? key}) : super(key: key);
ValueNotifier<bool> get onFocus;
}
class FlowyHover2 extends StatefulWidget {
final HoverWidget child;
const FlowyHover2({required this.child, Key? key}) : super(key: key);
@override
State<FlowyHover2> createState() => _FlowyHover2State();
}
class _FlowyHover2State extends State<FlowyHover2> {
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<AppTheme>();
return Consumer<FlowyHoverState>(
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;
}

View File

@ -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<GridTextCell> {
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,
),
);

View File

@ -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;

View File

@ -207,8 +207,14 @@ class FlowyOverlayState extends State<FlowyOverlay> {
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<FlowyOverlay> {
@override
Widget build(BuildContext context) {
final overlays = _overlayList.map((item) => item.widget);
List<Widget> children = <Widget>[widget.child];
Widget? child;
if (overlays.isNotEmpty) {
child = Container(
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,
),
);
if (style.blur) {
child = BackdropFilter(
child: child,
filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
);
}
}
return widget;
}).toList();
List<Widget> children = <Widget>[widget.child];
Widget? child = _renderBackground(overlays);
if (child != null) {
children.add(child);
}
@ -335,4 +337,25 @@ class FlowyOverlayState extends State<FlowyOverlay> {
void _handleTapOnBackground() {
removeAll();
}
Widget? _renderBackground(List<Widget> 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;
}
}

View File

@ -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<FlowyHover2> createState() => _FlowyHover2State();
@ -144,11 +149,14 @@ class _FlowyHover2State extends State<FlowyHover2> {
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,
),
],
),
),