Merge pull request #3234 from crazyserver/MOBILE-3833

Mobile 3833
main
Dani Palou 2022-04-06 11:36:17 +02:00 committed by GitHub
commit b10b5781cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 147 additions and 91 deletions

View File

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

View File

@ -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()"

View File

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

View File

@ -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 {

View File

@ -31,7 +31,6 @@ export class AddonModLabelPrefetchHandlerService extends CoreCourseResourcePrefe
modName = 'label';
component = AddonModLabelProvider.COMPONENT;
updatesNames = /^.*files$/;
skipListStatus = true;
/**
* @inheritdoc

View File

@ -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"
(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">

View File

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

View File

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

View File

@ -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.

View File

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

View File

@ -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 {

View File

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