Features/theme grid dark pr4

src/core/theme/theme.view.d.ts

@@ -0,0 +1,7 @@
+import { Model } from '../infrastructure/model';
+
+export declare class ThemeView{
+	constructor(model: Model);
+
+	classList: string | Array<string>;
+}

src/core/theme/theme.view.js

@@ -0,0 +1,13 @@
+export class ThemeView{
+	constructor(model){
+		this.model=model;
+	}
+
+	get classList()
+	{
+		return this.model.style().classList;
+	}
+}
+
+
+

src/core/view/view.factory.js

@@ -19,6 +19,7 @@ import { ScrollView } from '../scroll/scroll.view';
 import { SelectionView } from '../selection/selection.view';
 import { SortView } from '../sort/sort.view';
 import { StyleView } from '../style/style.view';
+import { ThemeView } from '../theme/theme.view';
 
 export function viewFactory(
 	model,
@@ -65,6 +66,7 @@ export function viewFactory(
 		host.rowDetails = new RowDetailsView(modelProxy, table, navigationShortcut);
 		host.selection = new SelectionView(modelProxy, table, selectionShortcut);
 		host.style = new StyleView(modelProxy, table);
+		host.theme = new ThemeView(modelProxy);
 
 		return () => {
 			host.layout.dispose();

src/examples/theme-grid-dark/example-theme-grid-dark.component.html

@@ -1,5 +1,7 @@
-<q-grid caption="Look People" class="q-grid-dark"
-        [rows]="rows | async">
+<q-grid caption="Look People" 
+	class="q-grid-dark"
+	[rows]="rows | async"
+	editMode="cell">
 	<q-grid-columns generation="deep">
 	</q-grid-columns>
 </q-grid>

src/lib/main/core/view/view-core.service.ts

@@ -22,6 +22,7 @@ import { CommandManager } from 'ng2-qgrid/core/command/command.manager';
 import { VScrollService } from '../../../main/core/scroll/vscroll.service';
 import { GridService } from '../../../main/grid/grid.service';
 import { RowView } from 'ng2-qgrid/core/row/row.view';
+import { ThemeView } from 'ng2-qgrid/core/theme/theme.view';
 
 @Injectable()
 export class ViewCoreService implements OnDestroy {
@@ -44,7 +45,8 @@ export class ViewCoreService implements OnDestroy {
 	sort: SortView = null;
 	style: StyleView = null;
 	row: RowView = null;
-
+	theme: ThemeView = null;
+
 	constructor(
 		private gridServiceFactory: GridService,
 		private vscroll: VScrollService

src/lib/main/grid/grid.component.ts

@@ -33,6 +33,7 @@ import { TableCommandManager } from 'ng2-qgrid/core/command/table.command.manage
 import { VisibilityModel } from 'ng2-qgrid/core/visibility/visibility.model';
 import { Command } from 'ng2-qgrid/core/command/command';
 import { GridModel } from '../../plugins/plugin.service';
+import {OverlayContainer} from '@angular/cdk/overlay';
 import { DOCUMENT } from '@angular/platform-browser';
 
 @Component({
@@ -111,8 +112,9 @@ export class GridComponent extends RootComponent implements OnInit {
 		private element: ElementRef,
 		private zone: NgZone,
 		private layerService: LayerService,
+		private overlayContainer: OverlayContainer,
+		private theme: ThemeService,
 		@Inject(DOCUMENT) private document: Document,
-		theme: ThemeService,
 	) {
 		super();
 
@@ -147,7 +149,11 @@ export class GridComponent extends RootComponent implements OnInit {
 		const model = this.root.model;
 
 		const element = this.element.nativeElement;
-
+
+		element.classList.forEach(cssClass => {
+			this.overlayContainer.getContainerElement().classList.add(cssClass);
+		});
+
 		model.style({
 			classList: Array.from(element.classList)
 		});

src/plugin/pager/pager.view.js

@@ -25,10 +25,6 @@ export class PagerView {
 		});
 	}
 
-	get theme() {
-		return this.model.style().classList		
-	}
-
 	get resource() {
 		return this.model.pagination().resource;
 	}

src/theme/basic/theme.module.ts

@@ -34,7 +34,7 @@ import {
 	]
 })
 export class ThemeModule {
-	constructor(theme: ThemeService) {
+	constructor(private theme: ThemeService) {
 		theme.name = 'basic';
 		theme.component = ThemeComponent;
 	}