diff --git a/docs/app/pages/home/contact-form/contact.component.html b/docs/app/pages/home/contact-form/contact.component.html new file mode 100644 index 00000000..069acc1f --- /dev/null +++ b/docs/app/pages/home/contact-form/contact.component.html @@ -0,0 +1,6 @@ +
+

Need customization?

+

Thinking of building something outstanding based on ngx-admin or just need some Angular/React experts?

+ Contact us +
diff --git a/docs/app/pages/home/contact-form/contact.component.scss b/docs/app/pages/home/contact-form/contact.component.scss new file mode 100644 index 00000000..0b1741cf --- /dev/null +++ b/docs/app/pages/home/contact-form/contact.component.scss @@ -0,0 +1,53 @@ +@import '../../../@theme/styles/themes'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + $color-active: nb-theme(color-active-fg); + + .contact { + text-align: center; + margin-bottom: 4rem; + } + + h1 { + font-family: 'Helvetica Neue Bold', sans-serif; + font-size: 2.5rem; + color: $color-active; + margin: 0; + } + + p { + font-family: unquote('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'), sans-serif; + font-size: 1.5rem; + line-height: 1.5; + margin-top: 1.5rem; + margin-bottom: 1.5rem; + } + + .btn { + font-family: nb-theme(font-main), sans-serif; + border-radius: 3px; + border: none; + background: #ffffff; + color: #000000; + box-shadow: nb-theme(shadow-default); + cursor: pointer; + text-transform: uppercase; + + &.btn-demo { + margin-top: 0.375rem; + padding: 1.125rem 6.25rem; + 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); + } + } +} diff --git a/docs/app/pages/home/contact-form/contact.component.ts b/docs/app/pages/home/contact-form/contact.component.ts new file mode 100644 index 00000000..23d9611d --- /dev/null +++ b/docs/app/pages/home/contact-form/contact.component.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + +@Component({ + selector: 'ngx-contact-form', + templateUrl: './contact.component.html', + styleUrls: ['./contact.component.scss'], +}) +export class ContactFormComponent { + constructor() { + + } + +} diff --git a/docs/app/pages/home/landing-home.module.ts b/docs/app/pages/home/landing-home.module.ts index 3596496d..d46a2116 100644 --- a/docs/app/pages/home/landing-home.module.ts +++ b/docs/app/pages/home/landing-home.module.ts @@ -31,6 +31,8 @@ import { LandingSharedModule } from '../../shared/landing-shared.module'; import {MaterialFeaturesSectionComponent} from './material-features/material-features.component'; import {DefaultAdminInfoComponent} from './main-info-section/default-admin-main-info/default-info.component'; import {MaterialAdminInfoComponent} from './main-info-section/material-admin-main-info/material-info.component'; +import {ContactFormComponent} from './contact-form/contact.component'; +import {NbButtonModule} from '@nebular/theme'; // components const PIPES = [LicensePipe, BackgroundImagePipe]; @@ -51,6 +53,7 @@ const COMPONENTS = [ ContactSectionComponent, BackendBundlesSectionComponent, MaterialFeaturesSectionComponent, + ContactFormComponent, ]; @NgModule({ @@ -63,6 +66,7 @@ const COMPONENTS = [ SwiperModule, LandingHomeRoutingModule, LandingSharedModule, + NbButtonModule, ], providers: [ ...PIPES, 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 a5cd5c9c..ee5941eb 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 @@ -9,20 +9,6 @@
- - - - - - - - - - - - - - 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 57f325f6..bd1a370e 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 @@ -4,8 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -import { Component, OnDestroy, Input, OnInit } from '@angular/core'; -import { coerceBooleanProperty } from '@angular/cdk/coercion'; +import { Component, OnDestroy, Input } from '@angular/core'; import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme'; import { takeWhile } from 'rxjs/operators'; @@ -34,7 +33,7 @@ export class MainInfoSectionComponent implements OnDestroy { } public get imageUrl(): string { - return this.forMaterialTheme + return this.forMaterialTheme !== false ? 'assets/img/ngx-admin-material.png' : '/assets/img/ngx-admin.png'; } diff --git a/docs/app/pages/home/material-landing/material-landing.component.html b/docs/app/pages/home/material-landing/material-landing.component.html index c79fa05a..9eebd708 100644 --- a/docs/app/pages/home/material-landing/material-landing.component.html +++ b/docs/app/pages/home/material-landing/material-landing.component.html @@ -7,6 +7,7 @@ + diff --git a/docs/app/pages/home/theme-section/theme-section.component.html b/docs/app/pages/home/theme-section/theme-section.component.html index 8c99c295..31fd61df 100644 --- a/docs/app/pages/home/theme-section/theme-section.component.html +++ b/docs/app/pages/home/theme-section/theme-section.component.html @@ -20,7 +20,7 @@ Material Dark Theme import('./pages/pages.module') .then(m => m.PagesModule), }, + { + path: 'themes', + loadChildren: () => import('app/themes-screen/starter.module') + .then(m => m.StarterModule), + }, { path: 'auth', component: NbAuthComponent, diff --git a/src/app/themes-screen/starter-routing.module.ts b/src/app/themes-screen/starter-routing.module.ts new file mode 100644 index 00000000..17751dda --- /dev/null +++ b/src/app/themes-screen/starter-routing.module.ts @@ -0,0 +1,22 @@ +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; +import {StarterScreenComponent} from './starter-screen.component'; +import {NgxStarterComponent} from './starter.component'; + +const routes: Routes = [{ + path: '', + component: NgxStarterComponent, + children: [ + { + path: '', + component: StarterScreenComponent, + }, + ], +}]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class StarterRoutingModule { +} diff --git a/src/app/themes-screen/starter-screen.component.ts b/src/app/themes-screen/starter-screen.component.ts new file mode 100644 index 00000000..67976d28 --- /dev/null +++ b/src/app/themes-screen/starter-screen.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-starter-screen', + styleUrls: ['./starter.component.scss'], + templateUrl: './starter.component.html', +}) +export class StarterScreenComponent { + +} diff --git a/src/app/themes-screen/starter.component.html b/src/app/themes-screen/starter.component.html new file mode 100644 index 00000000..d3b78471 --- /dev/null +++ b/src/app/themes-screen/starter.component.html @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Light + + Corporate Theme + + + + + Light + + + Light + + + + + + Light + + + Light + + + Light + + + + + + + + diff --git a/src/app/themes-screen/starter.component.scss b/src/app/themes-screen/starter.component.scss new file mode 100644 index 00000000..92930115 --- /dev/null +++ b/src/app/themes-screen/starter.component.scss @@ -0,0 +1,127 @@ +@import '~bootstrap/scss/mixins/breakpoints'; +@import '~@nebular/theme/styles/global/breakpoints'; +@import '../@theme/styles/themes'; + +//@include nb-install-component() { +// display: flex; +// justify-content: space-between; +// width: 100%; +// +// .logo-container { +// display: flex; +// align-items: center; +// width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)}); +// } +// +// nb-action { +// height: auto; +// display: flex; +// align-content: center; +// } +// +// nb-user { +// cursor: pointer; +// } +// +// .subtitle { +// font-family: nb-theme(text-subtitle-font-family); +// font-size: nb-theme(text-subtitle-font-size); +// font-weight: nb-theme(text-subtitle-font-weight); +// line-height: nb-theme(text-subtitle-line-height); +// } +// +// .downloads-count .number { +// @include nb-ltr(margin-left, 0.5rem); +// @include nb-rtl(margin-right, 0.5rem); +// } +// +// ::ng-deep nb-search button { +// padding: 0!important; +// } +// +// .contact-us { +// padding: 0; +// +// nb-icon { +// font-size: 1.25rem; +// } +// } +// +// .header-container { +// display: flex; +// align-items: center; +// width: auto; +// +// .sidebar-toggle { +// @include nb-ltr(padding-right, 1.25rem); +// @include nb-rtl(padding-left, 1.25rem); +// text-decoration: none; +// color: nb-theme(text-hint-color); +// nb-icon { +// font-size: 1.75rem; +// } +// } +// +// .logo { +// padding: 0 1.25rem; +// font-size: 1.75rem; +// @include nb-ltr(border-left, 1px solid nb-theme(divider-color)); +// @include nb-rtl(border-right, 1px solid nb-theme(divider-color)); +// white-space: nowrap; +// text-decoration: none; +// } +// } +// +// .github-stars { +// width: 245px; +// display: flex; +// +// iframe { +// width: 100px; +// @include nb-ltr(margin-left, 1rem); +// @include nb-rtl(margin-right, 1rem); +// } +// } +// +// @include media-breakpoint-down(xl) { +// .control-item.search, +// .control-item.notifications, +// .control-item.email, +// .control-item.github-stars .text { +// display: none; +// } +// +// .control-item.github-stars { +// width: auto; +// +// iframe { +// margin: 0; +// } +// } +// } +// +// @include media-breakpoint-down(lg) { +// .downloads-count { +// display: none; +// } +// } +// +// @include media-breakpoint-down(md) { +// .theme-select { +// display: none; +// } +// } +// +// @include media-breakpoint-down(sm) { +// .contact-us { +// display: none; +// } +// } +// +// @include media-breakpoint-down(is) { +// .github-stars, +// .user-action { +// display: none; +// } +// } +//} diff --git a/src/app/themes-screen/starter.component.ts b/src/app/themes-screen/starter.component.ts new file mode 100644 index 00000000..d8c2280c --- /dev/null +++ b/src/app/themes-screen/starter.component.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + +@Component({ + selector: 'ngx-starter', + templateUrl: './starter.component.html', + styleUrls: ['./starter.component.scss'], +}) +export class NgxStarterComponent {} diff --git a/src/app/themes-screen/starter.module.ts b/src/app/themes-screen/starter.module.ts new file mode 100644 index 00000000..d9020e12 --- /dev/null +++ b/src/app/themes-screen/starter.module.ts @@ -0,0 +1,28 @@ +import {NgModule} from '@angular/core'; +import {StarterScreenComponent} from './starter-screen.component'; +import {StarterRoutingModule} from './starter-routing.module'; +import {NgxStarterComponent} from './starter.component'; +import {NbActionsModule, NbButtonModule, NbCardModule, NbIconModule, NbLayoutModule} from '@nebular/theme'; +import {ThemeModule} from '../@theme/theme.module'; + +const NB_MODULES = [ + NbIconModule, + NbLayoutModule, + NbCardModule, + NbButtonModule, +]; + +@NgModule({ + imports: [ + StarterRoutingModule, + ...NB_MODULES, + ThemeModule, + NbActionsModule, + ], + declarations: [ + StarterScreenComponent, + NgxStarterComponent, + ], +}) +export class StarterModule { +} diff --git a/src/assets/images/corporate-theme.png b/src/assets/images/corporate-theme.png new file mode 100644 index 00000000..74fb2cf9 Binary files /dev/null and b/src/assets/images/corporate-theme.png differ diff --git a/src/assets/images/cosmic-theme.png b/src/assets/images/cosmic-theme.png new file mode 100644 index 00000000..1d7607f9 Binary files /dev/null and b/src/assets/images/cosmic-theme.png differ diff --git a/src/assets/images/dark-theme.png b/src/assets/images/dark-theme.png new file mode 100644 index 00000000..2af97aab Binary files /dev/null and b/src/assets/images/dark-theme.png differ diff --git a/src/assets/images/light-theme.png b/src/assets/images/light-theme.png new file mode 100644 index 00000000..035fd468 Binary files /dev/null and b/src/assets/images/light-theme.png differ diff --git a/src/assets/images/material-dark-theme.png b/src/assets/images/material-dark-theme.png new file mode 100644 index 00000000..a61e22ef Binary files /dev/null and b/src/assets/images/material-dark-theme.png differ diff --git a/src/assets/images/material-light-theme.png b/src/assets/images/material-light-theme.png new file mode 100644 index 00000000..9135ec3d Binary files /dev/null and b/src/assets/images/material-light-theme.png differ