From ab896cbc8ff27c66b0439d7dee800ad05a49310a Mon Sep 17 00:00:00 2001 From: appflowy Date: Tue, 31 May 2022 16:14:12 +0800 Subject: [PATCH 1/2] chore: enable drag to expand field's width --- .../grid/field/field_cell_bloc.dart | 19 +++++--- .../application/grid/row/row_bloc.dart | 11 ++--- .../grid/src/widgets/header/field_cell.dart | 17 ++++---- .../field/type_options/text_type_option.rs | 2 +- .../field/type_options/url_type_option.rs | 43 ++++++++++--------- 5 files changed, 50 insertions(+), 42 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 06a95ae89b..c7e83cc52e 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 @@ -24,13 +24,15 @@ class FieldCellBloc extends Bloc { _startListening(); }, didReceiveFieldUpdate: (field) { - emit(state.copyWith(field: field)); + emit(state.copyWith(field: cellContext.field)); }, - updateWidth: (offset) { - final defaultWidth = state.field.width.toDouble(); - final width = defaultWidth + offset; - if (width > defaultWidth && width < 300) { - _fieldService.updateField(width: width); + startUpdateWidth: (offset) { + final width = state.width + offset; + emit(state.copyWith(width: width)); + }, + endUpdateWidth: () { + if (state.width != state.field.width.toDouble()) { + _fieldService.updateField(width: state.width); } }, ); @@ -61,7 +63,8 @@ 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; + const factory FieldCellEvent.startUpdateWidth(double offset) = _StartUpdateWidth; + const factory FieldCellEvent.endUpdateWidth() = _EndUpdateWidth; } @freezed @@ -69,10 +72,12 @@ class FieldCellState with _$FieldCellState { const factory FieldCellState({ required String gridId, required Field field, + required double width, }) = _FieldCellState; factory FieldCellState.initial(GridFieldCellContext cellContext) => FieldCellState( gridId: cellContext.gridId, field: cellContext.field, + width: cellContext.field.width.toDouble(), ); } diff --git a/frontend/app_flowy/lib/workspace/application/grid/row/row_bloc.dart b/frontend/app_flowy/lib/workspace/application/grid/row/row_bloc.dart index 3d3e3486a5..d8000e3664 100644 --- a/frontend/app_flowy/lib/workspace/application/grid/row/row_bloc.dart +++ b/frontend/app_flowy/lib/workspace/application/grid/row/row_bloc.dart @@ -30,7 +30,7 @@ class RowBloc extends Bloc { _rowService.createRow(); }, didReceiveCellDatas: (_DidReceiveCellDatas value) async { - final fields = value.gridCellMap.values.map((e) => CellSnapshot(e.field)).toList(); + final fields = value.gridCellMap.values.map((e) => GridCellEquatable(e.field)).toList(); final snapshots = UnmodifiableListView(fields); emit(state.copyWith( gridCellMap: value.gridCellMap, @@ -74,26 +74,27 @@ class RowState with _$RowState { const factory RowState({ required GridRow rowData, required GridCellMap gridCellMap, - required UnmodifiableListView snapshots, + required UnmodifiableListView snapshots, GridRowChangeReason? changeReason, }) = _RowState; factory RowState.initial(GridRow rowData, GridCellMap cellDataMap) => RowState( rowData: rowData, gridCellMap: cellDataMap, - snapshots: UnmodifiableListView(cellDataMap.values.map((e) => CellSnapshot(e.field)).toList()), + snapshots: UnmodifiableListView(cellDataMap.values.map((e) => GridCellEquatable(e.field)).toList()), ); } -class CellSnapshot extends Equatable { +class GridCellEquatable extends Equatable { final Field _field; - const CellSnapshot(Field field) : _field = field; + const GridCellEquatable(Field field) : _field = field; @override List get props => [ _field.id, _field.fieldType, _field.visibility, + _field.width, ]; } 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 48866457f7..7e04bdbc4c 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 @@ -6,7 +6,6 @@ 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:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart' show Field; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -24,6 +23,7 @@ class GridFieldCell extends StatelessWidget { return BlocProvider( create: (context) => FieldCellBloc(cellContext: cellContext)..add(const FieldCellEvent.initial()), child: BlocBuilder( + // buildWhen: (p, c) => p.field != c.field, builder: (context, state) { final button = FieldCellButton( field: state.field, @@ -38,7 +38,7 @@ class GridFieldCell extends StatelessWidget { ); return _GridHeaderCellContainer( - width: state.field.width.toDouble(), + width: state.width, child: Stack( alignment: Alignment.centerRight, fit: StackFit.expand, @@ -60,13 +60,14 @@ class GridFieldCell extends StatelessWidget { void _showFieldEditor(BuildContext context) { final state = context.read().state; + final field = state.field; FieldEditor( gridId: state.gridId, - fieldName: state.field.name, + fieldName: field.name, contextLoader: FieldContextLoader( gridId: state.gridId, - field: state.field, + field: field, ), ).show(context); } @@ -113,19 +114,17 @@ class _DragToExpandLine extends StatelessWidget { onTap: () {}, child: GestureDetector( behavior: HitTestBehavior.opaque, - onHorizontalDragCancel: () {}, onHorizontalDragUpdate: (value) { - // context.read().add(FieldCellEvent.updateWidth(value.delta.dx)); - Log.info(value); + context.read().add(FieldCellEvent.startUpdateWidth(value.delta.dx)); }, onHorizontalDragEnd: (end) { - Log.info(end); + context.read().add(const FieldCellEvent.endUpdateWidth()); }, child: FlowyHover( style: HoverStyle( hoverColor: theme.main1, borderRadius: BorderRadius.zero, - contentMargin: const EdgeInsets.only(left: 5), + contentMargin: const EdgeInsets.only(left: 6), ), child: const SizedBox(width: 2), ), diff --git a/frontend/rust-lib/flowy-grid/src/services/field/type_options/text_type_option.rs b/frontend/rust-lib/flowy-grid/src/services/field/type_options/text_type_option.rs index 3acdfd97c5..3509972670 100644 --- a/frontend/rust-lib/flowy-grid/src/services/field/type_options/text_type_option.rs +++ b/frontend/rust-lib/flowy-grid/src/services/field/type_options/text_type_option.rs @@ -27,7 +27,7 @@ impl TypeOptionBuilder for RichTextTypeOptionBuilder { #[derive(Debug, Clone, Default, Serialize, Deserialize, ProtoBuf)] pub struct RichTextTypeOption { #[pb(index = 1)] - data: String, //It's not used. + data: String, //It's not used yet } impl_type_option!(RichTextTypeOption, FieldType::RichText); diff --git a/frontend/rust-lib/flowy-grid/src/services/field/type_options/url_type_option.rs b/frontend/rust-lib/flowy-grid/src/services/field/type_options/url_type_option.rs index 7299b1babd..0d5f37baaf 100644 --- a/frontend/rust-lib/flowy-grid/src/services/field/type_options/url_type_option.rs +++ b/frontend/rust-lib/flowy-grid/src/services/field/type_options/url_type_option.rs @@ -30,7 +30,7 @@ impl TypeOptionBuilder for URLTypeOptionBuilder { #[derive(Debug, Clone, Serialize, Deserialize, Default, ProtoBuf)] pub struct URLTypeOption { #[pb(index = 1)] - data: String, //It's not used. + data: String, //It's not used yet. } impl_type_option!(URLTypeOption, FieldType::URL); @@ -56,28 +56,31 @@ impl CellDataOperation, String> for URLTypeOption { C: Into, { let changeset = changeset.into(); - let mut cell_data = URLCellData { - url: "".to_string(), - content: changeset.to_string(), - }; - + let mut url = "".to_string(); if let Ok(Some(m)) = URL_REGEX.find(&changeset) { - // Only support https scheme by now - match url::Url::parse(m.as_str()) { - Ok(url) => { - if url.scheme() == "https" { - cell_data.url = url.into(); - } else { - cell_data.url = format!("https://{}", m.as_str()); - } - } - Err(_) => { - cell_data.url = format!("https://{}", m.as_str()); - } + url = auto_append_scheme(m.as_str()); + } + URLCellData { + url, + content: changeset.to_string(), + } + .to_json() + } +} + +fn auto_append_scheme(s: &str) -> String { + // Only support https scheme by now + match url::Url::parse(s) { + Ok(url) => { + if url.scheme() == "https" { + url.into() + } else { + format!("https://{}", s) } } - - cell_data.to_json() + Err(_) => { + format!("https://{}", s) + } } } From 3d41cb0cec9a6482af751a805ddf9b4bb1d0e234 Mon Sep 17 00:00:00 2001 From: appflowy Date: Tue, 31 May 2022 16:22:20 +0800 Subject: [PATCH 2/2] chore: adjust ui color --- .../plugins/grid/src/widgets/header/field_cell.dart | 5 +++-- .../packages/flowy_infra_ui/lib/style_widget/button.dart | 3 +-- 2 files changed, 4 insertions(+), 4 deletions(-) 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 7e04bdbc4c..21172b38d9 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 @@ -85,7 +85,8 @@ class _GridHeaderCellContainer extends StatelessWidget { @override Widget build(BuildContext context) { final theme = context.watch(); - final borderSide = BorderSide(color: theme.shader4, width: 0.4); + final borderSide = BorderSide(color: theme.shader5, width: 1.0); + final decoration = BoxDecoration( border: Border( top: borderSide, @@ -126,7 +127,7 @@ class _DragToExpandLine extends StatelessWidget { borderRadius: BorderRadius.zero, contentMargin: const EdgeInsets.only(left: 6), ), - child: const SizedBox(width: 2), + child: const SizedBox(width: 4), ), ), ); 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 9a7407f9bb..046ee8a0c1 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 @@ -1,4 +1,3 @@ -import 'package:flowy_infra/size.dart'; import 'package:flowy_infra_ui/style_widget/hover.dart'; import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flowy_infra_ui/widget/spacing.dart'; @@ -28,7 +27,7 @@ class FlowyButton extends StatelessWidget { return InkWell( onTap: onTap, child: FlowyHover( - style: HoverStyle(borderRadius: Corners.s6Border, hoverColor: hoverColor), + style: HoverStyle(borderRadius: BorderRadius.zero, hoverColor: hoverColor), setSelected: () => isSelected, builder: (context, onHover) => _render(), ),