chore(app): update @nga/theme and fix styles according to linter

.angular-cli.json

@@ -17,7 +17,6 @@
       "test": "test.ts",
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
       "styles": [
         "../node_modules/normalize.css/normalize.css",
         "../node_modules/font-awesome/scss/font-awesome.scss",

src/app/@theme/layouts/base-footer/base-footer.component.scss

@@ -8,7 +8,7 @@
     font-size: 2rem;
 
     a {
-      padding: .4rem;
+      padding: 0.4rem;
     }
   }
 }

src/app/@theme/layouts/base-footer/base-footer.component.ts

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
       <a href="https://twitter.com/akveo_inc" target="_blank" class="ion ion-social-twitter"></a>
       <a href="https://www.linkedin.com/company/akveo" target="_blank" class="ion ion-social-linkedin"></a>
     </div>
-  `
+  `,
 })
 export class BaseFooterComponent {
 }

src/app/@theme/layouts/base-header/base-header.component.scss

@@ -4,7 +4,7 @@
   justify-content: space-between;
 
   i.control-icon {
-    &:before {
+    &::before {
       font-size: 2.3rem;
     }
 
@@ -47,6 +47,7 @@
       font-size: 1.7rem;
       text-decoration: none;
       transition: all 0.2s ease;
+      cursor: pointer;
     }
   }
 

