MOBILE-4362 user: Fix user-initials size on toolbar
parent
68d9d6cdd7
commit
149720459f
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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();
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 31 KiB |
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue