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

fix: set minimum width for grid fields to 50px (#3397)

Browse Source 
* fix: set minimum width for grid field to 100px

* test: add grid field width test

* fix: field width should not be less then 50px

* test: grid field width should not be less then 50px

* fix: cursor-based resizing issue

* test: updated tests
This commit is contained in:
Nitin-Poojary 2023-09-21 07:09:13 +05:30 committed by GitHub
parent 9c59e1487e
commit 2c757e9b6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 75 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/appflowy_flutter/lib/plugins/database_view/application/field/field_cell_bloc.dart
View File

@ -1,3 +1,5 @@
import 'dart:math';
import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pb.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
@ -29,8 +31,11 @@ class FieldCellBloc extends Bloc<FieldCellEvent, FieldCellState> {
didReceiveFieldUpdate: (field) {
emit(state.copyWith(field: cellContext.field));
},
onResizeStart: () {
emit(state.copyWith(resizeStart: state.width));
},
startUpdateWidth: (offset) {
final width = state.width + offset;
final width = max(offset + state.resizeStart, 50).toDouble();
emit(state.copyWith(width: width));
},
endUpdateWidth: () {
@ -66,6 +71,7 @@ class FieldCellEvent with _$FieldCellEvent {
const factory FieldCellEvent.initial() = _InitialCell;
const factory FieldCellEvent.didReceiveFieldUpdate(FieldPB field) =
_DidReceiveFieldUpdate;
const factory FieldCellEvent.onResizeStart() = _OnResizeStart;
const factory FieldCellEvent.startUpdateWidth(double offset) =
_StartUpdateWidth;
const factory FieldCellEvent.endUpdateWidth() = _EndUpdateWidth;
@ -77,11 +83,13 @@ class FieldCellState with _$FieldCellState {
required String viewId,
required FieldPB field,
required double width,
required double resizeStart,
}) = _FieldCellState;
factory FieldCellState.initial(FieldContext cellContext) => FieldCellState(
viewId: cellContext.viewId,
field: cellContext.field,
width: cellContext.field.width.toDouble(),
resizeStart: 0,
);
}

7
frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart
View File

@ -125,10 +125,15 @@ class _DragToExpandLine extends StatelessWidget {
onTap: () {},
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onHorizontalDragStart: (details) {
context
.read<FieldCellBloc>()
.add(const FieldCellEvent.onResizeStart());
},
onHorizontalDragUpdate: (value) {
context
.read<FieldCellBloc>()
.add(FieldCellEvent.startUpdateWidth(value.delta.dx));
.add(FieldCellEvent.startUpdateWidth(value.localPosition.dx));
},
onHorizontalDragEnd: (end) {
context

60
frontend/appflowy_flutter/test/bloc_test/grid_test/field/field_cell_bloc_test.dart Normal file
View File

@ -0,0 +1,60 @@
import 'package:appflowy/plugins/database_view/application/field/field_cell_bloc.dart';
import 'package:appflowy/plugins/database_view/application/field/field_service.dart';
import 'package:bloc_test/bloc_test.dart';
import 'package:flutter_test/flutter_test.dart';
import '../util.dart';
void main() {
late AppFlowyGridTest gridTest;
setUpAll(() async {
gridTest = await AppFlowyGridTest.ensureInitialized();
});
group('$FieldCellBloc', () {
late GridTestContext context;
late double width;
setUp(() async {
context = await gridTest.createTestGrid();
});
blocTest(
'update field width',
build: () => FieldCellBloc(
cellContext: FieldContext(
field: context.fieldContexts[0].field,
viewId: context.gridView.id,
),
)..add(const FieldCellEvent.initial()),
act: (bloc) {
width = bloc.state.width;
bloc.add(const FieldCellEvent.onResizeStart());
bloc.add(const FieldCellEvent.startUpdateWidth(100));
bloc.add(const FieldCellEvent.endUpdateWidth());
},
verify: (bloc) {
expect(bloc.state.width, width + 100);
},
);
blocTest(
'field width should not be lesser than 50px',
build: () => FieldCellBloc(
cellContext: FieldContext(
field: context.fieldContexts[0].field,
viewId: context.gridView.id,
),
)..add(const FieldCellEvent.initial()),
act: (bloc) {
bloc.add(const FieldCellEvent.onResizeStart());
bloc.add(const FieldCellEvent.startUpdateWidth(-110));
bloc.add(const FieldCellEvent.endUpdateWidth());
},
verify: (bloc) {
expect(bloc.state.width, 50);
},
);
});
}