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( (index, task) => ChecklistItem(
task: task, task: task,
autofocus: state.newTask && index == tasks.length - 1, autofocus: state.newTask && index == tasks.length - 1,
onSubmitted: () {
if (index == tasks.length - 1) {
context
.read<ChecklistCellBloc>()
.add(const ChecklistCellEvent.createNewTask(""));
}
},
), ),
) )
.toList(); .toList();
@ -106,7 +113,7 @@ class GridChecklistCellState extends GridCellState<GridChecklistCell> {
: LocaleKeys.grid_checklist_hideComplete.tr(), : LocaleKeys.grid_checklist_hideComplete.tr(),
width: 32, width: 32,
iconColorOnHover: iconColorOnHover:
Theme.of(context).colorScheme.onSecondary, Theme.of(context).colorScheme.onPrimary,
icon: FlowySvg( icon: FlowySvg(
showIncompleteOnly showIncompleteOnly
? FlowySvgs.show_m ? FlowySvgs.show_m
@ -177,44 +184,62 @@ class GridChecklistCellState extends GridCellState<GridChecklistCell> {
} }
} }
class ChecklistItemControl extends StatelessWidget { class ChecklistItemControl extends StatefulWidget {
const ChecklistItemControl({super.key}); const ChecklistItemControl({super.key});
@override
State<ChecklistItemControl> createState() => _ChecklistItemControlState();
}
class _ChecklistItemControlState extends State<ChecklistItemControl> {
bool _isHover = false;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Padding( return MouseRegion(
padding: const EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 0), onHover: (_) => setState(() => _isHover = true),
child: SizedBox( onExit: (_) => setState(() => _isHover = false),
height: 12, child: GestureDetector(
child: GestureDetector( behavior: HitTestBehavior.opaque,
behavior: HitTestBehavior.opaque, onTap: () => context
onTap: () => context .read<ChecklistCellBloc>()
.read<ChecklistCellBloc>() .add(const ChecklistCellEvent.createNewTask("")),
.add(const ChecklistCellEvent.createNewTask("")), child: Padding(
child: Row( padding: const EdgeInsets.fromLTRB(8.0, 4.0, 8.0, 0),
children: [ child: SizedBox(
const Flexible(child: Center(child: Divider())), height: 12,
const HSpace(12.0), child: AnimatedSwitcher(
FlowyTooltip( duration: const Duration(milliseconds: 150),
message: LocaleKeys.grid_checklist_addNew.tr(), child: _isHover
child: FilledButton( ? FlowyTooltip(
style: FilledButton.styleFrom( message: LocaleKeys.grid_checklist_addNew.tr(),
minimumSize: const Size.square(12), child: Row(
maximumSize: const Size.square(12), children: [
padding: EdgeInsets.zero, const Flexible(child: Center(child: Divider())),
), const HSpace(12.0),
onPressed: () => context FilledButton(
.read<ChecklistCellBloc>() style: FilledButton.styleFrom(
.add(const ChecklistCellEvent.createNewTask("")), minimumSize: const Size.square(12),
child: FlowySvg( maximumSize: const Size.square(12),
FlowySvgs.add_s, padding: EdgeInsets.zero,
color: Theme.of(context).colorScheme.onPrimary, ),
), onPressed: () => context
), .read<ChecklistCellBloc>()
), .add(
const HSpace(12.0), const ChecklistCellEvent.createNewTask(""),
const Flexible(child: Center(child: Divider())), ),
], 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), onEnter: (event) => setState(() => _isHovered = true),
onExit: (event) => setState(() => _isHovered = false), onExit: (event) => setState(() => _isHovered = false),
child: Container( child: Container(
constraints: BoxConstraints(maxHeight: GridSize.popoverItemHeight), constraints: BoxConstraints(minHeight: GridSize.popoverItemHeight),
decoration: BoxDecoration( decoration: BoxDecoration(
color: _isHovered color: _isHovered
? AFThemeExtension.of(context).lightGreyHover ? AFThemeExtension.of(context).lightGreyHover
@ -237,8 +237,8 @@ class _ChecklistItemState extends State<ChecklistItem> {
border: InputBorder.none, border: InputBorder.none,
isCollapsed: true, isCollapsed: true,
contentPadding: EdgeInsets.only( contentPadding: EdgeInsets.only(
top: 6.0, top: 8.0,
bottom: 6.0, bottom: 8.0,
left: 2.0, left: 2.0,
right: _isHovered ? 2.0 : 8.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> { class _ChecklistProgressBarState extends State<ChecklistProgressBar> {
@override @override
Widget build(BuildContext context) { 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( return Row(
children: [ children: [
@ -37,9 +40,9 @@ class _ChecklistProgressBarState extends State<ChecklistProgressBar> {
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: borderRadius:
const BorderRadius.all(Radius.circular(5)), const BorderRadius.all(Radius.circular(2)),
color: index < finishedTasks color: index < numFinishedTasks
? Theme.of(context).colorScheme.primary ? completedTaskColor
: AFThemeExtension.of(context).progressBarBGColor, : AFThemeExtension.of(context).progressBarBGColor,
), ),
margin: const EdgeInsets.symmetric(horizontal: 1), margin: const EdgeInsets.symmetric(horizontal: 1),
@ -47,19 +50,18 @@ class _ChecklistProgressBarState extends State<ChecklistProgressBar> {
), ),
), ),
) )
else ...[ else
Expanded( Expanded(
child: LinearPercentIndicator( child: LinearPercentIndicator(
lineHeight: 4.0, lineHeight: 4.0,
percent: widget.percent, percent: widget.percent,
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
progressColor: Theme.of(context).colorScheme.primary, progressColor: completedTaskColor,
backgroundColor: backgroundColor:
AFThemeExtension.of(context).progressBarBGColor, 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: case FieldType.Checklist:
return ChecklistCellStyle( return ChecklistCellStyle(
placeholder: LocaleKeys.grid_row_textPlaceholder.tr(), placeholder: LocaleKeys.grid_row_textPlaceholder.tr(),
cellPadding: const EdgeInsets.symmetric(vertical: 6), cellPadding: EdgeInsets.zero,
showTasksInline: true, showTasksInline: true,
); );
case FieldType.Number: case FieldType.Number: