feat(landing): add admin premium modal (#5782)

docs/app/@theme/styles/_hs-forms.scss

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin hs-custom-form() {
+  .hs-custom-form {
+    .modal-header {
+      display: none;
+    }
+
+    .modal-body {
+      padding-bottom: 0;
+    }
+
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    input.hs-input {
+      width: 100%;
+      color: nb-theme(input-basic-text-color);
+      font-size: nb-theme(input-medium-text-font-size);
+      font-weight: nb-theme(input-medium-text-font-weight);
+      line-height: nb-theme(input-medium-text-line-height);
+      padding: nb-theme(input-medium-padding) !important;
+      border: nb-theme(input-border-width) nb-theme(input-border-style) nb-theme(input-basic-border-color);
+      border-radius: nb-theme(input-rectangle-border-radius);
+      background-color: nb-theme(input-basic-background-color);
+
+      &.hover {
+        background-color: nb-theme(input-basic-hover-background-color);
+        border-color: nb-theme(input-basic-hover-border-color);
+      }
+
+      &.invalid {
+        box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6);
+      }
+
+      &::placeholder {
+        color: nb-theme(input-basic-placeholder-text-color);
+        font-size: nb-theme(input-medium-placeholder-text-font-size);
+        font-weight: nb-theme(input-medium-placeholder-text-font-weight);
+        line-height: nb-theme(input-medium-placeholder-text-line-height);
+      }
+
+      &:focus {
+        outline: none;
+        background-color: nb-theme(input-basic-focus-background-color);
+        border-color: nb-theme(input-basic-focus-border-color);
+      }
+    }
+
+    .hs-richtext .modal-body {
+      padding: 0;
+      margin-bottom: 1rem;
+
+      p {
+        margin-bottom: 0;
+        text-align: left !important;
+        height: auto;
+      }
+    }
+
+    .hs-recaptcha {
+      margin-top: 1rem;
+    }
+
+    .hs-error-msgs {
+      list-style-type: none;
+      padding: 0;
+    }
+
+    .hs-form-required, .hs-error-msg {
+      margin-top: 0.5rem;
+      color: nb-theme(text-danger-color);
+    }
+
+    .hs_error_rollup {
+      display: none;
+    }
+
+    .hs-submit-btn {
+      font-family: nb-theme(font-main);
+      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);
+      }
+    }
+  }
+}

docs/app/@theme/styles/styles.scss

@@ -10,7 +10,10 @@
 @import '~@nebular/theme/styles/globals';
 @import '~@nebular/bootstrap/styles/globals';
 
+@import 'hs-forms';
+
 @include nb-install() {
   @include nb-theme-global();
   @include nb-bootstrap-global();
+  @include hs-custom-form();
 };

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

@@ -41,6 +41,11 @@
       </a>
     </div>
 
-    <ngx-download-admin></ngx-download-admin>
+    <button (click)="openDownloadDialog()" class="btn btn-download">
+      Download
+    </button>
+    <button (click)="openDownloadPremiumDialog()" class="btn btn-download-premium">
+      Get ngx-admin PREMIUM for 89$
+    </button>
   </div>
 </div>

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

@@ -11,7 +11,7 @@
   $color-active: nb-theme(color-active-fg);
 
   display: flex;
-  padding: 3.375rem 0 0;
+  padding: 3.375rem 0;
   max-width: 120rem;
   margin: 0 auto;
 
@@ -133,8 +133,9 @@
     cursor: pointer;
     text-transform: uppercase;
 
