From 943b4507ac3c092baa60b1c7216616e366472930 Mon Sep 17 00:00:00 2001 From: appflowy Date: Tue, 12 Apr 2022 15:22:33 +0800 Subject: [PATCH] chore: config field separate line --- .../grid/field/field_cell_bloc.dart | 4 ++ .../application/grid/field/field_service.dart | 20 ++++----- .../home/menu/app/header/add_button.dart | 4 +- .../home/menu/app/section/item.dart | 2 +- .../plugins/grid/src/grid_page.dart | 4 +- .../cell/selection_cell/selection_editor.dart | 2 +- .../grid/src/widgets/header/field_cell.dart | 41 +++++++++++++++++-- .../grid/src/widgets/header/grid_header.dart | 17 ++++---- .../presentation/widgets/pop_up_action.dart | 2 +- .../lib/style_widget/button.dart | 2 +- .../lib/style_widget/hover.dart | 25 ++++++----- 11 files changed, 79 insertions(+), 44 deletions(-) diff --git a/frontend/app_flowy/lib/workspace/application/grid/field/field_cell_bloc.dart b/frontend/app_flowy/lib/workspace/application/grid/field/field_cell_bloc.dart index c7964573d3..1afbded351 100644 --- a/frontend/app_flowy/lib/workspace/application/grid/field/field_cell_bloc.dart +++ b/frontend/app_flowy/lib/workspace/application/grid/field/field_cell_bloc.dart @@ -10,10 +10,12 @@ part 'field_cell_bloc.freezed.dart'; class FieldCellBloc extends Bloc { 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( (event, emit) async { @@ -24,6 +26,7 @@ class FieldCellBloc extends Bloc { didReceiveFieldUpdate: (_DidReceiveFieldUpdate value) { emit(state.copyWith(field: value.field)); }, + updateWidth: (_UpdateWidth value) {}, ); }, ); @@ -50,6 +53,7 @@ class FieldCellBloc extends Bloc { class FieldCellEvent with _$FieldCellEvent { const factory FieldCellEvent.initial() = _InitialCell; const factory FieldCellEvent.didReceiveFieldUpdate(Field field) = _DidReceiveFieldUpdate; + const factory FieldCellEvent.updateWidth(double offset) = _UpdateWidth; } @freezed diff --git a/frontend/app_flowy/lib/workspace/application/grid/field/field_service.dart b/frontend/app_flowy/lib/workspace/application/grid/field/field_service.dart index c058bcd36c..743a441c7d 100644 --- a/frontend/app_flowy/lib/workspace/application/grid/field/field_service.dart +++ b/frontend/app_flowy/lib/workspace/application/grid/field/field_service.dart @@ -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 get props => [field.id]; +@freezed +class GridFieldCellContext with _$GridFieldCellContext { + const factory GridFieldCellContext({ + required String gridId, + required Field field, + }) = _GridFieldCellContext; } abstract class EditFieldContextLoader { diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart index 6df78a67cc..214dc7a198 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/add_button.dart @@ -78,10 +78,10 @@ class CreateItem extends StatelessWidget { @override Widget build(BuildContext context) { final theme = context.watch(); - 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), diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart index 15a27268c5..290d2bd328 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/section/item.dart @@ -43,7 +43,7 @@ class ViewSectionItem extends StatelessWidget { return InkWell( onTap: () => onSelected(context.read().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, ), diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart index 6f6878c515..50d1913057 100755 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/grid_page.dart @@ -100,7 +100,7 @@ class _FlowyGridState extends State { 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 { ); } - Widget _renderGridHeader(String gridId) { + Widget _renderHeader(String gridId) { return BlocSelector>( selector: (state) => state.fields, builder: (context, fields) { diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart index feefb552cd..4ebd4407b0 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart @@ -199,7 +199,7 @@ class _SelectOptionCell extends StatelessWidget { context.read().add(SelectOptionEditorEvent.selectOption(option.id)); }, child: FlowyHover( - config: HoverDisplayConfig(hoverColor: theme.hover), + style: HoverStyle(hoverColor: theme.hover), builder: (_, onHover) { List children = [ SelectOptionTag(option: option, isSelected: isSelected), diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_cell.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_cell.dart index 79e706085f..5d658c693c 100755 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_cell.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_cell.dart @@ -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( 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)], + ), + ), ); }, ), diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header.dart index 5568f2ef62..b5893fa095 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/grid_header.dart @@ -72,28 +72,27 @@ class _GridHeaderWidget extends StatelessWidget { @override Widget build(BuildContext context) { - final theme = context.watch(); 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) { diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart index 5c782d3ece..cc822a6ef9 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart @@ -85,7 +85,7 @@ class ActionCell extends StatelessWidget { final theme = context.watch(); return FlowyHover( - config: HoverDisplayConfig(hoverColor: theme.hover), + style: HoverStyle(hoverColor: theme.hover), builder: (context, onHover) { return GestureDetector( behavior: HitTestBehavior.opaque, diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart index 69cddbf2fb..8249bc115b 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart +++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart @@ -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(), ), 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 48a702c2e4..f8caf35b84 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 @@ -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 { if (showHover) { return FlowyHoverContainer( - config: widget.config, + style: widget.style, child: widget.builder(context, _onHover), ); } else { @@ -50,41 +50,44 @@ class _FlowyHoverState extends State { } } -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, );