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

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

main
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> <ion-title>
<h1> <h1>
<img *ngIf="loaded && !otherMember && conversationImage" class="core-bar-button-image" [src]="conversationImage" alt="" <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" <core-user-avatar *ngIf="loaded && otherMember" class="core-bar-button-image" [user]="otherMember" [linkProfile]="false"
[checkOnline]="otherMember.showonlinestatus"> [checkOnline]="otherMember.showonlinestatus">
</core-user-avatar> </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(IonContent) content?: IonContent;
@ViewChild(CoreInfiniteLoadingComponent) infinite?: CoreInfiniteLoadingComponent; @ViewChild(CoreInfiniteLoadingComponent) infinite?: CoreInfiniteLoadingComponent;
siteId: string;
protected fetching = false; protected fetching = false;
protected polling?: number; protected polling?: number;
protected logger: CoreLogger; protected logger: CoreLogger;
@ -79,6 +78,7 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
conversation?: AddonMessagesConversationFormatted; // The conversation object (if it exists). 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). userId?: number; // User ID you're talking to (only if group messaging not enabled or it's a new individual conversation).
currentUserId: number; currentUserId: number;
siteId: string;
title?: string; title?: string;
showInfo = false; showInfo = false;
conversationImage?: string; conversationImage?: string;

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

@ -1,9 +1,9 @@
<ng-container *ngIf="avatarUrl"> <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"> (error)="loadImageError()" (ariaButtonClick)="gotoProfile($event)" [siteId]="siteId">
<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}"
(error)="loadImageError()" aria-hidden="true" [siteId]="siteId"> core-external-content (error)="loadImageError()" aria-hidden="true" [siteId]="siteId">
</ng-container> </ng-container>
<ng-container *ngIf="!avatarUrl && initials"> <ng-container *ngIf="!avatarUrl && initials">
<div class="userinitials" *ngIf="linkProfile" [attr.aria-label]="'core.pictureof' | translate:{$a: fullname}" <div class="userinitials" *ngIf="linkProfile" [attr.aria-label]="'core.pictureof' | translate:{$a: fullname}"
@ -16,10 +16,11 @@
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="!avatarUrl && !initials"> <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)"> (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> </ng-container>
<span *ngIf="checkOnline && isOnline()" class="contact-status online" role="status" [attr.aria-label]="'core.online' | translate"> <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; position: relative;
width: var(--core-avatar-size); width: var(--core-avatar-size);
height: var(--core-avatar-size); height: var(--core-avatar-size);
padding: 0px;
--contact-status-size: 14px; --contact-status-size: 14px;
--margin-end-on-item: 8px; --margin-end-on-item: 8px;
--margin-vertical-on-item: 8px; --margin-vertical-on-item: 8px;
--userpicture-padding: 0px;
img { img.userpicture {
border-radius: var(--core-avatar-radius); border-radius: var(--core-avatar-radius);
width: var(--core-avatar-size); width: var(--core-avatar-size);
height: var(--core-avatar-size); height: var(--core-avatar-size);
max-width: var(--core-avatar-size); max-width: var(--core-avatar-size);
max-height: var(--core-avatar-size); max-height: var(--core-avatar-size);
} padding: var(--userpicture-padding);
img[alt] { &[alt] {
text-indent: -999999px; text-indent: -999999px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
img[core-external-content]:not([src]), &:not([src]),
img[core-external-content][src=""] { &[src=""] {
visibility: visible; visibility: visible;
display: inline-block; display: inline-block;
position: relative; position: relative;
&:after { margin: var(--userpicture-padding);
border-radius: var(--core-avatar-radius); width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
display: block; height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
position: absolute; &:after {
top: 0; border-radius: var(--core-avatar-radius);
left: 0; display: block;
width: 100%; position: absolute;
height: 100%; top: 0;
background: url('/assets/img/user-avatar.png'); left: 0;
background-size: contain; right: 0;
content: ""; bottom: 0;
background: url('/assets/img/user-avatar.png');
background-size: contain;
content: "";
}
} }
} }
&.core-bar-button-image { &.core-bar-button-image {
padding: 0; padding: 0;
width: var(--core-header-toolbar-button-image-size); width: var(--core-header-toolbar-button-image-size);
@ -74,9 +81,10 @@
border-radius: var(--core-avatar-radius); border-radius: var(--core-avatar-radius);
color: var(--gray-800); color: var(--gray-800);
font-weight: normal; font-weight: normal;
width: var(--core-avatar-size); width: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
height: var(--core-avatar-size); height: calc(var(--core-avatar-size) - var(--userpicture-padding) - var(--userpicture-padding));
font-size: calc(var(--core-avatar-size)*0.3); font-size: calc(var(--core-avatar-size)*0.3);
margin: var(--userpicture-padding);
} }
&.large-avatar .userinitials { &.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 { ngOnChanges(changes: { [name: string]: SimpleChange }): void {
// If something change, update the fields. // If something change, update the fields.
@ -166,7 +166,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
} }
/** /**
* Component destroyed. * @inheritdoc
*/ */
ngOnDestroy(): void { ngOnDestroy(): void {
this.pictureObserver.off(); 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) { :host-context(ion-tabs.placement-side ion-toolbar) {
display: none; display: none;
} }
:host-context(ion-toolbar) core-user-avatar ::ng-deep img, :host core-user-avatar {
:host-context(ion-tab-bar) core-user-avatar ::ng-deep img { --userpicture-padding: 6px !important;
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 img.core-bar-button-image,
ion-toolbar h1 .core-bar-button-image img { ion-toolbar h1 .core-bar-button-image img {
padding: 4px; padding: 4px;
--userpicture-padding: 4px;
width: var(--core-header-toolbar-button-image-size); width: var(--core-header-toolbar-button-image-size);
height: var(--core-header-toolbar-button-image-size); height: var(--core-header-toolbar-button-image-size);
max-width: var(--core-header-toolbar-button-image-size); max-width: var(--core-header-toolbar-button-image-size);