Merge pull request #2064 from acterglobal/kumar/refactor-pin-details

Common Attachment UI-UX Improvements.
acterglobal · Aug 14, 2024 · 70661be · 70661be
2 parents a50283e + 693c13f
commit 70661be
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 82 deletions.
diff --git a/app/lib/common/themes/colors/color_scheme.dart b/app/lib/common/themes/colors/color_scheme.dart
@@ -5,6 +5,7 @@ Color brandColor = const Color(0xff126bab);
 Color secondaryColor = const Color(0xFF74A64D);
 
 // Background Colors
+Color greyColor = Colors.grey.shade800;
 Color surfaceColor = const Color(0xff181c1f);
 Color backgroundColor = const Color(0xff0d0f11);
 
@@ -33,6 +34,7 @@ var colorScheme = ColorScheme.dark(
   surface: surfaceColor,
   onSurface: whiteColor,
 );
+
 extension CustomColorScheme on ColorScheme {
   // brand
   Color get textHighlight => secondary;
@@ -48,4 +50,4 @@ extension CustomColorScheme on ColorScheme {
   Color get badgeImportant => Colors.yellow;
 
   Color get badgeUrgent => const Color(0xFF93000A);
-}
+}
diff --git a/app/lib/features/attachments/actions/select_attachment.dart b/app/lib/features/attachments/actions/select_attachment.dart
@@ -1,26 +1,19 @@
-import 'package:acter/common/utils/utils.dart';
 import 'package:acter/features/attachments/types.dart';
 import 'package:acter/features/attachments/widgets/attachment_selection_options.dart';
 import 'package:flutter/material.dart';
 
 Future<void> selectAttachment({
   required BuildContext context,
   required OnAttachmentSelected onSelected,
+  OnLinkSelected? onLinkSelected,
 }) async {
-  context.isLargeScreen
-      ? await showAdaptiveDialog(
-          context: context,
-          builder: (context) => Dialog(
-            child: AttachmentSelectionOptions(
-              onSelected: onSelected,
-            ),
-          ),
-        )
-      : await showModalBottomSheet(
-          isDismissible: true,
-          context: context,
-          builder: (context) => AttachmentSelectionOptions(
-            onSelected: onSelected,
-          ),
-        );
+  await showModalBottomSheet(
+    isDismissible: true,
+    showDragHandle: true,
+    context: context,
+    builder: (context) => AttachmentSelectionOptions(
+      onSelected: onSelected,
+      onLinkSelected: onLinkSelected,
+    ),
+  );
 }
diff --git a/app/lib/features/attachments/types.dart b/app/lib/features/attachments/types.dart
@@ -6,3 +6,7 @@ typedef OnAttachmentSelected = Future<void> Function(
   List<File> files,
   AttachmentType attachmentType,
 );
+typedef OnLinkSelected = Future<void> Function(
+  String title,
+  String link,
+);
diff --git a/app/lib/features/attachments/widgets/attachment_item.dart b/app/lib/features/attachments/widgets/attachment_item.dart
@@ -1,14 +1,14 @@
 import 'package:acter/common/actions/redact_content.dart';
 import 'package:acter/common/models/attachment_media_state/attachment_media_state.dart';
 import 'package:acter/common/models/types.dart';
+import 'package:acter/common/themes/colors/color_scheme.dart';
 import 'package:acter/common/utils/utils.dart';
 import 'package:acter/common/widgets/image_dialog.dart';
 import 'package:acter/common/widgets/video_dialog.dart';
 import 'package:acter/features/attachments/providers/attachment_providers.dart';
 import 'package:acter/features/files/actions/file_share.dart';
 import 'package:acter/features/pins/actions/attachment_leading_icon.dart';
 import 'package:acter_flutter_sdk/acter_flutter_sdk_ffi.dart' show Attachment;
-import 'package:atlas_icons/atlas_icons.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -31,7 +31,6 @@ class AttachmentItem extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final containerColor = Theme.of(context).colorScheme.surface;
-    final borderColor = Theme.of(context).colorScheme.primary;
     final attachmentType = AttachmentType.values.byName(attachment.typeStr());
     final eventId = attachment.attachmentIdStr();
     final roomId = attachment.roomIdStr();