src/app/@theme/layouts/base-header/base-header.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service';
+import { NgaSidebarService, NgaMenuService } from '@nga/theme';
 
 @Component({
   selector: 'base-header',
@@ -8,7 +8,7 @@ import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service
   template: `
     <div class="left">
       <i class="control-icon ion ion-navicon" (click)="toggleSidebar()"></i>
-      <a href="/#/pages/dashboard" class="logo">NgX <span>Admin</span></a>
+      <span class="logo" (click)="goToHome()">NgX &nbsp; <span>Admin</span></span>
     </div>
     <div class="right">
       <search-input></search-input>
@@ -17,13 +17,18 @@ import { NgaSidebarService } from '@nga/theme/components/sidebar/sidebar.service
       <nga-user></nga-user>
       <i class="control-icon ion ion-ios-gear-outline"></i>
     </div>
-  `
+  `,
 })
 export class BaseHeaderComponent {
-  constructor(private sidebarService: NgaSidebarService) {
+  constructor(private sidebarService: NgaSidebarService,
+              private menuService: NgaMenuService) {
   }
 
   toggleSidebar() {
     this.sidebarService.toggle(true);
   }
+
+  goToHome() {
+    this.menuService.navigateHome();
+  }
 }

src/app/@theme/layouts/one-coll-layout/one-coll.layout.ts

@@ -9,9 +9,7 @@ import { Component } from '@angular/core';
       </nga-layout-header>
 
       <nga-sidebar>
-        <nga-sidebar-content>
+        <ng-content select="nga-menu"></ng-content>
-          <ng-content select="nga-menu"></ng-content>
-        </nga-sidebar-content>
       </nga-sidebar>
 
       <nga-layout-column>

src/app/@theme/search-input/search-input.component.ts

@@ -11,7 +11,7 @@ import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular
            [class.hidden]="!isInputShown"
            (blur)="hideInput()"
            (input)="onInput($event)">
-  `
+  `,
 })
 export class SearchInputComponent {
   @ViewChild('input') input: ElementRef;

src/app/@theme/styles/pure/_pure.redefines.scss

@@ -1,82 +0,0 @@
-@import '~@nga/theme/styles/themes/nga.theme.default';
-
-$nga-color-primary: #edf1f7;
-$nga-color-default: #7d85b2;
-$nga-color-secondary: #b5bbd5;
-
-$nga-background: white;
-
-$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;
-
-$nga-user-picture-background: $nga-color-default;
-
-$nga-sidebar-background: $nga-background;
-$nga-sidebar-width: 16.25rem;
-$nga-sidebar-width-compact: 3.45rem;
-
-:host /deep/ {
-  color: $nga-color-default;
-
-  input {
-    color: $nga-color-default;
-  }
-
-  a:hover {
-    color: $nga-color-secondary;
-    text-decoration: none;
-  }
-
-  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;
-
-          &:first-child {
-            display: flex;
-            justify-content: center;
-          }
-        }
-      }
-    }
-
-    nga-layout-footer > nav {
-      box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
-      border: none !important;
-      padding: 1.25rem;
-    }
-  }
-}

src/app/@theme/styles/pure/_pure.variables.scss

@@ -0,0 +1,23 @@
+$nga-color-primary: #edf1f7;
+$nga-color-default: #7d85b2;
+$nga-color-secondary: #b5bbd5;
+
+$nga-background: white;
+
+$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;
+
+$nga-user-picture-background: $nga-color-default;
+
+$nga-sidebar-background: $nga-background;
+$nga-sidebar-width: 16.25rem;
+$nga-sidebar-width-compact: 3.45rem;
+$nga-sidebar-padding: 0;

src/app/@theme/styles/pure/pure.theme.scss

@@ -1,6 +1,67 @@
 @import '~@nga/theme/styles/themes/nga.theme.default';
 @import '../components';
-@import 'pure.redefines';
+@import 'pure.variables';
 
-@include nga-theme();
+@include nga-theme('pure') {
-@include custom-components-theme();
+  color: $nga-color-default;
+
+  input {
+    color: $nga-color-default;
+  }
+
+  a:hover {
+    color: $nga-color-secondary;
+    text-decoration: none;
+  }
+
+  nga-layout-header > nav {
+    box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+  }
+
+  nga-sidebar {
+    z-index: 1;
+    box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+
+    ul li {
+      &:first-child {
+        margin-top: 3rem;
+      }
+
+      a {
+        display: flex;
+        align-items: center;
+
+        transition: all 0.2s ease;
+        padding: 0.375rem 0 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;
+
+          &:first-child {
+            display: flex;
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+
+  nga-layout-footer > nav {
+    box-shadow: 0 4px 12px 0 rgba(33, 57, 161, 0.08);
+    border: none !important;
+    padding: 1.25rem;
+  }
+  @include custom-components-theme();
+}

src/app/@theme/theme.module.ts

@@ -9,7 +9,7 @@ import {
   NgaRouteTabsetModule,
   NgaSidebarModule,
   NgaMenuModule,
-  NgaUserModule
+  NgaUserModule,
 } from '@nga/theme';
 
 import { SearchInputComponent } from './search-input/search-input.component';
@@ -19,7 +19,7 @@ import { BaseFooterComponent } from './layouts/base-footer/base-footer.component
 const BASE_MODULES = [
   CommonModule,
   FormsModule,
-  ReactiveFormsModule
+  ReactiveFormsModule,
 ];
 
 const NGA_MODULES = [
@@ -28,13 +28,13 @@ const NGA_MODULES = [
   NgaTabsetModule,
   NgaRouteTabsetModule,
   NgaMenuModule,
-  NgaUserModule
+  NgaUserModule,
 ];
 
 const LAYOUTS = [
   OneCollLayoutComponent,
   BaseHeaderComponent,
-  BaseFooterComponent
+  BaseFooterComponent,
 ];
 
 @NgModule({
@@ -47,13 +47,13 @@ const LAYOUTS = [
     ...BASE_MODULES,
     ...NGA_MODULES,
     ...LAYOUTS,
-    SearchInputComponent
+    SearchInputComponent,
   ],
   declarations: [
     ...LAYOUTS,
     SearchInputComponent,
-    BaseFooterComponent
+    BaseFooterComponent,
-  ]
+  ],
 })
 export class ThemeModule {
 }

src/app/app-routing.module.ts

@@ -3,18 +3,18 @@ import { NgModule } from '@angular/core';
 
 const routes: Routes = [
   // {path: 'admin'}
-  {path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule'},
+  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
-  {path: '', redirectTo: 'pages', pathMatch: 'full'},
+  { path: '', redirectTo: 'pages', pathMatch: 'full' },
-  {path: '**', redirectTo: 'pages'}
+  { path: '**', redirectTo: 'pages' },
 ];
 
 const config: ExtraOptions = {
-  useHash: true
+  useHash: true,
 };
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, config)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class AppRoutingModule {
 }

src/app/app.component.scss

@@ -1 +1 @@
-@import "@theme/styles/styles";
+@import '@theme/styles/styles';

src/app/app.module.ts

@@ -7,10 +7,9 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
 
-import { NgaThemeModule } from '@nga/theme';
+import { CoreModule } from './@core/core.module';
 
 import { AppComponent } from './app.component';
-import { CoreModule } from './@core/core.module';
 import { PagesModule } from './pages/pages.module';
 import { AppRoutingModule } from './app-routing.module';
 
@@ -19,10 +18,9 @@ import { AppRoutingModule } from './app-routing.module';
   imports: [
     BrowserModule,
     HttpModule,
-    NgaThemeModule.forRoot(),
     AppRoutingModule,
     CoreModule,
-    PagesModule
+    PagesModule,
   ],
   bootstrap: [AppComponent],
 })

src/app/pages/components/components.component.html

@@ -1,3 +0,0 @@
-<p>
-  components works!
-</p>

src/app/pages/components/components.component.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-components',
+  selector: 'components',
-  templateUrl: './components.component.html',
+  template: `
-  styleUrls: ['./components.component.scss']
+    <p>
+      components works!
+    </p>
+  `,
 })
-export class ComponentsComponent implements OnInit {
+export class ComponentsComponent {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
 }

src/app/pages/dashboard/dashboard.component.html

@@ -1,3 +0,0 @@
-<p>
-  dashboard works!
-</p>

src/app/pages/dashboard/dashboard.component.ts

@@ -2,8 +2,11 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'dashboard',
-  templateUrl: './dashboard.component.html',
+  template: `
-  styleUrls: ['./dashboard.component.scss']
+    <p>
+      dashboard works!
+    </p>
+  `,
 })
 export class DashboardComponent {
 }

src/app/pages/maps/maps.component.html

@@ -1,3 +0,0 @@
-<p>
-  maps works!
-</p>

src/app/pages/maps/maps.component.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-maps',
+  selector: 'maps',
-  templateUrl: './maps.component.html',
+  template: `
-  styleUrls: ['./maps.component.scss']
+    <p>
+      maps works!
+    </p>
+  `,
 })
-export class MapsComponent implements OnInit {
+export class MapsComponent {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
 }

src/app/pages/pages-menu.ts

@@ -7,21 +7,25 @@ export const menuItems: List<NgaMenuItem> = List([
     title: 'Dashboard',
     icon: 'ion ion-ios-home-outline',
     link: '/pages/dashboard',
-    selected: true
+    home: true,
+  },
+  {
+    title: 'Features',
+    group: true,
   },
   {
     title: 'UI Features',
     icon: 'ion ion-ios-keypad-outline',
-    link: '/pages/ui-features'
+    link: '/pages/ui-features',
   },
   {
     title: 'Components',
     icon: 'ion ion-ios-gear-outline',
-    link: '/pages/components'
+    link: '/pages/components',
   },
   {
     title: 'Maps',
     icon: 'ion ion-ios-location-outline',
-    link: '/pages/maps'
+    link: '/pages/maps',
-  }
+  },
 ]);

src/app/pages/pages-routing.module.ts

@@ -12,18 +12,18 @@ const routes: Routes = [
     path: '',
     component: PagesComponent,
     children: [
-      {path: 'dashboard', component: DashboardComponent},
+      { path: 'dashboard', component: DashboardComponent },
-      {path: 'ui-features', component: UiFeaturesComponent},
+      { path: 'ui-features', component: UiFeaturesComponent },
-      {path: 'components', component: ComponentsComponent},
+      { path: 'components', component: ComponentsComponent },
-      {path: 'maps', component: MapsComponent},
+      { path: 'maps', component: MapsComponent },
-      {path: '', redirectTo: 'dashboard', pathMatch: 'full'}
+      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
-    ]
+    ],
-  }
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class PagesRoutingModule {
 }

src/app/pages/pages.component.ts

@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
       <nga-menu></nga-menu>
       <router-outlet></router-outlet>
     </one-coll-layout>
-  `
+  `,
 })
 export class PagesComponent {
 }

src/app/pages/pages.module.ts

@@ -1,9 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import {
+import { NgaMenuModule, NgaSidebarModule, NgaThemeModule } from '@nga/theme';
-  NgaSidebarModule,
-  NgaMenuModule
-} from '@nga/theme';
 
 import { menuItems } from './pages-menu';
 
@@ -17,20 +14,19 @@ import { ComponentsComponent } from './components/components.component';
 
 @NgModule({
   imports: [
+    NgaThemeModule.forRoot({ name: 'pure' }),
     NgaSidebarModule.forRoot(),
-    NgaMenuModule.forRoot({
+    NgaMenuModule.forRoot({ items: menuItems }),
-      items: menuItems
-    }),
     PagesRoutingModule,
-    ThemeModule
+    ThemeModule,
   ],
   declarations: [
     PagesComponent,
     DashboardComponent,
     UiFeaturesComponent,
     MapsComponent,
-    ComponentsComponent
+    ComponentsComponent,
-  ]
+  ],
 })
 export class PagesModule {
 }

src/app/pages/ui-features/ui-features.component.html

@@ -1,3 +0,0 @@
-<p>
-  ui-features works!
-</p>

src/app/pages/ui-features/ui-features.component.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-ui-features',
+  selector: 'ui-features',
-  templateUrl: './ui-features.component.html',
+  template: `
-  styleUrls: ['./ui-features.component.scss']
+    <p>
+      ui-features works!
+    </p>
+  `,
 })
-export class UiFeaturesComponent implements OnInit {
+export class UiFeaturesComponent {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
 }

tslint.json

@@ -96,8 +96,8 @@
     ],
     "no-conditional-assignment": true,
     "no-console": [true, "log"],
-    "directive-selector": [true, "attribute", ["nga"], "camelCase"],
+    "directive-selector": [true, "attribute", "camelCase"],
-    "component-selector": [true, "element", ["nga"], "kebab-case"],
+    "component-selector": [true, "element", "kebab-case"],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,