MOBILE-3592 user: Style user avatars

src/core/components/user-avatar/user-avatar.scss

@@ -1,6 +1,11 @@
 :host {
     position: relative;
     cursor: pointer;
+    img {
+        border-radius: 50%;
+        width: var(--core-avatar-size);
+        height: var(--core-avatar-size);
+    }
 
     .contact-status {
         position: absolute;
@@ -31,3 +36,8 @@
     width: 10px;
     height: 10px;
 }
+
+:host-context([dir="rtl"]) .contact-status {
+    left: 0;
+    right: unset;
+}

src/core/components/user-avatar/user-avatar.ts

@@ -26,7 +26,7 @@ import { CoreUserProvider, CoreUserBasicData, CoreUserProfilePictureUpdatedData
 /**
  * Component to display a "user avatar".
  *
- * Example: <ion-avatar core-user-avatar [user]="participant"></ion-avatar>
+ * Example: <core-user-avatar [user]="participant"></core-user-avatar>
  */
 @Component({
     selector: 'core-user-avatar',

src/core/features/courses/pages/course-preview/course-preview.html

@@ -47,11 +47,11 @@
                     [userId]="contact.id"
                     [courseId]="isEnrolled ? course.id : null"
                     [attr.aria-label]="'core.viewprofile' | translate">
-                    <ion-avatar core-user-avatar
+                    <core-user-avatar
                         [user]="contact" slot="start"
                         [userId]="contact.id"
                         [courseId]="isEnrolled ? course.id : null">
-                    </ion-avatar>
+                    </core-user-avatar>
                     <ion-label>
                         <h2>{{contact.fullname}}</h2>
                     </ion-label>

src/core/features/mainmenu/pages/more/more.html

@@ -10,7 +10,7 @@
 <ion-content>
     <ion-list>
         <ion-item button *ngIf="siteInfo" class="ion-text-wrap" core-user-link [userId]="siteInfo.userid">
-            <ion-avatar slot="start"></ion-avatar> <!-- @todo core-user-avatar [user]="siteInfo" -->
+                <core-user-avatar [user]="siteInfo" slot="start"></core-user-avatar>
             <ion-label>
                 <h2>{{siteInfo.fullname}}</h2>
                 <p>

src/core/features/user/pages/profile/profile.html

@@ -12,15 +12,14 @@
     </ion-refresher>
     <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user && !isDeleted && isEnrolled">
-            <ion-item class="ion-text-center item-avatar-center">
+            <ion-item class="ion-text-center core-user-profile-maininfo">
-                <ion-avatar>
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false"
                 [checkOnline]="true">
-                        <ion-icon *ngIf="canChangeProfilePicture" name="fa-pen" class="core-icon-foreground"
+                    <div class="core-icon-foreground">
-                            (click)="changeProfilePicture()">
+                        <ion-icon *ngIf="canChangeProfilePicture" name="fa-pen" (click)="changeProfilePicture()">
                         </ion-icon>
+                    </div>
                 </core-user-avatar>
-                </ion-avatar>
                 <ion-label>
                     <h2>{{ user.fullname }}</h2>
                     <p *ngIf="user.address">{{ user.address }}</p>

src/core/features/user/pages/profile/profile.scss

@@ -1,31 +1,49 @@
 :host {
+
+    .core-user-profile-maininfo::part(native) {
+        flex-direction: column;
+    }
+    ::ng-deep {
+        core-user-avatar {
+            display: block;
+            --core-avatar-size: var(--core-large-avatar-size);
+
+            img {
+                margin: 0;
+            }
+
+            .contact-status {
+                width: 24px !important;
+                height: 24px !important;
+            }
+
+            .core-icon-foreground {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                line-height: 30px;
+                text-align: center;
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+                background-color:var(--background);
+
+                :host-context([dir="rtl"]) & {
+                    left: 0;
+                    right: unset;
+                }
+            }
+        }
+    }
+
+}
+
+:host-context([dir="rtl"]) ::ng-deep core-user-avatar .core-icon-foreground {
+    left: 0;
+    right: unset;
+}
+
     // @todo
-    // .core-icon-foreground {
-    //     position: absolute;
-    //     @include position(null, 0, 0, null);
-    //     font-size: 24px;
-    //     line-height: 30px;
-    //     text-align: center;
-
-    //     width: 30px;
-    //     height: 30px;
-    //     border-radius: 50%;
-    //     background-color: $white;
-    //     @include darkmode() {
-    //         background: $core-dark-item-bg-color;
-    //     }
-    // }
-    // [core-user-avatar].item-avatar-center {
-    //     display: inline-block;
-    //     img {
-    //         margin: 0;
-    //     }
-    //     .contact-status {
-    //         width: 24px;
-    //         height: 24px;
-    //     }
-    // }
-
     // .core-user-communication-handlers {
     //     background: $list-background-color;
     //     border-bottom: 1px solid $list-border-color;
@@ -66,4 +84,4 @@
     //         @include margin(null, null, null, 0.3em);
     //     }
     // }
-}
+

src/theme/app.scss

@@ -203,13 +203,14 @@ ion-card.core-danger-card {
 // Avatar
 // -------------------------
 // Large centered avatar
-img.large-avatar {
+img.large-avatar,
+.large-avatar img {
     display: block;
     margin: auto;
-    width: 90px;
+    width: var(--core-large-avatar-size);
-    height: 90px;
+    height: var(--core-large-avatar-size);
-    max-width: 90px;
+    max-width: var(--core-large-avatar-size);
-    max-height: 90px;
+    max-height: var(--core-large-avatar-size);
     margin-bottom: 10px;
     border-radius : 50%;
     padding: 4px;
@@ -217,6 +218,11 @@ img.large-avatar {
     background-color: transparent;
 }
 
+ion-avatar.large-avatar {
+    width: var(--core-large-avatar-size);
+    height: var(--core-large-avatar-size);
+}
+
 ion-avatar ion-img, ion-avatar img {
     text-indent: -99999px;
     background-color: var(--gray-light);

src/theme/variables.scss

@@ -170,6 +170,10 @@
     --core-course-color-8: var(--custom-course-color-9, #fd79a8);
     --core-course-color-9: var(--custom-course-color-90, #6c5ce7);
     --core-star-color: var(--custom-star-color, var(--core-color));
+
+    --core-large-avatar-size:  var(--custom-large-avatar-size, 90px);
+
+    --core-avatar-size:  var(--custom-avatar-size, 64px);
 }
 
 /*