From ce83042317070cac79cd5cecce6715c9b4ac4c48 Mon Sep 17 00:00:00 2001 From: Richard Shiue <71320345+richardshiue@users.noreply.github.com> Date: Thu, 26 Oct 2023 22:24:23 +0800 Subject: [PATCH] chore: improve checklist ui (#3798) --- .../cells/checklist_cell/checklist_cell.dart | 95 ++++++++++++------- .../checklist_cell/checklist_cell_editor.dart | 6 +- .../checklist_progress_bar.dart | 18 ++-- .../widgets/row/row_property.dart | 2 +- 4 files changed, 74 insertions(+), 47 deletions(-) diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell.dart index 6bb070735d..949a1138e0 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell.dart @@ -77,6 +77,13 @@ class GridChecklistCellState extends GridCellState { (index, task) => ChecklistItem( task: task, autofocus: state.newTask && index == tasks.length - 1, + onSubmitted: () { + if (index == tasks.length - 1) { + context + .read() + .add(const ChecklistCellEvent.createNewTask("")); + } + }, ), ) .toList(); @@ -106,7 +113,7 @@ class GridChecklistCellState extends GridCellState { : 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 { } } -class ChecklistItemControl extends StatelessWidget { +class ChecklistItemControl extends StatefulWidget { const ChecklistItemControl({super.key}); + @override + State createState() => _ChecklistItemControlState(); +} + +class _ChecklistItemControlState extends State { + 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() - .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() - .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() + .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() + .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(), + ), ), ), ), diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart index 9db75375cb..ffebbf7538 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart @@ -209,7 +209,7 @@ class _ChecklistItemState extends State { 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 { 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, ), diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart index 6e66eb5d6b..6641a89b1d 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart @@ -22,7 +22,10 @@ class ChecklistProgressBar extends StatefulWidget { class _ChecklistProgressBarState extends State { @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 { 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 { ), ), ) - 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), ), ), - ] ], ), ), diff --git a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_property.dart b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_property.dart index 90099a9e71..401688a7ca 100644 --- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_property.dart +++ b/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_property.dart @@ -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: