From 371f75343ccccdaed6e548ff0b821daaae0b1f76 Mon Sep 17 00:00:00 2001 From: appflowy Date: Sat, 30 Apr 2022 08:21:27 +0800 Subject: [PATCH] chore: add min height for row --- .../plugins/grid/src/layout/sizes.dart | 4 +- .../grid/src/widgets/cell/cell_builder.dart | 2 +- .../grid/src/widgets/cell/checkbox_cell.dart | 17 ++- .../cell/selection_cell/selection_cell.dart | 106 ++++++++++-------- .../cell/selection_cell/selection_editor.dart | 71 +++++++----- .../grid/src/widgets/row/grid_row.dart | 15 +-- 6 files changed, 116 insertions(+), 99 deletions(-) diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/layout/sizes.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/layout/sizes.dart index 0e93dc6a21636..62577ee62c191 100755 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/layout/sizes.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/layout/sizes.dart @@ -9,8 +9,8 @@ class GridSize { static double get leadingHeaderPadding => 50 * scale; static double get trailHeaderPadding => 140 * scale; static double get headerContainerPadding => 0 * scale; - static double get cellHPadding => 12 * scale; - static double get cellVPadding => 12 * scale; + static double get cellHPadding => 8 * scale; + static double get cellVPadding => 8 * scale; static double get typeOptionItemHeight => 32 * scale; static double get typeOptionSeparatorHeight => 6 * scale; 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 b3af02a29dddb..2049e9583bc93 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 @@ -121,7 +121,7 @@ class CellContainer extends StatelessWidget { behavior: HitTestBehavior.translucent, onTap: () => child.requestFocus.notify(), child: Container( - constraints: BoxConstraints(maxWidth: width), + constraints: BoxConstraints(maxWidth: width, minHeight: 46), decoration: _makeBoxDecoration(context, isFocus), padding: GridSize.cellContentInsets, child: container, diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/checkbox_cell.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/checkbox_cell.dart index 97754e339eb72..99fcd4a26fd56 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/checkbox_cell.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/checkbox_cell.dart @@ -35,16 +35,13 @@ class _CheckboxCellState extends State { child: BlocBuilder( builder: (context, state) { final icon = state.isSelected ? svgWidget('editor/editor_check') : svgWidget('editor/editor_uncheck'); - return SizedBox( - height: 20, - child: Align( - alignment: Alignment.centerLeft, - child: FlowyIconButton( - onPressed: () => context.read().add(const CheckboxCellEvent.select()), - iconPadding: EdgeInsets.zero, - icon: icon, - width: 23, - ), + return Align( + alignment: Alignment.centerLeft, + child: FlowyIconButton( + onPressed: () => context.read().add(const CheckboxCellEvent.select()), + iconPadding: EdgeInsets.zero, + icon: icon, + width: 23, ), ); }, diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart index e23af426e6255..01aad63699d3d 100644 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart @@ -5,6 +5,7 @@ import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/style_widget/text.dart'; // ignore: unused_import import 'package:flowy_sdk/log.dart'; +import 'package:flowy_sdk/protobuf/flowy-grid/selection_type_option.pb.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -44,47 +45,27 @@ class _SingleSelectCellState extends State { @override void initState() { - final cellContext = _buildCellContext(); + final cellContext = widget.cellContextBuilder.build() as GridSelectOptionCellContext; _cellBloc = getIt(param1: cellContext)..add(const SelectionCellEvent.initial()); super.initState(); } @override Widget build(BuildContext context) { - final theme = context.watch(); - // Log.trace("build widget $hashCode"); return BlocProvider.value( value: _cellBloc, child: BlocBuilder( builder: (context, state) { - List children = []; - children.addAll(state.selectedOptions.map((option) => SelectOptionTag(option: option)).toList()); - - if (children.isEmpty && widget.cellStyle != null) { - children.add(FlowyText.medium(widget.cellStyle!.placeholder, fontSize: 14, color: theme.shader3)); - } - return SizedBox.expand( - child: InkWell( - onTap: () { - widget.onFocus.value = true; - SelectOptionCellEditor.show( - context, - _buildCellContext(), - () => widget.onFocus.value = false, - ); - }, - child: Center(child: Wrap(children: children)), - ), - ); + return _SelectOptionCell( + selectOptions: state.selectedOptions, + cellStyle: widget.cellStyle, + onFocus: (value) => widget.onFocus.value = value, + cellContextBuilder: widget.cellContextBuilder); }, ), ); } - GridSelectOptionCellContext _buildCellContext() { - return widget.cellContextBuilder.build() as GridSelectOptionCellContext; - } - @override Future dispose() async { _cellBloc.close(); @@ -118,7 +99,7 @@ class _MultiSelectCellState extends State { @override void initState() { - final cellContext = _buildCellContext(); + final cellContext = widget.cellContextBuilder.build() as GridSelectOptionCellContext; _cellBloc = getIt(param1: cellContext)..add(const SelectionCellEvent.initial()); super.initState(); } @@ -129,25 +110,11 @@ class _MultiSelectCellState extends State { value: _cellBloc, child: BlocBuilder( builder: (context, state) { - List children = state.selectedOptions.map((option) => SelectOptionTag(option: option)).toList(); - - if (children.isEmpty && widget.cellStyle != null) { - children.add(FlowyText.medium(widget.cellStyle!.placeholder, fontSize: 14)); - } - - return SizedBox.expand( - child: InkWell( - onTap: () { - widget.onFocus.value = true; - SelectOptionCellEditor.show( - context, - _buildCellContext(), - () => widget.onFocus.value = false, - ); - }, - child: Wrap(children: children, spacing: 4, runSpacing: 4), - ), - ); + return _SelectOptionCell( + selectOptions: state.selectedOptions, + cellStyle: widget.cellStyle, + onFocus: (value) => widget.onFocus.value = value, + cellContextBuilder: widget.cellContextBuilder); }, ), ); @@ -158,8 +125,51 @@ class _MultiSelectCellState extends State { _cellBloc.close(); super.dispose(); } +} + +class _SelectOptionCell extends StatelessWidget { + final List selectOptions; + final void Function(bool) onFocus; + final SelectOptionCellStyle? cellStyle; + final GridCellContextBuilder cellContextBuilder; + const _SelectOptionCell({ + required this.selectOptions, + required this.onFocus, + required this.cellStyle, + required this.cellContextBuilder, + Key? key, + }) : super(key: key); - GridSelectOptionCellContext _buildCellContext() { - return widget.cellContextBuilder.build() as GridSelectOptionCellContext; + @override + Widget build(BuildContext context) { + final theme = context.watch(); + final Widget child; + if (selectOptions.isEmpty && cellStyle != null) { + child = Align( + alignment: Alignment.centerLeft, + child: FlowyText.medium(cellStyle!.placeholder, fontSize: 14, color: theme.shader3), + ); + } else { + final tags = selectOptions.map((option) => SelectOptionTag(option: option)).toList(); + child = Align( + alignment: Alignment.centerLeft, + child: Wrap(children: tags, spacing: 4, runSpacing: 4), + ); + } + + final cellContext = cellContextBuilder.build() as GridSelectOptionCellContext; + return Stack( + alignment: AlignmentDirectional.center, + fit: StackFit.expand, + children: [ + child, + InkWell( + onTap: () { + onFocus(true); + SelectOptionCellEditor.show(context, cellContext, () => onFocus(false)); + }, + ), + ], + ); } } 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 0379bd55dd753..4152e7b68f1dc 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 @@ -184,41 +184,50 @@ class _SelectOptionCell extends StatelessWidget { final theme = context.watch(); return SizedBox( height: GridSize.typeOptionItemHeight, - child: InkWell( - onTap: () { - context.read().add(SelectOptionEditorEvent.selectOption(option.id)); - }, - child: FlowyHover( - style: HoverStyle(hoverColor: theme.hover), - builder: (_, onHover) { - List children = [ - SelectOptionTag(option: option, isSelected: isSelected), - const Spacer(), - ]; - - if (isSelected) { - children.add(svgWidget("grid/checkmark")); - } - - if (onHover) { - children.add(FlowyIconButton( - width: 30, - onPressed: () => _showEditPannel(context), - iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4), - icon: svgWidget("editor/details", color: theme.iconColor), - )); - } - - return Padding( - padding: const EdgeInsets.all(3.0), - child: Row(children: children), - ); - }, - ), + child: Stack( + fit: StackFit.expand, + children: [ + _body(theme, context), + InkWell( + onTap: () { + context.read().add(SelectOptionEditorEvent.selectOption(option.id)); + }, + ), + ], ), ); } + FlowyHover _body(AppTheme theme, BuildContext context) { + return FlowyHover( + style: HoverStyle(hoverColor: theme.hover), + builder: (_, onHover) { + List children = [ + SelectOptionTag(option: option, isSelected: isSelected), + const Spacer(), + ]; + + if (isSelected) { + children.add(svgWidget("grid/checkmark")); + } + + if (onHover) { + children.add(FlowyIconButton( + width: 30, + onPressed: () => _showEditPannel(context), + iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4), + icon: svgWidget("editor/details", color: theme.iconColor), + )); + } + + return Padding( + padding: const EdgeInsets.all(3.0), + child: Row(children: children), + ); + }, + ); + } + void _showEditPannel(BuildContext context) { final pannel = EditSelectOptionPannel( option: option, diff --git a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/grid_row.dart b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/grid_row.dart index d4eaa21a90d12..8d8d66fa03c44 100755 --- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/grid_row.dart +++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/grid_row.dart @@ -205,13 +205,14 @@ class _CellExpander extends StatelessWidget { @override Widget build(BuildContext context) { final theme = context.watch(); - return FlowyIconButton( - width: 30, - height: 24, - onPressed: onExpand, - iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4), - fillColor: theme.surface, - icon: svgWidget("grid/expander", color: theme.main1), + return FittedBox( + fit: BoxFit.contain, + child: FlowyIconButton( + onPressed: onExpand, + iconPadding: const EdgeInsets.fromLTRB(6, 6, 6, 6), + fillColor: theme.surface, + icon: svgWidget("grid/expander", color: theme.main1), + ), ); } }