EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3838 from crazyserver/MOBILE-4362 

Mobile 4362
main
Dani Palou 2023-10-26 11:39:12 +02:00 committed by GitHub
parent 38f4dcd38b 149720459f
commit 93a9d1912e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 148 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/addons/block/activitymodules/components/activitymodules/activitymodules.scss
View File

@ -1,13 +1,7 @@
:host {
--mod-icon-filter: brightness(0);
core-mod-icon {
background: transparent;
margin: 0;
--filter: var(--mod-icon-filter);
--filter: var(--module-icon-filter);
}
}
:host-context(html.dark) {
--mod-icon-filter: brightness(0) invert(1);
}

2
src/addons/messages/pages/discussion/discussion.html
View File

@ -6,7 +6,7 @@
<ion-title>
<h1>
<img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage" alt=""
onError="this.src='assets/img/group-avatar.svg'" core-external-content role="presentation" [siteId]="siteId || null">
onError="this.src='assets/img/group-avatar.svg'" core-external-content role="presentation" [siteId]="siteId">
<core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember" [linkProfile]="false"
[checkOnline]="otherMember.showonlinestatus">
</core-user-avatar>

2
src/addons/messages/pages/discussion/discussion.ts
View File

@ -58,7 +58,6 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
@ViewChild(IonContent) content?: IonContent;
@ViewChild(CoreInfiniteLoadingComponent) infinite?: CoreInfiniteLoadingComponent;
siteId: string;
protected fetching = false;
protected polling?: number;
protected logger: CoreLogger;
@ -79,6 +78,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
conversation?: AddonMessagesConversationFormatted; // The conversation object (if it exists).
userId?: number; // User ID you're talking to (only if group messaging not enabled or it's a new individual conversation).
currentUserId: number;
siteId: string;
title?: string;
showInfo = false;
conversationImage?: string;

14
src/addons/mod/lti/services/handlers/module.ts
View File

@ -22,7 +22,6 @@ import { AddonModLtiHelper } from '../lti-helper';
import { AddonModLtiIndexComponent } from '../../components/index';
import { CoreModuleHandlerBase } from '@features/course/classes/module-base-handler';
import { CoreCourse } from '@features/course/services/course';
import { CoreSites } from '@services/sites';
/**
* Handler to support LTI modules.
@ -87,19 +86,6 @@ export class AddonModLtiModuleHandlerService extends CoreModuleHandlerBase imple
return module?.modicon ?? modicon ?? CoreCourse.getModuleIconSrc(this.modName);
}
/**
* @inheritdoc
*/
iconIsShape(module?: CoreCourseModuleData | undefined, modicon?: string | undefined): boolean | undefined {
const iconUrl = module?.modicon ?? modicon;
if (!iconUrl) {
return true;
}
return iconUrl.startsWith(CoreSites.getRequiredCurrentSite().siteUrl);
}
}
export const AddonModLtiModuleHandler = makeSingleton(AddonModLtiModuleHandlerService);

9
src/addons/mod/resource/services/handlers/module.ts
View File

@ -170,14 +170,5 @@ export class AddonModResourceModuleHandlerService extends CoreModuleHandlerBase
return AddonModResourceIndexComponent;
}
/**
* @inheritdoc
*/
iconIsShape(module?: CoreCourseModuleData | undefined, modicon?: string | undefined): boolean | undefined {
const iconUrl = module?.modicon ?? modicon;
return !iconUrl?.startsWith('assets/img/files_legacy/') && !iconUrl?.endsWith('.png');
}
}
export const AddonModResourceModuleHandler = makeSingleton(AddonModResourceModuleHandlerService);

9
src/addons/mod/url/services/handlers/module.ts
View File

@ -218,15 +218,6 @@ export class AddonModUrlModuleHandlerService extends CoreModuleHandlerBase imple
return this.shouldOpenLink(module);
}
/**
* @inheritdoc
*/
iconIsShape(module?: CoreCourseModuleData | undefined, modicon?: string | undefined): boolean | undefined {
const iconUrl = module?.modicon ?? modicon;
return !iconUrl?.startsWith('assets/img/files_legacy/') && !iconUrl?.endsWith('.png');
}
/**
* Log module viewed.
*/

3
src/core/components/mod-icon/mod-icon.scss
View File

