Add profile picture in sidenav, Make all profile pictures round

master
Max 5 years ago
parent fb663f0b72
commit 1bfb34a35e

@ -1,6 +1,7 @@
@import '../../../../styles/mixins.sass' @import '../../../../styles/mixins.sass'
@import '../../../../styles/vars.sass' @import '../../../../styles/vars.sass'
$mat-card-header-size: 40px !default
.post .post
box-sizing: border-box box-sizing: border-box
width: 100% width: 100%
@ -25,19 +26,13 @@
padding: 0 padding: 0
margin: 0 margin: 0
margin-left: 8px margin-left: 8px
.profile-picture
border-radius: 50%
width: $mat-card-header-size
height: $mat-card-header-size
.activity-info .activity-info
display: contents display: contents
.span .span
margin-left: 32px margin-left: 32px
$mat-card-header-size: 100px !default
.profile-picture
height: $mat-card-header-size
width: $mat-card-header-size
border-radius: 50%
flex-shrink: 0
background-size: cover
transition-duration: 0.5s
z-index: 10
object-fit: cover

@ -8,8 +8,13 @@
fixedInViewport="false" fixedInViewport="false"
autoFocus="false"> autoFocus="false">
<mat-toolbar *ngIf="!loggedIn">Menu</mat-toolbar> <mat-toolbar *ngIf="!loggedIn">Menu</mat-toolbar>
<mat-toolbar *ngIf="loggedIn"> <mat-toolbar *ngIf="loggedIn" id="name-bar">
<span>Hello, {{user.username}}</span> <div mat-card-avatar>
<img class="profile-picture" [src]="user.profilePicture"/>
</div>
<div class="hello-text-box">
<span class="hello-text">Hello, {{user.username}}</span>
</div>
</mat-toolbar> </mat-toolbar>
<mat-nav-list> <mat-nav-list>
<a mat-list-item routerLink="" (click)="drawer.close()">Home</a> <a mat-list-item routerLink="" (click)="drawer.close()">Home</a>

@ -4,6 +4,21 @@
.sidenav .sidenav
width: 200px width: 200px
#name-bar
padding: 0 4px
.mat-card-avatar
display: contents
.profile-picture
width: 52px
height: 52px
border-radius: 50%
flex-shrink: 0
.hello-text-box
margin-left: 8px
.hello-text
white-space: normal
font-size: initial
.link .link
user-select: none user-select: none
cursor: pointer cursor: pointer

@ -22,6 +22,7 @@ const graphqlQuery = `mutation($email: String!, $pwHash: String!) {
handle, handle,
points, points,
level, level,
profilePicture,
receivedRequests{id, sender{name, handle, id}}, receivedRequests{id, sender{name, handle, id}},
sentRequests{receiver{id}}, sentRequests{receiver{id}},
friends { friends {

@ -37,43 +37,11 @@ export class SelfService {
} }
public updateUserInfo(response: any) { public updateUserInfo(response: any) {
const user: User = new User(); const user = new User();
let friendRequest: FriendRequest = new FriendRequest(); user.assignFromResponse(response.data.getSelf);
user.loggedIn = true;
user.userID = response.data.getSelf.id;
user.username = response.data.getSelf.name;
user.handle = response.data.getSelf.handle;
user.email = response.data.getSelf.email;
user.points = response.data.getSelf.points;
user.level = response.data.getSelf.level;
for (const friend of response.data.getSelf.friends) {
user.friends.push(new FriendInfo(
friend.id,
friend.name,
friend.level,
user.buildProfilePictureUrl(friend.profilePicture)
));
}
for (const group of response.data.getSelf.groups) {
user.groups.push(new GroupInfo(group.id, group.name));
}
user.chatIDs = response.data.getSelf.chats;
for (const request of response.data.getSelf.sentRequests) {
user.sentRequestUserIDs.push(request.receiver.id);
}
for (const request of response.data.getSelf.receivedRequests) {
friendRequest = new FriendRequest();
friendRequest.id = request.id;
friendRequest.senderUserID = request.sender.id;
friendRequest.senderUsername = request.sender.name;
friendRequest.senderHandle = request.sender.handle;
user.receivedRequests.push(friendRequest);
}
if (JSON.parse(response.data.getSelf.settings).darkmode === 'true') {
user.darkmode = true;
}
this.data.changeUserInfo(user); this.data.changeUserInfo(user);
} }
public fakeLogin() { public fakeLogin() {
const user: User = new User(); const user: User = new User();
let friendRequest: FriendRequest = new FriendRequest(); let friendRequest: FriendRequest = new FriendRequest();
@ -105,6 +73,7 @@ export class SelfService {
handle, handle,
points, points,
level, level,
profilePicture,
receivedRequests{id, sender{name, handle, id}}, receivedRequests{id, sender{name, handle, id}},
sentRequests{receiver{id}}, sentRequests{receiver{id}},
friends { friends {

Loading…
Cancel
Save