Merge branch 'master' into ddimitrov/fix-1189

Author: gedinakova

src/app/theming/styles/theme-classes.scss

@@ -8,9 +8,12 @@
 
 
   //Set the light themes for the components.
-    &.default-theme {
+    &.light-theme {
       background: $light-color;
       ::ng-deep {
+        .sort-icon.material-icons.igx-icon {
+            color: white;
+        }
         @include igx-grid($light-grid-theme);
         @include igx-snackbar($light-snackbar-theme);
         @include igx-input-group($light-input-group-theme);

src/app/theming/theme-chooser/theme-chooser-sample.component.html

@@ -28,16 +28,11 @@
     <div igxOverlayOutlet>
         <div class="grid-options" igxLayout igxLayoutDir="row" igxLayoutWrap="wrap">
             <button igxButton="raised" class="addProdBtn" (click)="openDialog()">Add New Product</button>
-            <button class="drop-down-button" igxButton="raised" (click)="toggleDropDown($event, dropdown)"
-                [igxDropDownItemNavigation]="dropdown">Themes</button>
-            <igx-drop-down #dropdown class="theme-chooser">
-                <igx-drop-down-item class="light-theme-option" (click)="selectTheme(THEME.LIGHT)">
-                </igx-drop-down-item>
-                <igx-drop-down-item class="dark-theme-option" (click)="selectTheme(THEME.DARK)">
-                </igx-drop-down-item>
-                <igx-drop-down-item class="black-theme-option" (click)="selectTheme(THEME.BLACK)">
-                </igx-drop-down-item>
-            </igx-drop-down>
+            <igx-select type="box">
+                    <label igxLabel>Themes</label>
+                    <igx-select-item *ngFor="let theme of themes" [class]="'theme ' + theme + '-option'" (click)="selectTheme(theme)">
+                    </igx-select-item>
+            </igx-select>
         </div>
         <igx-grid [data]="data" [autoGenerate]="false" height="550px" width="100%" [paging]="true" [perPage]="10"
             displayDensity="comfortable" #grid1 [allowFiltering]="true">
@@ -67,4 +62,4 @@
         <igx-snackbar #snackbar [autoHide]="true" displayTime="2500" actionText="Undo" (onAction)="restoreRow()">
         </igx-snackbar>
     </div>
-</div>
+</div>

src/app/theming/theme-chooser/theme-chooser-sample.component.scss

@@ -2,6 +2,7 @@
 
 .addProdBtn {
     margin-bottom: 5px;
+    margin-right: 10px;
   }
 
   .dialogNewRecord {
@@ -18,12 +19,6 @@
     display: flex;
     justify-content: flex-end;
     padding: 8px 16px;
-    [igxButton] + [igxButton] {
-        margin-left: 8px;
-   }
-    .drop-down-button {
-        width: 92.6719px;
-    }
   }
 
   .snackbar_wrapper{
@@ -42,7 +37,7 @@
       height: $chooser-size;
       border-radius: $chooser-size / 2;
       overflow: hidden;
-      cursor: pointer;
+    //   cursor: pointer;
   }
 
 
@@ -51,7 +46,6 @@
       background-color: $primary;
       color: $secondary;
       padding-left: 22px;
-
       &::before {
           position: relative;
           content: $text;
@@ -80,22 +74,28 @@
           @include theme-chooser-icon($primary, $secondary)
       }
       &:hover {
+          z-index: 999;
           box-shadow: 3px 0 2px 3px $secondary;
       }
   }
 
-  .default-theme-option {
-      width:92.6719px;
+  .light-theme-option {
       @include theme-chooser-item(#f8f8f8, #4169E1,'LIGHT');
   }
 
   .dark-theme-option {
-      width:92.6719px;
       @include theme-chooser-item(#282828, #FFA500, 'DARK');
   }
 
   .black-theme-option {
-      width:92.6719px;
       @include theme-chooser-item(#000000, #00BFFF, 'BLACK');
   }
 
+  .theme{
+      cursor: pointer;
+  }
+
+  igx-select{
+    width: 120px;
+    margin-left: 10px;
+  }

src/app/theming/theme-chooser/theme-chooser-sample.component.ts

@@ -29,6 +29,7 @@ export class ThemeChooserSampleComponent implements OnInit {
     public THEME: typeof THEME = THEME;
     public data: any[] = DATA;
     public record;
+    public themes = [THEME.LIGHT, THEME.DARK, THEME.BLACK];
 
     @HostBinding("class")
     public themesClass: THEME = THEME.LIGHT;
@@ -50,18 +51,6 @@ export class ThemeChooserSampleComponent implements OnInit {
 
     private deletedRow;
 
-    private _dropdownPositionSettings = {
-        horizontalStartPoint: HorizontalAlignment.Left,
-        verticalStartPoint: VerticalAlignment.Bottom
-    };
-
-    private _dropDownOverlaySettings = {
-        closeOnOutsideClick: true,
-        modal: false,
-        positionStrategy: new ConnectedPositioningStrategy(this._dropdownPositionSettings),
-        scrollStrategy: new CloseScrollStrategy()
-    };
-
     private _dialogOverlaySettings2 = {
         closeOnOutsideClick: true,
         modal: true,
@@ -75,12 +64,6 @@ export class ThemeChooserSampleComponent implements OnInit {
         this.themesClass = value;
     }
 
-    public toggleDropDown(eventArgs, selectedDropDown: IgxDropDownComponent) {
-        const dropDown = selectedDropDown;
-        this._dropDownOverlaySettings.positionStrategy.settings.target = eventArgs.target;
-        dropDown.toggle(this._dropDownOverlaySettings);
-    }
-
     public addRow() {
         this.grid1.addRow(this.record);
         this.cancel();
@@ -111,7 +94,6 @@ export class ThemeChooserSampleComponent implements OnInit {
 
     public ngOnInit() {
         this.datePicker.outlet = this.outlet;
-        // this.grid1.outletDirective = this.outlet;
         this.data = DATA;
         this.record = new Record();
     }

src/app/theming/theming.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { IgxButtonGroupModule, IgxButtonModule, IgxCalendarModule, IgxCardModule, IgxDatePickerModule,
     IgxDialogModule, IgxDropDownModule, IgxGridModule, IgxIconModule, IgxInputGroupModule,
-    IgxLayoutModule, IgxRippleModule, IgxSnackbarModule, IgxToggleModule } from "igniteui-angular";
+    IgxLayoutModule, IgxRippleModule, IgxSelectModule, IgxSnackbarModule, IgxToggleModule } from "igniteui-angular";
 import { DarkThemeSampleComponent } from "./dark-theme-sample/dark-theme-sample.component";
 import { DefaultThemeSampleComponent } from "./default-theme-sample/default-theme-sample.component";
 import { DisplayDensityComponent } from "./display-density/display-density.component";
@@ -40,7 +40,8 @@ import { ThemingRoutingModule } from "./theming-routing.module";
         IgxLayoutModule,
         IgxRippleModule,
         IgxSnackbarModule,
-        IgxToggleModule
+        IgxToggleModule,
+        IgxSelectModule
     ]
 })
 export class ThemingModule {}