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

feat: segmented checklist progress bar (#3770)

Browse Source 
* feat: added segments to the checklist progress bar

* chore: display empty progress bar in checklist editor when no tasks added

* refactor: used Container to represent segments

* refactor: implemented segments using Flexible and generated them using List.generate
This commit is contained in:
Shreesh Nautiyal 2023-10-26 15:58:55 +05:30 committed by GitHub
parent 9416ba1bfc
commit c2eb2014a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 58 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/cells/checklist_card_cell.dart
View File

@ -38,7 +38,10 @@ class _ChecklistCellState extends State<ChecklistCardCell> {
}
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: ChecklistProgressBar(percent: state.percent),
child: ChecklistProgressBar(
tasks: state.tasks,
percent: state.percent,
),
);
},
),

10
frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell.dart
View File

@ -94,7 +94,10 @@ class GridChecklistCellState extends GridCellState<GridChecklistCell> {
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: ChecklistProgressBar(percent: state.percent),
child: ChecklistProgressBar(
tasks: state.tasks,
percent: state.percent,
),
),
const HSpace(6.0),
FlowyIconButton(
@ -154,7 +157,10 @@ class GridChecklistCellState extends GridCellState<GridChecklistCell> {
widget.cellStyle.placeholder,
color: Theme.of(context).hintColor,
)
: ChecklistProgressBar(percent: state.percent),
: ChecklistProgressBar(
tasks: state.tasks,
percent: state.percent,
),
),
),
);

1
frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart
View File

@ -69,6 +69,7 @@ class _GridChecklistCellState extends State<GridChecklistCellEditor> {
: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 4),
child: ChecklistProgressBar(
tasks: state.tasks,
percent: state.percent,
),
),

54
frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart
View File

@ -2,11 +2,18 @@ import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
import 'package:percent_indicator/percent_indicator.dart';
import 'checklist_cell_bloc.dart';
class ChecklistProgressBar extends StatefulWidget {
final List<ChecklistSelectOption> tasks;
final double percent;
const ChecklistProgressBar({required this.percent, Key? key})
: super(key: key);
final int segmentLimit = 5;
const ChecklistProgressBar({
required this.tasks,
required this.percent,
Key? key,
}) : super(key: key);
@override
State<ChecklistProgressBar> createState() => _ChecklistProgressBarState();
@ -15,16 +22,45 @@ class ChecklistProgressBar extends StatefulWidget {
class _ChecklistProgressBarState extends State<ChecklistProgressBar> {
@override
Widget build(BuildContext context) {
final int finishedTasks = widget.tasks.where((e) => e.isSelected).length;
return Row(
children: [
Expanded(
child: LinearPercentIndicator(
lineHeight: 4.0,
percent: widget.percent,
padding: EdgeInsets.zero,
progressColor: Theme.of(context).colorScheme.primary,
backgroundColor: AFThemeExtension.of(context).progressBarBGColor,
barRadius: const Radius.circular(5),
child: Row(
children: [
if (widget.tasks.isNotEmpty &&
widget.tasks.length <= widget.segmentLimit)
...List<Widget>.generate(
widget.tasks.length,
(index) => Flexible(
child: Container(
decoration: BoxDecoration(
borderRadius:
const BorderRadius.all(Radius.circular(5)),
color: index < finishedTasks
? Theme.of(context).colorScheme.primary
: AFThemeExtension.of(context).progressBarBGColor,
),
margin: const EdgeInsets.symmetric(horizontal: 1),
height: 4.0,
),
),
)
else ...[
Expanded(
child: LinearPercentIndicator(
lineHeight: 4.0,
percent: widget.percent,
padding: EdgeInsets.zero,
progressColor: Theme.of(context).colorScheme.primary,
backgroundColor:
AFThemeExtension.of(context).progressBarBGColor,
barRadius: const Radius.circular(5),
),
),
]
],
),
),
SizedBox(