From efba119a86f6dd5922f64017b28faf24863d3080 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 3 Feb 2022 17:08:53 +0100 Subject: [PATCH 1/3] MOBILE-3814 styles: Style progress bars --- .../progress-bar/core-progress-bar.html | 2 +- .../components/progress-bar/progress-bar.scss | 32 +++++++++++++++---- .../components/progress-bar/progress-bar.ts | 28 ++++++++++++++-- src/theme/theme.base.scss | 8 ++--- src/theme/theme.dark.scss | 8 ++--- src/theme/theme.light.scss | 22 +++++-------- 6 files changed, 68 insertions(+), 32 deletions(-) diff --git a/src/core/components/progress-bar/core-progress-bar.html b/src/core/components/progress-bar/core-progress-bar.html index 7178621c7..dd3335981 100644 --- a/src/core/components/progress-bar/core-progress-bar.html +++ b/src/core/components/progress-bar/core-progress-bar.html @@ -8,4 +8,4 @@ - + diff --git a/src/core/components/progress-bar/progress-bar.scss b/src/core/components/progress-bar/progress-bar.scss index 41584f3f8..0246fad88 100644 --- 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); + } } } diff --git a/src/core/components/progress-bar/progress-bar.ts b/src/core/components/progress-bar/progress-bar.ts index 1b2e1fd56..78d74f287 100644 --- 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; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 9659d2707..e32ecf046 100644 --- 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; } @@ -854,6 +850,10 @@ ion-chip { line-height: 1.1; border-radius: var(--medium-radius); @include padding-horizontal(16px); + + &.ion-color { + background: var(--ion-color-tint); + } } ion-searchbar { diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index e61f69665..0f512966d 100644 --- 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); } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 04f2898b1..44bf3af99 100644 --- 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 { @@ -204,15 +204,9 @@ } --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 +261,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; From b4b7ec2faf6259f0e8456af201654189109dda1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 3 Feb 2022 17:36:12 +0100 Subject: [PATCH 2/3] MOBILE-3814 styles: Style ion chips --- src/theme/theme.base.scss | 6 +++++- src/theme/theme.light.scss | 5 +++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index e32ecf046..71386568d 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -848,11 +848,15 @@ 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); + } } } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 44bf3af99..77c211e36 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -197,9 +197,10 @@ } } - --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); } From 857679a89d17f86c94cb6cbb4eba4c111ce75058 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 4 Feb 2022 10:04:59 +0100 Subject: [PATCH 3/3] MOBILE-3814 course: Fix empty course index --- .../components/course-index/course-index.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/core/features/course/components/course-index/course-index.ts b/src/core/features/course/components/course-index/course-index.ts index b33f61ee3..bbc2601c1 100644 --- 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 { - - 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;