@ -7,7 +7,6 @@
--icon-radius: var(--module-icon-radius, var(--radius-xs));
--margin-end: 0px;
--margin-vertical: 0px;
--filter: brightness(0) invert(1);
margin-top: var(--margin-vertical);
margin-bottom: var(--margin-vertical);
@ -22,7 +21,7 @@
&.#{$type} {
background-color: var(--activity#{$type});
img {
filter: var(--filter);
filter: var(--filter, brightness(0) invert(1));
}
}
}

85
src/core/components/mod-icon/mod-icon.ts
View File

@ -17,6 +17,7 @@ import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChange } from '@
import { CoreCourse } from '@features/course/services/course';
import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate';
import { CoreSites } from '@services/sites';
import { CoreUrlUtils } from '@services/utils/url';
const assetsPath = 'assets/img/';
const fallbackModName = 'external-tool';
@ -54,12 +55,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
async ngOnInit(): Promise<void> {
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]) || '';
if (this.modname.startsWith('mod_')) {
this.modname = this.modname.substring(4);
}
this.modname = this.getComponentNameFromIconUrl(this.modicon);
}
this.modNameTranslated = CoreCourse.translateModuleName(this.modname, this.fallbackTranslation);
@ -105,16 +101,15 @@ export class CoreModIconComponent implements OnInit, OnChanges {
!!this.modname &&
!!this.componentId &&
!this.isLocalUrl &&
!this.icon.match('/theme/image.php/[^/]+/' + this.modname + '/[-0-9]*/');
this.getComponentNameFromIconUrl(this.icon) != this.modname;
const iconIsShape = await CoreCourseModuleDelegate.moduleIconIsShape(this.modname, this.icon);
this.noFilter = iconIsShape === false;
this.noFilter = await this.getIconNoFilter();
}
/**
* Icon to load on error.
*/
loadFallbackIcon(): void {
async loadFallbackIcon(): Promise<void> {
this.isLocalUrl = true;
const moduleName = !this.modname || CoreCourse.CORE_MODULES.indexOf(this.modname) < 0
? fallbackModName
@ -127,7 +122,75 @@ export class CoreModIconComponent implements OnInit, OnChanges {
}
this.icon = path + moduleName + '.svg';
this.noFilter = false;
this.noFilter = await this.getIconNoFilter();
}
/**
* Returns if the icon does not need to be filtered.
*
* @returns wether the icon does not need to be filtered.
*/
protected async getIconNoFilter(): Promise<boolean> {
// Earlier 4.0, icons were never filtered.
if (this.legacyIcon) {
return true;
}
// No icon or local icon (not legacy), filter it.
if (!this.icon || this.isLocalUrl) {
return false;
}
// If it's an Moodle Theme icon, check if filtericon is set and use it.
if (this.icon && CoreUrlUtils.isThemeImageUrl(this.icon)) {
const iconParams = CoreUrlUtils.extractUrlParams(this.icon);
if (iconParams['filtericon'] === '1') {
return false;
}
// filtericon was introduced in 4.2 and backported to 4.1.3 and 4.0.8.
if (this.modname && !CoreSites.getCurrentSite()?.isVersionGreaterEqualThan(['4.0.8', '4.1.3', '4.2'])) {
// If version is prior to that, check if the url is a module icon and filter it.
if (this.getComponentNameFromIconUrl(this.icon) === this.modname) {
return false;
}
}
}
// External icons, or non monologo, do not filter.
return true;
}
/**
* Guesses the mod name form the url.
*
* @param iconUrl Icon url.
* @returns Guessed modname.
*/
protected getComponentNameFromIconUrl(iconUrl: string): string {
if (!CoreUrlUtils.isThemeImageUrl(this.icon)) {
// Cannot be guessed.
return '';
}
const iconParams = CoreUrlUtils.extractUrlParams(iconUrl);
let component = iconParams['component'];
if (!component) {
const matches = iconUrl.match('/theme/image.php/[^/]+/([^/]+)/[-0-9]*/');
component = (matches && matches[1]) || '';
}
// Some invalid components (others may be added later on).
if (component === 'core' || component === 'theme') {
return '';
}
if (component.startsWith('mod_')) {
component = component.substring(4);
}
return component;
}
}

11
src/core/components/user-avatar/core-user-avatar.html
View File

