Merge pull request #4147 from alfonso-salces/MOBILE-4070

MOBILE-4070 attachments: Collapse mimetypes

src/core/components/attachments/attachments.scss

@@ -1,3 +1,18 @@
-core-loading {
+@use "theme/globals" as *;
-    --loading-inline-min-height: 60px;
+
+: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);
+            }
+        }
+    }
 }

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>
+        @if (fileTypes && fileTypes.mimetypes && fileTypes.mimetypes.length) {
-                <p>{{ 'core.fileuploader.filesofthesetypes' | translate }}</p>
+        <ion-accordion-group>
-                <ul class="list-with-style">
+            <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-accordion>
-        </ion-item>
+        </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"