Permalink
Browse files

feat(avatars): double avatars where needed (closes #109)

  • Loading branch information...
jkuri authored and Izak88 committed Aug 30, 2017
1 parent 38cee0e commit cb5cc885efa081ded3beb02365db946f9cba66c4
@@ -69,14 +69,17 @@ <h1 class="bold">
</div>
<div class="column is-4">
<p>
<span class="icon">
<img *ngIf="build?.data?.sender?.avatar_url" [src]="build?.data?.sender?.avatar_url" class="avatar-img">
<span class="avatar-img-container">
<img *ngIf="build?.data?.sender?.avatar_url && authorAvatar" [src]="authorAvatar" class="avatar-img">
<img *ngIf="build?.data?.sender?.avatar_url && authorAvatar && authorAvatar !== committerAvatar" [src]="committerAvatar" class="avatar-small">
<img *ngIf="!build?.data?.sender?.avatar_url && build?.data?.actor?.links?.avatar?.href" [src]="build?.data?.actor?.links?.avatar?.href" class="avatar-img">
<img *ngIf="!build?.data?.sender?.avatar_url && !build?.data?.actor?.links?.avatar?.href && build?.data?.user_avatar" [src]="build?.data?.user_avatar" class="avatar-img">
<img *ngIf="!build?.data?.sender?.avatar_url && !build?.data?.actor?.links?.avatar?.href && !build?.data?.user_avatar && build?.data?.user?.avatar_url" class="avatar-img" [src]="build?.data?.user?.avatar_url">
</span>
<span *ngIf="build?.data?.pull_request && !tag">{{ build?.data?.sender?.login }} commited {{ timeWords }} ago</span>
<span *ngIf="!build?.data?.pull_request && build?.data?.commits && !tag">{{ build?.data?.commits[0]?.committer?.name }} commited {{ timeWords }} ago</span>
<span *ngIf="!build?.data?.pull_request && build?.data?.head_commit && !tag && build?.data.head_commit.author.username !== build?.data.head_commit.committer.username">
{{ build?.data?.head_commit?.author?.name }} committed with {{ build?.data?.head_commit?.committer?.name }} {{ timeWords }} ago
</span>
<span *ngIf="!build?.data?.pull_request && !build?.data?.commits && build?.data?.actor?.display_name && !tag">{{ build?.data?.actor?.display_name }} commited {{ timeWords }} ago</span>
<span *ngIf="!build?.data?.pull_request && !build?.data?.commits && !build?.data?.actor?.display_name && build?.data?.user?.name && !tag">{{ build?.data?.user?.name }} commited {{ timeWords }} ago</span>
<span *ngIf="tag">{{ build?.data?.head_commit?.comitter?.name }} commited {{ timeWords }} ago</span>
@@ -27,6 +27,8 @@ export class AppBuildDetailsComponent implements OnInit, OnDestroy {
sub: Subscription;
userData: any;
userId: string | null;
committerAvatar: string;
authorAvatar: string;

constructor(
private socketService: SocketService,
@@ -56,6 +58,8 @@ export class AppBuildDetailsComponent implements OnInit, OnDestroy {
this.tag = this.build.data.ref.replace('refs/tags/', '');
}

this.setAvatars();

this.build.jobs.forEach(job => job.time = '00:00');
this.timeWords = distanceInWordsToNow(this.build.start_time);
if (this.build.lastBuild) {
@@ -203,4 +207,21 @@ export class AppBuildDetailsComponent implements OnInit, OnDestroy {

this.router.navigate(['job', jobId]);
}

setAvatars(): void {
if (this.build.data.head_commit) {
const commit = this.build.data.head_commit;
this.committerAvatar = this.build.data.sender.avatar_url;
if (commit.author.username !== commit.committer.username) {
this.apiService.getGithubUserData(commit.author.username).subscribe((evt: any) => {
if (evt.status === 200) {
const body = JSON.parse(evt._body);
this.authorAvatar = body.avatar_url;
}
});
} else {
this.authorAvatar = this.committerAvatar;
}
}
}
}
@@ -1,9 +1,12 @@
<div class="columns">
<div class="column is-2">
<img class="avatar-icon" [src]="build?.data?.sender?.avatar_url" *ngIf="build?.data?.sender?.avatar_url">
<img class="avatar-icon" [src]="build?.data?.actor?.links?.avatar?.href" *ngIf="!build?.data?.sender?.avatar_url && build?.data?.actor?.links?.avatar?.href">
<img class="avatar-icon" [src]="build?.data?.user_avatar" *ngIf="!build?.data?.sender?.avatar_url && !build?.data?.actor?.links?.avatar?.href && build?.data?.user_avatar">
<img class="avatar-icon" [src]="build?.data?.user?.avatar_url" *ngIf="!build?.data?.sender?.avatar_url && !build?.data?.actor?.links?.avatar?.href && !build?.data?.user_avatar && build?.data?.user?.avatar_url">
<span class="avatar-img-container">
<img *ngIf="build?.data?.sender?.avatar_url && authorAvatar" [src]="authorAvatar" class="avatar-img">
<img *ngIf="build?.data?.sender?.avatar_url && authorAvatar && authorAvatar !== committerAvatar" [src]="committerAvatar" class="avatar-small">
<img *ngIf="!build?.data?.sender?.avatar_url && build?.data?.actor?.links?.avatar?.href" [src]="build?.data?.actor?.links?.avatar?.href" class="avatar-img">
<img *ngIf="!build?.data?.sender?.avatar_url && !build?.data?.actor?.links?.avatar?.href && build?.data?.user_avatar" [src]="build?.data?.user_avatar" class="avatar-img">
<img *ngIf="!build?.data?.sender?.avatar_url && !build?.data?.actor?.links?.avatar?.href && !build?.data?.user_avatar && build?.data?.user?.avatar_url" class="avatar-img" [src]="build?.data?.user?.avatar_url">
</span>
<span *ngIf="!build?.pr && !tag" class="bold larger">#{{ build?.id }}</span>
<span *ngIf="build?.pr && !tag" class="bold larger">PR #{{ build?.pr }}</span>
<span *ngIf="tag" class="bold larger">{{ tag }}</span>
@@ -1,5 +1,6 @@
import { Component, Input, HostBinding, OnInit } from '@angular/core';
import { SocketService } from '../../services/socket.service';
import { ApiService } from '../../services/api.service';

@Component({
selector: 'app-build-item',
@@ -11,10 +12,14 @@ export class AppBuildItemComponent implements OnInit {

processingRequest: boolean;
tag: string = null;
committerAvatar: string;
authorAvatar: string;

constructor(private socketService: SocketService) { }
constructor(private socketService: SocketService, private apiService: ApiService) { }

ngOnInit() {
this.setAvatars();

if (this.build.data && this.build.data.ref && this.build.data.ref.startsWith('refs/tags/')) {
this.tag = this.build.data.ref.replace('refs/tags/', '');
}
@@ -37,4 +42,21 @@ export class AppBuildItemComponent implements OnInit {
this.processingRequest = true;
this.socketService.emit({ type: 'stopBuild', data: { buildId: id } });
}

setAvatars(): void {
if (this.build.data.head_commit) {
const commit = this.build.data.head_commit;
this.committerAvatar = this.build.data.sender.avatar_url;
if (commit.author.username !== commit.committer.username) {
this.apiService.getGithubUserData(commit.author.username).subscribe((evt: any) => {
if (evt.status === 200) {
const body = JSON.parse(evt._body);
this.authorAvatar = body.avatar_url;
}
});
} else {
this.authorAvatar = this.committerAvatar;
}
}
}
}
@@ -74,8 +74,9 @@ <h2 *ngIf="tag">{{ job?.build?.data?.head_commit?.message }}</h2>
</div>
<div class="column is-4">
<p>
<span class="icon">
<img *ngIf="job?.build?.data?.sender?.avatar_url" [src]="job?.build?.data?.sender?.avatar_url" class="avatar-img">
<span class="avatar-img-container">
<img *ngIf="job?.build?.data?.sender?.avatar_url && authorAvatar" [src]="authorAvatar" class="avatar-img">
<img *ngIf="job?.build?.data?.sender?.avatar_url && authorAvatar && authorAvatar !== committerAvatar" [src]="committerAvatar" class="avatar-small">
<img *ngIf="!job?.build?.data?.sender?.avatar_url && job?.build?.data?.actor?.links?.avatar?.href" [src]="job?.build?.data?.actor?.links?.avatar?.href" class="avatar-img">
<img *ngIf="!job?.build?.data?.sender?.avatar_url && !job?.build?.data?.actor?.links?.avatar?.href && job?.build?.data?.user_avatar" [src]="job?.build?.data?.user_avatar" class="avatar-img">
<img *ngIf="!job?.build?.data?.sender?.avatar_url && !job?.build?.data?.actor?.links?.avatar?.href && !job?.build?.data?.user_avatar && job?.build?.data?.user?.avatar_url" class="avatar-img" [src]="job?.build?.data?.user?.avatar_url">
@@ -34,6 +34,8 @@ export class AppJobComponent implements OnInit, OnDestroy {
tag: string = null;
userData: any;
userId: string | null;
committerAvatar: string;
authorAvatar: string;

constructor(
private socketService: SocketService,
@@ -101,6 +103,8 @@ export class AppJobComponent implements OnInit, OnDestroy {
this.apiService.getJob(this.id, this.userId).subscribe(job => {
this.job = job;

this.setAvatars();

if (this.job.build.data.ref && this.job.build.data.ref.startsWith('refs/tags/')) {
this.tag = this.job.build.data.ref.replace('refs/tags/', '');
}
@@ -182,4 +186,21 @@ export class AppJobComponent implements OnInit, OnDestroy {
this.terminalReady = true;
}
}

setAvatars(): void {
if (this.job.build.data.head_commit) {
const commit = this.job.build.data.head_commit;
this.committerAvatar = this.job.build.data.sender.avatar_url;
if (commit.author.username !== commit.committer.username) {
this.apiService.getGithubUserData(commit.author.username).subscribe((evt: any) => {
if (evt.status === 200) {
const body = JSON.parse(evt._body);
this.authorAvatar = body.avatar_url;
}
});
} else {
this.authorAvatar = this.committerAvatar;
}
}
}
}
@@ -139,6 +139,10 @@ export class ApiService {
return this.post(`${this.url}/repositories/permission`, data);
}

getGithubUserData(username: string): Observable<any> {
return this.http.get(`https://api.github.com/users/${username}`);
}

private get(url: string, searchParams: URLSearchParams = null, auth = false): Observable<any> {
let headers = new Headers();
if (auth) {
@@ -27,12 +27,6 @@
font-size: 13px
border: 1px solid $divider

.avatar-img
border-radius: 50%
margin: 4px 5px 0 0
display: block
float: left

hr
margin: 5px 0

@@ -52,20 +46,23 @@
font-family: $font-family-bold

h2
font-size: 16px
font-size: 14px
font-weight: $weight-semibold
text-overflow: ellipsis
white-space: nowrap
overflow: hidden
padding: 10px 20px 5px 0
padding: 0 20px 5px 0
margin: 0

.column
display: flex
align-items: center

p
width: 100%
font-size: 14px
color: $white
padding: 0 20px
padding: 0 5px
display: flex
align-items: center

@@ -50,7 +50,7 @@
font-family: $font-family-bold

&.larger
font-size: 18px
font-size: 15px

&.smaller
font-size: 12px
@@ -283,13 +283,33 @@ progress
background-image: linear-gradient(-90deg, #FDC018 2%, #F8CF5D 98%);
border-radius: 10px

.avatar-img
.avatar-img-container
display: block
width: 40px
height: 40px
margin-right: 20px !important
position: relative
overflow: visible !important

img
width: 40px
height: 40px

.avatar-small
position: absolute
top: -12px
right: -12px
width: 30px
height: 30px
border: 1px solid $border
border-radius: 50%
z-index: 11

.avatar-img
display: block
max-width: 50px
height: 50px
border-radius: 50%
margin: 0 auto
border: 1px solid $border


.data-label

0 comments on commit cb5cc88

Please sign in to comment.