Merge pull request #3093 from crazyserver/MOBILE-3814

Mobile 3814
2022-02-04 10:54:20 +01:00 · 2022-02-04 10:54:20 +01:00 · c70019baab
parent ab99eb6998 857679a89d
commit c70019baab
7 changed files with 84 additions and 42 deletions
--- a/src/core/components/progress-bar/core-progress-bar.html
+++ b/src/core/components/progress-bar/core-progress-bar.html
@ -8,4 +8,4 @@
    </div>
 </ng-container>

-<ion-progress-bar *ngIf="progress < 0" type="indeterminate"></ion-progress-bar>
+<ion-progress-bar *ngIf="progress < 0" [color]="color" type="indeterminate"></ion-progress-bar>
--- a/src/core/components/progress-bar/progress-bar.scss
+++ b/src/core/components/progress-bar/progress-bar.scss
@ -1,13 +1,27 @@
+@import "~theme/globals";
+
 :host {
    display: flex;
    width: 100%;

    --line-height: 40px;
    --bar-margin: 16px 0;
+    --height: var(--core-progressbar-height);
+
+    --text-color: var(--core-progressbar-text-color);
+    --progressbar-color: var(--core-progressbar-color);
+    --progressbar-background: var(--core-progressbar-background);
+
+    @each $color-name, $unused in $colors {
+        &.ion-color-#{$color-name} {
+            --progressbar-color: var(--#{$color-name});
+            --progressbar-background: var(--#{$color-name}-tint);
+        }
+    }

    .core-progress-text {
        line-height: var(--line-height);
-        font-size: 1rem;
+        font-size: 0.9rem;
        color: var(--text-color);
        width: 55px;
        text-align: center;
@ -24,22 +38,28 @@
        flex: 1;

        &[value]::-webkit-progress-bar {
-            background-color: var(--background);
-            border-radius: 0;
+            background-color: var(--progressbar-background);
+            border-radius: var(--height);
            border: 0;
            box-shadow: none;
        }

        &[value]::-webkit-progress-value {
-            background-color: var(--color);
-            border-radius: 0;
+            background-color: var(--progressbar-color);
+            border-radius: var(--height);
        }
    }

    ion-progress-bar {
-        --progress-background: var(--color);
+        --progress-background: var(--progressbar-color);
+        --buffer-background: var(--progressbar-background);
+        border-radius: var(--height);
        height: var(--height);
        margin-top: calc((var(--line-height) - var(--height)) /2);
        margin-bottom: calc((var(--line-height) - var(--height)) /2);
+
+        &::part(progress) {
+            border-radius: var(--height);
+        }
    }
 }
--- a/src/core/components/progress-bar/progress-bar.ts
+++ b/src/core/components/progress-bar/progress-bar.ts
@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy, ElementRef, OnInit } from '@angular/core';
 import { SafeStyle } from '@angular/platform-browser';
 import { DomSanitizer, Translate } from '@singletons';

