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

IgniteUI · Sep 2, 2019 · a733710 · a733710
2 parents 9a6f67f + 317c757
commit a733710
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 0 deletions.
diff --git a/live-editing/configs/IconConfigGenerator.ts b/live-editing/configs/IconConfigGenerator.ts
@@ -5,6 +5,7 @@ import { SvgIconSampleComponent } from "../../src/app/data-display/icon/svg-icon
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
+import { IconStylingSample } from '../../src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component';
 
 export class IconConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
@@ -32,6 +33,17 @@ export class IconConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/icon/"
         }));
 
+        // Icon Styling Sample
+        configs.push(new Config({
+            component: IconStylingSample,
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxIconModule, IconStylingSample],
+                ngDeclarations: [IconStylingSample],
+                ngImports: [IgxIconModule]
+            }),
+            shortenComponentPathBy: "/data-display/icon/"
+        }));
+
         return configs;
     }
 }
diff --git a/src/app/data-display/data-display-routes-data.ts b/src/app/data-display/data-display-routes-data.ts
@@ -10,6 +10,7 @@ export const dataDisplayRoutesData = {
     // tslint:disable-next-line:max-line-length
     "circular-indeterminate-progressbar": { displayName: "Circular Indeterminate Progressbar", parentName: "Circular Progressbar" },
     "icon-sample-1": { displayName: "Simple Icons", parentName: "Icon" },
+    "icon-styling": { displayName: "Icon Styling", parentName: "Icon" },
     "svg-icon-sample": { displayName: "SVG Icons", parentName: "Icon" },
     "igx-for-sample-1": { displayName: "List with igxFor directive", parentName: "For" },
     "linear-progressbar": { displayName: "Simple Linear Progressbar", parentName: "Linear Progressbar" },

diff --git a/src/app/data-display/data-display-routing.module.ts b/src/app/data-display/data-display-routing.module.ts
@@ -11,6 +11,7 @@ import { CircularProgressbarComponent } from "./circular-progressbar/circular-pr
 import { dataDisplayRoutesData } from "./data-display-routes-data";
 import { IconSample1Component } from "./icon/icon-sample-1/icon-sample-1.component";
 import { IconSample2Component } from "./icon/icon-sample2/icon-sample2.component";
+import { IconStylingSample } from "./icon/icon-styling-sample/icon-styling-sample.component";
 import { SvgIconSampleComponent } from "./icon/svg-icon-sample/svg-icon-sample.component";
 import { IgxForComponent } from "./igxFor/igxFor.component";
 import { LinearProgressbarSample1Component
@@ -128,6 +129,11 @@ export const dataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData["text-highlight-2"],
         path: "text-highlight-2"
     },
+    {
+        component: IconStylingSample,
+        data: dataDisplayRoutesData["icon-styling"],
+        path: "icon-styling"
+    },
     {
         component: ChipStylingSampleComponent,
         data: dataDisplayRoutesData["chip-styling"],

diff --git a/src/app/data-display/data-display.module.ts b/src/app/data-display/data-display.module.ts
@@ -19,6 +19,7 @@ import { CircularProgressbarComponent } from "./circular-progressbar/circular-pr
 import { DataDisplayRoutingModule } from "./data-display-routing.module";
 import { IconSample1Component } from "./icon/icon-sample-1/icon-sample-1.component";
 import { IconSample2Component } from "./icon/icon-sample2/icon-sample2.component";
+import { IconStylingSample } from "./icon/icon-styling-sample/icon-styling-sample.component";
 import { SvgIconSampleComponent } from "./icon/svg-icon-sample/svg-icon-sample.component";
 import { IgxForComponent } from "./igxFor/igxFor.component";
 import {
@@ -52,6 +53,7 @@ import {
         CircularProgressbarComponent,
         IconSample1Component,
         IconSample2Component,
+        IconStylingSample,
         SvgIconSampleComponent,
         IgxForComponent,
         LinearProgressbarComponent,

diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.html
@@ -0,0 +1,85 @@
+<div class="sample-content">
+    <section class="sample-column">
+        <article class="icons-wrapper">
+            <div class="icon-sample first-col">
+                <igx-icon>sentiment_very_satisfied</igx-icon>
+            </div>
+
+            <div class="icon-sample second-col">
+                <igx-icon>home</igx-icon>
+            </div>
+
+            <div class="icon-sample third-col">
+                <igx-icon>airplanemode_active</igx-icon>
+            </div>
+
+            <div class="icon-sample fourth-col">
+                <igx-icon>favorite</igx-icon>
+            </div>
+
+            <div class="icon-sample">
+                <igx-icon [isActive]="false">search</igx-icon>
+            </div>
+
+            <div class="icon-sample first-col">
+                <igx-icon>notifications</igx-icon>
+            </div>
+
+            <div class="icon-sample second-col">
+                <igx-icon>account_balance</igx-icon>
+            </div>
+
+            <div class="icon-sample third-col">
+                <igx-icon>phone_iphone</igx-icon>
+            </div>
+
+            <div class="icon-sample fourth-col">
+                <igx-icon>pin_drop</igx-icon>
+            </div>
+            <div class="icon-sample">
+                <igx-icon [isActive]="false">volume_off</igx-icon>
+            </div>
+
+            <div class="icon-sample first-col">
+                <igx-icon>person</igx-icon>
+            </div>
+
+            <div class="icon-sample second-col">
+                <igx-icon>wifi</igx-icon>
+            </div>
+
+            <div class="icon-sample third-col">
+                <igx-icon>laptop_mac</igx-icon>
+            </div>
+
+            <div class="icon-sample fourth-col">
+                <igx-icon>whatshot</igx-icon>
+            </div>
+
+            <div class="icon-sample">
+                <igx-icon [isActive]="false">cloud</igx-icon>
+            </div>
+
+            <div class="icon-sample first-col">
+                <igx-icon>school</igx-icon>
+            </div>
+
+            <div class="icon-sample second-col">
+                <igx-icon>bluetooth</igx-icon>
+            </div>
+
+            <div class="icon-sample third-col">
+                <igx-icon>headset</igx-icon>
+            </div>
+
+            <div class="icon-sample fourth-col">
+                <igx-icon>undo</igx-icon>
+                </div>   
+
+            <div class="icon-sample">
+                <igx-icon [isActive]="false">keyboard_voice</igx-icon>
+            </div>     
+
+        </article>
+    </section>
+</div>
diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.scss
@@ -0,0 +1,73 @@
+@import '~igniteui-angular/lib/core/styles/themes/index';
+
+$custom-theme: igx-icon-theme(
+  $color: #ffcd0f,
+  $disabled-color: #494949
+);
+
+$black-color: #494949;
+$yellow-color: #ffcd0f;
+
+/* Custom theme */
+
+// $custom-palette: igx-palette(
+//     $primary: $black-color,
+//     $secondary: $yellow-color
+// );
+
+// $custom-theme: igx-icon-theme(
+//     $color: igx-color($custom-palette, "secondary", 600),
+//     $disabled-color: igx-color($custom-palette, "primary", 500)
+// );
+
+/* Custom Schema */
+
+// $custom-icon-schema: extend($_dark-icon, (
+//     color: (igx-color("secondary", 500)),
+//     disabled-color: (igx-color("primary", 500))
+// ));
+
+// $my-custom-schema: extend($dark-schema, (
+//     igx-icon: $custom-icon-schema
+// ));
+
+// $custom-theme: igx-icon-theme(
+//     $palette: $custom-palette,
+//     $schema: $my-custom-schema
+// );
+
+:host {
+  ::ng-deep {
+    @include igx-icon($custom-theme);
+    .first-col .igx-icon:hover {
+      color: rgb(52, 0, 104);
+    }
+
+    .second-col .igx-icon:hover {
+      color: black;
+    }
+
+    .third-col .igx-icon:hover {
+      color: #0375be;
+    }
+
+    .fourth-col .igx-icon:hover {
+      color: #e41c77;
+    }
+  }
+}
+
+.icons-wrapper {
+    display: flex;
+    flex-flow: row wrap;
+}
+.icon-sample {
+    display: flex;
+    flex: 1 0 20%;
+    width: 44px;
+    height: 44px;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 36px;
+}
+
diff --git a/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts b/src/app/data-display/icon/icon-styling-sample/icon-styling-sample.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-icon-styling-sample",
+  styleUrls: ["./icon-styling-sample.component.scss"],
+  templateUrl: "./icon-styling-sample.component.html"
+})
+export class IconStylingSample implements OnInit {
+
+  constructor() { }
+
+  public ngOnInit() { }
+
+}