@ -1,9 +1,9 @@
<ng-container *ngIf="avatarUrl">
<img *ngIf="linkProfile" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content
<img class="userpicture" *ngIf="linkProfile" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content
(error)="loadImageError()" (ariaButtonClick)="gotoProfile($event)" [siteId]="siteId">
<img *ngIf="!linkProfile" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content
(error)="loadImageError()" aria-hidden="true" [siteId]="siteId">
<img class="userpicture" *ngIf="!linkProfile" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}"
core-external-content (error)="loadImageError()" aria-hidden="true" [siteId]="siteId">
</ng-container>
<ng-container *ngIf="!avatarUrl && initials">
<div class="userinitials" *ngIf="linkProfile" [attr.aria-label]="'core.pictureof' | translate:{$a: fullname}"
@ -16,10 +16,11 @@
</div>
</ng-container>
<ng-container *ngIf="!avatarUrl && !initials">
<img *ngIf="linkProfile" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}"
<img class="userpicture" *ngIf="linkProfile" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}"
(ariaButtonClick)="gotoProfile($event)">
<img *ngIf="!linkProfile" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}" aria-hidden="true">
<img class="userpicture" *ngIf="!linkProfile" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}"
aria-hidden="true">
</ng-container>
<span *ngIf="checkOnline && isOnline()" class="contact-status online" role="status" [attr.aria-label]="'core.online' | translate">

26
src/core/components/user-avatar/user-avatar.scss
View File

