From fd19dd8c62502dc2509cc38158281aba6a4efb1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 4 Dec 2020 15:23:00 +0100
Subject: [PATCH] MOBILE-3592 user: Style user avatars
---
.../components/user-avatar/user-avatar.scss | 12 +++-
.../components/user-avatar/user-avatar.ts | 2 +-
.../pages/course-preview/course-preview.html | 4 +-
.../features/mainmenu/pages/more/more.html | 2 +-
.../features/user/pages/profile/profile.html | 15 ++--
.../features/user/pages/profile/profile.scss | 72 ++++++++++++-------
src/theme/app.scss | 16 +++--
src/theme/variables.scss | 4 ++
8 files changed, 82 insertions(+), 45 deletions(-)
diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss
index 679796d19..94b738f0e 100644
--- a/src/core/components/user-avatar/user-avatar.scss
+++ b/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;
@@ -30,4 +35,9 @@
:host-context(.toolbar) .contact-status {
width: 10px;
height: 10px;
-}
\ No newline at end of file
+}
+
+:host-context([dir="rtl"]) .contact-status {
+ left: 0;
+ right: unset;
+}
diff --git a/src/core/components/user-avatar/user-avatar.ts b/src/core/components/user-avatar/user-avatar.ts
index 565971a9a..dbbd25b31 100644
--- a/src/core/components/user-avatar/user-avatar.ts
+++ b/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',
diff --git a/src/core/features/courses/pages/course-preview/course-preview.html b/src/core/features/courses/pages/course-preview/course-preview.html
index 444ad7027..1424ea2a5 100644
--- a/src/core/features/courses/pages/course-preview/course-preview.html
+++ b/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>
diff --git a/src/core/features/mainmenu/pages/more/more.html b/src/core/features/mainmenu/pages/more/more.html
index 0661d0347..aba57a084 100644
--- a/src/core/features/mainmenu/pages/more/more.html
+++ b/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>
diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html
index 5f8b50497..332e7cdbf 100644
--- a/src/core/features/user/pages/profile/profile.html
+++ b/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-avatar>
- <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false"
- [checkOnline]="true">
- <ion-icon *ngIf="canChangeProfilePicture" name="fa-pen" class="core-icon-foreground"
- (click)="changeProfilePicture()">
+ <ion-item class="ion-text-center core-user-profile-maininfo">
+ <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false"
+ [checkOnline]="true">
+ <div class="core-icon-foreground">
+ <ion-icon *ngIf="canChangeProfilePicture" name="fa-pen" (click)="changeProfilePicture()">
</ion-icon>
- </core-user-avatar>
- </ion-avatar>
+ </div>
+ </core-user-avatar>
<ion-label>
<h2>{{ user.fullname }}</h2>
<p *ngIf="user.address">{{ user.address }}</p>
diff --git a/src/core/features/user/pages/profile/profile.scss b/src/core/features/user/pages/profile/profile.scss
index 454b80ab1..d3bcabffe 100644
--- a/src/core/features/user/pages/profile/profile.scss
+++ b/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);
// }
// }
-}
\ No newline at end of file
+
diff --git a/src/theme/app.scss b/src/theme/app.scss
index 66a988c47..106fcab25 100644
--- a/src/theme/app.scss
+++ b/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;
- height: 90px;
- max-width: 90px;
- max-height: 90px;
+ width: var(--core-large-avatar-size);
+ height: var(--core-large-avatar-size);
+ max-width: var(--core-large-avatar-size);
+ 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);
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 836edd3fd..2c7b87910 100644
--- a/src/theme/variables.scss
+++ b/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);
}
/*