From 5c3fe58ed7b85cd7ac38e209166c0a905fe5ddec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 6 Apr 2022 09:29:08 +0200
Subject: [PATCH 1/6] MOBILE-3833 storage: Fix hover style state

---
 .../pages/course-storage/course-storage.html  |  8 +--
 .../pages/course-storage/course-storage.scss  | 55 ++++++++++---------
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 1d0182cf1..d0801b848 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -47,8 +47,8 @@
         <ng-container *ngFor="let section of sections">
             <ion-card class="section" *ngIf="section.modules.length > 0">
                 <ion-card-header>
-                    <ion-item class="ion-no-padding" [lines]="section.expanded ? 'full' : 'none'" button detail="false"
-                        (click)="toggleExpand($event, section)" [class.core-course-storage-section-expanded]="section.expanded"
+                    <ion-item [lines]="section.expanded ? 'full' : 'none'" button detail="false" (click)="toggleExpand($event, section)"
+                        [class.core-course-storage-section-expanded]="section.expanded"
                         [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
                         [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-storage-section-' + section.id">
                         <ion-icon name="fas-chevron-right" flip-rtl slot="start" class="expandable-status-icon"
@@ -99,10 +99,10 @@
                         </div>
                     </ion-item>
                 </ion-card-header>
-                <ion-card-content id="core-course-storage-section-{{section.id}}" [ngClass]="{'hidden-content': !section.expanded}">
+                <ion-card-content id="core-course-storage-section-{{section.id}}">
                     <ng-container *ngIf="section.expanded">
                         <ng-container *ngFor="let module of section.modules">
-                            <ion-item class="ion-no-padding core-course-storage-activity"
+                            <ion-item class="core-course-storage-activity"
                                 *ngIf="downloadEnabled || (!module.calculatingSize && module.totalSize > 0)">
                                 <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
                                     [modname]="module.modname" [componentId]="module.instance">
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.scss b/src/addons/storagemanager/pages/course-storage/course-storage.scss
index 8682b14eb..cf6193060 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.scss
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.scss
@@ -3,36 +3,41 @@
 :host {
     --course-storage-max-activity-height: 120px;
 
-    ion-card ion-item {
+    ion-card ion-item.size {
         --inner-padding-end: 0px;
     }
 
-    ion-card.section ion-card-header {
-        padding-top: 8px;
-        padding-bottom: 8px;
-    }
-    ion-card.section .item-heading {
-        font-weight: bold;
-        font-size: 1.2rem;
-    }
+    ion-card.section {
+        ion-card-header {
+            padding: 0;
+        }
+        ion-card-content {
+            padding: 0;
 
-    ion-card-content.hidden-content {
-        padding: 0;
-    }
+            .core-course-storage-activity ion-label {
+                h3 {
+                    position: relative;
+                    max-height: var(--course-storage-max-activity-height);
+                    overflow: hidden;
+                    ::ng-deep * {
+                        pointer-events: none !important;
+                    }
 
-    .core-course-storage-activity ion-label h3 {
-        position: relative;
-        max-height: var(--course-storage-max-activity-height);
-
-        &:before {
-            content: '';
-            height: 100%;
-            min-height: var(--course-storage-max-activity-height);
-            position: absolute;
-            @include position(0, 0, null, 0);
-            background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px));
-            z-index: 6;
-            pointer-events: none;
+                    &:before {
+                        content: '';
+                        height: var(--course-storage-max-activity-height);
+                        position: absolute;
+                        @include position(0, 0, null, 0);
+                        background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px));
+                        z-index: 6;
+                        pointer-events: none;
+                    }
+                }
+            }
+        }
+        .item-heading {
+            font-weight: bold;
+            font-size: 1.2rem;
         }
     }
 }

From be8ed25daaaa9635ff64ed063e5bcd935af92673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 6 Apr 2022 09:50:17 +0200
Subject: [PATCH 2/6] MOBILE-3833 course: Deprecate skipListStatus on prefetch
 handlers

---
 src/addons/mod/label/services/handlers/prefetch.ts          | 1 -
 src/core/features/course/classes/module-prefetch-handler.ts | 6 ------
 .../features/course/services/module-prefetch-delegate.ts    | 4 +++-
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/addons/mod/label/services/handlers/prefetch.ts b/src/addons/mod/label/services/handlers/prefetch.ts
index 50feb8c62..72f153fa5 100644
--- a/src/addons/mod/label/services/handlers/prefetch.ts
+++ b/src/addons/mod/label/services/handlers/prefetch.ts
@@ -31,7 +31,6 @@ export class AddonModLabelPrefetchHandlerService extends CoreCourseResourcePrefe
     modName = 'label';
     component = AddonModLabelProvider.COMPONENT;
     updatesNames = /^.*files$/;
-    skipListStatus = true;
 
     /**
      * @inheritdoc
diff --git a/src/core/features/course/classes/module-prefetch-handler.ts b/src/core/features/course/classes/module-prefetch-handler.ts
index ab9bf9fda..79dfd6bc7 100644
--- a/src/core/features/course/classes/module-prefetch-handler.ts
+++ b/src/core/features/course/classes/module-prefetch-handler.ts
@@ -47,12 +47,6 @@ export class CoreCourseModulePrefetchHandlerBase implements CoreCourseModulePref
      */
     updatesNames = /^.*files$/;
 
-    /**
-     * If true, this module will be ignored when determining the status of a list of modules. The module will
-     * still be downloaded when downloading the section/course, it only affects whether the button should be displayed.
-     */
-    skipListStatus = false;
-
     /**
      * List of download promises to prevent downloading the module twice at the same time.
      */
diff --git a/src/core/features/course/services/module-prefetch-delegate.ts b/src/core/features/course/services/module-prefetch-delegate.ts
index 91e069b40..992e069e8 100644
--- a/src/core/features/course/services/module-prefetch-delegate.ts
+++ b/src/core/features/course/services/module-prefetch-delegate.ts
@@ -1361,8 +1361,10 @@ export interface CoreCourseModulePrefetchHandler extends CoreDelegateHandler {
     /**
      * If true, this module will be treated as not downloadable when determining the status of a list of modules. The module will
      * still be downloaded when downloading the section/course, it only affects whether the button should be displayed.
+     *
+     * @depracated since app 4.0.
      */
-    skipListStatus: boolean;
+    skipListStatus?: boolean;
 
     /**
      * Get the download size of a module.

From 6bf1bb7cb4748b74465ed9332b9a27737b849952 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 6 Apr 2022 10:17:49 +0200
Subject: [PATCH 3/6] MOBILE-3833 style: Center toast message and buttons on
 small screens

---
 src/theme/theme.base.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 6efa32011..81ce547f4 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -501,10 +501,6 @@ ion-toast {
     @include media-breakpoint-down(sm) {
         &::part(container) {
             flex-direction: column;
-            align-items: flex-end;
-        }
-        &::part(message) {
-            align-self: flex-start;
         }
     }
 }

From 9de662f8964e16767e53727b01d47ca59b34bf42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 6 Apr 2022 10:58:36 +0200
Subject: [PATCH 4/6] MOBILE-3833 timeline: Import styles from myoverview

---
 .../events/addon-block-timeline-events.html   |  2 +-
 .../timeline/addon-block-timeline.html        | 29 +++++------
 .../components/timeline/timeline.scss         | 38 +++++++++++++++
 .../timeline/components/timeline/timeline.ts  |  1 +
 .../search-box/core-search-box.html           | 48 +++++++++----------
 .../components/search-box/search-box.scss     | 29 +++++++----
 6 files changed, 98 insertions(+), 49 deletions(-)
 create mode 100644 src/addons/block/timeline/components/timeline/timeline.scss

diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
index b370beae4..5244492db 100644
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -53,7 +53,7 @@
                         </ion-row>
                     </ion-col>
                     <ion-col class="addon-block-timeline-activity-action ion-no-padding" *ngIf="event.action?.actionable">
-                        <ion-button fill="outline" (click)="action($event, event.action.url)" [title]="event.action.name">
+                        <ion-button fill="outline" (click)="action($event, event.action.url)" [title]="event.action.name" class="chip">
                             {{event.action.name}}
                             <ion-badge slot="end" class="ion-margin-start" *ngIf="event.action.showitemcount">
                                 {{event.action.itemcount}}
diff --git a/src/addons/block/timeline/components/timeline/addon-block-timeline.html b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
index 949692cb2..c494a8f6f 100644
--- a/src/addons/block/timeline/components/timeline/addon-block-timeline.html
+++ b/src/addons/block/timeline/components/timeline/addon-block-timeline.html
@@ -4,13 +4,21 @@
     </ion-label>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded">
-    <ion-row class="ion-no-padding ion-justify-content-between ion-align-items-center">
-        <ion-col size="auto" class="ion-no-padding">
-            <core-combobox [selection]="filter" (onChange)="switchFilter($event)" icon="fas-filter">
+    <ion-row class="ion-hide-md-up addon-block-timeline-filter" *ngIf="searchEnabled">
+        <ion-col>
+            <!-- Filter courses. -->
+            <core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
+                [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
+                searchArea="AddonBlockTimeline"></core-search-box>
+        </ion-col>
+    </ion-row>
+    <ion-row class="ion-justify-content-between ion-align-items-center addon-block-timeline-filter">
+        <ion-col size="auto">
+            <core-combobox [selection]="filter" (onChange)="switchFilter($event)">
                 <ion-select-option class="ion-text-wrap" value="all">
                     {{ 'core.all' | translate }}
                 </ion-select-option>
-                <ion-select-option class="ion-text-wrap" value="overdue">
+                <ion-select-option class="ion-text-wrap core-select-option-border-bottom" value="overdue">
                     {{ 'addon.block_timeline.overdue' | translate }}
                 </ion-select-option>
                 <ion-select-option class="ion-text-wrap core-select-option-title" disabled value="disabled">
@@ -30,13 +38,13 @@
                 </ion-select-option>
             </core-combobox>
         </ion-col>
-        <ion-col class="ion-no-padding ion-hide-md-down" *ngIf="searchEnabled">
+        <ion-col class="ion-hide-md-down" *ngIf="searchEnabled">
             <!-- Filter courses. -->
             <core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
                 [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
                 searchArea="AddonBlockTimeline"></core-search-box>
         </ion-col>
-        <ion-col size="auto" class="ion-no-padding">
+        <ion-col size="auto">
             <core-combobox [label]="'core.sortby' | translate" [selection]="sort" (onChange)="switchSort($event)"
                 icon="fas-sort-amount-down-alt">
                 <ion-select-option class="ion-text-wrap" value="sortbydates">
@@ -48,14 +56,7 @@
             </core-combobox>
         </ion-col>
     </ion-row>
-    <ion-row class="ion-no-padding ion-hide-md-up" *ngIf="searchEnabled">
-        <ion-col class="ion-no-padding">
-            <!-- Filter courses. -->
-            <core-search-box (onSubmit)="searchTextChanged($event)" (onClear)="searchTextChanged()"
-                [placeholder]="'addon.block_timeline.searchevents' | translate" autocorrect="off" spellcheck="false" lengthCheck="2"
-                searchArea="AddonBlockTimeline"></core-search-box>
-        </ion-col>
-    </ion-row>
+
 
     <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'">
         <addon-block-timeline-events [events]="timeline.events" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMore()"
diff --git a/src/addons/block/timeline/components/timeline/timeline.scss b/src/addons/block/timeline/components/timeline/timeline.scss
new file mode 100644
index 000000000..aab42b195
--- /dev/null
+++ b/src/addons/block/timeline/components/timeline/timeline.scss
@@ -0,0 +1,38 @@
+:host {
+    ion-row.addon-block-timeline-filter {
+        margin: 8px;
+        padding: 0;
+
+        ion-col {
+            padding: 0;
+            margin-right: 2px;
+            margin-left: 2px;
+        }
+
+        ion-button,
+        core-combobox ::ng-deep ion-button {
+            --border-width: 0;
+            --a11y-min-target-size: 40px;
+            margin: 0;
+
+            .select-icon {
+                display: none;
+            }
+            ion-icon {
+                font-size: 20px;
+            }
+        }
+
+        core-combobox ::ng-deep ion-select {
+            margin: 0;
+            --a11y-min-target-size: 40px;
+        }
+
+       core-search-box {
+            padding: 0;
+            margin: 0;
+            --height: 40px;
+        }
+    }
+
+}
diff --git a/src/addons/block/timeline/components/timeline/timeline.ts b/src/addons/block/timeline/components/timeline/timeline.ts
index ce962f59f..e26045dd8 100644
--- a/src/addons/block/timeline/components/timeline/timeline.ts
+++ b/src/addons/block/timeline/components/timeline/timeline.ts
@@ -31,6 +31,7 @@ import { CoreNavigator } from '@services/navigator';
 @Component({
     selector: 'addon-block-timeline',
     templateUrl: 'addon-block-timeline.html',
+    styleUrls: ['timeline.scss'],
 })
 export class AddonBlockTimelineComponent extends CoreBlockBaseComponent implements OnInit {
 
diff --git a/src/core/features/search/components/search-box/core-search-box.html b/src/core/features/search/components/search-box/core-search-box.html
index 66dedb5c2..675a7f9b0 100644
--- a/src/core/features/search/components/search-box/core-search-box.html
+++ b/src/core/features/search/components/search-box/core-search-box.html
@@ -1,26 +1,24 @@
-<ion-card>
-    <form (ngSubmit)="submitForm($event)" role="search" #searchForm>
-        <ion-item>
-            <ion-label class="sr-only">{{ placeholder }}</ion-label>
-            <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect"
-                [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)">
-            </ion-input>
-            <ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
-                [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
-                <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
-            </ion-button>
-            <ion-button *ngIf="showClear" slot="end" fill="clear" [attr.aria-label]="'core.clearsearch' | translate"
-                [disabled]="searched == '' || disabled" (click)="clearForm()">
-                <ion-icon name="fas-backspace" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
-            </ion-button>
+<form (ngSubmit)="submitForm($event)" role="search" #searchForm>
+    <ion-item class="search-box">
+        <ion-label class="sr-only">{{ placeholder }}</ion-label>
+        <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect"
+            [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)">
+        </ion-input>
+        <ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
+            [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
+            <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
+        </ion-button>
+        <ion-button *ngIf="showClear" slot="end" fill="clear" [attr.aria-label]="'core.clearsearch' | translate"
+            [disabled]="searched == '' || disabled" (click)="clearForm()">
+            <ion-icon name="fas-backspace" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
+        </ion-button>
+    </ion-item>
+    <ion-list class="core-search-history" [hidden]="!historyShown">
+        <ion-item button class="ion-text-wrap" *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)" tabindex="0"
+            detail="true">
+            <ion-icon name="fas-history" slot="start" aria-hidden="true">
+            </ion-icon>
+            <ion-label>{{item.searchedtext}}</ion-label>
         </ion-item>
-        <ion-list class="core-search-history" [hidden]="!historyShown">
-            <ion-item button class="ion-text-wrap" *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)"
-                tabindex="0" detail="true">
-                <ion-icon name="fas-history" slot="start" aria-hidden="true">
-                </ion-icon>
-                <ion-label>{{item.searchedtext}}</ion-label>
-            </ion-item>
-        </ion-list>
-    </form>
-</ion-card>
+    </ion-list>
+</form>
diff --git a/src/core/features/search/components/search-box/search-box.scss b/src/core/features/search/components/search-box/search-box.scss
index 958a5edc7..698da8e5b 100644
--- a/src/core/features/search/components/search-box/search-box.scss
+++ b/src/core/features/search/components/search-box/search-box.scss
@@ -1,29 +1,40 @@
 :host {
-    min-height: var(--a11y-min-target-size);
+    --height: var(--a11y-min-target-size);
+    --search-height: calc(var(--height) - 2px);
+    min-height: var(--height);
     display: block;
     position: relative;
     margin: 8px;
 
-    ion-card {
+    form {
         position: absolute;
         left: 0;
         right: 0;
         z-index: 4;
         margin: 0;
-        --border-color: var(--core-search-box-border-color);
-        --border-radius: var(--core-search-box-border-radius);
-        --background: var(--core-search-box-background);
-        --color: var(--core-search-box-border-color);
+        border: 1px solid var(--core-search-box-border-color);
+        border-radius: var(--core-search-box-border-radius);
+        background: var(--core-search-box-background);
+        color: var(--core-search-box-border-color);
+
+        .search-box {
+            --min-height: var(--search-height);
+            border-radius: var(--core-search-box-border-radius);
+        }
+
+        ion-button.button {
+            margin: 0;
+            --a11y-min-target-size: var(--search-height);
+        }
     }
 
-    ion-button.button {
-        margin: 0;
-    }
+
 
     .core-search-history {
         max-height: calc(-120px + 80vh);
         overflow-y: auto;
         background: var(--core-search-box-background);
+        border-radius: 0 0 var(--core-search-box-border-radius) var(--core-search-box-border-radius);
         --ion-item-background: var(--core-search-box-background);
 
         .item:hover {

From 77cbaa1f966b32400492c3b4d63517575d02912e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 6 Apr 2022 11:04:35 +0200
Subject: [PATCH 5/6] MOBILE-3833 style: Margin on chip slotted icons

---
 src/theme/theme.base.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 81ce547f4..e71e36640 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1050,9 +1050,16 @@ ion-button.chip {
     ion-icon {
         font-size: 16px;
         min-width: 16px;
+    }
+
+    ion-icon[slot=start] {
         @include margin(0, 8px, 0, 0);
     }
 
+    ion-icon[slot=end] {
+        @include margin(0, 0, 0, 8px);
+    }
+
     ion-label {
         white-space: normal !important;
     }

From a251482349348c854e40559a7615b2695b6320fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 6 Apr 2022 11:17:36 +0200
Subject: [PATCH 6/6] MOBILE-3833 storage: Do not show info text if downloads
 are disabled

---
 .../storagemanager/pages/course-storage/course-storage.html   | 2 +-
 src/theme/theme.base.scss                                     | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index d0801b848..84fb399a2 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -10,7 +10,7 @@
 </ion-header>
 <ion-content class="limited-width">
     <core-loading [hideUntil]="loaded">
-        <ion-item class="ion-text-wrap">
+        <ion-item class="ion-text-wrap" *ngIf="downloadCourseEnabled">
             <ion-label>
                 <p>{{ 'addon.storagemanager.courseinfo' | translate }}</p>
             </ion-label>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index e71e36640..32100b047 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -844,6 +844,10 @@ ion-card {
     ion-item:only-child {
         --inner-border-width: 0px;
     }
+
+    ion-card-title {
+        font-size: 20px;
+    }
 }
 
 .core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div {