Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-06 17:48:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(demo): new layout for demo header, add call-to-action cards (#1979)

Browse source
This commit is contained in:
Vladislav Ahmetvaliev 2019-01-16 14:52:20 +03:00 • committed by Sergey Andrievskiy
parent 43cc3a1556
commit a71c8281ab
8 changed files with 270 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/app/@theme/components/header/header.component.html
View file

@ -9,7 +9,6 @@
</div>
<div class="header-container">
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
<nb-actions
size="medium"
[class.right]="position === 'normal'"
@ -18,24 +17,27 @@
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
</nb-action>
<nb-action class="control-item notifications" disabled icon="nb-notifications"></nb-action>
<nb-action class="control-item email" icon="nb-email"></nb-action>
<nb-action class="control-item search">
<nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
</nb-action>
<nb-action class="control-item github-start">
<iframe src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
</nb-action>
<nb-action class="control-item email-text" *ngIf="!hireTextVariant">
<strong>Need some help? <a (click)="trackEmailClick()" href="mailto:contact@akveo.com">contact@akveo.com</a></strong>
</nb-action>
<nb-action class="control-item email-text text-success" *ngIf="hireTextVariant === 'highlight-hire'">
<strong>Need some help? <a (click)="trackEmailClick()" href="mailto:contact@akveo.com">contact@akveo.com</a></strong>
</nb-action>
<nb-action class="control-item email-text text-success" *ngIf="hireTextVariant === 'developers-hire'">
<strong>Looking for developers for your project? <a (click)="trackEmailClick()" href="mailto:contact@akveo.com">contact@akveo.com</a></strong>
</nb-action>
<nb-action class="control-item email-text text-success" *ngIf="hireTextVariant === 'solution-hire'">
<strong>Need a custom solution? <a (click)="trackEmailClick()" href="mailto:contact@akveo.com">contact@akveo.com</a></strong>
</nb-action>
</nb-actions>
<nb-action class="control-item email-text text-success">
<a href="mailto:contact@akveo.com" (click)="trackEmailClick()" class="btn btn-outline-primary btn-with-icon">
<i class="nb-email"></i>
<span>contact@akveo.com</span>
</a>
</nb-action>
<nb-action class="control-item download-count">
<i class="icon" [innerHTML]="'download' | eva"></i>
<span>167.000</span>
</nb-action>
<nb-action class="control-item github-start">
<span>Support us: </span>
<iframe src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true"
frameborder="0"
scrolling="0"
width="170px"
height="20px">
</iframe>
</nb-action>
</nb-actions>
</div>

72
src/app/@theme/components/header/header.component.scss
View file

@ -12,12 +12,10 @@
width: 100%;
order: 0;
flex-direction: row;
flex: 1;
}
.right {
order: 1;
flex-direction: row-reverse;
flex: 1.5;
}
.logo-containter {
@ -27,21 +25,61 @@
}
.control-item {
display: block;
display: flex;
font-weight: 500;
&.email-text {
height: auto;
display: flex;
a {
text-decoration: underline;
font-size: 1.1428rem;
font-weight: 700;
font-family: nb-theme(font-main);
text-transform: none;
vertical-align: middle;
padding: 0.55rem 1.1rem 0.55rem 0.8rem;
background-color: nb-theme(header-button-background);
color: nb-theme(header-button-color);
border-color: nb-theme(header-button-outline);
&:hover {
background-color: nb-theme(header-button-background-hover);
}
}
i {
font-size: 2rem;
vertical-align: middle;
margin-right: 0.6rem;
}
}
&.github-start {
width: 140px;
width: 245px;
display: flex;
font-size: 1.285rem;
iframe {
width: 100px;
@include nb-ltr(margin-left, 1rem);
@include nb-rtl(margin-right, 1rem);
}
}
&.download-count {
display: flex;
font-size: 1.285rem;
font-family: nb-theme(font-secondary);
.icon {
fill: nb-theme(color-white);
@include nb-ltr(margin-right, 0.5rem);
@include nb-rtl(margin-left, 0.5rem);
font-size: 0;
@include nb-for-theme(default) {
fill: #bfc7cf;
}
}
}
}
@ -173,13 +211,21 @@
@include media-breakpoint-down(xl) {
.control-item.email, .control-item.notifications {
.control-item.search, .control-item.notifications, .control-item.github-start span {
display: none;
}
.control-item.github-start {
width: auto;
iframe {
margin: 0;
}
}
}
@include media-breakpoint-down(lg) {
.control-item.search {
nb-user /deep/ .user-name, .control-item.download-count {
display: none;
}
}
@ -190,6 +236,10 @@
border: none;
}
ngx-theme-switcher {
display: none;
}
.control-item {
display: none;
}
@ -209,11 +259,7 @@
@include media-breakpoint-down(sm) {
nb-user /deep/ .user-name {
display: none;
}
.control-item.github-start {
.control-item.email-text {
display: none;
}

53
src/app/@theme/components/header/header.component.ts
View file

@ -1,11 +1,8 @@
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { NbMenuService, NbSidebarService } from '@nebular/theme';
import { UserData } from '../../../@core/data/users';
import { AnalyticsService } from '../../../@core/utils/analytics.service';
import { takeWhile } from 'rxjs/operators/takeWhile';
import { fromEvent as observableFromEvent } from 'rxjs/observable/fromEvent';
import { AbService } from '../../../@core/utils/ab.service';
import { AnalyticsService } from '../../../@core/utils';
import { LayoutService } from '../../../@core/utils';
@Component({
@ -13,44 +10,23 @@ import { LayoutService } from '../../../@core/utils';
styleUrls: ['./header.component.scss'],
templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit , OnDestroy {
export class HeaderComponent implements OnInit {
@Input() position = 'normal';
user: any;
hireTextVariant: string = 'solution-hire';
userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
private alive = true;
userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
constructor(private sidebarService: NbSidebarService,
private menuService: NbMenuService,
private userService: UserData,
private analytics: AnalyticsService,
private abService: AbService,
private layoutService: LayoutService) {
observableFromEvent(document, 'mouseup')
.pipe(takeWhile(() => this.alive))
.subscribe(() => {
let selection: any;
if (window.getSelection) {
selection = window.getSelection();
} else if ((<any> document).selection) {
selection = (<any> document).selection.createRange();
}
if (selection && selection.toString() === 'contact@akveo.com') {
this.analytics.trackEvent('clickContactEmail', 'select');
}
});
}
private layoutService: LayoutService) {}
ngOnInit() {
this.userService.getUsers()
.subscribe((users: any) => this.user = users.nick);
this.listenForVariants();
}
toggleSidebar(): boolean {
@ -71,23 +47,4 @@ export class HeaderComponent implements OnInit , OnDestroy {
trackEmailClick() {
this.analytics.trackEvent('clickContactEmail', 'click');
}
ngOnDestroy() {
this.alive = false;
}
listenForVariants() {
const variants = [
AbService.VARIANT_DEVELOPERS_HIRE,
AbService.VARIANT_HIGHLIGHT_HIRE,
AbService.VARIANT_SOLUTION_HIRE,
];
this.abService.onAbEvent()
.subscribe((e: { name: string }) => {
if (variants.includes(e.name)) {
this.hireTextVariant = e.name;
}
});
}
}