From 851d33d3803536fbd4307d6d6eeaa8272f557b19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Tue, 18 Jan 2022 09:58:37 +0100 Subject: [PATCH] MOBILE-3811 mod: Use new module icons on 4.0+ sites --- src/core/components/mod-icon/mod-icon.scss | 19 +++++++++-- src/core/components/mod-icon/mod-icon.ts | 33 +++++++++++++++++-- .../components/module/core-course-module.html | 2 +- .../course/components/module/module.scss | 8 ++--- src/core/features/course/services/course.ts | 13 +++++--- src/core/lang.json | 3 -- src/theme/globals.variables.scss | 10 ++++-- src/theme/theme.light.scss | 5 +++ 8 files changed, 73 insertions(+), 20 deletions(-) diff --git a/src/core/components/mod-icon/mod-icon.scss b/src/core/components/mod-icon/mod-icon.scss index e8cbb5754..a5b781a26 100644 --- a/src/core/components/mod-icon/mod-icon.scss +++ b/src/core/components/mod-icon/mod-icon.scss @@ -1,3 +1,5 @@ +@import "~theme/globals"; + :host { --size: var(--module-icon-size); --margin-end: 0px; @@ -6,6 +8,19 @@ margin-top: var(--margin-vertical); margin-bottom: var(--margin-vertical); margin-right: var(--margin-end); + border-radius: 4px; + padding: 0.7rem; + background-color: $gray-lighter; + + @each $type, $value in $activity-icon-colors { + &.#{$type} { + background-color: var(--activity#{$type}); + img { + filter: brightness(0) invert(1); + } + } + } + } img { @@ -23,7 +38,7 @@ img { :host-context(ion-item) { --margin-vertical: 12px; - --margin-end: 32px; + --margin-end: 1rem; } :host-context(ion-card ion-item) { @@ -34,4 +49,4 @@ img { :host-context([dir=rtl]) { margin-right: unset; margin-left: var(--margin-end); -} \ No newline at end of file +} diff --git a/src/core/components/mod-icon/mod-icon.ts b/src/core/components/mod-icon/mod-icon.ts index c9c6b70ac..7f0262038 100644 --- a/src/core/components/mod-icon/mod-icon.ts +++ b/src/core/components/mod-icon/mod-icon.ts @@ -12,8 +12,11 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, Input, OnChanges, OnInit, SimpleChange } from '@angular/core'; +import { CoreConstants } from '@/core/constants'; +import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChange } from '@angular/core'; import { CoreCourse } from '@features/course/services/course'; +import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate'; +import { CoreSites } from '@services/sites'; const assetsPath = 'assets/img/'; const fallbackModName = 'external-tool'; @@ -38,11 +41,31 @@ export class CoreModIconComponent implements OnInit, OnChanges { isLocalUrl = true; linkIconWithComponent = false; + protected legacyIcon = true; // @deprecatedonmoodle since Moodle 3.11. + + constructor(protected el: ElementRef) { } + /** * @inheritdoc */ async ngOnInit(): Promise { + if (!this.modname && this.modicon) { + // Guess module from the icon url. + const matches = this.modicon.match('/theme/image.php/[^/]+/([^/]+)/[-0-9]*/'); + this.modname = (matches && matches[1]) || ''; + } + this.modNameTranslated = this.modname ? CoreCourse.translateModuleName(this.modname) || '' : ''; + if (CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('4.0')) { + this.legacyIcon = false; + const purposeClass = + CoreCourseModuleDelegate.supportsFeature(this.modname, CoreConstants.FEATURE_MOD_PURPOSE, ''); + + if (purposeClass != '') { + const element: HTMLElement = this.el.nativeElement; + element.classList.add(purposeClass); + } + } this.setIcon(); } @@ -82,7 +105,13 @@ export class CoreModIconComponent implements OnInit, OnChanges { ? fallbackModName : this.modname; - this.icon = assetsPath + moduleName + '.svg'; + let path = assetsPath + 'mod/'; + if (this.legacyIcon) { + // @deprecatedonmoodle since Moodle 3.11. + path = assetsPath + 'mod_legacy/'; + } + + this.icon = path + moduleName + '.svg'; } } 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 fc9db736c..8a50cf3b3 100644 --- a/src/core/features/course/components/module/core-course-module.html +++ b/src/core/features/course/components/module/core-course-module.html @@ -58,7 +58,7 @@ diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss index aaeaa86a3..2253562e5 100644 --- a/src/core/features/course/components/module/module.scss +++ b/src/core/features/course/components/module/module.scss @@ -31,7 +31,7 @@ } } - .core-module-module-info { + .core-course-module-info { ion-badge { text-align: start; } @@ -51,7 +51,7 @@ clear: both; } - .core-module-main-item + .core-module-module-info ion-label { + .core-module-main-item + .core-course-module-info ion-label { margin-top: 0px; } @@ -59,8 +59,4 @@ --inner-border-width: 0px; } - .core-module-module-info ion-label { - margin-inline-start: 50px; - } - } diff --git a/src/core/features/course/services/course.ts b/src/core/features/course/services/course.ts index cd482f5ca..24984dfc3 100644 --- a/src/core/features/course/services/course.ts +++ b/src/core/features/course/services/course.ts @@ -125,9 +125,8 @@ export class CoreCourseProvider { static readonly COMPONENT = 'CoreCourse'; readonly CORE_MODULES = [ - 'assign', 'assignment', 'book', 'chat', 'choice', 'data', 'database', 'date', 'external-tool', - 'feedback', 'file', 'folder', 'forum', 'glossary', 'ims', 'imscp', 'label', 'lesson', 'lti', 'page', 'quiz', - 'resource', 'scorm', 'survey', 'url', 'wiki', 'workshop', 'h5pactivity', 'bigbluebuttonbn', + 'assign', 'bigbluebuttonbn', 'book', 'chat', 'choice', 'data', 'feedback', 'folder', 'forum', 'glossary', 'h5pactivity', + 'imscp', 'label', 'lesson', 'lti', 'page', 'quiz', 'resource', 'scorm', 'survey', 'url', 'wiki', 'workshop', ]; protected logger: CoreLogger; @@ -726,8 +725,14 @@ export class CoreCourseProvider { moduleName = 'external-tool'; } + let path = 'assets/img/mod/'; + if (!CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('4.0')) { + // @deprecatedonmoodle since Moodle 3.11. + path = 'assets/img/mod_legacy/'; + } + // Use default icon on core modules. - return 'assets/img/mod/' + moduleName + '.svg'; + return path + moduleName + '.svg'; } /** diff --git a/src/core/lang.json b/src/core/lang.json index 64fcba1f9..584f0d5a6 100644 --- a/src/core/lang.json +++ b/src/core/lang.json @@ -164,12 +164,10 @@ "minutes": "minutes", "misc": "Miscellaneous", "mod_assign": "Assignment", - "mod_assignment": "Assignment 2.2 (Disabled)", "mod_book": "Book", "mod_chat": "Chat", "mod_choice": "Choice", "mod_data": "Database", - "mod_database": "Database", "mod_external-tool": "External tool", "mod_feedback": "Feedback", "mod_file": "File", @@ -177,7 +175,6 @@ "mod_forum": "Forum", "mod_glossary": "Glossary", "mod_h5pactivity": "H5P", - "mod_ims": "IMS content package", "mod_imscp": "IMS content package", "mod_label": "Label", "mod_lesson": "Lesson", diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index 3a1dbff38..4e1d7e57a 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -139,5 +139,11 @@ $core-user-hide-siteinfo: $core-more-hide-siteinfo !default; $core-user-hide-sitename: $core-more-hide-sitename !default; $core-user-hide-siteurl: $core-more-hide-siteurl !default; - - +$activity-icon-colors: ( + administration: #5d63f6, + assessment: #eb66a2, + collaboration: #f7634d, + communication: #11a676, + content: #399be2, + interface: #a378ff +) !default; diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index a4b0b935e..f4d379c0e 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -316,4 +316,9 @@ --core-dd-question-color-#{$i + 1}: #{nth($core-dd-question-colors, $i + 1)}; --core-dd-question-color-#{$i + 1}-contrast: #{get_contrast_color(nth($core-dd-question-colors, $i + 1))}; } + + // Make activtity colours available for custom modules. + @each $type, $value in $activity-icon-colors { + --activity#{$type}: #{$value}; + } }