MOBILE-4348 module: Re-estructure activity card

src/addons/mod/forum/services/handlers/module.ts

@@ -21,7 +21,6 @@ import { CoreCourseModuleHandler, CoreCourseModuleHandlerData } from '@features/
 import { CoreConstants, ModPurpose } from '@/core/constants';
 import { CoreModuleHandlerBase } from '@features/course/classes/module-base-handler';
 import { CoreCourseModuleData } from '@features/course/services/course-helper';
-import { CoreIonicColorNames } from '@singletons/colors';
 
 /**
  * Handler to support forum modules.
@@ -57,7 +56,6 @@ export class AddonModForumModuleHandlerService extends CoreModuleHandlerBase imp
         const data = await super.getData(module, courseId);
 
         if ('afterlink' in module && !!module.afterlink) {
-            data.extraBadgeColor = undefined;
             const match = />(\d+)[^<]+/.exec(module.afterlink);
             data.extraBadge = match ? Translate.instant('addon.mod_forum.unreadpostsnumber', { $a : match[1] }) : '';
         } else {
@@ -113,7 +111,6 @@ export class AddonModForumModuleHandlerService extends CoreModuleHandlerBase imp
         }
 
         data.extraBadge = Translate.instant('core.loading');
-        data.extraBadgeColor = CoreIonicColorNames.DARK;
 
         try {
             // Handle unread posts.
@@ -122,7 +119,6 @@ export class AddonModForumModuleHandlerService extends CoreModuleHandlerBase imp
                 siteId,
             });
 
-            data.extraBadgeColor = undefined;
             data.extraBadge = forum.unreadpostscount
                 ? Translate.instant(
                     'addon.mod_forum.unreadpostsnumber',
@@ -131,7 +127,6 @@ export class AddonModForumModuleHandlerService extends CoreModuleHandlerBase imp
                 : '';
         } catch {
             // Ignore errors.
-            data.extraBadgeColor = undefined;
             data.extraBadge = '';
         }
     }

src/addons/mod/lti/services/handlers/module.ts

@@ -59,7 +59,7 @@ export class AddonModLtiModuleHandlerService extends CoreModuleHandlerBase imple
     ): Promise<CoreCourseModuleHandlerData> {
         const data = await super.getData(module, courseId, sectionId, forCoursePage);
         data.showDownloadButton = false;
-        data.buttons = [{
+        data.button = {
             icon: 'fas-up-right-from-square',
             label: 'addon.mod_lti.launchactivity',
             action: (event: Event, module: CoreCourseModuleData, courseId: number): void => {
@@ -68,7 +68,7 @@ export class AddonModLtiModuleHandlerService extends CoreModuleHandlerBase imple
 
                 CoreCourse.storeModuleViewed(courseId, module.id);
             },
-        }];
+        };
 
         return data;
     }

src/addons/mod/resource/services/handlers/module.ts

@@ -73,14 +73,14 @@ export class AddonModResourceModuleHandlerService extends CoreModuleHandlerBase
 
         const handlerData = await super.getData(module, courseId, sectionId, forCoursePage);
         handlerData.updateStatus = (status) => {
-            if (!handlerData.buttons) {
+            if (!handlerData.button) {
                 return;
             }
 
-            handlerData.buttons[0].hidden = status !== CoreConstants.DOWNLOADED ||
+            handlerData.button.hidden = status !== CoreConstants.DOWNLOADED ||
                 AddonModResourceHelper.isDisplayedInIframe(module);
         };
-        handlerData.buttons = [{
+        handlerData.button = {
             hidden: true,
             icon: openWithPicker ? 'fas-share-from-square' : 'fas-file',
             label: module.name + ': ' + Translate.instant(openWithPicker ? 'core.openwith' : 'addon.mod_resource.openthefile'),
@@ -92,7 +92,7 @@ export class AddonModResourceModuleHandlerService extends CoreModuleHandlerBase
                     CoreCourse.storeModuleViewed(courseId, module.id);
                 }
             },
-        }];
+        };
 
         this.getResourceData(module, courseId, handlerData).then((extra) => {
             handlerData.extraBadge = extra;
@@ -144,11 +144,11 @@ export class AddonModResourceModuleHandlerService extends CoreModuleHandlerBase
 
         // Check if the button needs to be shown or not.
         promises.push(this.hideOpenButton(module).then((hideOpenButton) => {
-            if (!handlerData.buttons) {
+            if (!handlerData.button) {
                 return;
             }
 
-            handlerData.buttons[0].hidden = hideOpenButton;
+            handlerData.button.hidden = hideOpenButton;
 
             return;
         }));
@@ -166,58 +166,61 @@ export class AddonModResourceModuleHandlerService extends CoreModuleHandlerBase
 
         await Promise.all(promises);
 
-        const extra: string[] = [];
-
         if (module.contentsinfo) {
             // No need to use the list of files.
-            extra.push(CoreTextUtils.cleanTags(module.afterlink));
-        } else if (module.contents && module.contents[0]) {
-            const files = module.contents;
-            const file = files[0];
+            return CoreTextUtils.cleanTags(module.afterlink);
+        }
+
+        if (!module.contents || !module.contents[0]) {
+            return '';
+        }
 
-            if (options.showsize) {
-                const size = options.filedetails
-                    ? options.filedetails.size
-                    : files.reduce((result, file) => result + (file.filesize || 0), 0);
+        const extra: string[] = [];
+        const files = module.contents;
+        const mainFile = files[0];
 
-                extra.push(CoreTextUtils.bytesToSize(size, 1));
-            }
+        if (options.showsize) {
+            const size = options.filedetails
+                ? options.filedetails.size
+                : files.reduce((result, file) => result + (file.filesize || 0), 0);
 
-            if (options.showtype) {
-                // We should take it from options.filedetails.size if available but it's already translated.
-                extra.push(CoreMimetypeUtils.getMimetypeDescription(file));
-            }
+            extra.push(CoreTextUtils.bytesToSize(size, 1));
+        }
 
-            if (options.showdate) {
-                const timecreated = 'timecreated' in file ? file.timecreated : 0;
-
-                if (options.filedetails && options.filedetails.modifieddate) {
-                    extra.push(Translate.instant(
-                        'addon.mod_resource.modifieddate',
-                        { $a: CoreTimeUtils.userDate(options.filedetails.modifieddate * 1000, 'core.strftimedatetimeshort') },
-                    ));
-                } else if (options.filedetails && options.filedetails.uploadeddate) {
-                    extra.push(Translate.instant(
-                        'addon.mod_resource.uploadeddate',
-                        { $a: CoreTimeUtils.userDate(options.filedetails.uploadeddate * 1000, 'core.strftimedatetimeshort') },
-                    ));
-                } else if ((file.timemodified || 0) > timecreated + CoreConstants.SECONDS_MINUTE * 5) {
-                    /* Modified date may be up to several minutes later than uploaded date just because
-                        teacher did not submit the form promptly. Give teacher up to 5 minutes to do it. */
-                    extra.push(Translate.instant(
-                        'addon.mod_resource.modifieddate',
-                        { $a: CoreTimeUtils.userDate((file.timemodified || 0) * 1000, 'core.strftimedatetimeshort') },
-                    ));
-                } else {
-                    extra.push(Translate.instant(
-                        'addon.mod_resource.uploadeddate',
-                        { $a: CoreTimeUtils.userDate(timecreated * 1000, 'core.strftimedatetimeshort') },
-                    ));
-                }
+        if (options.showtype) {
+            // We should take it from options.filedetails.size if available but it's already translated.
+            extra.push(CoreMimetypeUtils.getMimetypeDescription(mainFile));
+        }
+
+        if (options.showdate) {
+            const timecreated = 'timecreated' in mainFile ? mainFile.timecreated : 0;
+
+            if (options.filedetails && options.filedetails.modifieddate) {
+                extra.push(Translate.instant(
+                    'addon.mod_resource.modifieddate',
+                    { $a: CoreTimeUtils.userDate(options.filedetails.modifieddate * 1000, 'core.strftimedatetimeshort') },
+                ));
+            } else if (options.filedetails && options.filedetails.uploadeddate) {
+                extra.push(Translate.instant(
+                    'addon.mod_resource.uploadeddate',
+                    { $a: CoreTimeUtils.userDate(options.filedetails.uploadeddate * 1000, 'core.strftimedatetimeshort') },
+                ));
+            } else if ((mainFile.timemodified || 0) > timecreated + CoreConstants.SECONDS_MINUTE * 5) {
+                /* Modified date may be up to several minutes later than uploaded date just because
+                    teacher did not submit the form promptly. Give teacher up to 5 minutes to do it. */
+                extra.push(Translate.instant(
+                    'addon.mod_resource.modifieddate',
+                    { $a: CoreTimeUtils.userDate((mainFile.timemodified || 0) * 1000, 'core.strftimedatetimeshort') },
+                ));
+            } else {
+                extra.push(Translate.instant(
+                    'addon.mod_resource.uploadeddate',
+                    { $a: CoreTimeUtils.userDate(timecreated * 1000, 'core.strftimedatetimeshort') },
+                ));
             }
         }
 
