Final changes and theme enhancements

Author: zdrawku

Grid/FinJS/README.md

@@ -1,4 +1,12 @@
-# FinJS
+# FinJS Live Updating Demo
+
+The Grid component in Ignite UI for Angular is able to handle thousands of updates per seconds, while keeping the grid responsive for any interaction that the user may undertake. This sample demonstrates the Grid handling thousands of updates per second.
+
+## View on StackBlitz
+
+[Run this sample on StackBlitz](https://stackblitz.com/github/Infragistics/angular-samples/tree/master/Grid/FinJS)
+
+## Project
 
 This project was generated with [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) version 4.2.3.
 

Grid/FinJS/src/app/app.component.scss

@@ -1,5 +1,7 @@
 .outer-wrapper {
-  display: flex;
+  padding: 25px;
+  // Removed because of the issue with dynamic changing of Grid width
+  // display: flex;
   justify-content: center;
   height: 100%;
 }

Grid/FinJS/src/app/grid-finjs/grid-finjs.component.html

@@ -1,4 +1,4 @@
-<div class="grid__wrapper">
+<div class="grid__wrapper" [class.fin-dark-theme]="theme">
   <div class="controls-holder">
       <div class="switches">
           <div class="control-item">

Grid/FinJS/src/app/grid-finjs/localData.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable} from 'rxjs';
-import { FinancialData } from '../../../../LocalData/financialData';
+import { FinancialData } from '../../../../../LocalData/financialData';
 
 @Injectable()
 export class LocalDataService {

Grid/FinJS/src/app/themes/_mixins.scss

@@ -0,0 +1,19 @@
+@mixin scrollbar-love($scrollbar-color: null) {
+    $scrollbar-track: hexrgba(igx-color($default-palette, 'grays', 200));
+    $scrollbar-thumb: hexrgba(igx-color($default-palette, 'grays', 400));
+    
+    @if $scrollbar-color and luminance($scrollbar-color) < .5 {
+        $scrollbar-track: darken($scrollbar-color, 8%);
+        $scrollbar-thumb: lighten($scrollbar-color, 20%);
+    }
+
+    ::-webkit-scrollbar {
+        width: 16px;
+        height: 16px;
+        background-color: $scrollbar-track;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: $scrollbar-thumb;
+    }
+}

Grid/FinJS/src/app/themes/themes.scss

@@ -0,0 +1,21 @@
+// Import the theme utilities first
+@import '~igniteui-angular/lib/core/styles/themes/utilities';
+@import '~igniteui-angular/lib/core/styles/themes/index';
+@include igx-core();
+@include igx-theme($default-palette);
+
+@import 'mixins';
+
+@include scrollbar-love();
+
+$green-palette: igx-palette($primary: #09f,$secondary: #72da67, $surface: #333);
+
+.fin-dark-theme {
+    @include igx-dark-theme($green-palette);
+    @include scrollbar-love(igx-color($green-palette, 'surface'));
+     background: #333;
+
+     ::-moz-placeholder {
+         opacity: 1;
+     }
+ }

Grid/FinJS/src/styles.scss

@@ -1,65 +1,13 @@
-/* You can add global styles to this file, and also import other style files */
-// Standard CSS normalize, comment out if not required or using a different module
-@import "~minireset.css/minireset";
-	
-/* See: https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes.html */
-@import "~igniteui-angular/lib/core/styles/themes/index";
 
-@include igx-core();
-@include igx-theme($default-palette);
+@import 'app/themes/themes.scss';
 
-/* autoprefixer grid: on */
 html,
 body {
     height: 100%;
     overflow: hidden;
     margin: 0;
 }
 
-.sample-wrapper {
-    width: inherit;
-    position: relative;
-    height: 100%;
-    margin: 0 auto;
-    background: transparent;
-}
-
-.sample-content {
-    display: flex;
-    flex-grow: 1;
-    flex-flow: row wrap;
-    justify-content: flex-start;
-    padding: 0;
-    -webkit-animation: fade-in .3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
-    -moz-animation: fade-in .3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
-    animation: fade-in .3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
-}
-
-.sample-column {
-    display: flex;
-    flex-flow: column nowrap;
-    flex: 1 0 25%;
-    align-content: flex-start;
-    margin: 16px;
-    min-width: 280px;
-}
-
-.sample-title {
-    color: #0375be;
-    margin-bottom: 12px;
-    margin-top: 12px;
-}
-
-.sample-title .light {
-    font-weight: 400;
-}
-
-.sample-description {
-    font-size: 14px;
-    font-weight: normal;
-    color: #717171;
-}
-
 @-webkit-keyframes color-change-2x {
     0% {
         background: #fdf8f0;
@@ -99,21 +47,3 @@ body {
 .headerAlignSyle {
     text-align: right !important;
 }
-
-$green-palette: igx-palette($primary: #09f,$secondary: #72da67, $surface: #333);
-
-.fin-dark-theme {
-    @include igx-dark-theme($green-palette);
-     background: #333;
-
-     ::-moz-placeholder {
-         opacity: 1;
-     }
- }
-
-.dark-theme {
-    background: #333;
-    color: #fff;
-    @include igx-dark-theme($green-palette);
-}
-