Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: config field separate line

Browse Source
This commit is contained in:
appflowy 2022-04-12 15:22:33 +08:00
parent ee0939ab86
commit 943b4507ac
11 changed files with 79 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app_flowy/lib/workspace/application/grid/field/field_cell_bloc.dart
View File

@ -10,10 +10,12 @@ part 'field_cell_bloc.freezed.dart';
class FieldCellBloc extends Bloc<FieldCellEvent, FieldCellState> {
final FieldListener _fieldListener;
final FieldService _fieldService;
FieldCellBloc({
required GridFieldCellContext cellContext,
}) : _fieldListener = FieldListener(fieldId: cellContext.field.id),
_fieldService = FieldService(gridId: cellContext.gridId),
super(FieldCellState.initial(cellContext)) {
on<FieldCellEvent>(
(event, emit) async {
@ -24,6 +26,7 @@ class FieldCellBloc extends Bloc<FieldCellEvent, FieldCellState> {
didReceiveFieldUpdate: (_DidReceiveFieldUpdate value) {
emit(state.copyWith(field: value.field));
},
updateWidth: (_UpdateWidth value) {},
);
},
);
@ -50,6 +53,7 @@ class FieldCellBloc extends Bloc<FieldCellEvent, FieldCellState> {
class FieldCellEvent with _$FieldCellEvent {
const factory FieldCellEvent.initial() = _InitialCell;
const factory FieldCellEvent.didReceiveFieldUpdate(Field field) = _DidReceiveFieldUpdate;
const factory FieldCellEvent.updateWidth(double offset) = _UpdateWidth;
}
@freezed

20
frontend/app_flowy/lib/workspace/application/grid/field/field_service.dart
View File

@ -1,9 +1,10 @@
import 'package:dartz/dartz.dart';
import 'package:equatable/equatable.dart';
import 'package:flowy_sdk/dispatch/dispatch.dart';
import 'package:flowy_sdk/protobuf/flowy-error/errors.pb.dart';
import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart';
import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
part 'field_service.freezed.dart';
class FieldService {
final String gridId;
@ -98,17 +99,12 @@ class FieldService {
}
}
class GridFieldCellContext extends Equatable {
final String gridId;
final Field field;
const GridFieldCellContext({
required this.gridId,
required this.field,
});
@override
List<Object> get props => [field.id];
@freezed
class GridFieldCellContext with _$GridFieldCellContext {
const factory GridFieldCellContext({
required String gridId,
required Field field,
}) = _GridFieldCellContext;
}
abstract class EditFieldContextLoader {

4
frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart
View File

@ -78,10 +78,10 @@ class CreateItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final config = HoverDisplayConfig(hoverColor: theme.hover);
final config = HoverStyle(hoverColor: theme.hover);
return FlowyHover(
config: config,
style: config,
builder: (context, onHover) {
return GestureDetector(
onTap: () => onSelected(pluginBuilder),

2
frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart
View File

@ -43,7 +43,7 @@ class ViewSectionItem extends StatelessWidget {
return InkWell(
onTap: () => onSelected(context.read<ViewBloc>().state.view),
child: FlowyHover(
config: HoverDisplayConfig(hoverColor: theme.bg3),
style: HoverStyle(hoverColor: theme.bg3),
builder: (_, onHover) => _render(context, onHover, state, theme.iconColor),
setSelected: () => state.isEditing || isSelected,
),

4
frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart
View File

@ -100,7 +100,7 @@ class _FlowyGridState extends State<FlowyGrid> {
controller: _scrollController.verticalController,
slivers: [
_renderToolbar(state.gridId),
_renderGridHeader(state.gridId),
_renderHeader(state.gridId),
_renderRows(gridId: state.gridId, context: context),
const GridFooter(),
],
@ -126,7 +126,7 @@ class _FlowyGridState extends State<FlowyGrid> {
);
}
Widget _renderGridHeader(String gridId) {
Widget _renderHeader(String gridId) {
return BlocSelector<GridBloc, GridState, List<Field>>(
selector: (state) => state.fields,
builder: (context, fields) {

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

@ -199,7 +199,7 @@ class _SelectOptionCell extends StatelessWidget {
context.read<SelectOptionEditorBloc>().add(SelectOptionEditorEvent.selectOption(option.id));
},
child: FlowyHover(
config: HoverDisplayConfig(hoverColor: theme.hover),
style: HoverStyle(hoverColor: theme.hover),
builder: (_, onHover) {
List<Widget> children = [
SelectOptionTag(option: option, isSelected: isSelected),

41
frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_cell.dart
View File

@ -4,7 +4,9 @@ import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.d
import 'package:flowy_infra/image.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_sdk/log.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'field_type_extension.dart';
@ -25,21 +27,52 @@ class GridFieldCell extends StatelessWidget {
child: BlocBuilder<FieldCellBloc, FieldCellState>(
builder: (context, state) {
final button = FlowyButton(
hoverColor: theme.hover,
hoverColor: theme.shader6,
onTap: () => _showActionSheet(context),
rightIcon: svgWidget("editor/details", color: theme.iconColor),
// rightIcon: svgWidget("editor/details", color: theme.iconColor),
leftIcon: svgWidget(state.field.fieldType.iconName(), color: theme.iconColor),
text: FlowyText.medium(state.field.name, fontSize: 12),
padding: GridSize.cellContentInsets,
);
final line = InkWell(
onTap: () {},
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onHorizontalDragCancel: () {},
onHorizontalDragUpdate: (value) {
Log.info(value.delta);
},
child: FlowyHover(
style: HoverStyle(
hoverColor: theme.main1,
borderRadius: BorderRadius.zero,
contentMargin: const EdgeInsets.only(left: 5),
),
builder: (_, onHover) => const SizedBox(width: 2),
),
),
);
final borderSide = BorderSide(color: theme.shader4, width: 0.4);
final decoration = BoxDecoration(border: Border(top: borderSide, right: borderSide, bottom: borderSide));
final decoration = BoxDecoration(
border: Border(
top: borderSide,
right: borderSide,
bottom: borderSide,
));
return Container(
width: state.field.width.toDouble(),
decoration: decoration,
child: button,
child: ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: Stack(
alignment: Alignment.centerRight,
fit: StackFit.expand,
children: [button, Positioned(top: 0, bottom: 0, right: 0, child: line)],
),
),
);
},
),

17
frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header.dart
View File

@ -72,28 +72,27 @@ class _GridHeaderWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = context.watch<AppTheme>();
final cells = fields.map(
(field) => GridFieldCell(
GridFieldCellContext(gridId: gridId, field: field),
),
);
final row = Row(
return Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const _HeaderLeading(),
const _CellLeading(),
...cells,
_HeaderTrailing(gridId: gridId),
_CellTrailing(gridId: gridId),
],
);
return Container(height: GridSize.headerHeight, color: theme.surface, child: row);
// return Container(height: GridSize.headerHeight, color: theme.surface, child: row);
}
}
class _HeaderLeading extends StatelessWidget {
const _HeaderLeading({Key? key}) : super(key: key);
class _CellLeading extends StatelessWidget {
const _CellLeading({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
@ -103,9 +102,9 @@ class _HeaderLeading extends StatelessWidget {
}
}
class _HeaderTrailing extends StatelessWidget {
class _CellTrailing extends StatelessWidget {
final String gridId;
const _HeaderTrailing({required this.gridId, Key? key}) : super(key: key);
const _CellTrailing({required this.gridId, Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {

2
frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart
View File

@ -85,7 +85,7 @@ class ActionCell<T extends ActionItem> extends StatelessWidget {
final theme = context.watch<AppTheme>();
return FlowyHover(
config: HoverDisplayConfig(hoverColor: theme.hover),
style: HoverStyle(hoverColor: theme.hover),
builder: (context, onHover) {
return GestureDetector(
behavior: HitTestBehavior.opaque,

2
frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart
View File

@ -28,7 +28,7 @@ class FlowyButton extends StatelessWidget {
return InkWell(
onTap: onTap,
child: FlowyHover(
config: HoverDisplayConfig(borderRadius: Corners.s6Border, hoverColor: hoverColor),
style: HoverStyle(borderRadius: Corners.s6Border, hoverColor: hoverColor),
setSelected: () => isSelected,
builder: (context, onHover) => _render(),
),

25
frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart
View File

@ -5,14 +5,14 @@ import 'package:flowy_infra/time/duration.dart';
typedef HoverBuilder = Widget Function(BuildContext context, bool onHover);
class FlowyHover extends StatefulWidget {
final HoverDisplayConfig config;
final HoverStyle style;
final HoverBuilder builder;
final bool Function()? setSelected;
const FlowyHover({
Key? key,
required this.builder,
required this.config,
required this.style,
this.setSelected,
}) : super(key: key);
@ -41,7 +41,7 @@ class _FlowyHoverState extends State<FlowyHover> {
if (showHover) {
return FlowyHoverContainer(
config: widget.config,
style: widget.style,
child: widget.builder(context, _onHover),
);
} else {
@ -50,41 +50,44 @@ class _FlowyHoverState extends State<FlowyHover> {
}
}
class HoverDisplayConfig {
class HoverStyle {
final Color borderColor;
final double borderWidth;
final Color hoverColor;
final BorderRadius borderRadius;
final EdgeInsets contentMargin;
const HoverDisplayConfig(
const HoverStyle(
{this.borderColor = Colors.transparent,
this.borderWidth = 0,
this.borderRadius = const BorderRadius.all(Radius.circular(6)),
this.contentMargin = EdgeInsets.zero,
required this.hoverColor});
}
class FlowyHoverContainer extends StatelessWidget {
final HoverDisplayConfig config;
final HoverStyle style;
final Widget child;
const FlowyHoverContainer({
Key? key,
required this.child,
required this.config,
required this.style,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final hoverBorder = Border.all(
color: config.borderColor,
width: config.borderWidth,
color: style.borderColor,
width: style.borderWidth,
);
return Container(
margin: style.contentMargin,
decoration: BoxDecoration(
border: hoverBorder,
color: config.hoverColor,
borderRadius: config.borderRadius,
color: style.hoverColor,
borderRadius: style.borderRadius,
),
child: child,
);