From 926f2508d127c1cb51c2f569babb5a68ccc11357 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 9 Feb 2022 22:43:09 +0100 Subject: [PATCH] MOBILE-3814 module: Add completion basic mode to use it bellow title --- .../core-course-module-completion.html | 81 ++++++++----- .../module-completion/module-completion.ts | 18 ++- .../core-course-module-manual-completion.html | 35 +++--- .../module-manual-completion.ts | 7 +- .../components/module/core-course-module.html | 26 ++-- .../course/components/module/module.scss | 4 - .../course/components/module/module.ts | 13 +- src/core/features/course/services/course.ts | 5 + src/theme/theme.base.scss | 114 ++++++++++-------- 9 files changed, 169 insertions(+), 134 deletions(-) diff --git a/src/core/features/course/components/module-completion/core-course-module-completion.html b/src/core/features/course/components/module-completion/core-course-module-completion.html index a96265860..d449ff532 100644 --- a/src/core/features/course/components/module-completion/core-course-module-completion.html +++ b/src/core/features/course/components/module-completion/core-course-module-completion.html @@ -1,38 +1,63 @@ -
+ + +
- - - - - {{ 'core.course.completion_automatic:done' | translate }} {{ rule.rulevalue.description }} - - + + + + + + {{ rule.rulevalue.description }} + + - - - {{ 'core.course.completion_automatic:failed' | translate }} {{ rule.rulevalue.description }} - - + + + + {{ rule.rulevalue.description }} + + - + + + + {{ rule.rulevalue.description }} + + + + + + + + + + {{ rule.rulevalue.description }} + + + +
+ + + - {{ 'core.course.completion_automatic:todo' | translate }} {{ rule.rulevalue.description }} + + {{ 'core.course.todo' | translate }} + + + {{'core.course.done' | translate }} + + + + {{'core.course.failed' | translate }} + - - - - - {{ 'core.course.completion_automatic:todo' | translate }} {{ rule.rulevalue.description }} - - - -
- - + + + diff --git a/src/core/features/course/components/module-completion/module-completion.ts b/src/core/features/course/components/module-completion/module-completion.ts index 33fab2dd5..060cdd7dd 100644 --- a/src/core/features/course/components/module-completion/module-completion.ts +++ b/src/core/features/course/components/module-completion/module-completion.ts @@ -15,7 +15,12 @@ import { Component, Input } from '@angular/core'; import { CoreCourseModuleCompletionBaseComponent } from '@features/course/classes/module-completion'; -import { CoreCourseModuleCompletionStatus, CoreCourseModuleWSRuleDetails } from '@features/course/services/course'; +import { + CoreCourseCompletionMode, + CoreCourseModuleCompletionStatus, + CoreCourseModuleCompletionTracking, + CoreCourseModuleWSRuleDetails, +} from '@features/course/services/course'; import { CoreUser } from '@features/user/services/user'; import { Translate } from '@singletons'; @@ -37,9 +42,11 @@ export class CoreCourseModuleCompletionComponent extends CoreCourseModuleComplet @Input() showCompletionConditions = false; // Whether to show activity completion conditions. @Input() showManualCompletion = false; // Whether to show manual completion. + @Input() mode: CoreCourseCompletionMode = CoreCourseCompletionMode.FULL; // Show full completion status or a basic mode. details?: CompletionRule[]; accessibleDescription: string | null = null; + completionStatus?: CoreCourseModuleCompletionStatus; /** * @inheritdoc @@ -49,6 +56,11 @@ export class CoreCourseModuleCompletionComponent extends CoreCourseModuleComplet return; } + this.completionStatus = !this.completion?.istrackeduser || + this.completion.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE + ? undefined + : this.completion.state; + // Format rules. this.details = await Promise.all(this.completion.details.map(async (rule: CompletionRule) => { rule.statuscomplete = rule.rulevalue.status == CoreCourseModuleCompletionStatus.COMPLETION_COMPLETE || @@ -57,8 +69,8 @@ export class CoreCourseModuleCompletionComponent extends CoreCourseModuleComplet rule.statusincomplete = rule.rulevalue.status == CoreCourseModuleCompletionStatus.COMPLETION_INCOMPLETE; rule.accessibleDescription = null; - if (this.completion!.overrideby) { - const fullName = await CoreUser.getUserFullNameWithDefault(this.completion!.overrideby, this.completion!.courseId); + if (this.completion?.overrideby) { + const fullName = await CoreUser.getUserFullNameWithDefault(this.completion.overrideby, this.completion.courseId); const setByData = { $a: { diff --git a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html index 1720a23d8..50910193b 100644 --- a/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html +++ b/src/core/features/course/components/module-manual-completion/core-course-module-manual-completion.html @@ -1,24 +1,19 @@ -
- + - - - - {{ 'core.course.completion_manual:done' | translate }} - - - - - {{ 'core.course.completion_manual:markdone' | translate }} - - - - - - + + + {{ 'core.course.completion_manual:done' | translate }} + + {{ 'core.course.completion_manual:markdone' | translate }} -
+ + + + {{ 'core.course.completion_manual:markdone' | translate }} + + + diff --git a/src/core/features/course/components/module-manual-completion/module-manual-completion.ts b/src/core/features/course/components/module-manual-completion/module-manual-completion.ts index 6a21680b7..f2468cdab 100644 --- a/src/core/features/course/components/module-manual-completion/module-manual-completion.ts +++ b/src/core/features/course/components/module-manual-completion/module-manual-completion.ts @@ -13,8 +13,7 @@ // limitations under the License. import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChange } from '@angular/core'; -import { CoreCourseCompletionType } from '@features/course/services/course'; - +import { CoreCourseCompletionMode, CoreCourseCompletionType } from '@features/course/services/course'; import { CoreCourseHelper, CoreCourseModuleCompletionData } from '@features/course/services/course-helper'; import { CoreUser } from '@features/user/services/user'; import { Translate } from '@singletons'; @@ -31,6 +30,7 @@ export class CoreCourseModuleManualCompletionComponent implements OnInit, OnChan @Input() completion?: CoreCourseModuleCompletionData; // The completion status. @Input() moduleName?: string; // The name of the module this completion affects. + @Input() mode: CoreCourseCompletionMode = CoreCourseCompletionMode.FULL; // Show full completion status or a basic mode. @Output() completionChanged = new EventEmitter(); // Notify when completion changes. accessibleDescription: string | null = null; @@ -97,6 +97,9 @@ export class CoreCourseModuleManualCompletionComponent implements OnInit, OnChan return; } + event.stopPropagation(); + event.preventDefault(); + await CoreCourseHelper.changeManualCompletion(this.completion, event); // @deprecated MANUAL_COMPLETION_CHANGED is deprecated since 4.0 use COMPLETION_CHANGED instead. diff --git a/src/core/features/course/components/module/core-course-module.html b/src/core/features/course/components/module/core-course-module.html index 5a85d4f1d..2b137539d 100644 --- a/src/core/features/course/components/module/core-course-module.html +++ b/src/core/features/course/components/module/core-course-module.html @@ -18,21 +18,12 @@ [courseId]="module.course" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">

