From 8d5e906b1e802efdd950fefa5c8cb7da92c5d4cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 21 Feb 2022 11:31:00 +0100 Subject: [PATCH] MOBILE-3814 module: Change cloud icons to new fontawesome custom icons --- .../services/handlers/course-menu.ts | 2 +- .../fonts/moodle/font-awesome/cloud-done.svg | 1 + .../moodle/font-awesome/cloud-refresh.svg | 1 + .../core-download-refresh.html | 8 ++-- src/core/constants.ts | 6 +-- src/core/directives/fa-icon.ts | 47 ++++++++++++------- .../module-summary/module-summary.html | 4 +- .../core-courses-course-list-item.html | 4 +- .../core-courses-course-progress.html | 2 +- 9 files changed, 44 insertions(+), 31 deletions(-) create mode 100644 src/assets/fonts/moodle/font-awesome/cloud-done.svg create mode 100644 src/assets/fonts/moodle/font-awesome/cloud-refresh.svg diff --git a/src/addons/storagemanager/services/handlers/course-menu.ts b/src/addons/storagemanager/services/handlers/course-menu.ts index 7aa36c6de..74dc8f409 100644 --- a/src/addons/storagemanager/services/handlers/course-menu.ts +++ b/src/addons/storagemanager/services/handlers/course-menu.ts @@ -48,7 +48,7 @@ export class AddonStorageManagerCourseMenuHandlerService implements CoreCourseOp course: CoreCourseAnyCourseDataWithOptions, ): CoreCourseOptionsMenuHandlerData { return { - icon: 'cloud-download', + icon: 'fas-cloud-download-alt', title: 'addon.storagemanager.coursedownloads', page: 'storage/' + course.id, pageParams: { diff --git a/src/assets/fonts/moodle/font-awesome/cloud-done.svg b/src/assets/fonts/moodle/font-awesome/cloud-done.svg new file mode 100644 index 000000000..9f80a5392 --- /dev/null +++ b/src/assets/fonts/moodle/font-awesome/cloud-done.svg @@ -0,0 +1 @@ + diff --git a/src/assets/fonts/moodle/font-awesome/cloud-refresh.svg b/src/assets/fonts/moodle/font-awesome/cloud-refresh.svg new file mode 100644 index 000000000..2e336c793 --- /dev/null +++ b/src/assets/fonts/moodle/font-awesome/cloud-refresh.svg @@ -0,0 +1 @@ + diff --git a/src/core/components/download-refresh/core-download-refresh.html b/src/core/components/download-refresh/core-download-refresh.html index f9580727f..21d380920 100644 --- a/src/core/components/download-refresh/core-download-refresh.html +++ b/src/core/components/download-refresh/core-download-refresh.html @@ -2,19 +2,19 @@ - + - + + name="fam-cloud-done" [attr.aria-label]="(statusTranslatable || 'core.downloaded') | translate" role="status"> diff --git a/src/core/constants.ts b/src/core/constants.ts index 7113598cc..0fcd0ddd3 100644 --- a/src/core/constants.ts +++ b/src/core/constants.ts @@ -93,10 +93,10 @@ export class CoreConstants { static readonly NOT_DOWNLOADABLE = 'notdownloadable'; // Download / prefetch status icon. - static readonly ICON_DOWNLOADED = 'cloud-done'; + static readonly ICON_DOWNLOADED = 'fam-cloud-done'; static readonly ICON_DOWNLOADING = 'spinner'; - static readonly ICON_NOT_DOWNLOADED = 'cloud-download'; - static readonly ICON_OUTDATED = 'fas-redo-alt'; + static readonly ICON_NOT_DOWNLOADED = 'fas-cloud-download-alt'; + static readonly ICON_OUTDATED = 'fam-cloud-refresh'; static readonly ICON_NOT_DOWNLOADABLE = ''; // General download and sync icons. diff --git a/src/core/directives/fa-icon.ts b/src/core/directives/fa-icon.ts index 8a262dd45..9de2de27a 100644 --- a/src/core/directives/fa-icon.ts +++ b/src/core/directives/fa-icon.ts @@ -45,47 +45,58 @@ export class CoreFaIconDirective implements AfterViewInit, OnChanges { * Detect icon name and use svg. */ async setIcon(): Promise { - let library = 'ionic'; + let library = ''; let iconName = this.name; + let font = 'ionicons'; const parts = iconName.split('-', 2); if (parts.length == 2) { switch (parts[0]) { case 'far': library = 'regular'; - iconName = iconName.substring(4); + font = 'font-awesome'; break; case 'fa': case 'fas': library = 'solid'; - iconName = iconName.substring(parts[0].length + 1); + font = 'font-awesome'; break; case 'fab': library = 'brands'; - iconName = iconName.substring(4); + font = 'font-awesome'; + break; + case 'moodle': + library = 'moodle'; + font = 'moodle'; + break; + case 'fam': + library = 'font-awesome'; + font = 'moodle'; break; default: break; } } - if (library != 'ionic') { - const src = `assets/fonts/font-awesome/${library}/${iconName}.svg`; - this.element.setAttribute('src', src); - this.element.classList.add('faicon'); - - if (CoreConstants.BUILD.isDevelopment || CoreConstants.BUILD.isTesting) { - try { - await Http.get(src, { responseType: 'text' }).toPromise(); - } catch (error) { - this.logger.error(`Icon ${this.name} not found`); - } - } - } else { + if (font == 'ionicons') { this.element.removeAttribute('src'); this.logger.warn(`Ionic icon ${this.name} detected`); + + return; } - return; + iconName = iconName.substring(parts[0].length + 1); + + const src = `assets/fonts/${font}/${library}/${iconName}.svg`; + this.element.setAttribute('src', src); + this.element.classList.add('faicon'); + + if (CoreConstants.BUILD.isDevelopment || CoreConstants.BUILD.isTesting) { + try { + await Http.get(src, { responseType: 'text' }).toPromise(); + } catch (error) { + this.logger.error(`Icon ${this.name} not found`); + } + } } /** diff --git a/src/core/features/course/components/module-summary/module-summary.html b/src/core/features/course/components/module-summary/module-summary.html index 820e944ef..6c60ba185 100644 --- a/src/core/features/course/components/module-summary/module-summary.html +++ b/src/core/features/course/components/module-summary/module-summary.html @@ -58,7 +58,7 @@

- + {{ 'addon.storagemanager.downloads' | translate }}

@@ -81,7 +81,7 @@ - + {{ 'core.download' | translate }} diff --git a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html index c63576239..39bf2b5e2 100644 --- a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html +++ b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html @@ -62,8 +62,8 @@ - +

+ name="fam-cloud-done" color="success" role="status" [attr.aria-label]="'core.downloaded' | translate">