admin/marco.pms.mobileapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Improve comment action buttons layout and spacing in ContactDetailScreen

Browse Source
This commit is contained in:
Vaibhav Surve 2025-09-30 11:56:32 +05:30
parent 38ae9e3571
commit dbd4a42b7a
1 changed files with 59 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
lib/view/directory/contact_detail_screen.dart
View File

@ -430,17 +430,15 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
return AnimatedContainer(
duration: const Duration(milliseconds: 300),
padding: MySpacing.xy(8, 7),
padding: MySpacing.xy(12, 12),
decoration: BoxDecoration(
color: isEditing ? Colors.indigo[50] : Colors.white,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: isEditing ? Colors.indigo : Colors.grey.shade300,
width: 1.2,
),
boxShadow: const [
BoxShadow(color: Colors.black12, blurRadius: 4, offset: Offset(0, 2))
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@ -468,10 +466,16 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
),
),
// Action buttons
// Action buttons (reduced spacing between delete & edit)
Row(
mainAxisSize: MainAxisSize.min,
children: [
// 🔹 Restore button for inactive comments
if (!comment.isActive)
IconButton(
visualDensity: VisualDensity.compact,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
icon: const Icon(Icons.restore,
color: Colors.green, size: 20),
tooltip: "Restore",
@ -492,41 +496,58 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
barrierDismissible: false,
);
},
)
else
IconButton(
icon:
const Icon(Icons.delete, color: Colors.red, size: 20),
tooltip: "Delete",
onPressed: () async {
await Get.dialog(
ConfirmDialog(
title: "Delete Comment",
message:
"Are you sure you want to delete this comment?",
confirmText: "Delete",
confirmColor: Colors.red,
icon: Icons.delete_forever,
onConfirm: () async {
await directoryController.deleteComment(
comment.id, contactId);
},
),
// 🔹 Delete + Edit icons for active comments (tightened spacing)
if (comment.isActive)
Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
visualDensity: VisualDensity.compact,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
icon: const Icon(Icons.delete,
color: Colors.red, size: 20),
tooltip: "Delete",
onPressed: () async {
await Get.dialog(
ConfirmDialog(
title: "Delete Comment",
message:
"Are you sure you want to delete this comment?",
confirmText: "Delete",
confirmColor: Colors.red,
icon: Icons.delete_forever,
onConfirm: () async {
await directoryController.deleteComment(
comment.id, contactId);
},
),
barrierDismissible: false,
);
},
),
const SizedBox(
width:
4), // 👈 reduce icon gap here (was ~12 by default)
IconButton(
visualDensity: VisualDensity.compact,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
icon: Icon(
isEditing ? Icons.close : Icons.edit,
size: 20,
color: Colors.indigo,
),
barrierDismissible: false,
);
},
tooltip: isEditing ? "Cancel Edit" : "Edit",
onPressed: () {
directoryController.editingCommentId.value =
isEditing ? null : comment.id;
},
),
],
),
IconButton(
icon: Icon(
isEditing ? Icons.close : Icons.edit,
size: 20,
color: Colors.indigo,
),
onPressed: () {
directoryController.editingCommentId.value =
isEditing ? null : comment.id;
},
),
],
),
],