EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3749 core: Add new spacer component

main
Pau Ferrer Ocaña 2021-05-10 12:19:34 +02:00
parent 7851a97e6d
commit abd722396b
14 changed files with 50 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addons/calendar/components/filter/addon-calendar-filter-popover.html
View File

@ -4,9 +4,7 @@
<ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
<ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end"></ion-toggle>
</ion-item>
<ion-item-divider *ngIf="filter.course || filter.category || filter.group">
<ion-label></ion-label>
</ion-item-divider>
<core-spacer *ngIf="filter.course || filter.category || filter.group"></core-spacer>
<ng-container *ngIf="filter.course || filter.category || filter.group">
<ion-radio-group [(ngModel)]="courseId" (ionChange)="onChange()">
<ion-item class="ion-text-wrap" *ngFor="let course of courses">

4
src/addons/mod/feedback/pages/attempt/attempt.html
View File

@ -33,9 +33,7 @@
</ion-item >
<ng-container *ngIf="items && items.length">
<ng-container *ngFor="let item of items">
<ion-item-divider *ngIf="item.typ == 'pagebreak'">
<ion-label></ion-label>
</ion-item-divider>
<core-spacer *ngIf="item.typ == 'pagebreak'"></core-spacer>
<ion-item class="ion-text-wrap" *ngIf="item.typ != 'pagebreak'" [color]="item.dependitem > 0 ? 'light' : ''">
<ion-label>
<h2 *ngIf="item.name" [core-mark-required]="item.required">

4
src/addons/mod/feedback/pages/form/form.html
View File

@ -21,9 +21,7 @@
</ion-label>
</ion-item>
<ng-container *ngFor="let item of items">
<ion-item-divider *ngIf="item.typ == 'pagebreak'">
<ion-label></ion-label>
</ion-item-divider>
<core-spacer *ngIf="item.typ == 'pagebreak'"></core-spacer>
<ng-container *ngIf="item.typ != 'pagebreak'">
<ion-item class="ion-text-wrap addon-mod_feedback-item" [color]="item.dependitem > 0 ? 'light' : ''"
[class.core-danger-item]="item.isEmpty || item.hasError">

2
src/addons/mod/forum/pages/discussion/discussion.html
View File

@ -101,7 +101,7 @@
<ion-card *ngIf="sort != 'nested'">
<ng-container *ngFor="let post of posts; first as first">
<ion-item-divider *ngIf="!first"><ion-label></ion-label></ion-item-divider>
<core-spacer *ngIf="!first"></core-spacer>
<addon-mod-forum-post
[post]="post" [courseId]="courseId" [discussionId]="discussionId"
[component]="component" [componentId]="cmId" [replyData]="replyData"

2
src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
View File

@ -18,7 +18,7 @@
<core-dynamic-component [component]="data.component" [data]="data.data">
<p class="ion-padding">Couldn't find the directive to render this access rule.</p>
</core-dynamic-component>
<ion-item-divider *ngIf="!last"><ion-label></ion-label></ion-item-divider>
<core-spacer *ngIf="!last"></core-spacer>
</ng-container>
<ion-button expand="block" type="submit" class="ion-margin">

3
src/core/components/components.module.ts
View File

@ -56,6 +56,7 @@ import { CoreTabsOutletComponent } from './tabs-outlet/tabs-outlet';
import { CoreTimerComponent } from './timer/timer';
import { CoreUserAvatarComponent } from './user-avatar/user-avatar';
import { CoreComboboxComponent } from './combobox/combobox';
import { CoreSpacerComponent } from './spacer/spacer';
@NgModule({
declarations: [
@ -94,6 +95,7 @@ import { CoreComboboxComponent } from './combobox/combobox';
CoreTimerComponent,
CoreUserAvatarComponent,
CoreComboboxComponent,
CoreSpacerComponent,
],
imports: [
CommonModule,
@ -139,6 +141,7 @@ import { CoreComboboxComponent } from './combobox/combobox';
CoreTimerComponent,
CoreUserAvatarComponent,
CoreComboboxComponent,
CoreSpacerComponent,
],
})
export class CoreComponentsModule {}

30
src/core/components/spacer/spacer.ts 100644
View File

@ -0,0 +1,30 @@
// (C) Copyright 2015 Moodle Pty Ltd.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component } from '@angular/core';
/**
* Component to display an empty spacer using item divider.
*
* Example usage:
* <core-spacer></core-spacer>
*/
@Component({
selector: 'core-spacer',
template: '<ion-item-divider><ion-label></ion-label></ion-item-divider>',
styles: [':host {--item-divider-min-height: 30px;}'],
})
export class CoreSpacerComponent {
}

14
src/core/features/course/components/module/module.ts
View File

