From 70c407dac4b41e916d9f493e5e1c8dc2038c49d9 Mon Sep 17 00:00:00 2001 From: "d.strigo" Date: Fri, 10 Jul 2020 13:00:07 +0300 Subject: [PATCH] docs(download): add download button with hubspot form --- docs/app/@theme/theme.module.ts | 2 + .../main-info-section.component.html | 19 ++-- .../main-info-section.component.scss | 29 +++--- .../main-info-section.component.ts | 3 +- .../download-admin.component.html | 3 + .../download-admin.component.scss | 59 ++++++++++++ .../download-admin.component.ts | 24 +++++ .../download-form.component.html | 8 ++ .../download-form.component.scss | 93 +++++++++++++++++++ .../download-form/download-form.component.ts | 36 +++++++ .../material-theme-link.component.ts | 6 ++ docs/app/shared/landing-shared.module.ts | 37 ++++++-- docs/app/shared/pipes/eva-icons.pipe.ts | 2 +- docs/index.html | 5 + docs/typings.d.ts | 1 + 15 files changed, 302 insertions(+), 25 deletions(-) create mode 100644 docs/app/shared/components/download-admin/download-admin.component.html create mode 100644 docs/app/shared/components/download-admin/download-admin.component.scss create mode 100644 docs/app/shared/components/download-admin/download-admin.component.ts create mode 100644 docs/app/shared/components/download-form/download-form.component.html create mode 100644 docs/app/shared/components/download-form/download-form.component.scss create mode 100644 docs/app/shared/components/download-form/download-form.component.ts diff --git a/docs/app/@theme/theme.module.ts b/docs/app/@theme/theme.module.ts index cd74e5d3..84ab3451 100644 --- a/docs/app/@theme/theme.module.ts +++ b/docs/app/@theme/theme.module.ts @@ -17,6 +17,7 @@ import { NbCardModule, NbSidebarModule, NbTabsetModule, + NbDialogModule, } from '@nebular/theme'; import { LandingSharedModule } from '../shared/landing-shared.module'; @@ -93,6 +94,7 @@ export class NgxLandingThemeModule { ...NbThemeModule.forRoot({ name: 'ngx-landing' }).providers, ...NbMenuModule.forRoot().providers, ...NbSidebarModule.forRoot().providers, + ...NbDialogModule.forRoot().providers, ...ngxLandingServices, ], diff --git a/docs/app/pages/home/main-info-section/main-info-section.component.html b/docs/app/pages/home/main-info-section/main-info-section.component.html index ee5941eb..e49f8dfd 100644 --- a/docs/app/pages/home/main-info-section/main-info-section.component.html +++ b/docs/app/pages/home/main-info-section/main-info-section.component.html @@ -29,11 +29,18 @@
- Installation Docs - Demo +
+ + Installation Docs + + + Demo + +
+ +
- diff --git a/docs/app/pages/home/main-info-section/main-info-section.component.scss b/docs/app/pages/home/main-info-section/main-info-section.component.scss index 04d43216..b428337a 100644 --- a/docs/app/pages/home/main-info-section/main-info-section.component.scss +++ b/docs/app/pages/home/main-info-section/main-info-section.component.scss @@ -113,21 +113,28 @@ margin-top: 1.875rem; } + .buttons-links { + display: flex; + justify-content: space-between; + + .btn { + flex: 1; + } + } + .btn { font-family: nb-theme(font-main), sans-serif; border-radius: 3px; border: none; background: #ffffff; color: #000000; - padding: 1.125rem 1em; + padding: 1.125rem 0; box-shadow: nb-theme(shadow-default); cursor: pointer; text-transform: uppercase; &.btn-demo { margin-left: 1em; - padding-left: 4rem; - padding-right: 4rem; color: #ffffff; background-color: nb-theme(color-active-fg); box-shadow: nb-theme(shadow-btn); @@ -181,13 +188,6 @@ margin-right: 0.75rem; margin-left: 1rem; } - - .btn { - &.btn-demo { - padding-left: 3.25rem; - padding-right: 3.25rem; - } - } } @include media-breakpoint-down(xxl) { @@ -271,14 +271,21 @@ } .buttons { + padding-right: 1rem; + padding-left: 1rem; + a { display: block; - margin: 0 1rem; + margin: 0; &.btn-demo { margin-top: 1rem; } } } + + .buttons-links { + display: block; + } } } diff --git a/docs/app/pages/home/main-info-section/main-info-section.component.ts b/docs/app/pages/home/main-info-section/main-info-section.component.ts index 17e95e7a..b2e611e6 100644 --- a/docs/app/pages/home/main-info-section/main-info-section.component.ts +++ b/docs/app/pages/home/main-info-section/main-info-section.component.ts @@ -14,7 +14,8 @@ import { takeWhile } from 'rxjs/operators'; styleUrls: ['./main-info-section.component.scss'], }) export class MainInfoSectionComponent implements OnDestroy { - constructor(themeService: NbThemeService, breakpointService: NbMediaBreakpointsService) { + constructor(themeService: NbThemeService, + breakpointService: NbMediaBreakpointsService) { this.breakpoints = breakpointService.getBreakpointsMap(); themeService.onMediaQueryChange() .pipe(takeWhile(() => this.alive)) diff --git a/docs/app/shared/components/download-admin/download-admin.component.html b/docs/app/shared/components/download-admin/download-admin.component.html new file mode 100644 index 00000000..48e03664 --- /dev/null +++ b/docs/app/shared/components/download-admin/download-admin.component.html @@ -0,0 +1,3 @@ + diff --git a/docs/app/shared/components/download-admin/download-admin.component.scss b/docs/app/shared/components/download-admin/download-admin.component.scss new file mode 100644 index 00000000..75c0a5de --- /dev/null +++ b/docs/app/shared/components/download-admin/download-admin.component.scss @@ -0,0 +1,59 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import '../../../@theme/styles/themes'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + .btn { + font-family: nb-theme(font-main), sans-serif; + border-radius: 3px; + border: none; + background: #ffffff; + color: #000000; + padding: 1.125rem 0; + box-shadow: nb-theme(shadow-default); + cursor: pointer; + text-transform: uppercase; + + &.btn-download { + margin-left: 1em; + color: #ffffff; + background-color: nb-theme(color-active-fg); + box-shadow: nb-theme(shadow-btn); + + &:hover { + box-shadow: nb-theme(shadow-hover-green-btn); + } + + &:active { + box-shadow: nb-theme(shadow-active-green-btn); + } + } + + &.btn-download { + margin-left: 0; + margin-top: 1rem; + width: 100%; + } + + &:hover { + box-shadow: nb-theme(shadow-hover-btn); + } + + &:active { + box-shadow: nb-theme(shadow-active-btn); + } + } + + @include media-breakpoint-down(md) { + .btn { + font-size: 0.7rem; + padding-bottom: 1rem; + padding-top: 1rem; + } + } +} diff --git a/docs/app/shared/components/download-admin/download-admin.component.ts b/docs/app/shared/components/download-admin/download-admin.component.ts new file mode 100644 index 00000000..62e4fc05 --- /dev/null +++ b/docs/app/shared/components/download-admin/download-admin.component.ts @@ -0,0 +1,24 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component } from '@angular/core'; +import { NbDialogService } from '@nebular/theme'; +import { DownloadFormComponent } from '../download-form/download-form.component'; + +@Component({ + selector: 'ngx-download-admin', + templateUrl: './download-admin.component.html', + styleUrls: ['./download-admin.component.scss'], +}) +export class DownloadAdminComponent { + + constructor(private dialogService: NbDialogService) { + } + + openDialog() { + this.dialogService.open(DownloadFormComponent); + } +} diff --git a/docs/app/shared/components/download-form/download-form.component.html b/docs/app/shared/components/download-form/download-form.component.html new file mode 100644 index 00000000..363b74c9 --- /dev/null +++ b/docs/app/shared/components/download-form/download-form.component.html @@ -0,0 +1,8 @@ + + +
+ +
+
+ + diff --git a/docs/app/shared/components/download-form/download-form.component.scss b/docs/app/shared/components/download-form/download-form.component.scss new file mode 100644 index 00000000..418c07a6 --- /dev/null +++ b/docs/app/shared/components/download-form/download-form.component.scss @@ -0,0 +1,93 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import '~@nebular/theme/styles/global/breakpoints'; + +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + nb-card-body { + position: relative; + } + + .close-icon { + cursor: pointer; + position: absolute; + right: 0.1rem; + top: 0.1rem; + } + + ::ng-deep .custom-form { + .modal-header { + display: none; + } + + .modal-body { + padding-bottom: 0; + } + + .actions { + display: flex; + justify-content: flex-end; + } + + input.hs-input { + width: 100%; + font-size: nb-theme(font-size-sm); + padding: 0.75rem 1rem !important; + border: 1px solid #e4e9f2; + box-shadow: nb-theme(shadow-default); + border-radius: 0.25rem; + + &.invalid { + box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6); + } + + &::placeholder { + color: #434a59; + opacity: 0.24; + } + + &:focus { + outline: none; + } + } + + .hs-error-msgs { + list-style-type: none; + padding: 0; + } + + .hs-form-required, .hs-error-msg { + color: #f2545b; + } + + .hs_error_rollup { + display: none; + } + + .btn { + margin-top: 2rem; + font-family: nb-theme(font-main), sans-serif; + border-radius: 3px; + border: none; + background-color: nb-theme(color-active-fg); + color: #ffffff; + padding: 1rem 2rem; + box-shadow: nb-theme(shadow-btn); + cursor: pointer; + text-transform: uppercase; + + &:hover { + box-shadow: nb-theme(shadow-hover-green-btn); + } + + &:active { + box-shadow: nb-theme(shadow-active-green-btn); + } + } + } +} diff --git a/docs/app/shared/components/download-form/download-form.component.ts b/docs/app/shared/components/download-form/download-form.component.ts new file mode 100644 index 00000000..758e1b42 --- /dev/null +++ b/docs/app/shared/components/download-form/download-form.component.ts @@ -0,0 +1,36 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { AfterViewInit, Component, Inject } from '@angular/core'; +import { NB_WINDOW, NbDialogRef } from '@nebular/theme'; + +@Component({ + selector: 'ngx-download-form', + templateUrl: './download-form.component.html', + styleUrls: ['./download-form.component.scss'], +}) +export class DownloadFormComponent implements AfterViewInit { + + constructor(@Inject(NB_WINDOW) private window, + protected ref: NbDialogRef) { + } + + ngAfterViewInit() { + hbspt.forms.create({ + portalId: '2452262', + formId: '93007d7b-5f11-4dd8-bcfd-f8b99d31f31e', + target: '#hubspotForm', + submitButtonClass: 'btn', + css: '', + cssClass: 'custom-form', + redirectUrl: 'https://github.com/akveo/ngx-admin', + }); + } + + closeDialog() { + this.ref.close(); + } +} diff --git a/docs/app/shared/components/material-theme-link/material-theme-link.component.ts b/docs/app/shared/components/material-theme-link/material-theme-link.component.ts index 2b417439..fd530449 100644 --- a/docs/app/shared/components/material-theme-link/material-theme-link.component.ts +++ b/docs/app/shared/components/material-theme-link/material-theme-link.component.ts @@ -1,3 +1,9 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + import { Component, ViewChild, AfterViewInit, Input } from '@angular/core'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { NbPopoverDirective } from '@nebular/theme'; diff --git a/docs/app/shared/landing-shared.module.ts b/docs/app/shared/landing-shared.module.ts index 7f2f51b7..d43b794b 100644 --- a/docs/app/shared/landing-shared.module.ts +++ b/docs/app/shared/landing-shared.module.ts @@ -1,16 +1,41 @@ import { NgModule } from '@angular/core'; -import {NbBadgeModule, NbPopoverModule} from '@nebular/theme'; +import { NbBadgeModule, NbCardModule, NbDialogModule, NbPopoverModule } from '@nebular/theme'; import { MaterialThemeLinkComponent } from './components/material-theme-link/material-theme-link.component'; import { CapitalizePipe } from './pipes/capitalize.pipe'; import { EvaIconsPipe } from './pipes/eva-icons.pipe'; import { RouterModule } from '@angular/router'; +import { DownloadAdminComponent } from './components/download-admin/download-admin.component'; +import { DownloadFormComponent } from './components/download-form/download-form.component'; -const component = [MaterialThemeLinkComponent]; -const pipes = [CapitalizePipe, EvaIconsPipe]; +const component = [ + MaterialThemeLinkComponent, + DownloadAdminComponent, + DownloadFormComponent, +]; +const pipes = [ + CapitalizePipe, + EvaIconsPipe, +]; @NgModule({ - imports: [RouterModule, NbPopoverModule, NbBadgeModule], - declarations: [...component, ...pipes], - exports: [NbPopoverModule, ...component, ...pipes], + imports: [ + RouterModule, + NbPopoverModule, + NbBadgeModule, + NbCardModule, + NbDialogModule.forChild(), + ], + declarations: [ + ...component, + ...pipes, + ], + entryComponents: [ + DownloadFormComponent, + ], + exports: [ + NbPopoverModule, + ...component, + ...pipes, + ], }) export class LandingSharedModule {} diff --git a/docs/app/shared/pipes/eva-icons.pipe.ts b/docs/app/shared/pipes/eva-icons.pipe.ts index 91d3de04..0dd7ce42 100644 --- a/docs/app/shared/pipes/eva-icons.pipe.ts +++ b/docs/app/shared/pipes/eva-icons.pipe.ts @@ -25,7 +25,7 @@ export class EvaIconsPipe implements PipeTransform { options: { height: number; width: number; - fill: string; + fill?: string; animationType?: string; animationHover?: boolean; animationInfinity?: boolean; diff --git a/docs/index.html b/docs/index.html index 4be1db41..bf8c82d6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,6 +19,11 @@ + + +