feat: mobile checklist (#4088)

* fix: grid header new property font size on desktop

* feat: checklist cell and editor on mobile
This commit is contained in:
Richard Shiue
2023-12-05 13:39:51 +08:00
committed by GitHub
parent 2d7a373d77
commit 25e94da7e7
10 changed files with 503 additions and 12 deletions

View File

@ -86,6 +86,8 @@ class FieldOptionValues {
return MultiSelectTypeOptionPB(
options: selectOption,
).writeToBuffer();
case FieldType.Checklist:
return ChecklistTypeOptionPB().writeToBuffer();
default:
throw UnimplementedError();
}

View File

@ -129,8 +129,8 @@ GridCellStyle? _customCellStyle(FieldType fieldType) {
case FieldType.Checklist:
return ChecklistCellStyle(
placeholder: LocaleKeys.grid_row_textPlaceholder.tr(),
cellPadding: EdgeInsets.zero,
showTasksInline: true,
cellPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 13),
useRoundedBorders: true,
);
case FieldType.Number:
return GridNumberCellStyle(

View File

@ -0,0 +1,150 @@
import 'package:appflowy/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart';
import 'package:appflowy/plugins/database_view/application/cell/cell_controller_builder.dart';
import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.dart';
import 'package:appflowy/plugins/database_view/widgets/row/cell_builder.dart';
import 'package:appflowy/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell.dart';
import 'package:appflowy/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_bloc.dart';
import 'package:appflowy/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart';
import 'package:appflowy/plugins/database_view/widgets/row/cells/checklist_cell/mobile_checklist_cell_editor.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class MobileChecklistCell extends GridCellWidget {
final CellControllerBuilder cellControllerBuilder;
late final ChecklistCellStyle cellStyle;
MobileChecklistCell({
required this.cellControllerBuilder,
GridCellStyle? style,
super.key,
}) {
if (style != null) {
cellStyle = (style as ChecklistCellStyle);
} else {
cellStyle = const ChecklistCellStyle();
}
}
@override
GridCellState<MobileChecklistCell> createState() =>
_MobileChecklistCellState();
}
class _MobileChecklistCellState extends GridCellState<MobileChecklistCell> {
late ChecklistCellBloc _cellBloc;
@override
void initState() {
super.initState();
final cellController =
widget.cellControllerBuilder.build() as ChecklistCellController;
_cellBloc = ChecklistCellBloc(cellController: cellController)
..add(const ChecklistCellEvent.initial());
}
@override
Widget build(BuildContext context) {
return BlocProvider.value(
value: _cellBloc,
child: BlocBuilder<ChecklistCellBloc, ChecklistCellState>(
builder: (context, state) {
if (widget.cellStyle.useRoundedBorders) {
return InkWell(
borderRadius: const BorderRadius.all(Radius.circular(14)),
onTap: () => showMobileBottomSheet(
context,
padding: EdgeInsets.zero,
backgroundColor: Theme.of(context).colorScheme.background,
builder: (context) {
return MobileChecklistCellEditScreen(
cellController: widget.cellControllerBuilder.build()
as ChecklistCellController,
);
},
),
child: Container(
constraints: const BoxConstraints(
minHeight: 48,
minWidth: double.infinity,
),
decoration: BoxDecoration(
border: Border.fromBorderSide(
BorderSide(color: Theme.of(context).colorScheme.outline),
),
borderRadius: const BorderRadius.all(Radius.circular(14)),
),
child: Padding(
padding: widget.cellStyle.cellPadding ?? EdgeInsets.zero,
child: Align(
alignment: AlignmentDirectional.centerStart,
child: Row(
children: [
Expanded(
child: state.tasks.isEmpty
? FlowyText(
widget.cellStyle.placeholder,
fontSize: 15,
color: Theme.of(context).hintColor,
)
: ChecklistProgressBar(
tasks: state.tasks,
percent: state.percent,
fontSize: 15,
),
),
const HSpace(6),
RotatedBox(
quarterTurns: 3,
child: Icon(
Icons.chevron_left,
color: Theme.of(context).hintColor,
),
),
const HSpace(2),
],
),
),
),
),
);
} else {
return FlowyButton(
radius: BorderRadius.zero,
hoverColor: Colors.transparent,
text: Container(
alignment: Alignment.centerLeft,
padding:
widget.cellStyle.cellPadding ?? GridSize.cellContentInsets,
child: state.tasks.isEmpty
? FlowyText(
widget.cellStyle.placeholder,
fontSize: 15,
color: Theme.of(context).hintColor,
)
: ChecklistProgressBar(
tasks: state.tasks,
percent: state.percent,
fontSize: 15,
),
),
onTap: () => showMobileBottomSheet(
context,
padding: EdgeInsets.zero,
backgroundColor: Theme.of(context).colorScheme.background,
builder: (context) {
return MobileChecklistCellEditScreen(
cellController: widget.cellControllerBuilder.build()
as ChecklistCellController,
);
},
),
);
}
},
),
);
}
@override
void requestBeginFocus() {}
}