@ -4,40 +4,47 @@
position: relative;
width: var(--core-avatar-size);
height: var(--core-avatar-size);
padding: 0px;
--contact-status-size: 14px;
--margin-end-on-item: 8px;
--margin-vertical-on-item: 8px;
--userpicture-padding: 0px;
img {
img.userpicture {
border-radius: var(--core-avatar-radius);
width: var(--core-avatar-size);
height: var(--core-avatar-size);
max-width: var(--core-avatar-size);
max-height: var(--core-avatar-size);
}
img[alt] {
padding: var(--userpicture-padding);
&[alt] {
text-indent: -999999px;
white-space: nowrap;
overflow: hidden;
}
img[core-external-content]:not([src]),
img[core-external-content][src=""] {
&:not([src]),
&[src=""] {
visibility: visible;
display: inline-block;
position: relative;
margin: var(--userpicture-padding);
width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
&:after {
border-radius: var(--core-avatar-radius);
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
right: 0;
bottom: 0;
background: url('/assets/img/user-avatar.png');
background-size: contain;
content: "";
}
}
}
&.core-bar-button-image {
padding: 0;
width: var(--core-header-toolbar-button-image-size);
@ -74,9 +81,10 @@
border-radius: var(--core-avatar-radius);
color: var(--gray-800);
font-weight: normal;
width: var(--core-avatar-size);
height: var(--core-avatar-size);
width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
font-size: calc(var(--core-avatar-size)*0.3);
margin: var(--userpicture-padding);
}
&.large-avatar .userinitials {

8
src/core/components/user-avatar/user-avatar.ts
View File

@ -20,8 +20,8 @@ import { CoreEventObserver, CoreEvents } from '@singletons/events';
import { USER_PROFILE_PICTURE_UPDATED, CoreUserBasicData } from '@features/user/services/user';
import { CoreNavigator } from '@services/navigator';
import { CoreNetwork } from '@services/network';
import { CoreUrl } from '@singletons/url';
import { CoreUserHelper } from '@features/user/services/user-helper';
import { CoreUrlUtils } from '@services/utils/url';
/**
* Component to display a "user avatar".
@ -78,7 +78,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
}
/**
* Listen to changes.
* @inheritdoc
*/
ngOnChanges(changes: { [name: string]: SimpleChange }): void {
// If something change, update the fields.
@ -111,7 +111,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
this.initials = CoreUserHelper.getUserInitials(this.user);
}
if (this.initials && this.avatarUrl && CoreUrl.parse(this.avatarUrl)?.path?.startsWith('/theme/image.php')) {
if (this.initials && this.avatarUrl && CoreUrlUtils.isThemeImageUrl(this.avatarUrl)) {
this.avatarUrl = undefined;
}
@ -166,7 +166,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
}
/**
* Component destroyed.
* @inheritdoc
*/
ngOnDestroy(): void {
this.pictureObserver.off();

2
src/core/features/course/services/module-delegate.ts
View File

@ -93,6 +93,7 @@ export interface CoreCourseModuleHandler extends CoreDelegateHandler {
* @param module Module to get the icon from.
* @param modicon The mod icon string.
* @returns Whether the icon should be treated as a shape.
* @deprecated since 4.3. Now it uses platform information. This function is not used anymore.
*/
iconIsShape?(module?: CoreCourseModuleData, modicon?: string): Promise<boolean | undefined> | boolean | undefined;
@ -415,6 +416,7 @@ export class CoreCourseModuleDelegateService extends CoreDelegate<CoreCourseModu
* @param modicon The mod icon string.
* @param module The module to use.
* @returns Whether the icon should be treated as a shape.
* @deprecated since 4.3. Now it uses platform information. This function is not used anymore.
*/
async moduleIconIsShape(modname: string, modicon?: string, module?: CoreCourseModuleData): Promise<boolean | undefined> {
return await this.executeFunctionOnEnabled<Promise<boolean>>(modname, 'iconIsShape', [module, modicon]);

4
src/core/features/grades/pages/course/course.scss
View File

@ -8,7 +8,6 @@
--even-cell-hover: var(--light);
--icon-color: var(--gray-500);
--border-color: var(--stroke);
--mod-icon-filter: brightness(0);
.odd {
--cell-background: var(--odd-cell-background);
@ -29,7 +28,6 @@
--even-cell-background: var(--gray-900);
--even-cell-hover: var(--gray-700);
--icon-color: var(--gray-200);
--mod-icon-filter: brightness(0) invert(1);
}
.core-grades-table {
@ -89,7 +87,7 @@
--padding: 0px;
--size: 16px;
background: transparent;
--filter: var(--mod-icon-filter);
--filter: var(--module-icon-filter);
}

BIN
src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_13.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 31 KiB

9
src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss
View File

@ -1,12 +1,7 @@
core-user-avatar {
padding: 0;
}
:host-context(ion-tabs.placement-side ion-toolbar) {
display: none;
}
:host-context(ion-toolbar) core-user-avatar ::ng-deep img,
:host-context(ion-tab-bar) core-user-avatar ::ng-deep img {
padding: 6px !important;
:host core-user-avatar {
--userpicture-padding: 6px !important;
}

3
src/core/features/question/services/question-helper.ts
View File

@ -27,6 +27,7 @@ import { makeSingleton, Translate } from '@singletons';
import { CoreQuestion, CoreQuestionProvider, CoreQuestionQuestionParsed, CoreQuestionsAnswers } from './question';
import { CoreQuestionDelegate } from './question-delegate';
import { CoreIcons } from '@singletons/icons';
import { CoreUrlUtils } from '@services/utils/url';
/**
* Service with some common functions to handle questions.
@ -678,7 +679,7 @@ export class CoreQuestionHelperProvider {
return;
}
if (fileUrl.indexOf('theme/image.php') > -1 && fileUrl.indexOf('flagged') > -1) {
if (CoreUrlUtils.isThemeImageUrl(fileUrl) && fileUrl.indexOf('flagged') > -1) {
// Ignore flag images.
return;
}

4
src/core/features/rating/services/rating.ts
View File

@ -256,7 +256,7 @@ export class CoreRatingProvider {
const response = await site.read<CoreRatingGetItemRatingsWSResponse>('core_rating_get_item_ratings', params, preSets);
if (!site.isVersionGreaterEqualThan([' 3.6.5', '3.7.1', '3.8'])) {
if (!site.isVersionGreaterEqualThan(['3.6.5', '3.7.1', '3.8'])) {
// MDL-65042 We need to fetch profiles because the returned profile pictures are incorrect.
const promises = response.ratings.map((rating: CoreRatingItemRating) =>
CoreUser.getProfile(rating.userid, courseId, true, site.id).then((user) => {
@ -407,7 +407,7 @@ export class CoreRatingProvider {
const ratingsResults = await Promise.all(promises);
if (!site.isVersionGreaterEqualThan([' 3.6.5', '3.7.1', '3.8'])) {
if (!site.isVersionGreaterEqualThan(['3.6.5', '3.7.1', '3.8'])) {
const ratings: CoreRatingItemRating[] = [].concat.apply([], ratingsResults);
const userIds = ratings.map((rating) => rating.userid);

4
src/core/features/search/components/global-search-result/global-search-result.scss
View File

@ -4,7 +4,6 @@
--core-global-search-result-content-color: var(--gray-700);
--core-global-search-result-context-color: var(--gray-600);
--core-global-search-result-icon-size: 16px;
--mod-icon-filter: brightness(0);
h3 {
font-size: 16px;
@ -14,7 +13,7 @@
core-mod-icon {
--size: var(--core-global-search-result-icon-size);
--filter: var(--mod-icon-filter);
--filter: var(--module-icon-filter);
margin-inline-end: var(--spacing-2);
margin-top: 0px;
@ -101,5 +100,4 @@
:host-context(html.dark) ion-item {
--core-global-search-result-content-color: var(--gray-400);
--core-global-search-result-context-color: var(--gray-500);
--mod-icon-filter: brightness(0) invert(1);
}

3
src/core/features/user/pages/about/about.ts
View File

@ -33,6 +33,7 @@ import { CoreSite } from '@classes/site';
import { CoreFileUploaderHelper } from '@features/fileuploader/services/fileuploader-helper';
import { CoreMimetypeUtils } from '@services/utils/mimetype';
import { Translate } from '@singletons';
import { CoreUrlUtils } from '@services/utils/url';
/**
* Page that displays info about a user.
@ -247,7 +248,7 @@ export class CoreUserAboutPage implements OnInit, OnDestroy {
return 'undefined';
}
if (avatarUrl.startsWith(`${this.site?.siteUrl}/theme/image.php`)) {
if (CoreUrlUtils.isThemeImageUrl(avatarUrl, this.site?.siteUrl)) {
return 'default';
}

4
src/core/features/user/services/user.ts
View File

@ -27,7 +27,7 @@ import { CoreStatusWithWarningsWSResponse, CoreWSExternalWarning } from '@servic
import { CoreError } from '@classes/errors/error';
import { USERS_TABLE_NAME, CoreUserDBRecord } from './database/user';
import { CoreUserHelper } from './user-helper';
import { CoreUrl } from '@singletons/url';
import { CoreUrlUtils } from '@services/utils/url';
const ROOT_CACHE_KEY = 'mmUser:';
@ -671,7 +671,7 @@ export class CoreUserProvider {
// Do not prefetch when initials are set and image is default.
if ('firstname' in entry || 'lastname' in entry) {
const initials = CoreUserHelper.getUserInitials(entry);
if (initials && imageUrl && CoreUrl.parse(imageUrl)?.path === '/theme/image.php') {
if (initials && imageUrl && CoreUrlUtils.isThemeImageUrl(imageUrl)) {
return;
}
}

11
src/core/services/utils/url.ts
View File

@ -493,11 +493,16 @@ export class CoreUrlUtilsProvider {
/**
* Returns if a URL is a theme image URL.
*
* @param url The URL to test.
* @param imageUrl The URL to test.
* @param siteUrl The Site Url.
* @returns Whether the URL is a theme image URL.
*/
isThemeImageUrl(url: string): boolean {
return url?.indexOf('/theme/image.php') !== -1;
isThemeImageUrl(imageUrl: string, siteUrl?: string): boolean {
if (siteUrl) {
return imageUrl.startsWith(`${siteUrl}/theme/image.php`);
}
return imageUrl?.indexOf('/theme/image.php') !== -1;
}
/**

1
src/theme/theme.base.scss
View File

@ -980,6 +980,7 @@ ion-content.limited-width > :not([slot]) {
ion-toolbar h1 img.core-bar-button-image,
ion-toolbar h1 .core-bar-button-image img {
padding: 4px;
--userpicture-padding: 4px;
width: var(--core-header-toolbar-button-image-size);
height: var(--core-header-toolbar-button-image-size);
max-width: var(--core-header-toolbar-button-image-size);

2
src/theme/theme.dark.scss
View File

@ -130,6 +130,8 @@ html.dark {
--core-login-input-background: var(--core-login-background);
--core-login-input-color: var(--core-login-text-color);
--module-icon-filter: brightness(0) invert(1);
--core-question-correct-color: var(--success-tint);
--core-question-correct-color-bg: var(--success-shade);
--core-question-incorrect-color: var(--danger);

2
src/theme/theme.light.scss
View File

@ -352,6 +352,8 @@ html {
--core-messages-discussion-badge: var(--primary);
--core-messages-discussion-badge-text: var(--white);
--module-icon-filter: brightness(0);
--addon-forum-avatar-size: var(--core-avatar-size);
--addon-forum-border-color: var(--stroke);
--addon-forum-highlight-color: var(--light);