-    &.btn-demo {
+    &.btn-demo,
-      margin-left: 1em;
+    &.btn-download,
+    &.btn-download-premium {
       color: #ffffff;
       background-color: nb-theme(color-active-fg);
       box-shadow: nb-theme(shadow-btn);
@@ -155,6 +156,16 @@
     &:active {
       box-shadow: nb-theme(shadow-active-btn);
     }
+
+    &.btn-demo {
+      margin-left: 1em;
+    }
+  }
+
+  .btn-download,
+  .btn-download-premium {
+    margin-top: 1rem;
+    width: 100%;
   }
 
   @include media-breakpoint-down(xxl) {

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

@@ -5,9 +5,12 @@
  */
 
 import { Component, OnDestroy, Input } from '@angular/core';
-import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
+import { NbDialogService, NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
 
+import { DownloadFormComponent } from '../../../shared/components/download-form/download-form.component';
+import { PremiumFormComponent } from '../../../shared/components/premium-form/premium-form.component';
+
 @Component({
   selector: 'ngx-landing-main-info',
   templateUrl: './main-info-section.component.html',
@@ -15,7 +18,8 @@ import { takeWhile } from 'rxjs/operators';
 })
 export class MainInfoSectionComponent implements OnDestroy {
   constructor(themeService: NbThemeService,
-              breakpointService: NbMediaBreakpointsService) {
+              breakpointService: NbMediaBreakpointsService,
+              private dialogService: NbDialogService) {
     this.breakpoints = breakpointService.getBreakpointsMap();
     themeService.onMediaQueryChange()
       .pipe(takeWhile(() => this.alive))
@@ -42,4 +46,12 @@ export class MainInfoSectionComponent implements OnDestroy {
   public ngOnDestroy() {
     this.alive = false;
   }
+
+  openDownloadDialog() {
+    this.dialogService.open(DownloadFormComponent);
+  }
+
+  openDownloadPremiumDialog() {
+    this.dialogService.open(PremiumFormComponent);
+  }
 }

docs/app/shared/components/download-admin/download-admin.component.html

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

docs/app/shared/components/download-admin/download-admin.component.scss

@@ -1,59 +0,0 @@
-/**
- * @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;
-    }
-  }
-}

docs/app/shared/components/download-admin/download-admin.component.ts

@@ -1,24 +0,0 @@
-/**
- * @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);
-  }
-}

docs/app/shared/components/download-form/download-form.component.html

@@ -1,8 +1,11 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-header>
-    <div class="close-icon" (click)="closeDialog()">
+    <span>Download</span>
+    <button nbButton status="basic" appearance="ghost" class="close-icon" (click)="closeDialog()">
       <i [innerHTML]="'close' | eva: { width: 26, height: 26, fill: '#222b45' }"></i>
-    </div>
+    </button>
+  </nb-card-header>
+  <nb-card-body>
     <div id="hubspotForm"></div>
   </nb-card-body>
 </nb-card>

docs/app/shared/components/download-form/download-form.component.scss

@@ -9,85 +9,23 @@
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  nb-card-body {
+
-    position: relative;
+  nb-card {
+    width: 30rem;
+  }
+
+  nb-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
   }
 
   .close-icon {
-    cursor: pointer;
+    margin-left: auto;
-    position: absolute;
+    padding: 0;
-    right: 0.1rem;
-    top: 0.1rem;
   }
 
-  ::ng-deep .custom-form {
+  ::ng-deep .hs-custom-form .hs-submit-btn {
-    .modal-header {
+    margin-top: 2rem;
-      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);
-      }
-    }
   }
 }

docs/app/shared/components/download-form/download-form.component.ts

@@ -22,9 +22,9 @@ export class DownloadFormComponent implements AfterViewInit {
       portalId: '2452262',
       formId: '93007d7b-5f11-4dd8-bcfd-f8b99d31f31e',
       target: '#hubspotForm',
-      submitButtonClass: 'btn',
+      submitButtonClass: 'hs-submit-btn btn',
       css: '',
-      cssClass: 'custom-form',
+      cssClass: 'hs-custom-form',
       redirectUrl: 'https://github.com/akveo/ngx-admin',
     });
   }

docs/app/shared/components/premium-form/premium-form.component.html

@@ -0,0 +1,11 @@
+<nb-card>
+  <nb-card-header>
+    <span>Premium</span>
+    <button nbButton status="basic" appearance="ghost" class="close-icon" (click)="closeDialog()">
+      <i [innerHTML]="'close' | eva: { width: 26, height: 26, fill: '#222b45' }"></i>
+    </button>
+  </nb-card-header>
+  <nb-card-body>
+    <div id="hubspotForm"></div>
+  </nb-card-body>
+</nb-card>

docs/app/shared/components/premium-form/premium-form.component.scss

@@ -0,0 +1,31 @@
+/**
+ * @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 {
+    width: 30rem;
+  }
+
+  nb-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .close-icon {
+    margin-left: auto;
+    padding: 0;
+  }
+
+  ::ng-deep .hs-custom-form .hs-submit-btn {
+    margin-top: 1rem;
+  }
+}

docs/app/shared/components/premium-form/premium-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 } from '@angular/core';
+import { NbDialogRef } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-premium-form',
+  templateUrl: './premium-form.component.html',
+  styleUrls: ['./premium-form.component.scss'],
+})
+export class PremiumFormComponent implements AfterViewInit {
+
+
+  constructor(protected ref: NbDialogRef<PremiumFormComponent>) {
+  }
+
+  ngAfterViewInit() {
+    hbspt.forms.create({
+      portalId: '2452262',
+      formId: 'b066428e-c41a-4dce-bbc2-5690cf084a8f',
+      target: '#hubspotForm',
+      submitButtonClass: 'hs-submit-btn btn',
+      css: '',
+      cssClass: 'hs-custom-form',
+      redirectUrl: 'https://github.com/akveo/ngx-admin',
+    });
+  }
+
+  closeDialog() {
+    this.ref.close();
+  }
+}

docs/app/shared/landing-shared.module.ts

@@ -1,16 +1,16 @@
 import { NgModule } from '@angular/core';
-import { NbBadgeModule, NbCardModule, NbDialogModule, NbPopoverModule } from '@nebular/theme';
+import {NbBadgeModule, NbButtonModule, 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';
+import { PremiumFormComponent } from './components/premium-form/premium-form.component';
 
 const component = [
   MaterialThemeLinkComponent,
-  DownloadAdminComponent,
   DownloadFormComponent,
+  PremiumFormComponent,
 ];
 const pipes = [
   CapitalizePipe,
@@ -24,14 +24,12 @@ const pipes = [
     NbBadgeModule,
     NbCardModule,
     NbDialogModule.forChild(),
+    NbButtonModule,
   ],
   declarations: [
     ...component,
     ...pipes,
   ],
-  entryComponents: [
-    DownloadFormComponent,
-  ],
   exports: [
     NbPopoverModule,
     ...component,

src/app/pages/backend-integration/backend-integration.component.scss

@@ -25,7 +25,7 @@
   max-width: 45rem;
   align-items: stretch;
   height: 100%;
-
+  
   ::ng-deep :last-child {
     width: 100%;
   }