Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-03 16:18:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(demo): demo version additions

Browse source
This commit is contained in:
Dmitry Nehaychik 2018-06-21 17:09:29 +03:00 • committed by Sergey Andrievskiy
parent d3238ddb49
commit 93d800b676
14 changed files with 253 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/app/@theme/components/footer/footer.component.ts
View file

@ -4,12 +4,21 @@ import { Component } from '@angular/core';
selector: 'ngx-footer',
styleUrls: ['./footer.component.scss'],
template: `
<span class="created-by">Created with ♥ by <b><a href="https://akveo.com" target="_blank">Akveo</a></b> 2017</span>
<span class="created-by">
Created with ♥ by <b><a href="http://akveo.com?utm_source=ngx-admin-demo&utm_medium=footer"
target="_blank">Akveo</a></b> 2018.
Made with
<b>
<a href="https://akveo.github.io/nebular/?utm_source=ngx-admin&utm_medium=footer_link" target="_blank">
Nebular.
</a>
</b>
</span>
<div class="socials">
<a href="#" target="_blank" class="ion ion-social-github"></a>
<a href="#" target="_blank" class="ion ion-social-facebook"></a>
<a href="#" target="_blank" class="ion ion-social-twitter"></a>
<a href="#" target="_blank" class="ion ion-social-linkedin"></a>
<a href="https://github.com/akveo/ngx-admin" target="_blank" class="ion ion-social-github"></a>
<a href="https://www.facebook.com/akveo/" target="_blank" class="ion ion-social-facebook"></a>
<a href="https://twitter.com/akveo_inc" target="_blank" class="ion ion-social-twitter"></a>
<a href="https://www.linkedin.com/company/akveo" target="_blank" class="ion ion-social-linkedin"></a>
</div>
`,
})

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

@ -17,10 +17,25 @@
<nb-action *nbIsGranted="['view', 'user']" >
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
</nb-action>
<nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
<nb-action class="control-item" icon="nb-email"></nb-action>
<nb-action class="control-item">
<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-actions>
<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>
</div>

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

@ -12,10 +12,12 @@
width: 100%;
order: 0;
flex-direction: row;
flex: 1;
}
.right {
order: 1;
flex-direction: row-reverse;
flex: 1.5;
}
.logo-containter {
@ -26,6 +28,22 @@
.control-item {
display: block;
&.email-text {
height: auto;
a {
text-decoration: underline;
}
}
&.github-start {
width: 140px;
display: flex;
iframe {
width: 100px;
}
}
}
.header-container {
@ -153,6 +171,19 @@
}
}
@include media-breakpoint-down(xl) {
.control-item.email, .control-item.notifications {
display: none;
}
}
@include media-breakpoint-down(lg) {
.control-item.search {
display: none;
}
}
@include media-breakpoint-down(md) {
nb-action:not(.toggle-settings) {
@ -181,9 +212,10 @@
nb-user /deep/ .user-name {
display: none;
}
}
@include media-breakpoint-down(is) {
.control-item.github-start {
display: none;
}
.header-container {
.logo {

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

@ -1,8 +1,11 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { NbMenuService, NbSidebarService } from '@nebular/theme';
import { UserData } from '../../../@core/data/users';
import { AnalyticsService } from '../../../@core/utils';
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 { LayoutService } from '../../../@core/utils';
@Component({
@ -10,24 +13,44 @@ import { LayoutService } from '../../../@core/utils';
styleUrls: ['./header.component.scss'],
templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit {
export class HeaderComponent implements OnInit , OnDestroy {
@Input() position = 'normal';
user: any;
hireTextVariant: string = 'solution-hire';
userMenu = [{ title: 'Profile' }, { title: 'Log out' }];
private alive = true;
constructor(private sidebarService: NbSidebarService,
private menuService: NbMenuService,
private userService: UserData,
private analyticsService: AnalyticsService,
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('contactEmail', 'select');
}
});
}
ngOnInit() {
this.userService.getUsers()
.subscribe((users: any) => this.user = users.nick);
this.listenForVariants();
}
toggleSidebar(): boolean {
@ -42,6 +65,29 @@ export class HeaderComponent implements OnInit {
}
startSearch() {
this.analyticsService.trackEvent('startSearch');
this.analytics.trackEvent('startSearch');
}
trackEmailClick() {
this.analytics.trackEvent('contactEmail', '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;
}
});
}
}

6
src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts
View file

@ -1,6 +1,7 @@
import { Component, OnDestroy, Input } from '@angular/core';
import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { AnalyticsService } from '../../../@core/utils/analytics.service';
@Component({
selector: 'ngx-layout-direction-switcher',
@ -24,7 +25,8 @@ export class LayoutDirectionSwitcherComponent implements OnDestroy {
@Input() vertical: boolean = false;
constructor(private directionService: NbLayoutDirectionService) {
constructor(private directionService: NbLayoutDirectionService,
private analyticsService: AnalyticsService) {
this.currentDirection = this.directionService.getDirection();
this.directionService.onDirectionChange()
@ -34,6 +36,8 @@ export class LayoutDirectionSwitcherComponent implements OnDestroy {
toggleDirection(newDirection) {
this.directionService.setDirection(newDirection);
this.analyticsService.trackEvent('toggleDirection', newDirection);
}
ngOnDestroy() {