refactor: move dialog buttons to main info section

Prevents copy/paste of .btn styles
This commit is contained in:
Sergey Andrievskiy 2020-10-09 14:26:03 +03:00
parent f24a7fa65a
commit f77e3e3c9d
10 changed files with 33 additions and 184 deletions

View file

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

View file

@ -133,8 +133,9 @@
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
&.btn-demo { &.btn-demo,
margin-left: 1em; &.btn-download,
&.btn-download-premium {
color: #ffffff; color: #ffffff;
background-color: nb-theme(color-active-fg); background-color: nb-theme(color-active-fg);
box-shadow: nb-theme(shadow-btn); box-shadow: nb-theme(shadow-btn);
@ -155,6 +156,16 @@
&:active { &:active {
box-shadow: nb-theme(shadow-active-btn); 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) { @include media-breakpoint-down(xxl) {

View file

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

View file

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

View file

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

View file

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

View file

@ -1,3 +0,0 @@
<button (click)="openDialog()" class="btn btn-download">
Get ngx-admin PREMIUM for 89$
</button>

View file

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

View file

@ -1,26 +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 {PremiumFormComponent} from '../premium-form/premium-form.component';
@Component({
selector: 'ngx-premium',
templateUrl: './premium.component.html',
styleUrls: ['./premium.component.scss'],
})
export class PremiumComponent {
constructor(private dialogService: NbDialogService) {
}
openDialog() {
this.dialogService.open(PremiumFormComponent);
}
}

View file

@ -4,16 +4,12 @@ import { MaterialThemeLinkComponent } from './components/material-theme-link/mat
import { CapitalizePipe } from './pipes/capitalize.pipe'; import { CapitalizePipe } from './pipes/capitalize.pipe';
import { EvaIconsPipe } from './pipes/eva-icons.pipe'; import { EvaIconsPipe } from './pipes/eva-icons.pipe';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { DownloadAdminComponent } from './components/download-admin/download-admin.component';
import { DownloadFormComponent } from './components/download-form/download-form.component'; import { DownloadFormComponent } from './components/download-form/download-form.component';
import { PremiumComponent } from './components/premium/premium.component';
import { PremiumFormComponent } from './components/premium-form/premium-form.component'; import { PremiumFormComponent } from './components/premium-form/premium-form.component';
const component = [ const component = [
MaterialThemeLinkComponent, MaterialThemeLinkComponent,
DownloadAdminComponent,
DownloadFormComponent, DownloadFormComponent,
PremiumComponent,
PremiumFormComponent, PremiumFormComponent,
]; ];
const pipes = [ const pipes = [