@ -28,22 +28,44 @@ import { DomSanitizer, Translate } from '@singletons';
    styleUrls: ['progress-bar.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CoreProgressBarComponent implements OnChanges {
+export class CoreProgressBarComponent implements OnInit, OnChanges {

    @Input() progress!: number | string; // Percentage from 0 to 100. Negative number will show an indeterminate progress bar.
    @Input() text?: string; // Percentage in text to be shown at the right. If not defined, progress will be used.
    @Input() a11yText?: string; // Accessibility text to read before the percentage.
    @Input() ariaDescribedBy?: string; // ID of the element that described the progress, if any.
+    @Input() color = '';

    width?: SafeStyle;
    progressBarValueText?: string;

    protected textSupplied = false;
+    protected element: HTMLElement;
+
+    constructor(elementRef: ElementRef) {
+        this.element = elementRef.nativeElement;
+    }

    /**
-     * Detect changes on input properties.
+     * @inheritdoc
+     */
+    ngOnInit(): void {
+        if (this.color) {
+            this.element.classList.add('ion-color', 'ion-color-' + this.color);
+        }
+    }
+
+    /**
+     * @inheritdoc
     */
    ngOnChanges(changes: { [name: string]: SimpleChange }): void {
+        if (changes.color) {
+            this.element.classList.remove('ion-color', 'ion-color-' + changes.color.previousValue);
+            if (changes.color.currentValue) {
+                this.element.classList.add('ion-color', 'ion-color-' + changes.color.currentValue);
+            }
+        }
+
        if (changes.text && changes.text.currentValue !== undefined) {
            // User provided a custom text, don't use default.
            this.textSupplied = true;
--- a/src/core/features/course/components/course-index/course-index.ts
+++ b/src/core/features/course/components/course-index/course-index.ts
@ -55,18 +55,19 @@ export class CoreCourseCourseIndexComponent implements OnInit {
     * @inheritdoc
     */
    async ngOnInit(): Promise<void> {
-
-        if (!this.course || !this.sections || !this.course.enablecompletion || !('courseformatoptions' in this.course) ||
-                !this.course.courseformatoptions) {
+        if (!this.course || !this.sections) {
            this.closeModal();

            return;
        }

-        const formatOptions = CoreUtils.objectToKeyValueMap(this.course.courseformatoptions, 'name', 'value');
+        let completionEnabled = !!this.course.enablecompletion;
+        if (completionEnabled && 'courseformatoptions' in this.course && this.course.courseformatoptions) {
+            const formatOptions = CoreUtils.objectToKeyValueMap(this.course.courseformatoptions, 'name', 'value');

-        if (!formatOptions || formatOptions.completionusertracked === false) {
-            return;
+            if (formatOptions) {
+                completionEnabled = !!formatOptions.completionusertracked;
+            }
        }

        const currentSection = await CoreCourseFormatDelegate.getCurrentSection(this.course, this.sections);
@ -85,7 +86,7 @@ export class CoreCourseCourseIndexComponent implements OnInit {
                const modules = section.modules
                    .filter((module) => module.visibleoncoursepage !== 0 && !module.noviewlink)
                    .map((module) => {
-                        const completionStatus = module.completiondata === undefined ||
+                        const completionStatus = !completionEnabled || module.completiondata === undefined ||
                        module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE
                            ? undefined
                            : module.completiondata.state;
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@ -723,10 +723,6 @@ ion-card {
    }
 }

-ion-chip.ion-color {
-    background: var(--ion-color-tint);
-}
-
 .core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation div {
    display: inline !important;
 }
@ -852,8 +848,16 @@ ion-select-popover ion-item.core-select-option-title {

 ion-chip {
    line-height: 1.1;
-    border-radius: var(--medium-radius);
    @include padding-horizontal(16px);
+
+    &.ion-color {
+        background: var(--ion-color-tint);
+        &.chip-outline {
+            background-color: transparent;
+            border-color: var(--ion-color-base);
+            color: var(--ion-color-base);
+        }
+    }
 }

 ion-searchbar {
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@ -54,7 +54,7 @@

    --core-bottom-tabs-badge-text-color: var(--brand-contrast);
    --core-bottom-tabs-background: var(--gray-900);
-    --core-bottom-tabs-color: var(--medium);
+    --core-bottom-tabs-color: var(--gray-200);

    ion-action-sheet {
        .action-sheet-cancel {
@ -73,7 +73,7 @@
    --core-tab-border-color: var(--gray-200);
    --core-tab-color-active: var(--dark);

-    --core-progressbar-text-color: var(--light);
+    --core-progressbar-text-color: var(--gray-100);

    --ion-item-background: #{$ion-item-background-dark};
    --ion-item-detail-icon-color: var(--white);
@ -118,8 +118,8 @@
    --addon-messages-message-mine-bg: var(--gray-700);
    --addon-messages-message-mine-activated-bg: var(--gray-600);
    --addon-messages-discussion-badge: var(--primary);
-    --addon-messages-discussion-badge-text: var(--dark);
+    --addon-messages-discussion-badge-text: var(--gray-100);

    --addon-forum-border-color: var(--gray-500);
-    --addon-forum-highlight-color: var(--medium);
+    --addon-forum-highlight-color: var(--gray-200);
 }
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@ -100,9 +100,9 @@

    --core-bottom-tabs-background: var(--white);
    --core-bottom-tabs-color: var(--gray-700);
-    --core-bottom-tabs-color-selected: var(--brand-color);
+    --core-bottom-tabs-color-selected: var(--brand);
    --core-bottom-tabs-background-selected: transparent;
-    --core-bottom-tabs-badge-color: var(--brand-color);
+    --core-bottom-tabs-badge-color: var(--brand);
    --core-bottom-tabs-badge-text-color: var(--brand-contrast);
    --bottom-tabs-size: 56px;
    ion-tab-bar.mainmenu-tabs {
@ -120,7 +120,7 @@
    --core-header-toolbar-button-image-size: 44px;
    --core-header-toolbar-background: var(--white);
    --core-header-toolbar-border-width: 3px;
-    --core-header-toolbar-border-color: var(--brand-color);
+    --core-header-toolbar-border-color: var(--brand);
    --core-header-toolbar-color: var(--gray-900);
    --core-header-toolbar-height: 56px;
    html.ios {
@ -161,7 +161,7 @@
    ion-action-sheet {
        --button-color: var(--ion-text-color);
        --button-color-selected: var(--ion-text-color);
-        --title-border-color: var(--brand-color);
+        --title-border-color: var(--brand);

        .action-sheet-title {
            --color: var(--ion-text-color);
@ -183,7 +183,7 @@
    --core-tab-color: var(--subdued-text-color);
    --core-tab-border-color: var(--stroke);
    --core-tab-color-active: var(--dark);
-    --core-tab-border-color-active: var(--brand-color);
+    --core-tab-border-color-active: var(--brand);
    --core-tab-font-weight-active: normal;
    --core-tabs-height: 56px;
    core-tabs, core-tabs-outlet {
@ -197,22 +197,17 @@
        }
    }

-    --core-loading-spinner: var(--primary);
-    ion-spinner {
+    --core-loading-spinner: var(--brand);
+    ion-spinner, ion-refresher {
        --ion-color-base: var(--core-loading-spinner);
+        --ion-color-primary: var(--core-loading-spinner);
        --color: var(--core-loading-spinner);
    }

    --core-progressbar-height: 8px;
-    --core-progressbar-color: var(--brand-color);
+    --core-progressbar-color: var(--brand);
    --core-progressbar-text-color: var(--medium);
-    --core-progressbar-background: var(--light);
-    core-progress-bar {
-        --height: var(--core-progressbar-height);
-        --color: var(--core-progressbar-color);
-        --text-color: var(--core-progressbar-text-color);
-        --background: var(--core-progressbar-background);
-    }
+    --core-progressbar-background: var(--brand-tint);

    --ion-item-background:        #{$ion-item-background};
    --ion-item-detail-icon-color: var(--medium);
@ -267,7 +262,7 @@
    --core-login-input-background: var(--white);
    --core-login-input-color: var(--gray-900);

-    --core-star-color: var(--brand-color);
+    --core-star-color: var(--brand);

    --core-large-avatar-size: 90px;
    --core-avatar-size: 44px;