@ -44,14 +44,14 @@ import {
})
export class CoreCourseModuleComponent implements OnInit, OnDestroy {
@Input() module?: CoreCourseModule; // The module to render.
@Input() module!: CoreCourseModule; // The module to render.
@Input() courseId?: number; // The course the module belongs to.
@Input() section?: CoreCourseSection; // The section the module belongs to.
// eslint-disable-next-line @angular-eslint/no-input-rename
@Input('downloadEnabled') set enabled(value: boolean) {
this.downloadEnabled = value;
if (!this.module?.handlerData?.showDownloadButton || !this.downloadEnabled || this.statusCalculated) {
if (!this.module.handlerData?.showDownloadButton || !this.downloadEnabled || this.statusCalculated) {
return;
}
@ -81,10 +81,6 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
* Component being initialized.
*/
ngOnInit(): void {
if (!this.module) {
return;
}
this.courseId = this.courseId || this.module.course;
this.modNameTranslated = CoreCourse.translateModuleName(this.module.modname) || '';
@ -125,7 +121,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
* @param event Click event.
*/
moduleClicked(event: Event): void {
if (this.module?.uservisible !== false && this.module?.handlerData?.action) {
if (this.module.uservisible !== false && this.module.handlerData?.action) {
this.module.handlerData.action(event, this.module, this.courseId!);
}
}
@ -195,7 +191,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
this.spinner = false;
this.downloadStatus = status;
this.module?.handlerData?.updateStatus?.(status);
this.module.handlerData?.updateStatus?.(status);
}
/**
@ -218,7 +214,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
*/
ngOnDestroy(): void {
// this.statusObserver?.off();
this.module?.handlerData?.onDestroy?.();
this.module.handlerData?.onDestroy?.();
this.isDestroyed = true;
}

2
src/core/features/course/pages/preview/preview.html
View File

@ -58,7 +58,7 @@
<h2>{{contact.fullname}}</h2>
</ion-label>
</ion-item>
<ion-item-divider><ion-label></ion-label></ion-item-divider>
<core-spacer></core-spacer>
</ng-container>
<ion-item class="ion-text-wrap" *ngIf="course.customfields">

4
src/core/features/mainmenu/pages/more/more.html
View File

@ -20,7 +20,7 @@
<p>{{ siteUrl }}</p>
</ion-label>
</ion-item>
<ion-item-divider><ion-label></ion-label></ion-item-divider>
<core-spacer></core-spacer>
<ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
<ion-label><ion-spinner></ion-spinner></ion-label>
</ion-item>
@ -82,7 +82,7 @@
<h2>{{ logoutLabel | translate }}</h2>
</ion-label>
</ion-item>
<ion-item-divider><ion-label></ion-label></ion-item-divider>
<core-spacer></core-spacer>
<ion-item button (click)="openSettings()" [attr.aria-label]="'core.settings.appsettings' | translate" detail="true">
<ion-icon name="fas-cogs" slot="start" aria-hidden="true"></ion-icon>
<ion-label>

2
src/core/features/settings/pages/site/site.html
View File

@ -25,7 +25,7 @@
<p>{{ siteUrl }}</p>
</ion-label>
</ion-item>
<ion-item-divider><ion-label></ion-label></ion-item-divider>
<core-spacer></core-spacer>
<ion-item *ngFor="let handler of handlers.items" [ngClass]="['core-settings-handler', handler.class]"
[attr.aria-label]="handler.title | translate" detail="true" (click)="handlers.select(handler)" button

4
src/core/features/sitehome/pages/index/index.html
View File

@ -31,9 +31,7 @@
<!-- Site home items: news, categories, courses, etc. -->
<ng-container *ngIf="items.length > 0">
<ion-item-divider *ngIf="section && section!.hasContent">
<ion-label></ion-label>
</ion-item-divider>
<core-spacer *ngIf="section && section!.hasContent"></core-spacer>
<ng-container *ngFor="let item of items">
<ng-container [ngSwitch]="item">
<ng-container *ngSwitchCase="'LIST_OF_COURSE'">

5
src/theme/theme.base.scss
View File

@ -193,11 +193,6 @@ ion-item-divider {
opacity: var(--ion-item-detail-icon-opacity);
padding-inline-end: 16px;
}
&.ios {
padding-top: 10px;
padding-bottom: 10px;
}
}
// Ionic list.

3
src/theme/theme.light.scss
View File

@ -171,10 +171,11 @@
--detail-icon-opacity: var(--ion-item-detail-icon-opacity);
}
--item-divider-min-height: calc(var(--a11y-min-target-size) + 8px);
ion-item-divider {
--background: var(--gray-lighter);
--color: inherit;
min-height: calc(var(--a11y-min-target-size) + 8px);
min-height: var(--item-divider-min-height);
}
--core-combobox-background: var(--ion-item-background);