Permalink
Browse files

feat(ui): notifications dropdown

  • Loading branch information...
jkuri committed Sep 12, 2017
1 parent 8eef8cc commit 2a19784df1bf0a8e7f39f55d6e854057c67b27db
@@ -0,0 +1,7 @@
<svg width="69px" height="91px" viewBox="0 0 69 91" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-14.000000, 0.000000)" fill-rule="nonzero" fill="#7F8FA4">
<path d="M24.7,33.6 L24.7,48.2 C24.7,52.8 23.1,57.2 20.1,60.8 L16.1,65.8 C15.9,66 15.8,66.3 15.7,66.5 C15.2,66.9 14.9,67.4 14.9,68.1 C14.9,73.9 25.1,77.5 37.5,78.9 C37.4,79.1 37.4,79.3 37.4,79.6 C37.5,85.8 42.7,91 49,91 C55.3,91 60.5,85.8 60.5,79.5 C60.5,79.3 60.5,79 60.4,78.8 C72.8,77.4 83,73.8 83,68 C83,67.4 82.7,66.8 82.2,66.4 C82.1,66.1 82,65.9 81.8,65.7 L77.8,60.7 C74.9,57.2 73.3,52.7 73.3,48.2 L73.3,33.6 C73.3,24.4 68,16.4 60.2,12.5 C60.4,12.2 60.5,11.9 60.5,11.5 C60.5,5.2 55.3,0 49,0 C42.7,0 37.5,5.2 37.5,11.5 C37.5,11.9 37.6,12.2 37.8,12.5 C30,16.4 24.7,24.4 24.7,33.6 Z M56.5,79.5 C56.5,83.6 53.1,87 49,87 C44.9,87 41.5,83.6 41.5,79.5 C41.5,79.4 41.5,79.3 41.5,79.2 C44,79.4 46.5,79.5 49,79.5 C51.5,79.5 54.1,79.4 56.5,79.2 C56.5,79.3 56.5,79.4 56.5,79.5 Z M75.7,64.4 L78.8,68.2 C78.9,68.3 78.9,68.3 79,68.4 C78,71 67.5,75.4 49.1,75.4 C30.6,75.4 20.2,71 19.2,68.4 C19.3,68.3 19.3,68.3 19.4,68.2 L22.5,64.3 C22.6,64.4 22.7,64.4 22.9,64.5 C26.7,66 36.8,69.4 49.2,69.4 C61.9,69.4 71.8,66 75.7,64.4 Z M49,4 C53,4 56.2,7.1 56.5,11 C54.4,10.4 52.1,10 49.7,10 C49.4,10 49.2,10.1 49,10.1 C48.8,10 48.5,10 48.3,10 C46,10 43.7,10.3 41.5,11 C41.8,7.1 45,4 49,4 Z M48.3,14 C48.6,14 48.8,13.9 49,13.9 C49.2,14 49.5,14 49.7,14 C60.5,14 69.3,22.8 69.3,33.6 L69.3,48.2 C69.3,52.8 70.7,57.3 73.2,61.1 C69.4,62.5 60.3,65.4 49,65.4 C37.9,65.4 28.8,62.5 24.8,61.1 C27.3,57.3 28.7,52.8 28.7,48.2 L28.7,33.6 C28.7,22.8 37.5,14 48.3,14 Z" id="Shape"></path>
</g>
</g>
</svg>
@@ -12,6 +12,18 @@
</a>
</div>
<div class="nav-right">
<a class="nav-item notification-item" *ngIf="user" (click)="toggleNotify()">
<img src="/images/icons/notification.svg">
<div class="notify-num-container">
<span>5</span>
</div>
<div class="notification-dropdown" *ngIf="notifyDropped">
<div class="notification-item">
<span>[error]: bleenco/abstruse access_token not set</span>
</div>
</div>
</a>

<a class="nav-item user-item" (click)="toggleMenu()" *ngIf="user">
<img class="nav-avatar" [src]="user.avatar">
<div class="nav-dropdown" *ngIf="menuDropped">
@@ -26,6 +38,7 @@
</a>
</div>
</a>

<a class="nav-item" *ngIf="!user" routerLink="/login">
<img src="images/icons/login.svg" class="nav-item-icon">
Login
@@ -9,6 +9,7 @@ import { ConfigService } from '../../services/config.service';
})
export class AppHeaderComponent implements OnInit {
menuDropped: boolean;
notifyDropped: boolean;
user: any;

constructor(
@@ -42,6 +43,10 @@ export class AppHeaderComponent implements OnInit {
this.menuDropped = !this.menuDropped;
}

toggleNotify() {
this.notifyDropped = !this.notifyDropped;
}

logout(): void {
this.authService.logout();
this.menuDropped = false;
@@ -50,7 +55,7 @@ export class AppHeaderComponent implements OnInit {

@HostListener('document:click', ['$event'])
onBlur(e: MouseEvent) {
if (!this.menuDropped) {
if (!this.menuDropped || !this.notifyDropped) {
return;
}

@@ -63,5 +68,15 @@ export class AppHeaderComponent implements OnInit {
if (dropMenu && dropMenu !== e.target && !dropMenu.contains((<any>e.target))) {
this.menuDropped = false;
}

let toggleNotify = this.elementRef.nativeElement.querySelector('.notification-item');
if (e.target === toggleBtn || toggleBtn.contains(<any>e.target)) {
return;
}

let notifyMenu = this.elementRef.nativeElement.querySelector('.notification-dropdown');
if (notifyMenu && notifyMenu !== e.target && !dropMenu.contains((<any>e.target))) {
this.notifyDropped = false;
}
}
}
@@ -28,4 +28,3 @@ html, body, .hero
height: 100%
background: $background-button
font-family: $font-family-regular
color: $white
@@ -1,15 +1,78 @@
.nav
height: 60px
min-height: 60px
width: 100%
background: $background
z-index: auto !important
border-bottom: 1px solid $border
z-index: 90 !important
background: $white
position: relative

.nav-item
color: $color-secondary !important
font-weight: $weight-semibold
font-size: 13px
margin-right: 15px

&.notification-item
cursor: pointer

img
width: 30px
min-height: 30px

.notify-num-container
position: absolute
width: 20px
height: 20px
display: flex
justify-content: center
align-items: center
background: $blue
color: $white
border-radius: 50%
top: 9px
right: 82px

.notification-dropdown
position: absolute
width: 300px
top: 75px
right: 62px
border-radius: 5px
padding-top: 12px
padding-bottom: 12px
background: $background
box-shadow: 0 2px 5px rgba(10, 10, 10, 0.1)
border: 1px solid $border
z-index: 100

&:after
content: ''
position: absolute
top: -7.5px
right: 35px
background: $background
width: 15px
height: 15px
transform: rotate(-45deg)
border-top: 1px solid $border
border-right: 1px solid $border

.notification-item
display: block
color: $color-secondary
padding: 10px
font-size: 12px
position: relative
text-align: left

&:last-child
border-bottom-left-radius: 4px
border-bottom-right-radius: 4px

&:hover
background: $background

&.user-item
margin-right: 0

@@ -20,6 +83,7 @@

&.nav-logo
margin-right: 15px
margin-left: 0

img
min-height: 20px
@@ -92,6 +156,7 @@
border-bottom: none
padding-top: 20px
margin-bottom: 10px
z-index: 80 !important

.nav-left

0 comments on commit 2a19784

Please sign in to comment.