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

moodlehq · Oct 26, 2023 · 1497204 · 1497204
1 parent 68d9d6c
commit 1497204
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 41 deletions.
diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html
@@ -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>

diff --git a/src/addons/messages/pages/discussion/discussion.ts b/src/addons/messages/pages/discussion/discussion.ts
@@ -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;

diff --git a/src/core/components/user-avatar/core-user-avatar.html b/src/core/components/user-avatar/core-user-avatar.html
@@ -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">

diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss
@@ -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 {

diff --git a/src/core/components/user-avatar/user-avatar.ts b/src/core/components/user-avatar/user-avatar.ts
@@ -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();

diff --git a/...new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_13.png b/...new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_13.png
diff --git a/src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss b/src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss
@@ -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;
 }
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
@@ -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);