CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-4362 user: Fix user-initials size on toolbar

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2023-10-25 16:36:52 +02:00
parent 68d9d6cdd7
commit 149720459f
8 changed files with 46 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;

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">

58
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] {
text-indent: -999999px;
white-space: nowrap;
overflow: hidden;
}
img[core-external-content]:not([src]),
img[core-external-content][src=""] {
visibility: visible;
display: inline-block;
position: relative;
&:after {
border-radius: var(--core-avatar-radius);
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('/assets/img/user-avatar.png');
background-size: contain;
content: "";
padding: var(--userpicture-padding);
&[alt] {
text-indent: -999999px;
white-space: nowrap;
overflow: hidden;
}
&: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;
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 {

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

@ -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.
@ -166,7 +166,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
}
/**
* Component destroyed.
* @inheritdoc
*/
ngOnDestroy(): void {
this.pictureObserver.off();

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;
}

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);