diff --git a/.angular-cli.json b/.angular-cli.json index 160fbab6..58f21cdf 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -1,7 +1,7 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { - "name": "nga-demo" + "name": "ngx-admin-demo" }, "apps": [ { diff --git a/package.json b/package.json index a046770c..327b04db 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "bootstrap": "4.0.0-alpha.6", "core-js": "2.4.1", "font-awesome": "4.7.0", + "immutable": "3.8.1", "ionicons": "2.0.1", "normalize.css": "6.0.0", "rxjs": "5.1.1", diff --git a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss index 0364a5ca..1c76f82f 100644 --- a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss +++ b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.scss @@ -4,18 +4,61 @@ nga-layout-header > nav { justify-content: space-between; - .logo { - font-size: 1.7rem; - color: $nga-color-primary; - text-decoration: none; - transition: all 0.2s ease; + div { + display: flex; + align-items: center; + } - span { - color: $nga-color-secondary; + .left { + > * { + padding: 0 1.25rem; + border-right: 1px solid rgba($nga-color-default, 0.2); + + &:first-child { + padding-left: 0; + } + + &:last-child { + border: none; + } } - &:hover span { - color: $nga-color-primary; + i.menu-collapse { + font-size: 2.8rem; + + &:hover { + cursor: pointer; + color: $nga-color-secondary; + } + } + + .logo { + font-size: 1.7rem; + text-decoration: none; + transition: all 0.2s ease; + + span { + color: $nga-color-secondary; + } + + &:hover span { + color: $nga-color-default; + } + } + } + + .right { + > * { + padding: 0 1.25rem; + border-left: 1px solid rgba($nga-color-primary, 0.2); + + &:first-child { + border: none; + } + + &:last-child { + padding-left: 0; + } } } } diff --git a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts index fe91b2ba..4ac57806 100644 --- a/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts +++ b/src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts @@ -9,6 +9,7 @@ * */ import { Component } from '@angular/core'; +import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service'; @Component({ selector: 'one-coll-layout', @@ -16,10 +17,16 @@ import { Component } from '@angular/core'; template: ` - +
+ + +
+
+ +
- + @@ -29,10 +36,16 @@ import { Component } from '@angular/core'; - + `, }) export class OneCollLayoutComponent { + constructor(private sidebarService: NgaSidebarService) { + } + + toggleSidebar() { + this.sidebarService.toggle(true); + } } diff --git a/src/app/@theme/styles/pure/pure.custom.scss b/src/app/@theme/styles/pure/pure.custom.scss deleted file mode 100644 index 630f9820..00000000 --- a/src/app/@theme/styles/pure/pure.custom.scss +++ /dev/null @@ -1,34 +0,0 @@ -:host /deep/ { - color: $nga-color-default; - - nga-layout { - nga-layout-header > nav { - box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08); - } - - nga-sidebar { - box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08); - - ul { - li a { - color: $nga-color-primary; - transition: all 0.2s ease; - padding: .87rem 0 .87rem 1rem; - - &:hover { - background: $nga-color-default; - } - - &.active { - font-weight: bold; - } - } - } - } - - nga-layout-footer > nav { - box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08); - border: none !important; - } - } -} diff --git a/src/app/@theme/styles/pure/pure.redefines.scss b/src/app/@theme/styles/pure/pure.redefines.scss index 995c8bc0..7397db2e 100644 --- a/src/app/@theme/styles/pure/pure.redefines.scss +++ b/src/app/@theme/styles/pure/pure.redefines.scss @@ -1,15 +1,18 @@ @import '~@nga/theme/styles/themes/nga.theme.default'; -$nga-color-primary: #7d85b2; -$nga-color-default: #edf1f7; +$nga-color-primary: #edf1f7; +$nga-color-default: #7d85b2; $nga-color-secondary: #b5bbd5; $nga-background: white; -$nga-layout-background: $nga-color-default; +$nga-layout-background: $nga-color-primary; +$nga-layout-foreground: $nga-color-default; $nga-header-height: 4.725rem; $nga-header-background: $nga-background; +$nga-header-foreground: $nga-color-default; +$nga-header-padding: 1.25rem; $nga-footer-height: $nga-header-height; $nga-footer-background: $nga-background; @@ -18,3 +21,46 @@ $nga-user-picture-background: $nga-color-default; $nga-sidebar-background: $nga-background; $nga-sidebar-width: 16.25rem; + +:host /deep/ { + color: $nga-color-default; + + nga-layout { + nga-layout-header > nav { + box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08); + } + + nga-sidebar { + box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08); + + ul li a { + display: flex; + align-items: center; + + transition: all 0.2s ease; + padding: .375rem 0 .375rem 1rem; + + &:hover { + background: $nga-color-primary; + color: $nga-color-default; + } + + &.active { + font-weight: bold; + color: $nga-color-default; + background: $nga-color-primary; + } + + i { + font-size: 2rem; + margin-right: 1.25rem; + } + } + } + + nga-layout-footer > nav { + box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08); + border: none !important; + } + } +} diff --git a/src/app/@theme/styles/pure/pure.theme.scss b/src/app/@theme/styles/pure/pure.theme.scss index a24d72c8..c6319882 100644 --- a/src/app/@theme/styles/pure/pure.theme.scss +++ b/src/app/@theme/styles/pure/pure.theme.scss @@ -1,6 +1,5 @@ @import '~@nga/theme/styles/themes/nga.theme.default'; @import 'pure.redefines'; -@import 'pure.custom'; @include nga-theme(); diff --git a/src/app/pages/components/components.component.html b/src/app/pages/components/components.component.html new file mode 100644 index 00000000..64f32e81 --- /dev/null +++ b/src/app/pages/components/components.component.html @@ -0,0 +1,3 @@ +

+ components works! +

diff --git a/src/app/pages/components/components.component.scss b/src/app/pages/components/components.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/pages/components/components.component.ts b/src/app/pages/components/components.component.ts new file mode 100644 index 00000000..b5ec8d0e --- /dev/null +++ b/src/app/pages/components/components.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-components', + templateUrl: './components.component.html', + styleUrls: ['./components.component.scss'] +}) +export class ComponentsComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index e69de29b..107d75b1 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -0,0 +1,3 @@ +

+ dashboard works! +

diff --git a/src/app/pages/maps/maps.component.html b/src/app/pages/maps/maps.component.html new file mode 100644 index 00000000..56ed12c3 --- /dev/null +++ b/src/app/pages/maps/maps.component.html @@ -0,0 +1,3 @@ +

+ maps works! +

diff --git a/src/app/pages/maps/maps.component.scss b/src/app/pages/maps/maps.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/pages/maps/maps.component.ts b/src/app/pages/maps/maps.component.ts new file mode 100644 index 00000000..0145d418 --- /dev/null +++ b/src/app/pages/maps/maps.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-maps', + templateUrl: './maps.component.html', + styleUrls: ['./maps.component.scss'] +}) +export class MapsComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index 1aaf4979..18163bc1 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -5,43 +5,23 @@ import { List } from 'immutable'; export const menuItems: List = List([ { title: 'Dashboard', - icon: 'ion ion-android-home', + icon: 'ion ion-ios-home-outline', link: '/pages/dashboard', selected: true }, { - title: 'Dashboard', - icon: 'ion ion-android-home', - link: '/pages/dashboard', + title: 'UI Features', + icon: 'ion ion-ios-keypad-outline', + link: '/pages/ui-features' }, { - title: 'Dashboard', - icon: 'ion ion-android-home', - link: '/pages/dashboard', + title: 'Components', + icon: 'ion ion-ios-gear-outline', + link: '/pages/components' }, { - title: 'Dashboard', - icon: 'ion ion-android-home', - link: '/pages/dashboard', - }, - { - title: 'Dashboard', - icon: 'ion ion-android-home', - link: '/pages/dashboard', - }, - { - title: 'Dashboard', - icon: 'ion ion-android-home', - link: '/pages/dashboard', - }, - { - title: 'Dashboard', - icon: 'ion ion-android-home', - link: '/pages/dashboard', - }, - { - title: 'Dashboard', - icon: 'ion ion-android-home', - link: '/pages/dashboard', + title: 'Maps', + icon: 'ion ion-ios-location-outline', + link: '/pages/maps' } ]); diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index ab4405f8..542794e6 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -3,14 +3,20 @@ import { NgModule } from '@angular/core'; import { PagesComponent } from './pages.component'; import { DashboardComponent } from './dashboard/dashboard.component'; +import { UiFeaturesComponent } from './ui-features/ui-features.component'; +import { ComponentsComponent } from './components/components.component'; +import { MapsComponent } from './maps/maps.component'; const routes: Routes = [ { path: '', component: PagesComponent, children: [ - {path: '', redirectTo: 'dashboard', pathMatch: 'full'}, - {path: 'dashboard', component: DashboardComponent} + {path: 'dashboard', component: DashboardComponent}, + {path: 'ui-features', component: UiFeaturesComponent}, + {path: 'components', component: ComponentsComponent}, + {path: 'maps', component: MapsComponent}, + {path: '', redirectTo: 'dashboard', pathMatch: 'full'} ] } ]; diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 0e67b6ab..b733f806 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -9,6 +9,9 @@ import { PagesComponent } from './pages.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { PagesRoutingModule } from './pages-routing.module'; import { ThemeModule } from '../@theme/theme.module'; +import { UiFeaturesComponent } from './ui-features/ui-features.component'; +import { MapsComponent } from './maps/maps.component'; +import { ComponentsComponent } from './components/components.component'; @NgModule({ imports: [ @@ -19,7 +22,10 @@ import { ThemeModule } from '../@theme/theme.module'; ], declarations: [ PagesComponent, - DashboardComponent + DashboardComponent, + UiFeaturesComponent, + MapsComponent, + ComponentsComponent ] }) export class PagesModule { diff --git a/src/app/pages/ui-features/ui-features.component.html b/src/app/pages/ui-features/ui-features.component.html new file mode 100644 index 00000000..5a375d2e --- /dev/null +++ b/src/app/pages/ui-features/ui-features.component.html @@ -0,0 +1,3 @@ +

+ ui-features works! +

diff --git a/src/app/pages/ui-features/ui-features.component.scss b/src/app/pages/ui-features/ui-features.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/pages/ui-features/ui-features.component.ts b/src/app/pages/ui-features/ui-features.component.ts new file mode 100644 index 00000000..7b40b5d0 --- /dev/null +++ b/src/app/pages/ui-features/ui-features.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-ui-features', + templateUrl: './ui-features.component.html', + styleUrls: ['./ui-features.component.scss'] +}) +export class UiFeaturesComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +}