EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3592 user: Style user avatars

main
Pau Ferrer Ocaña 2020-12-04 15:23:00 +01:00 committed by Dani Palou
parent 90a0f18480
commit fd19dd8c62
8 changed files with 82 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/core/components/user-avatar/user-avatar.scss
View File

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

2
src/core/components/user-avatar/user-avatar.ts
View File

@ -26,7 +26,7 @@ import { CoreUserProvider, CoreUserBasicData, CoreUserProfilePictureUpdatedData
/** /**
* Component to display a "user avatar". * 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({ @Component({
selector: 'core-user-avatar', selector: 'core-user-avatar',

4
src/core/features/courses/pages/course-preview/course-preview.html
View File

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

2
src/core/features/mainmenu/pages/more/more.html
View File

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

15
src/core/features/user/pages/profile/profile.html
View File

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

72
src/core/features/user/pages/profile/profile.scss
View File

@ -1,31 +1,49 @@
:host { :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 // @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 { // .core-user-communication-handlers {
// background: $list-background-color; // background: $list-background-color;
// border-bottom: 1px solid $list-border-color; // border-bottom: 1px solid $list-border-color;
@ -66,4 +84,4 @@
// @include margin(null, null, null, 0.3em); // @include margin(null, null, null, 0.3em);
// } // }
// } // }
}

16
src/theme/app.scss
View File

@ -203,13 +203,14 @@ ion-card.core-danger-card {
// Avatar // Avatar
// ------------------------- // -------------------------
// Large centered avatar // Large centered avatar
img.large-avatar { img.large-avatar,
.large-avatar img {
display: block; display: block;
margin: auto; 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; margin-bottom: 10px;
border-radius : 50%; border-radius : 50%;
padding: 4px; padding: 4px;
@ -217,6 +218,11 @@ img.large-avatar {
background-color: transparent; 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 { ion-avatar ion-img, ion-avatar img {
text-indent: -99999px; text-indent: -99999px;
background-color: var(--gray-light); background-color: var(--gray-light);

4
src/theme/variables.scss
View File

@ -170,6 +170,10 @@
--core-course-color-8: var(--custom-course-color-9, #fd79a8); --core-course-color-8: var(--custom-course-color-9, #fd79a8);
--core-course-color-9: var(--custom-course-color-90, #6c5ce7); --core-course-color-9: var(--custom-course-color-90, #6c5ce7);
--core-star-color: var(--custom-star-color, var(--core-color)); --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);
} }
/* /*