feat: Rename "Comment" to "Note" in relevant UI components and dialogs

This commit is contained in:
Vaibhav Surve 2025-09-30 13:25:31 +05:30
parent dbd4a42b7a
commit 539e94fc99
3 changed files with 110 additions and 87 deletions

View File

@ -249,7 +249,7 @@ class _CommentTaskBottomSheetState extends State<CommentTaskBottomSheet>
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
_buildSectionHeader("Add Comment", Icons.comment_outlined), _buildSectionHeader("Add Note", Icons.comment_outlined),
MySpacing.height(8), MySpacing.height(8),
TextFormField( TextFormField(
validator: validator:

View File

@ -65,7 +65,7 @@ class _AddCommentBottomSheetState extends State<AddCommentBottomSheet> {
), ),
), ),
MySpacing.height(12), MySpacing.height(12),
Center(child: MyText.titleMedium("Add Comment", fontWeight: 700)), Center(child: MyText.titleMedium("Add Note", fontWeight: 700)),
MySpacing.height(24), MySpacing.height(24),
CommentEditorCard( CommentEditorCard(
controller: quillController, controller: quillController,

View File

@ -173,10 +173,10 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
children: [ children: [
Row(children: [ Row(children: [
Avatar( Avatar(
firstName: firstName, firstName: firstName,
lastName: lastName, lastName: lastName,
size: 35, size: 35,
backgroundColor: Colors.indigo), ),
MySpacing.width(12), MySpacing.width(12),
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -202,7 +202,7 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
), ),
tabs: const [ tabs: const [
Tab(text: "Details"), Tab(text: "Details"),
Tab(text: "Comments"), Tab(text: "Notes"),
], ],
), ),
], ],
@ -362,7 +362,7 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
if (comments.isEmpty) { if (comments.isEmpty) {
return Center( return Center(
child: MyText.bodyLarge("No comments yet.", color: Colors.grey), child: MyText.bodyLarge("No notes yet.", color: Colors.grey),
); );
} }
@ -406,7 +406,7 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
} }
}, },
icon: const Icon(Icons.add_comment, color: Colors.white), icon: const Icon(Icons.add_comment, color: Colors.white),
label: const Text("Add Comment", label: const Text("Add Note",
style: TextStyle(color: Colors.white)), style: TextStyle(color: Colors.white)),
), ),
), ),
@ -420,6 +420,7 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
final initials = comment.createdBy.firstName.isNotEmpty final initials = comment.createdBy.firstName.isNotEmpty
? comment.createdBy.firstName[0].toUpperCase() ? comment.createdBy.firstName[0].toUpperCase()
: "?"; : "?";
final decodedDelta = HtmlToDelta().convert(comment.note); final decodedDelta = HtmlToDelta().convert(comment.note);
final quillController = isEditing final quillController = isEditing
? quill.QuillController( ? quill.QuillController(
@ -428,63 +429,91 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
) )
: null; : null;
return AnimatedContainer( return Container(
duration: const Duration(milliseconds: 300), margin: const EdgeInsets.symmetric(vertical: 6),
padding: MySpacing.xy(12, 12), padding: const EdgeInsets.all(12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: isEditing ? Colors.indigo[50] : Colors.white, color: Colors.white,
borderRadius: BorderRadius.circular(5), borderRadius: BorderRadius.circular(14),
border: Border.all( border: Border.all(color: Colors.grey.shade200),
color: isEditing ? Colors.indigo : Colors.grey.shade300, boxShadow: [
width: 1.2, BoxShadow(
), color: Colors.black.withOpacity(0.03),
blurRadius: 6,
offset: const Offset(0, 2),
),
],
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// 🧑 Header
Row( Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Avatar(firstName: initials, lastName: '', size: 36), Avatar(
MySpacing.width(12), firstName: initials,
lastName: '',
size: 40,
),
const SizedBox(width: 10),
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
MyText.bodyMedium("By: ${comment.createdBy.firstName}", // Full name on top
fontWeight: 600, color: Colors.indigo[800]), Text(
MySpacing.height(4), "${comment.createdBy.firstName} ${comment.createdBy.lastName}",
MyText.bodySmall( style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 15,
color: Colors.black87,
),
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 2),
// Job Role
if (comment.createdBy.jobRoleName?.isNotEmpty ?? false)
Text(
comment.createdBy.jobRoleName,
style: TextStyle(
fontSize: 13,
color: Colors.indigo[600],
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 2),
// Timestamp
Text(
DateTimeUtils.convertUtcToLocal( DateTimeUtils.convertUtcToLocal(
comment.createdAt.toString(), comment.createdAt.toString(),
format: 'dd MMM yyyy, hh:mm a', format: 'dd MMM yyyy, hh:mm a',
), ),
color: Colors.grey[600], style: TextStyle(
fontSize: 12,
color: Colors.grey[600],
),
), ),
], ],
), ),
), ),
// Action buttons
// Action buttons (reduced spacing between delete & edit) // Action buttons
Row( Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
// 🔹 Restore button for inactive comments
if (!comment.isActive) if (!comment.isActive)
IconButton( IconButton(
visualDensity: VisualDensity.compact,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
icon: const Icon(Icons.restore, icon: const Icon(Icons.restore,
color: Colors.green, size: 20), size: 18, color: Colors.green),
tooltip: "Restore", tooltip: "Restore",
splashRadius: 18,
onPressed: () async { onPressed: () async {
await Get.dialog( await Get.dialog(
ConfirmDialog( ConfirmDialog(
title: "Restore Comment", title: "Restore Note",
message: message:
"Are you sure you want to restore this comment?", "Are you sure you want to restore this note?",
confirmText: "Restore", confirmText: "Restore",
confirmColor: Colors.green, confirmColor: Colors.green,
icon: Icons.restore, icon: Icons.restore,
@ -493,65 +522,51 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
comment.id, contactId); comment.id, contactId);
}, },
), ),
barrierDismissible: false,
); );
}, },
), ),
if (comment.isActive) ...[
// 🔹 Delete + Edit icons for active comments (tightened spacing) IconButton(
if (comment.isActive) icon: const Icon(Icons.edit_outlined,
Row( size: 18, color: Colors.indigo),
mainAxisSize: MainAxisSize.min, tooltip: "Edit",
children: [ splashRadius: 18,
IconButton( onPressed: () {
visualDensity: VisualDensity.compact, directoryController.editingCommentId.value =
padding: EdgeInsets.zero, isEditing ? null : comment.id;
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,
),
tooltip: isEditing ? "Cancel Edit" : "Edit",
onPressed: () {
directoryController.editingCommentId.value =
isEditing ? null : comment.id;
},
),
],
), ),
IconButton(
icon: const Icon(Icons.delete_outline,
size: 18, color: Colors.red),
tooltip: "Delete",
splashRadius: 18,
onPressed: () async {
await Get.dialog(
ConfirmDialog(
title: "Delete Note",
message:
"Are you sure you want to delete this note?",
confirmText: "Delete",
confirmColor: Colors.red,
icon: Icons.delete_forever,
onConfirm: () async {
await directoryController.deleteComment(
comment.id, contactId);
},
),
);
},
),
],
], ],
), ),
], ],
), ),
const SizedBox(height: 8),
// 📝 Comment Content
if (isEditing && quillController != null) if (isEditing && quillController != null)
CommentEditorCard( CommentEditorCard(
controller: quillController, controller: quillController,
@ -572,7 +587,15 @@ class _ContactDetailScreenState extends State<ContactDetailScreen> {
"body": html.Style( "body": html.Style(
margin: html.Margins.zero, margin: html.Margins.zero,
padding: html.HtmlPaddings.zero, padding: html.HtmlPaddings.zero,
fontSize: html.FontSize.medium, fontSize: html.FontSize(14),
color: Colors.black87,
),
"p": html.Style(
margin: html.Margins.only(bottom: 6),
lineHeight: const html.LineHeight(1.4),
),
"strong": html.Style(
fontWeight: FontWeight.w700,
color: Colors.black87, color: Colors.black87,
), ),
}, },