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

chore: improve checklist ui (#3798)

Browse Source
This commit is contained in:
Richard Shiue 2023-10-26 22:24:23 +08:00 committed by GitHub
parent 03598d3f22
commit ce83042317
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,6 +77,13 @@ class GridChecklistCellState extends GridCellState<GridChecklistCell> {
(index, task) => ChecklistItem(
task: task,
autofocus: state.newTask && index == tasks.length - 1,
onSubmitted: () {
if (index == tasks.length - 1) {
context
.read<ChecklistCellBloc>()
.add(const ChecklistCellEvent.createNewTask(""));
}
},
),
)
.toList();
@ -106,7 +113,7 @@ class GridChecklistCellState extends GridCellState<GridChecklistCell> {
: LocaleKeys.grid_checklist_hideComplete.tr(),
width: 32,
iconColorOnHover:
Theme.of(context).colorScheme.onSecondary,
Theme.of(context).colorScheme.onPrimary,
icon: FlowySvg(
showIncompleteOnly
? FlowySvgs.show_m
@ -177,44 +184,62 @@ class GridChecklistCellState extends GridCellState<GridChecklistCell> {
}
}
class ChecklistItemControl extends StatelessWidget {
class ChecklistItemControl extends StatefulWidget {
const ChecklistItemControl({super.key});
@override
State<ChecklistItemControl> createState() => _ChecklistItemControlState();
}
class _ChecklistItemControlState extends State<ChecklistItemControl> {
bool _isHover = false;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 0),
child: SizedBox(
height: 12,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => context
.read<ChecklistCellBloc>()
.add(const ChecklistCellEvent.createNewTask("")),
child: Row(
children: [
const Flexible(child: Center(child: Divider())),
const HSpace(12.0),
FlowyTooltip(
message: LocaleKeys.grid_checklist_addNew.tr(),
child: FilledButton(
style: FilledButton.styleFrom(
minimumSize: const Size.square(12),
maximumSize: const Size.square(12),
padding: EdgeInsets.zero,
),
onPressed: () => context
.read<ChecklistCellBloc>()
.add(const ChecklistCellEvent.createNewTask("")),
child: FlowySvg(
FlowySvgs.add_s,
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
const HSpace(12.0),
const Flexible(child: Center(child: Divider())),
],
return MouseRegion(
onHover: (_) => setState(() => _isHover = true),
onExit: (_) => setState(() => _isHover = false),
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => context
.read<ChecklistCellBloc>()
.add(const ChecklistCellEvent.createNewTask("")),
child: Padding(
padding: const EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 0),
child: SizedBox(
height: 12,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 150),
child: _isHover
? FlowyTooltip(
message: LocaleKeys.grid_checklist_addNew.tr(),
child: Row(
children: [
const Flexible(child: Center(child: Divider())),
const HSpace(12.0),
FilledButton(
style: FilledButton.styleFrom(
minimumSize: const Size.square(12),
maximumSize: const Size.square(12),
padding: EdgeInsets.zero,
),
onPressed: () => context
.read<ChecklistCellBloc>()
.add(
const ChecklistCellEvent.createNewTask(""),
),
child: FlowySvg(
FlowySvgs.add_s,
color: Theme.of(context).colorScheme.onPrimary,
),
),
const HSpace(12.0),
const Flexible(child: Center(child: Divider())),
],
),
)
: const SizedBox.expand(),
),
),
),
),

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

@ -209,7 +209,7 @@ class _ChecklistItemState extends State<ChecklistItem> {
onEnter: (event) => setState(() => _isHovered = true),
onExit: (event) => setState(() => _isHovered = false),
child: Container(
constraints: BoxConstraints(maxHeight: GridSize.popoverItemHeight),
constraints: BoxConstraints(minHeight: GridSize.popoverItemHeight),
decoration: BoxDecoration(
color: _isHovered
? AFThemeExtension.of(context).lightGreyHover
@ -237,8 +237,8 @@ class _ChecklistItemState extends State<ChecklistItem> {
border: InputBorder.none,
isCollapsed: true,
contentPadding: EdgeInsets.only(
top: 6.0,
bottom: 6.0,
top: 8.0,
bottom: 8.0,
left: 2.0,
right: _isHovered ? 2.0 : 8.0,
),

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

@ -22,7 +22,10 @@ class ChecklistProgressBar extends StatefulWidget {
class _ChecklistProgressBarState extends State<ChecklistProgressBar> {
@override
Widget build(BuildContext context) {
final int finishedTasks = widget.tasks.where((e) => e.isSelected).length;
final numFinishedTasks = widget.tasks.where((e) => e.isSelected).length;
final completedTaskColor = numFinishedTasks == widget.tasks.length
? AFThemeExtension.of(context).success
: Theme.of(context).colorScheme.primary;
return Row(
children: [
@ -37,9 +40,9 @@ class _ChecklistProgressBarState extends State<ChecklistProgressBar> {
child: Container(
decoration: BoxDecoration(
borderRadius:
const BorderRadius.all(Radius.circular(5)),
color: index < finishedTasks
? Theme.of(context).colorScheme.primary
const BorderRadius.all(Radius.circular(2)),
color: index < numFinishedTasks
? completedTaskColor
: AFThemeExtension.of(context).progressBarBGColor,
),
margin: const EdgeInsets.symmetric(horizontal: 1),
@ -47,19 +50,18 @@ class _ChecklistProgressBarState extends State<ChecklistProgressBar> {
),
),
)
else ...[
else
Expanded(
child: LinearPercentIndicator(
lineHeight: 4.0,
percent: widget.percent,
padding: EdgeInsets.zero,
progressColor: Theme.of(context).colorScheme.primary,
progressColor: completedTaskColor,
backgroundColor:
AFThemeExtension.of(context).progressBarBGColor,
barRadius: const Radius.circular(5),
barRadius: const Radius.circular(2),
),
),
]
],
),
),

2
frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_property.dart
View File

@ -274,7 +274,7 @@ GridCellStyle? _customCellStyle(FieldType fieldType) {
case FieldType.Checklist:
return ChecklistCellStyle(
placeholder: LocaleKeys.grid_row_textPlaceholder.tr(),
cellPadding: const EdgeInsets.symmetric(vertical: 6),
cellPadding: EdgeInsets.zero,
showTasksInline: true,
);
case FieldType.Number: