From aa1bd53a268095f31842bc045c9585e8e3f36809 Mon Sep 17 00:00:00 2001
From: Alfonso Salces <alfonso.salces@moodle.com>
Date: Thu, 1 Aug 2024 15:31:43 +0200
Subject: [PATCH] MOBILE-4070 attachments: Collapse mimetypes

---
 .../components/attachments/attachments.scss   | 19 +++++++++++++--
 .../attachments/core-attachments.html         | 24 ++++++++++++++-----
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/core/components/attachments/attachments.scss b/src/core/components/attachments/attachments.scss
index c6955211f..09b702537 100644
--- a/src/core/components/attachments/attachments.scss
+++ b/src/core/components/attachments/attachments.scss
@@ -1,3 +1,18 @@
-core-loading {
-    --loading-inline-min-height: 60px;
+@use "theme/globals" as *;
+
+:host {
+    core-loading {
+        --loading-inline-min-height: 60px;
+    }
+
+    .core-attachments {
+        @include margin-horizontal(null, var(--mdl-spacing-3));
+
+        &-header {
+            ion-icon {
+                @include margin-horizontal(null, var(--mdl-spacing-3));
+                font-size: var(--mdl-typography-icon-fontSize-sm);
+            }
+        }
+    }
 }
diff --git a/src/core/components/attachments/core-attachments.html b/src/core/components/attachments/core-attachments.html
index 7ec85a4f7..a3108ab47 100644
--- a/src/core/components/attachments/core-attachments.html
+++ b/src/core/components/attachments/core-attachments.html
@@ -13,16 +13,28 @@
                 <ion-icon name="fas-plus" slot="icon-only" aria-hidden="true" />
             </ion-button>
         </ion-item>
-        <ion-item class="ion-text-wrap" *ngIf="fileTypes && fileTypes.mimetypes && fileTypes.mimetypes.length">
-            <ion-label>
-                <p>{{ 'core.fileuploader.filesofthesetypes' | translate }}</p>
-                <ul class="list-with-style">
+
+        @if (fileTypes && fileTypes.mimetypes && fileTypes.mimetypes.length) {
+        <ion-accordion-group>
+            <ion-accordion toggleIconSlot="start">
+                <ion-item class="core-attachments-header ion-text-wrap" slot="header">
+                    <ion-label>
+                        <p class="item-heading">{{ 'core.fileuploader.filesofthesetypes' | translate }}</p>
+                    </ion-label>
+                    <ion-icon name="fas-circle-info" aria-hidden="true" slot="end" color="dark" />
+                </ion-item>
+
+                <ul class="core-attachments" slot="content">
                     <li *ngFor="let typeInfo of fileTypes.info">
                         <strong *ngIf="typeInfo.name">{{typeInfo.name}} </strong>{{typeInfo.extlist}}
                     </li>
                 </ul>
-            </ion-label>
-        </ion-item>
+            </ion-accordion>
+        </ion-accordion-group>
+        }
+
+
+
         <ng-container *ngFor="let file of files; let index=index">
             <!-- Files already attached to the submission, either in online or in offline. -->
             <core-file *ngIf="!file.name" [file]="file" [component]="component" [componentId]="componentId" [canDelete]="true"