Merge pull request #4001 from crazyserver/MOBILE-4456

MOBILE-4456 icons: Fix icon colors on some blocks
2024-04-05 15:25:19 +02:00 · 2024-04-05 15:25:19 +02:00 · 6a58fe3fdb
parent 3b98ab8214 d66c748fea
commit 6a58fe3fdb
10 changed files with 27 additions and 9 deletions
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@ -15,7 +15,8 @@
                <ion-card>
                    <ion-item class="core-course-module-handler ion-text-wrap" [detail]="false" (click)="action($event, item)" button>
                        <core-mod-icon slot="start" *ngIf="item.iconUrl" [modicon]="item.iconUrl" [modname]="item.modname"
-                            [componentId]="item.cmid" [showAlt]="false" [purpose]="item.purpose" [isBranded]="item.branded" />
+                            [componentId]="item.cmid" [showAlt]="false" [purpose]="item.purpose" [colorize]="colorizeIcons"
+                            [isBranded]="item.branded" />
                        <ion-label>
                            <!-- Add the icon title so accessibility tools read it. -->
                            <span class="sr-only" *ngIf="item.iconTitle">{{ item.iconTitle }}</span>
--- a/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.ts
+++ b/src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.ts
@ -35,6 +35,7 @@ export class AddonBlockRecentlyAccessedItemsComponent extends CoreBlockBaseCompo

    items: AddonBlockRecentlyAccessedItemsItemCalculatedData[] = [];
    scrollElementId!: string;
+    colorizeIcons = false;

    protected fetchContentDefaultError = 'Error getting recently accessed items data.';

@ -51,6 +52,9 @@ export class AddonBlockRecentlyAccessedItemsComponent extends CoreBlockBaseCompo

        this.scrollElementId = `addon-block-recentlyaccesseditems-scroll-${scrollId}`;

+        // Only colorize icons on 4.0 to 4.3 sites.
+        this.colorizeIcons = !CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('4.4');
+
        super.ngOnInit();
    }

--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@ -22,7 +22,8 @@
                            <ion-col class="addon-block-timeline-activity-time ion-no-padding ion-text-nowrap">
                                <small>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</small>
                                <core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance"
-                                    [modname]="event.modulename" [purpose]="event.purpose" [isBranded]="event.branded" />
+                                    [modname]="event.modulename" [purpose]="event.purpose" [colorize]="colorizeIcons"
+                                    [isBranded]="event.branded" />
                            </ion-col>
                            <ion-col class="addon-block-timeline-activity-name ion-no-padding">
                                <p class="item-heading">
--- a/src/addons/block/timeline/components/events/events.ts
+++ b/src/addons/block/timeline/components/events/events.ts
@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreTextUtils } from '@services/utils/text';
@ -27,7 +27,7 @@ import { AddonBlockTimelineDayEvents } from '@addons/block/timeline/classes/sect
    templateUrl: 'addon-block-timeline-events.html',
    styleUrls: ['events.scss'],
 })
-export class AddonBlockTimelineEventsComponent {
+export class AddonBlockTimelineEventsComponent implements OnInit {

    @Input() events: AddonBlockTimelineDayEvents[] = []; // The events to render.
    @Input() course?: CoreEnrolledCourseDataWithOptions; // Whether to show the course name.
@ -36,6 +36,16 @@ export class AddonBlockTimelineEventsComponent {
    @Input() loadingMore = false; // Whether loading is ongoing.
    @Output() loadMore = new EventEmitter(); // Notify that more events should be loaded.

+    colorizeIcons = false;
+
+    /**
+     * @inheritdoc
+     */
+    ngOnInit(): void {
+        // Only colorize icons on 4.0 to 4.3 sites.
+        this.colorizeIcons = !CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('4.4');
+    }
+
    /**
     * Action clicked.
     *
--- a/src/core/components/mod-icon/mod-icon.scss
+++ b/src/core/components/mod-icon/mod-icon.scss
@ -23,7 +23,7 @@
    background-color: transparent;
    line-height: var(--size);

-    --color: var(--text-color);
+    --color: var(--activity-base-icon-color);

    &.colorize {
        &.version_current {
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@ -61,7 +61,7 @@
                                    <ion-icon class="completioninfo completion_complete" name="fas-circle"
                                        *ngIf="module.completionStatus === 1 || module.completionStatus === 2" color="success" slot="start"
                                        [attr.aria-label]="'core.course.done' | translate" />
-                                    <ion-icon class="completioninfo completion_fail" name="fas-circle" *ngIf="module.completionStatus === 3"
+                                    <ion-icon class="completioninfo completion_fail" name="fas-xmark" *ngIf="module.completionStatus === 3"
                                        color="danger" slot="start" [attr.aria-label]="'core.course.failed' | translate" />
                                    <ion-label>
                                        <p class="item-heading">
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/src/core/features/sitehome/pages/index/index.html
@ -68,7 +68,7 @@
 <ng-template #categories>
    <ion-card>
        <ion-item button class="ion-text-wrap" (click)="openCourseCategories()">
-            <ion-icon name="fas-folder" slot="start" aria-hidden="true" />
+            <ion-icon name="far-folder" slot="start" aria-hidden="true" />
            <ion-label>
                <p class="item-heading">{{ 'core.courses.categories' | translate}}</p>
            </ion-label>
--- a/src/core/features/sitehome/pages/index/index.scss
+++ b/src/core/features/sitehome/pages/index/index.scss
@ -4,8 +4,7 @@ ion-item ion-icon {
    display: inline-block;
    border-radius: var(--mdl-shape-borderRadius-xs);
    padding: 4px;
-    background-color: var(--gray-100);
-    color: var(--gray-900);
+    color: var(--text-color);
    line-height: var(--size);
    --margin-end: 8px;
    @include margin-horizontal(null, var(--margin-end));
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@ -174,4 +174,6 @@ html.dark {
    --core-table-odd-cell-hover: var(--gray-600);
    --core-table-even-cell-background: var(--gray-900);
    --core-table-even-cell-hover: var(--gray-700);
+
+    --activity-base-icon-color: var(--white);
 }
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@ -204,6 +204,7 @@ html {
        --core-dd-question-color-#{$i + 1}-contrast: #{get_contrast_color(nth($core-dd-question-colors, $i + 1))};
    }

+    --activity-base-icon-color: var(--gray-900);
    // Make activtity colours available for custom modules.
    @each $type, $value in $activity-icon-colors {
        --activity#{$type}: #{$value};