Merge pull request #4001 from crazyserver/MOBILE-4456

MOBILE-4456 icons: Fix icon colors on some blocks
main
Dani Palou 2024-04-05 15:25:19 +02:00 committed by GitHub
commit 6a58fe3fdb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 27 additions and 9 deletions

View File

@ -15,7 +15,8 @@
<ion-card> <ion-card>
<ion-item class="core-course-module-handler ion-text-wrap" [detail]="false" (click)="action($event, item)" button> <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" <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> <ion-label>
<!-- Add the icon title so accessibility tools read it. --> <!-- Add the icon title so accessibility tools read it. -->
<span class="sr-only" *ngIf="item.iconTitle">{{ item.iconTitle }}</span> <span class="sr-only" *ngIf="item.iconTitle">{{ item.iconTitle }}</span>

View File

@ -35,6 +35,7 @@ export class AddonBlockRecentlyAccessedItemsComponent extends CoreBlockBaseCompo
items: AddonBlockRecentlyAccessedItemsItemCalculatedData[] = []; items: AddonBlockRecentlyAccessedItemsItemCalculatedData[] = [];
scrollElementId!: string; scrollElementId!: string;
colorizeIcons = false;
protected fetchContentDefaultError = 'Error getting recently accessed items data.'; protected fetchContentDefaultError = 'Error getting recently accessed items data.';
@ -51,6 +52,9 @@ export class AddonBlockRecentlyAccessedItemsComponent extends CoreBlockBaseCompo
this.scrollElementId = `addon-block-recentlyaccesseditems-scroll-${scrollId}`; 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(); super.ngOnInit();
} }

View File

@ -22,7 +22,8 @@
<ion-col class="addon-block-timeline-activity-time ion-no-padding ion-text-nowrap"> <ion-col class="addon-block-timeline-activity-time ion-no-padding ion-text-nowrap">
<small>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</small> <small>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</small>
<core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance" <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>
<ion-col class="addon-block-timeline-activity-name ion-no-padding"> <ion-col class="addon-block-timeline-activity-name ion-no-padding">
<p class="item-heading"> <p class="item-heading">

View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // 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 { CoreSites } from '@services/sites';
import { CoreDomUtils } from '@services/utils/dom'; import { CoreDomUtils } from '@services/utils/dom';
import { CoreTextUtils } from '@services/utils/text'; import { CoreTextUtils } from '@services/utils/text';
@ -27,7 +27,7 @@ import { AddonBlockTimelineDayEvents } from '@addons/block/timeline/classes/sect
templateUrl: 'addon-block-timeline-events.html', templateUrl: 'addon-block-timeline-events.html',
styleUrls: ['events.scss'], styleUrls: ['events.scss'],
}) })
export class AddonBlockTimelineEventsComponent { export class AddonBlockTimelineEventsComponent implements OnInit {
@Input() events: AddonBlockTimelineDayEvents[] = []; // The events to render. @Input() events: AddonBlockTimelineDayEvents[] = []; // The events to render.
@Input() course?: CoreEnrolledCourseDataWithOptions; // Whether to show the course name. @Input() course?: CoreEnrolledCourseDataWithOptions; // Whether to show the course name.
@ -36,6 +36,16 @@ export class AddonBlockTimelineEventsComponent {
@Input() loadingMore = false; // Whether loading is ongoing. @Input() loadingMore = false; // Whether loading is ongoing.
@Output() loadMore = new EventEmitter(); // Notify that more events should be loaded. @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. * Action clicked.
* *

View File

@ -23,7 +23,7 @@
background-color: transparent; background-color: transparent;
line-height: var(--size); line-height: var(--size);
--color: var(--text-color); --color: var(--activity-base-icon-color);
&.colorize { &.colorize {
&.version_current { &.version_current {

View File

@ -61,7 +61,7 @@
<ion-icon class="completioninfo completion_complete" name="fas-circle" <ion-icon class="completioninfo completion_complete" name="fas-circle"
*ngIf="module.completionStatus === 1 || module.completionStatus === 2" color="success" slot="start" *ngIf="module.completionStatus === 1 || module.completionStatus === 2" color="success" slot="start"
[attr.aria-label]="'core.course.done' | translate" /> [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" /> color="danger" slot="start" [attr.aria-label]="'core.course.failed' | translate" />
<ion-label> <ion-label>
<p class="item-heading"> <p class="item-heading">

View File

@ -68,7 +68,7 @@
<ng-template #categories> <ng-template #categories>
<ion-card> <ion-card>
<ion-item button class="ion-text-wrap" (click)="openCourseCategories()"> <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> <ion-label>
<p class="item-heading">{{ 'core.courses.categories' | translate}}</p> <p class="item-heading">{{ 'core.courses.categories' | translate}}</p>
</ion-label> </ion-label>

View File

@ -4,8 +4,7 @@ ion-item ion-icon {
display: inline-block; display: inline-block;
border-radius: var(--mdl-shape-borderRadius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
padding: 4px; padding: 4px;
background-color: var(--gray-100); color: var(--text-color);
color: var(--gray-900);
line-height: var(--size); line-height: var(--size);
--margin-end: 8px; --margin-end: 8px;
@include margin-horizontal(null, var(--margin-end)); @include margin-horizontal(null, var(--margin-end));

View File

@ -174,4 +174,6 @@ html.dark {
--core-table-odd-cell-hover: var(--gray-600); --core-table-odd-cell-hover: var(--gray-600);
--core-table-even-cell-background: var(--gray-900); --core-table-even-cell-background: var(--gray-900);
--core-table-even-cell-hover: var(--gray-700); --core-table-even-cell-hover: var(--gray-700);
--activity-base-icon-color: var(--white);
} }

View File

@ -204,6 +204,7 @@ html {
--core-dd-question-color-#{$i + 1}-contrast: #{get_contrast_color(nth($core-dd-question-colors, $i + 1))}; --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. // Make activtity colours available for custom modules.
@each $type, $value in $activity-icon-colors { @each $type, $value in $activity-icon-colors {
--activity#{$type}: #{$value}; --activity#{$type}: #{$value};