-        return extra.join(' ');
+        return extra.join(' · ');
     }
 
     /**

src/addons/mod/url/services/handlers/module.ts

@@ -93,20 +93,20 @@ export class AddonModUrlModuleHandlerService extends CoreModuleHandlerBase imple
                     modal.dismiss();
                 }
             },
-            buttons: [{
+            button: {
                 hidden: true, // Hide it until we calculate if it should be displayed or not.
                 icon: 'fas-link',
                 label: 'core.openmodinbrowser',
                 action: (event: Event, module: CoreCourseModuleData, courseId: number): void => {
                     openUrl(module, courseId);
                 },
-            }],
+            },
         };
 
         const hideButton = await CoreUtils.ignoreErrors(this.hideLinkButton(module));
 
-        if (handlerData.buttons && hideButton !== undefined) {
-            handlerData.buttons[0].hidden = hideButton;
+        if (handlerData.button && hideButton !== undefined) {
+            handlerData.button.hidden = hideButton;
         }
 
         try {

src/core/features/course/components/course-format/course-format.scss

@@ -16,6 +16,5 @@
 }
 
 .course-section {
-    --padding-start: 12px;
     --inner-padding-end: 12px;
 }

src/core/features/course/components/module-completion-details/module-completion-details.html

@@ -30,7 +30,7 @@ <h2 *ngIf="!isTrackedUser">{{ 'core.course.studentsmust' | translate }}</h2>
 
             <!-- Show only description (without status) to non-tracked users. -->
             <div *ngIf="!isTrackedUser" role="listitem" [attr.aria-label]="rule.accessibleDescription">
-                <ion-icon name="fas-circle" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-circle" class="completion_dot" aria-hidden="true"></ion-icon>
                 {{ rule.rulevalue.description }}
             </div>
         </ng-container>

src/core/features/course/components/module-completion-legacy/module-completion-legacy.scss

@@ -1,20 +1,25 @@
 :host {
-    min-width: var(--a11y-min-target-size);
-    min-height: var(--a11y-min-target-size);
+    display: contents;
     --size: 30px;
 
     img {
-        padding: 5px;
+        padding: 2px;
         width: var(--size);
         vertical-align: middle;
         max-width: none;
-        margin: 7px;
+        margin: 4px;
     }
 
     ion-button {
         --padding-top: 0px;
         --padding-start: 0px;
         --padding-end: 0px;
         --padding-bottom: 0px;
+        margin: 0;
+        --a11y-target-min-size: 32px;
+        width: var(--a11y-target-min-size);
+        height: var(--a11y-target-min-size);
+        min-width: var(--a11y-target-min-size);
+        min-height: var(--a11y-target-min-size);;
     }
 }

src/core/features/course/components/module-completion/module-completion.scss

@@ -1,8 +1,9 @@
 :host {
-    display: contents;
+    display: block;
+    margin: var(--margin, 4px);
 
     ion-button {
-        margin: var(--margin, 4px);
+        margin: 0px;
     }
 
     ion-button.button-solid.ion-color-success::part(native){