@@ -41,49 +40,58 @@ class AttachmentItem extends ConsumerWidget {
       decoration: BoxDecoration(
         color: containerColor,
         borderRadius: BorderRadius.circular(8),
-        border: Border.all(color: borderColor),
+        border: Border.all(color: greyColor),
       ),
       child: ListTile(
-        leading:
-            mediaState.mediaLoadingState.isLoading || mediaState.isDownloading
-                ? loadingIndication()
-                : attachmentLeadingIcon(attachmentType),
+        leading: attachmentLeadingIcon(attachmentType),
         onTap: () => attachmentOnTap(
           ref,
           context,
           attachmentType,
           mediaState,
         ),
-        onLongPress: canEdit
-            ? () => openRedactContentDialog(
+        title: title(context, attachmentType),
+        trailing: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (mediaState.mediaFile == null &&
+                attachmentType != AttachmentType.link)
+              mediaState.mediaLoadingState.isLoading || mediaState.isDownloading
+                  ? loadingIndication()
+                  : IconButton(
+                      onPressed: () => ref
+                          .read(
+                            attachmentMediaStateProvider(attachment).notifier,
+                          )
+                          .downloadMedia(),
+                      icon: Icon(
+                        Icons.download,
+                        color: Theme.of(context).primaryColor,
+                      ),
+                    ),
+            if (canEdit)
+              IconButton(
+                onPressed: () => openRedactContentDialog(
                   context,
                   eventId: eventId,
                   roomId: roomId,
                   title: L10n.of(context).deleteAttachment,
                   description: L10n.of(context)
                       .areYouSureYouWantToRemoveAttachmentFromPin,
                   isSpace: true,
-                )
-            : null,
-        title: title(attachmentType),
-        trailing: Visibility(
-          visible: mediaState.mediaFile == null &&
-              attachmentType != AttachmentType.link,
-          child: IconButton(
-            onPressed: () => attachmentOnTap(
-              ref,
-              context,
-              attachmentType,
-              mediaState,
-            ),
-            icon: const Icon(Atlas.download_arrow_down),
-          ),
+                ),
+                icon: Icon(
+                  Icons.delete_forever,
+                  color: Theme.of(context).colorScheme.error,
+                ),
+              ),
+          ],
         ),
       ),
     );
   }
 
-  Widget title(AttachmentType attachmentType) {
+  Widget title(BuildContext context, AttachmentType attachmentType) {
     final msgContent = attachment.msgContent();
     final fileName = msgContent.body();
     final fileNameSplit = fileName.split('.');
@@ -103,6 +111,7 @@ class AttachmentItem extends ConsumerWidget {
             attachment.link() ?? '',
             maxLines: 2,
             overflow: TextOverflow.ellipsis,
+            style: Theme.of(context).textTheme.labelMedium,
           ),
         ] else ...[
           Text(
@@ -112,11 +121,20 @@ class AttachmentItem extends ConsumerWidget {
           ),
           Row(
             children: [
-              Text(fileSize),
+              Text(
+                fileSize,
+                style: Theme.of(context).textTheme.labelMedium,
+              ),
               const SizedBox(width: 10),
-              const Text('.'),
+              Text(
+                '.',
+                style: Theme.of(context).textTheme.labelMedium,
+              ),
               const SizedBox(width: 10),
-              Text(documentTypeFromFileExtension(fileExtension)),
+              Text(
+                documentTypeFromFileExtension(fileExtension),
+                style: Theme.of(context).textTheme.labelMedium,
+              ),
             ],
           ),
         ],
@@ -172,8 +190,8 @@ class AttachmentItem extends ConsumerWidget {
 
   Widget loadingIndication() {
     return const SizedBox(
-      width: 40,
-      height: 40,
+      width: 20,
+      height: 20,
       child: Center(child: CircularProgressIndicator()),
     );
   }

diff --git a/app/lib/features/attachments/widgets/attachment_section.dart b/app/lib/features/attachments/widgets/attachment_section.dart
@@ -1,3 +1,4 @@
+import 'package:acter/common/models/types.dart';
 import 'package:acter/common/toolkit/buttons/inline_text_button.dart';
 import 'package:acter/features/attachments/actions/handle_selected_attachments.dart';
 import 'package:acter/features/attachments/actions/select_attachment.dart';
@@ -132,6 +133,18 @@ class FoundAttachmentSectionWidget extends ConsumerWidget {
         ActerInlineTextButton(
           onPressed: () => selectAttachment(
             context: context,
+            onLinkSelected: (title, link) {
+              Navigator.pop(context);
+              return handleAttachmentSelected(
+                context: context,
+                ref: ref,
+                manager: attachmentManager,
+                title: title,
+                link: link,
+                attachmentType: AttachmentType.link,
+                attachments: [],
+              );
+            },
             onSelected: (files, selectedType) {
               return handleAttachmentSelected(
                 context: context,