Merge pull request #3234 from crazyserver/MOBILE-3833

Mobile 3833

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}}

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-row class="ion-hide-md-up addon-block-timeline-filter" *ngIf="searchEnabled">
-        <ion-col size="auto" class="ion-no-padding">
+        <ion-col>
-            <core-combobox [selection]="filter" (onChange)="switchFilter($event)" icon="fas-filter">
+            <!-- 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()"

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;
+        }
+    }
+
+}

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 {
 

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

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>
@@ -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"
+                    <ion-item [lines]="section.expanded ? 'full' : 'none'" button detail="false" (click)="toggleExpand($event, section)"
-                        (click)="toggleExpand($event, section)" [class.core-course-storage-section-expanded]="section.expanded"
+                        [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">

src/addons/storagemanager/pages/course-storage/course-storage.scss

@@ -3,31 +3,29 @@
 :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 {
+    ion-card.section {
-        padding-top: 8px;
+        ion-card-header {
-        padding-bottom: 8px;
-    }
-    ion-card.section .item-heading {
-        font-weight: bold;
-        font-size: 1.2rem;
-    }
-
-    ion-card-content.hidden-content {
             padding: 0;
         }
+        ion-card-content {
+            padding: 0;
 
-    .core-course-storage-activity ion-label h3 {
+            .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;
+                    }
 
                     &:before {
                         content: '';
-            height: 100%;
+                        height: var(--course-storage-max-activity-height);
-            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));
@@ -35,6 +33,13 @@
                         pointer-events: none;
                     }
                 }
+            }
+        }
+        .item-heading {
+            font-weight: bold;
+            font-size: 1.2rem;
+        }
+    }
 }
 
 ion-badge {

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.
      */

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.

src/core/features/search/components/search-box/core-search-box.html

@@ -1,6 +1,5 @@
-<ion-card>
+<form (ngSubmit)="submitForm($event)" role="search" #searchForm>
-    <form (ngSubmit)="submitForm($event)" role="search" #searchForm>
+    <ion-item class="search-box">
-        <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)">
@@ -15,12 +14,11 @@
         </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)"
+        <ion-item button class="ion-text-wrap" *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)" tabindex="0"
-                tabindex="0" detail="true">
+            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>
+</form>
-</ion-card>

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: 1px solid var(--core-search-box-border-color);
-        --border-radius: var(--core-search-box-border-radius);
+        border-radius: var(--core-search-box-border-radius);
-        --background: var(--core-search-box-background);
+        background: var(--core-search-box-background);
-        --color: var(--core-search-box-border-color);
+        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);
         }
+    }
+
+
 
     .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 {

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;
         }
     }
 }
@@ -848,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 {
@@ -1054,9 +1054,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;
     }