- - - - {{ 'core.course.todo' | translate }} - - - - - {{'core.course.done' | translate }} - - - - {{'core.course.failed' | translate }} - + + + + @@ -76,10 +67,9 @@

- + + [moduleName]="module.name" [moduleId]="module.id" [showCompletionConditions]="showCompletionConditions">
diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss index 9048f93d7..cce3cd2aa 100644 --- a/src/core/features/course/components/module/module.scss +++ b/src/core/features/course/components/module/module.scss @@ -38,10 +38,6 @@ } .core-course-module-info { - ion-badge { - text-align: start; - } - .core-module-availabilityinfo { font-size: 90%; ul { diff --git a/src/core/features/course/components/module/module.ts b/src/core/features/course/components/module/module.ts index fa25f2e50..d3964f732 100644 --- a/src/core/features/course/components/module/module.ts +++ b/src/core/features/course/components/module/module.ts @@ -20,7 +20,7 @@ import { CoreCourseModuleCompletionData, CoreCourseSection, } from '@features/course/services/course-helper'; -import { CoreCourse, CoreCourseModuleCompletionStatus, CoreCourseModuleCompletionTracking } from '@features/course/services/course'; +import { CoreCourse } from '@features/course/services/course'; import { CoreCourseModuleDelegate, CoreCourseModuleHandlerButton } from '@features/course/services/module-delegate'; /** @@ -47,7 +47,6 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy { hasInfo = false; showLegacyCompletion = false; // Whether to show module completion in the old format. showManualCompletion = false; // Whether to show manual completion when completion conditions are disabled. - completionStatus?: CoreCourseModuleCompletionStatus; /** * Component being initialized. @@ -62,19 +61,11 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy { } this.module.handlerData.a11yTitle = this.module.handlerData.a11yTitle ?? this.module.handlerData.title; - this.completionStatus = this.module.completiondata === undefined || - !this.module.completiondata?.istrackeduser || - this.module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE - ? undefined - : this.module.completiondata.state; this.hasInfo = !!( this.module.description || (this.showActivityDates && this.module.dates && this.module.dates.length) || - (this.module.completiondata && - ((this.showManualCompletion && !this.module.completiondata.isautomatic) || - (this.showCompletionConditions && this.module.completiondata.isautomatic)) - ) || + (this.module.completiondata && this.showCompletionConditions && this.module.completiondata.isautomatic) || this.module.completiondata?.offline || (this.module.visible === 0 && (!this.section || this.section.visible)) || (this.module.visible !== 0 && this.module.isStealth) || diff --git a/src/core/features/course/services/course.ts b/src/core/features/course/services/course.ts index fa30f2991..565198a71 100644 --- a/src/core/features/course/services/course.ts +++ b/src/core/features/course/services/course.ts @@ -76,6 +76,11 @@ export enum CoreCourseCompletionType { AUTO = 1, } +export enum CoreCourseCompletionMode { + FULL = 'full', + BASIC = 'basic', +} + /** * Completion tracking valid values. */ diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 1a92c7795..0100acc6b 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -184,44 +184,6 @@ ion-app.ios ion-header ion-title { white-space: normal !important; } -ion-button core-format-text .core-format-text-content { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - line-height: 1.2; -} - -ion-button > * { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -ion-button.ion-text-wrap { - white-space: normal; - core-format-text .core-format-text-content { - white-space: normal; - display: contents; - } - - & > * { - white-space: normal; - } -} - -ion-button.button-outline { - --background: var(--contrast-background); -} - -ion-button ion-spinner { - --color: inherit !important; -} - -ion-button:not(.button-has-icon-only) > ion-icon { - min-width: 20px; -} - @each $color-name, $unused in $colors { .text-#{$color-name}, p.text-#{$color-name} { @@ -293,10 +255,6 @@ ion-icon { } } -ion-button.button-small ion-icon.faicon[slot] { - font-size: 1.5em !important; -} - // Buttons. ion-button, ion-fab-button, @@ -306,10 +264,58 @@ button, min-width: var(--a11y-min-target-size); } +ion-button.button-outline { + --border-width: 1px; + --background: var(--contrast-background); +} + +ion-button.button-solid { + --box-shadow: none; +} + +ion-button core-format-text .core-format-text-content { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + line-height: 1.2; +} + +ion-button > * { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +ion-button.ion-text-wrap { + white-space: normal; + core-format-text .core-format-text-content { + white-space: normal; + display: contents; + } + + & > * { + white-space: normal; + } +} + +ion-button ion-spinner { + --color: inherit !important; +} + +ion-button:not(.button-has-icon-only):not(.button-small) > ion-icon { + min-width: 20px; +} + ion-button.button.button-clear.button-has-icon-only { --border-radius: var(--huge-radius); } +ion-button.button.button-solid, +ion-button.button.button-outline { + --border-radius: var(--small-radius); +} + // Clear buttons will be black. ion-button.button-clear { --primary: var(--primary); @@ -877,12 +883,14 @@ ion-badge { border-radius: var(--big-radius); } -ion-chip { +ion-chip, +ion-button.chip { line-height: 1.1; font-size: 12px; - padding: 4px 8px; min-height: 24px; - height: auto; + text-transform: none; + margin: 4px; + font-weight: normal; ion-icon { font-size: 16px; @@ -890,6 +898,18 @@ ion-chip { @include margin(0, 8px, 0, 0); } + ion-label { + white-space: normal !important; + } +} + +ion-chip { + line-height: 1.1; + font-size: 12px; + padding: 4px 8px; + min-height: 24px; + height: auto; + &.ion-color { background: var(--ion-color-tint); &.chip-outline { @@ -899,9 +919,7 @@ ion-chip { } } - ion-label { - white-space: normal !important; - } + } ion-searchbar {