mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
chore: edit field
This commit is contained in:
parent
f66adb53c9
commit
e1711980c6
@ -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;
|
||||
}
|
||||
|
@ -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,
|
||||
),
|
||||
);
|
||||
|
@ -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;
|
||||
|
@ -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(
|
||||
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<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;
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
Loading…
Reference in New Issue
Block a user