From a71c8281ab34cb8af65bbd6be1e6026d9ef10471 Mon Sep 17 00:00:00 2001 From: Vladislav Ahmetvaliev Date: Wed, 16 Jan 2019 14:52:20 +0300 Subject: [PATCH] feat(demo): new layout for demo header, add call-to-action cards (#1979) --- .../components/header/header.component.html | 38 +++---- .../components/header/header.component.scss | 72 +++++++++++--- .../components/header/header.component.ts | 53 +--------- src/app/@theme/styles/themes.scss | 20 +++- .../call-action-card.component.scss | 99 +++++++++++++++++++ .../call-action-card.component.ts | 50 ++++++++++ .../e-commerce/e-commerce.component.html | 16 +++ src/app/pages/e-commerce/e-commerce.module.ts | 2 + 8 files changed, 270 insertions(+), 80 deletions(-) create mode 100644 src/app/pages/e-commerce/call-action-card/call-action-card.component.scss create mode 100644 src/app/pages/e-commerce/call-action-card/call-action-card.component.ts diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html index 7f76e567..5ea3f155 100644 --- a/src/app/@theme/components/header/header.component.html +++ b/src/app/@theme/components/header/header.component.html @@ -9,7 +9,6 @@
- - - - - - - - - - + + + + 167.000 + + + Support us: + + +
diff --git a/src/app/@theme/components/header/header.component.scss b/src/app/@theme/components/header/header.component.scss index 73cd4e84..1a59fea5 100644 --- a/src/app/@theme/components/header/header.component.scss +++ b/src/app/@theme/components/header/header.component.scss @@ -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; } diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts index 2f92d57c..0bfdbd78 100644 --- a/src/app/@theme/components/header/header.component.ts +++ b/src/app/@theme/components/header/header.component.ts @@ -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 (( document).selection) { - selection = ( 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; - } - }); - } } diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss index 5b8f97cd..dbddbf6b 100644 --- a/src/app/@theme/styles/themes.scss +++ b/src/app/@theme/styles/themes.scss @@ -7,10 +7,11 @@ $nb-enabled-themes: (default, cosmic, corporate); $nb-themes: nb-register-theme(( - // app wise variables for each theme + // app wise variables for each theme sidebar-header-gap: 2rem, sidebar-header-height: initial, layout-content-width: 1400px, + header-height: 5.45rem, font-main: Roboto, font-secondary: Exo, @@ -19,6 +20,11 @@ $nb-themes: nb-register-theme(( switcher-background-percentage: 50%, drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79), + header-button-background: #f5f7fa, + header-button-background-hover: #ebeff5, + header-button-color: #2a2a2a, + header-button-outline: #42db7d, + list-item-border-width: 1px, slide-out-container-width: 30%, @@ -46,6 +52,7 @@ $nb-themes: nb-register-theme(( sidebar-header-gap: 2rem, sidebar-header-height: initial, layout-content-width: 1400px, + header-height: 5.45rem, font-main: Roboto, font-secondary: Exo, @@ -54,6 +61,11 @@ $nb-themes: nb-register-theme(( switcher-background-percentage: 14%, drops-icon-line-gadient: -webkit-linear-gradient(#a258fe, #7958fa), + header-button-background: #4e41a5, + header-button-background-hover: #675cb2, + header-button-color: #ffffff, + header-button-outline: #7659ff, + list-item-border-width: 1px, slide-out-container-width: 30%, @@ -81,6 +93,7 @@ $nb-themes: nb-register-theme(( sidebar-header-gap: 2rem, sidebar-header-height: initial, layout-content-width: 1400px, + header-height: 5.45rem, font-main: Roboto, font-secondary: Exo, @@ -89,6 +102,11 @@ $nb-themes: nb-register-theme(( switcher-background-percentage: 14%, drops-icon-line-gadient: -webkit-linear-gradient(#e9e8eb, #a7a2be), + header-button-background: #2b2d34, + header-button-background-hover: #494a50, + header-button-color: #ffffff, + header-button-outline: #a4abb3, + list-item-border-width: 1px, slide-out-container-width: 30%, diff --git a/src/app/pages/e-commerce/call-action-card/call-action-card.component.scss b/src/app/pages/e-commerce/call-action-card/call-action-card.component.scss new file mode 100644 index 00000000..50fb7972 --- /dev/null +++ b/src/app/pages/e-commerce/call-action-card/call-action-card.component.scss @@ -0,0 +1,99 @@ +@import '../../../@theme/styles/themes'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + nb-card { + flex-direction: row; + align-items: center; + height: 6rem; + overflow: visible; + + $shadow: nb-theme(btn-hero-shadow); + box-shadow: $shadow; + + .icon-container { + height: 100%; + padding: 0; + + @include nb-for-theme(cosmic) { + background-image: linear-gradient(to right, #a054fe 0%, #7a58ff 100%); + } + + @include nb-for-theme(corporate) { + background-image: linear-gradient(to right, #ff9f6f 0%, #ff9f6f 100%); + } + + @include nb-for-theme(default) { + background-image: linear-gradient(to right, #ff4c6f 0%, #ff4c9f 100%); + } + + @include nb-ltr(border-radius, nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius)); + @include nb-rtl(border-radius, 0 nb-theme(card-border-radius) nb-theme(card-border-radius) 0); + + @include media-breakpoint-down(lg) { + display: none; + } + } + + .icon { + display: flex; + align-items: center; + justify-content: center; + width: 7rem; + height: 100%; + font-size: 3.2rem; + border-radius: nb-theme(card-border-radius); + transition: width 0.4s ease; + transform: translate3d(0, 0, 0); + -webkit-transform-style: preserve-3d; + -webkit-backface-visibility: hidden; + + /deep/ svg { + width: 2.6rem; + height: 2.6rem; + vertical-align: middle; + fill: nb-theme(color-white); + } + } + + .details { + flex: 1 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + @include nb-ltr(padding, 0 0.5rem 0 1.15rem); + @include nb-rtl(padding, 0 1.15rem 0 0.5rem); + border-left: 1px solid transparent; + } + + .title { + font-family: nb-theme(font-secondary); + font-size: 1.25rem; + font-weight: nb-theme(font-weight-bold); + color: nb-theme(card-fg-heading); + } + + .status { + font-size: 1rem; + font-weight: nb-theme(font-weight-light); + text-transform: uppercase; + color: nb-theme(card-fg); + } + + .actions { + @include nb-ltr(padding, 0 1.15rem 0 0.5rem); + @include nb-rtl(padding, 0 0.5rem 0 1.15rem); + } + + [nbButton] { + padding-top: 1rem; + padding-bottom: 1rem; + min-width: 11.4rem; + font-weight: 800; + font-size: 1.15rem; + text-shadow: 0 0 16px rgba(0, 0, 0, 0.16); + box-shadow: none; + } + } +} diff --git a/src/app/pages/e-commerce/call-action-card/call-action-card.component.ts b/src/app/pages/e-commerce/call-action-card/call-action-card.component.ts new file mode 100644 index 00000000..065aa56b --- /dev/null +++ b/src/app/pages/e-commerce/call-action-card/call-action-card.component.ts @@ -0,0 +1,50 @@ +import { Component, Input, OnDestroy } from '@angular/core'; +import { NbThemeService } from '@nebular/theme'; +import { takeWhile } from 'rxjs/operators'; + +@Component({ + selector: 'ngx-call-action-card', + styleUrls: ['./call-action-card.component.scss'], + template: ` + +
+
+
+
+ +
+
{{ title }}
+
+
+ {{ linkTitle }} +
+ + `, +}) +export class CallActionCardComponent implements OnDestroy { + + private alive = true; + + @Input() title: string; + @Input() type: string; + @Input() link: string; + @Input() linkTitle: string; + + currentTheme: string; + + constructor(private themeService: NbThemeService) { + this.themeService.getJsTheme() + .pipe(takeWhile(() => this.alive)) + .subscribe(theme => { + this.currentTheme = theme.name; + }); + } + + ngOnDestroy() { + this.alive = false; + } +} diff --git a/src/app/pages/e-commerce/e-commerce.component.html b/src/app/pages/e-commerce/e-commerce.component.html index a2798c85..ba307245 100644 --- a/src/app/pages/e-commerce/e-commerce.component.html +++ b/src/app/pages/e-commerce/e-commerce.component.html @@ -1,3 +1,19 @@ +
+
+ + +
+
+ + +
+
diff --git a/src/app/pages/e-commerce/e-commerce.module.ts b/src/app/pages/e-commerce/e-commerce.module.ts index 04001f31..fb9b4a1a 100644 --- a/src/app/pages/e-commerce/e-commerce.module.ts +++ b/src/app/pages/e-commerce/e-commerce.module.ts @@ -4,6 +4,7 @@ import { NgxChartsModule } from '@swimlane/ngx-charts'; import { ThemeModule } from '../../@theme/theme.module'; import { ECommerceComponent } from './e-commerce.component'; +import { CallActionCardComponent } from './call-action-card/call-action-card.component'; import { ProfitCardComponent } from './profit-card/profit-card.component'; import { ECommerceChartsPanelComponent } from './charts-panel/charts-panel.component'; import { OrdersChartComponent } from './charts-panel/charts/orders-chart.component'; @@ -56,6 +57,7 @@ import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earni ], declarations: [ ECommerceComponent, + CallActionCardComponent, StatsCardFrontComponent, StatsAreaChartComponent, StatsBarAnimationChartComponent,