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

Merge pull request #3177 from crazyserver/MOBILE-3814 

Mobile 3814
main
Noel De Martin 2022-03-15 12:51:22 +01:00 committed by GitHub
parent b364f6382b 2bf21e3468
commit 8dee7cbff6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 35 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/core/components/loading/loading.ts
View File

@ -103,23 +103,19 @@ export class CoreLoadingComponent implements OnInit, OnChanges, AfterViewInit {
* @return Promise resolved when done.
*/
async changeState(loaded: boolean): Promise<void> {
await CoreUtils.nextTick();
this.element.classList.toggle('core-loading-loaded', loaded);
this.content?.nativeElement.classList.add('core-loading-content', loaded);
await CoreUtils.nextTick();
// Wait for next tick before triggering the event to make sure ngIf elements have been added to the DOM.
CoreEvents.trigger(CoreEvents.CORE_LOADING_CHANGED, <CoreEventLoadingChangedData> {
loaded: loaded,
uniqueId: this.uniqueId,
});
this.content?.nativeElement.classList.toggle('core-loading-content', loaded);
if (!this.loaded && loaded) {
this.loaded = true; // Only comes true once.
this.firstLoadedPromise.resolve(this.uniqueId);
}
// Event has been deprecated since app 4.0.
CoreEvents.trigger(CoreEvents.CORE_LOADING_CHANGED, <CoreEventLoadingChangedData> {
loaded: true,
uniqueId: this.uniqueId,
});
}
/**

17
src/core/directives/collapsible-header.ts
View File

@ -228,7 +228,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
throw new Error('[collapsible-header] Couldn\'t create floating title');
}
this.page.classList.remove('is-active');
this.page.classList.remove('collapsible-header-page-is-active');
CoreUtils.nextTick();
// Add floating title and measure initial position.
@ -293,7 +293,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
.forEach(([property, value]) => floatingTitle.style.setProperty(property, value as string));
// Activate styles.
this.page.classList.add('is-active');
this.page.classList.add('collapsible-header-page-is-active');
this.floatingTitle = floatingTitle;
this.scrollingHeight = originalTitleBoundingBox.top - collapsedHeaderTitleBoundingBox.top;
@ -376,7 +376,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
}
this.page.style.setProperty('--collapsible-header-progress', enable ? '0' : '1');
this.page.classList.toggle('is-collapsed', !enable);
this.page.classList.toggle('collapsible-header-page-is-collapsed', !enable);
}
/**
@ -409,11 +409,12 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
!collapsedFontStyles ||
!floatingTitle
) {
page?.classList.remove('collapsible-header-page-is-active');
throw new Error('[collapsible-header] Couldn\'t set up scrolling');
}
this.isWithinContent = content.contains(expandedHeader);
page.classList.toggle('is-within-content', this.isWithinContent);
page.classList.toggle('collapsible-header-page-is-within-content', this.isWithinContent);
this.setEnabled(this.enabled);
Object
@ -440,8 +441,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
: CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1);
page.style.setProperty('--collapsible-header-progress', `${progress}`);
page.classList.toggle('is-frozen', frozen);
page.classList.toggle('is-collapsed', progress === 1);
page.classList.toggle('collapsible-header-page-is-frozen', frozen);
page.classList.toggle('collapsible-header-page-is-collapsed', progress === 1);
Object
.entries(progress > .5 ? collapsedFontStyles : expandedFontStyles)
@ -455,7 +456,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
return;
}
if (page.classList.contains('is-frozen')) {
if (page.classList.contains('collapsible-header-page-is-frozen')) {
return;
}
@ -464,7 +465,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
const collapse = progress > 0.5;
page.style.setProperty('--collapsible-header-progress', collapse ? '1' : '0');
page.classList.toggle('is-collapsed', collapse);
page.classList.toggle('collapsible-header-page-is-collapsed', collapse);
if (collapse && this.scrollingHeight && this.scrollingHeight > 0 && scrollTop < this.scrollingHeight) {
this.content?.scrollToPoint(null, this.scrollingHeight);

8
src/core/features/course/components/course-index/course-index.html
View File

@ -24,7 +24,7 @@
</ion-item>
<ng-container *ngIf="allSectionId != section.id">
<ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button
[class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0"
[class.item-current]="selectedId === section.id" [class.item-dimmed]="!section.visible"
[class.item-hightlighted]="section.highlighted" detail="false" sticky="true">
<ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start"
class="expandable-status-icon" (click)="toggleExpand($event, section)"
@ -40,9 +40,13 @@
</core-format-text>
</h2>
</ion-label>
<ion-badge *ngIf="section.highlighted && highlighted">{{highlighted}}</ion-badge>
<ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
<ion-icon name="fas-lock" *ngIf="section.availabilityinfo" slot="end" class="restricted"
[attr.aria-label]="'core.restricted' | translate"></ion-icon>
<ion-icon name="fas-eye-slash" *ngIf="!section.visible && !section.uservisible" slot="end" class="restricted"
[attr.aria-label]="'core.notavailable' | translate"></ion-icon>
<ion-icon name="fas-eye-slash" *ngIf="!section.visible && section.uservisible" slot="end" class="restricted"
[attr.aria-label]="'core.course.hiddenfromstudents' | translate"></ion-icon>
</ion-item>
<ng-container *ngIf="section.expanded">
<ng-container *ngFor="let module of section.modules">

7
src/core/features/course/components/course-index/course-index.ts
View File

@ -78,8 +78,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
// Clone sections to add information.
this.sectionsToRender = this.sections
.filter((section) => !section.hiddenbynumsections &&
section.id != CoreCourseProvider.STEALTH_MODULES_SECTION_ID &&
section.uservisible !== false)
section.id != CoreCourseProvider.STEALTH_MODULES_SECTION_ID)
.map((section) => {
const modules = section.modules
.filter((module) => module.visibleoncoursepage !== 0 && !module.noviewlink)
@ -103,6 +102,8 @@ export class CoreCourseCourseIndexComponent implements OnInit {
id: section.id,
name: section.name,
availabilityinfo: !!section.availabilityinfo,
visible: !!section.visible,
uservisible: section.uservisible !== false,
expanded: section.id === this.selectedId,
highlighted: currentSectionData.section.id === section.id,
hasVisibleModules: modules.length > 0,
@ -160,6 +161,8 @@ type CourseIndexSection = {
expanded: boolean;
hasVisibleModules: boolean;
availabilityinfo: boolean;
visible: boolean;
uservisible: boolean;
modules: {
id: number;
course: number;

3
src/core/singletons/events.ts
View File

@ -117,6 +117,9 @@ export class CoreEvents {
static readonly APP_LAUNCHED_URL = 'app_launched_url'; // App opened with a certain URL (custom URL scheme).
static readonly FILE_SHARED = 'file_shared';
static readonly KEYBOARD_CHANGE = 'keyboard_change';
/**
* @deprecated since app 4.0. Use CoreComponentsRegistry promises instead.
*/
static readonly CORE_LOADING_CHANGED = 'core_loading_changed';
static readonly ORIENTATION_CHANGE = 'orientation_change';
static readonly SEND_ON_ENTER_CHANGED = 'send_on_enter_changed';

10
src/theme/components/collapsible-header.scss
View File

@ -25,7 +25,7 @@
opacity: 0;
}
&:not(.is-collapsed) .collapsible-header-collapsed {
&:not(.collapsible-header-page-is-collapsed) .collapsible-header-collapsed {
--core-header-toolbar-border-width: 0;
ion-toolbar {
--background: transparent;
@ -37,11 +37,11 @@
}
&.is-active.is-collapsed.is-within-content ion-header.core-header-shadow {
&.collapsible-header-page-is-active.collapsible-header-page-is-collapsed.collapsible-header-page-is-within-content ion-header.core-header-shadow {
--core-header-shadow: var(--drop-shadow-bottom, none);
}
&.is-active {
&.collapsible-header-page-is-active {
.collapsible-header-expanded {
height: calc(var(--collapsible-header-expanded-height) * (1 - var(--collapsible-header-progress)));
@ -75,7 +75,7 @@
}
&.is-active.is-within-content {
&.collapsible-header-page-is-active.collapsible-header-page-is-within-content {
ion-content {
--offset-top: var(--collapsible-header-collapsed-height) !important;
@ -88,7 +88,7 @@
}
&.is-active.is-frozen {
&.collapsible-header-page-is-active.collapsible-header-page-is-frozen {
.collapsible-header-floating-title {
display: none;