Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs(download): add download button with hubspot form (#5725)

Browse source
This commit is contained in:
Denis Strigo 2020-07-10 13:34:49 +03:00 • committed by Sergey Andrievskiy
parent 1abd81dae3
commit 42815aa714
15 changed files with 301 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/app/@theme/theme.module.ts
View file

@ -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,
],

19
docs/app/pages/home/main-info-section/main-info-section.component.html
View file

@ -29,11 +29,18 @@
</iframe>
</div>
<div class="buttons">
<a class="btn btn-installation-guidelines"
[routerLink]="'/docs/getting-started/installation-guidelines'">Installation Docs</a>
<a class="btn btn-demo"
href="https://hubs.ly/H0n55nc0"
target="_blank">Demo</a>
<div class="buttons-links">
<a class="btn btn-installation-guidelines"
[routerLink]="'/docs/getting-started/installation-guidelines'">
Installation Docs
</a>
<a class="btn btn-demo"
href="https://hubs.ly/H0n55nc0"
target="_blank">
Demo
</a>
</div>
<ngx-download-admin></ngx-download-admin>
</div>
</div>

29
docs/app/pages/home/main-info-section/main-info-section.component.scss
View file

@ -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;
}
}
}

3
docs/app/pages/home/main-info-section/main-info-section.component.ts
View file

@ -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))

3
docs/app/shared/components/download-admin/download-admin.component.html Normal file
View file

@ -0,0 +1,3 @@
<button matRipple (click)="openDialog()" class="btn btn-download">
Download
</button>

59
docs/app/shared/components/download-admin/download-admin.component.scss Normal file
View file

@ -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;
}
}
}

24
docs/app/shared/components/download-admin/download-admin.component.ts Normal file
View file

@ -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);
}
}

8
docs/app/shared/components/download-form/download-form.component.html Normal file
View file

@ -0,0 +1,8 @@
<nb-card>
<nb-card-body>
<div class="close-icon" (click)="closeDialog()">
<i [innerHTML]="'close' | eva: { width: 26, height: 26, fill: '#222b45' }"></i>
</div>
<div id="hubspotForm"></div>
</nb-card-body>
</nb-card>

93
docs/app/shared/components/download-form/download-form.component.scss Normal file
View file

@ -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);
}
}
}
}

35
docs/app/shared/components/download-form/download-form.component.ts Normal file
View file

@ -0,0 +1,35 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { AfterViewInit, Component } from '@angular/core';
import { 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(protected ref: NbDialogRef<DownloadFormComponent>) {
}
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();
}
}

6
docs/app/shared/components/material-theme-link/material-theme-link.component.ts
View file

@ -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';

37
docs/app/shared/landing-shared.module.ts
View file

@ -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 {}

2
docs/app/shared/pipes/eva-icons.pipe.ts
View file

@ -25,7 +25,7 @@ export class EvaIconsPipe implements PipeTransform {
options: {
height: number;
width: number;
fill: string;
fill?: string;
animationType?: string;
animationHover?: boolean;
animationInfinity?: boolean;

5
docs/index.html
View file

@ -19,6 +19,11 @@
<link rel="icon" type="image/png" href="favicon.png">
<script type="text/javascript" src="assets/ghspa.js"></script>
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

1
docs/typings.d.ts vendored
View file

@ -13,3 +13,4 @@ interface NodeModule {
declare var require: NodeRequire;
declare var structure: any;
declare var docs: any;
declare var hbspt: any;