Merge branch 'master' into tzhelev/esf-load-on-demand-sample

live-editing/configs/NavbarConfigGenerator.ts

@@ -2,6 +2,7 @@
 import { IgxIconModule, IgxNavbarModule } from "igniteui-angular";
 import { NavbarSample1Component } from "../../src/app/menus/navbar/navbar-sample-1/navbar-sample-1.component";
 import { NavbarSample2Component } from "../../src/app/menus/navbar/navbar-sample-2/navbar-sample-2.component";
+import { NavbarStyleComponent } from "../../src/app/menus/navbar/navbar-style/navbar-style.component";
 import { NavbarComponent } from "../../src/app/menus/navbar/navbar.component";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
@@ -41,6 +42,16 @@ export class NavbarConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/menus/navbar/"
         }));
 
+        configs.push(new Config({
+            component: NavbarStyleComponent,
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxIconModule, IgxNavbarModule, NavbarStyleComponent],
+                ngDeclarations: [NavbarStyleComponent],
+                ngImports: [IgxIconModule, IgxNavbarModule]
+            }),
+            shortenComponentPathBy: "/menus/navbar/"
+        }));
+
         return configs;
     }
 }

src/app/menus/menus-routes-data.ts

@@ -1,5 +1,6 @@
 export const menusRoutesData = {
     "navbar": { displayName: "Navbar Overview", parentName: "Navbar" },
     "navbar-sample-1": { displayName: "Navbar Action Button Icon", parentName: "Navbar" },
-    "navbar-sample-2": { displayName: "Navbar Custom Action Icon", parentName: "Navbar" }
+    "navbar-sample-2": { displayName: "Navbar Custom Action Icon", parentName: "Navbar" },
+    "navbar-style": { displayName: "Navbar Style", parentName: "Navbar" }
 };

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

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from "@angular/router";
 import { menusRoutesData } from "./menus-routes-data";
 import { NavbarSample1Component } from "./navbar/navbar-sample-1/navbar-sample-1.component";
 import { NavbarSample2Component } from "./navbar/navbar-sample-2/navbar-sample-2.component";
+import { NavbarStyleComponent } from "./navbar/navbar-style/navbar-style.component";
 import { NavbarComponent } from "./navbar/navbar.component";
 import { NavDrawerMiniComponent } from "./navdrawer/nav-drawer-mini/nav-drawer-mini.component";
 import { NavDrawerPinComponent } from "./navdrawer/nav-drawer-pin/nav-drawer-pin.component";
@@ -41,6 +42,11 @@ export const menusRoutes: Routes = [
         component: NavbarSample2Component,
         data: menusRoutesData["navbar-sample-2"],
         path: "navbar-sample-2"
+    },
+    {
+        component: NavbarStyleComponent,
+        data: menusRoutesData["navbar-style"],
+        path: "navbar-style"
     }
 ];
 

src/app/menus/menus.module.ts

@@ -15,6 +15,7 @@ import {
 import { MenusRoutingModule } from "./menus-routing.module";
 import { NavbarSample1Component } from "./navbar/navbar-sample-1/navbar-sample-1.component";
 import { NavbarSample2Component } from "./navbar/navbar-sample-2/navbar-sample-2.component";
+import { NavbarStyleComponent } from "./navbar/navbar-style/navbar-style.component";
 import { NavbarComponent } from "./navbar/navbar.component";
 import { NavDrawerMiniComponent } from "./navdrawer/nav-drawer-mini/nav-drawer-mini.component";
 import { NavDrawerPinComponent } from "./navdrawer/nav-drawer-pin/nav-drawer-pin.component";
@@ -29,7 +30,8 @@ import { NavdrawerComponent } from "./navdrawer/navdrawer.component";
         NavDrawerSimpleComponent,
         NavbarComponent,
         NavbarSample1Component,
-        NavbarSample2Component
+        NavbarSample2Component,
+        NavbarStyleComponent
     ],
     imports: [
         CommonModule,

src/app/menus/navbar/navbar-style/navbar-style.component.html

@@ -0,0 +1,9 @@
+<article class="sample-column">
+    <div class="navbar-sample">
+        <igx-navbar title="Sample App" actionButtonIcon="menu" [isActionButtonVisible]="true">
+            <igx-icon>search</igx-icon>
+            <igx-icon>favorite</igx-icon>
+            <igx-icon>more_vert</igx-icon>
+        </igx-navbar>
+    </div>
+</article>

src/app/menus/navbar/navbar-style/navbar-style.component.scss

@@ -0,0 +1,59 @@
+@import '~igniteui-angular/lib/core/styles/themes/index';
+
+/*BASIC THEMING*/
+
+$dark-navbar: igx-navbar-theme(
+    $text-color: #FFCD0F,
+    $background: #292826,
+    $idle-icon-color: #FFCD0F,
+    $hover-icon-color: gray
+);
+
+/*ENHANCED APPROACHES*/
+
+// $yellow-color: #FFCD0F;
+// $black-color: #292826;
+// $dark-palette: igx-palette($primary: $black-color, $secondary: $yellow-color);
+
+/*PALETTE and IGX-COLOR*/
+
+// $dark-navbar: igx-navbar-theme(
+//     $text-color: igx-color($dark-palette, "secondary", 400),
+//     $background: igx-color($dark-palette, "primary", 400),
+//     $idle-icon-color: igx-color($dark-palette, "secondary", 400),
+//     $hover-icon-color: gray
+// );
+
+/*SCHEMAS*/
+
+// $dark-navbar-schema: extend($_dark-navbar,
+//     (
+//         text-color: (
+//             igx-color: ("secondary", 400)
+//         ),
+//         background: (
+//             igx-color: ("primary", 400)
+//         ),
+//         idle-icon-color:(
+//             igx-color: ("secondary", 400)
+//         ),
+//         hover-icon-color: gray
+//     )
+// );
+
+// $custom-dark-schema: extend($dark-schema,(
+//     igx-navbar: $dark-navbar-schema
+// ));
+
+// $dark-navbar: igx-navbar-theme(
+//   $palette: $dark-palette,
+//   $schema: $custom-dark-schema
+// );
+
+/*INCLUSION by DEFAULT ViewEncapsulation strategy*/
+
+:host {
+     ::ng-deep {
+        @include igx-navbar($dark-navbar);
+    }
+}

src/app/menus/navbar/navbar-style/navbar-style.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-navbar-style",
+  styleUrls: ["./navbar-style.component.scss"],
+  templateUrl: "./navbar-style.component.html"
+})
+export class NavbarStyleComponent implements OnInit {
+
+  constructor() { }
+
+  public ngOnInit() {
+  }
+}