Skip to content

Commit 83898c2

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge pull request #1976 from IgniteUI/ibarakov/dock-manager-sample
docs(dock-manager): Create dock manager sample
2 parents 1d2acf5 + 4d4141b commit 83898c2

10 files changed

+165
-2
lines changed

‎azure-pipelines.yml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@ pool:
22
vmImage: 'Ubuntu 16.04'
33

44
steps:
5+
6+
- script: npm config set @infragistics:registry $(npmRegistry)
7+
displayName: 'Npm add registry'
8+
9+
- script: npm config set always-auth=true --scope:@infragistics
10+
displayName: 'Npm config'
11+
12+
- script: npm config set _auth=$(token) --scope:@infragistics
13+
displayName: 'Npm config auth'
14+
515
- script: npm install
616
displayName: 'Install dependencies'
717
env:

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"@angular/platform-browser": "9.1.6",
4141
"@angular/platform-browser-dynamic": "9.1.6",
4242
"@angular/router": "9.1.6",
43+
"@infragistics/igniteui-dockmanager": "0.1.0-beta.6",
4344
"@types/file-saver": "^2.0.1",
4445
"@types/hammerjs": "^2.0.35",
4546
"angular-in-memory-web-api": "0.9.0",

‎src/app/layouts/dock-manager/dock-manager.component.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<igc-dockmanager [layout]=layout style="height: 600px;">
2+
<div slot="content1" class="dockManagerContent">Content 1</div>
3+
<div slot="content2" class="dockManagerContent">Content 2</div>
4+
<div slot="content3" class="dockManagerContent">Content 3</div>
5+
<div slot="content4" class="dockManagerContent">Content 4</div>
6+
<div slot="content5" class="dockManagerContent">Content 5</div>
7+
<div slot="content6" class="dockManagerContent">Content 6</div>
8+
<div slot="content7" class="dockManagerContent">Content 7</div>
9+
<div slot="content8" class="dockManagerContent">Content 8</div>
10+
<div slot="content9" class="dockManagerContent">Content 9</div>
11+
</igc-dockmanager>
12+

‎src/app/layouts/dock-manager/dock-manager.component.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.dockManagerContent {
2+
padding: 0.5rem;
3+
}

‎src/app/layouts/dock-manager/dock-manager.component.ts

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import {Component} from "@angular/core";
2+
import { IgcDockManagerLayout,
3+
IgcDockManagerPaneType,
4+
IgcSplitPaneOrientation } from "@infragistics/igniteui-dockmanager";
5+
6+
@Component({
7+
selector: "dock-manager",
8+
styleUrls: ["./dock-manager.component.scss"],
9+
templateUrl: "./dock-manager.component.html"
10+
})
11+
export class DockManagerComponent {
12+
public layout: IgcDockManagerLayout = {
13+
rootPane: {
14+
type: IgcDockManagerPaneType.splitPane,
15+
orientation: IgcSplitPaneOrientation.horizontal,
16+
panes: [
17+
{
18+
type: IgcDockManagerPaneType.splitPane,
19+
orientation: IgcSplitPaneOrientation.vertical,
20+
panes: [
21+
{
22+
type: IgcDockManagerPaneType.contentPane,
23+
contentId: "content1",
24+
header: "Content Pane 1"
25+
},
26+
{
27+
type: IgcDockManagerPaneType.contentPane,
28+
contentId: "content2",
29+
header: "Unpinned Pane 1",
30+
isPinned: false
31+
}
32+
]
33+
},
34+
{
35+
type: IgcDockManagerPaneType.splitPane,
36+
orientation: IgcSplitPaneOrientation.vertical,
37+
size: 200,
38+
panes: [
39+
{
40+
type: IgcDockManagerPaneType.documentHost,
41+
size: 200,
42+
rootPane: {
43+
type: IgcDockManagerPaneType.splitPane,
44+
orientation: IgcSplitPaneOrientation.horizontal,
45+
panes: [
46+
{
47+
type: IgcDockManagerPaneType.tabGroupPane,
48+
panes: [
49+
{
50+
type: IgcDockManagerPaneType.contentPane,
51+
header: "Document 1",
52+
contentId: "content3"
53+
},
54+
{
55+
type: IgcDockManagerPaneType.contentPane,
56+
header: "Document 2",
57+
contentId: "content4"
58+
}
59+
]
60+
}
61+
]
62+
}
63+
},
64+
{
65+
type: IgcDockManagerPaneType.contentPane,
66+
contentId: "content5",
67+
header: "Unpinned Pane 2",
68+
isPinned: false
69+
}
70+
]
71+
},
72+
{
73+
type: IgcDockManagerPaneType.splitPane,
74+
orientation: IgcSplitPaneOrientation.vertical,
75+
panes: [
76+
{
77+
type: IgcDockManagerPaneType.tabGroupPane,
78+
size: 200,
79+
panes: [
80+
{
81+
type: IgcDockManagerPaneType.contentPane,
82+
contentId: "content6",
83+
header: "Tab 1"
84+
},
85+
{
86+
type: IgcDockManagerPaneType.contentPane,
87+
contentId: "content7",
88+
header: "Tab 2"
89+
}
90+
]
91+
},
92+
{
93+
type: IgcDockManagerPaneType.contentPane,
94+
contentId: "content8",
95+
header: "Content Pane 2"
96+
}
97+
]
98+
}
99+
]
100+
},
101+
floatingPanes: [
102+
{
103+
type: IgcDockManagerPaneType.splitPane,
104+
orientation: IgcSplitPaneOrientation.horizontal,
105+
floatingHeight: 150,
106+
floatingWidth: 250,
107+
floatingLocation: { x: 300, y: 200 },
108+
panes: [
109+
{
110+
type: IgcDockManagerPaneType.contentPane,
111+
contentId: "content9",
112+
header: "Floating Pane"
113+
}
114+
]
115+
}
116+
]
117+
};
118+
}

‎src/app/layouts/layouts-routes-data.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const layoutsRoutesData = {
1010
"carousel-no-navigation-sample": { displayName: "Carousel No Navigation", parentName: "Carousel" },
1111
"carousel-animations-sample": { displayName: "Carousel Animations", parentName: "Carousel" },
1212
"carousel-with-components-sample": { displayName: "Carousel With Other Components", parentName: "Carousel" },
13+
"dock-manager-sample": { displayName: "Dock Manager", parentName: "Dock Manager" },
1314
"expansion-sample-1": { displayName: "Expansion Panel 1", parentName: "Expansion Panel" },
1415
"expansion-sample-2": { displayName: "Expansion Panel 2", parentName: "Expansion Panel" },
1516
"expansion-sample-3": { displayName: "Expansion Panel 3", parentName: "Expansion Panel" },

‎src/app/layouts/layouts-routing.module.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { DividerDashedComponent } from "./divider/dashed/divider-dashed.componen
2323
import { DividerDefaultComponent } from "./divider/default/divider-default.component";
2424
import { DividerInsetComponent } from "./divider/inset/divider-inset.component";
2525
import { DividerVerticalComponent } from "./divider/vertical/divider-vertical.component";
26+
import { DockManagerComponent } from "./dock-manager/dock-manager.component";
2627
import { ExpansionPanelSample1Component } from "./expansion-panel/expansion-sample-1/expansion-sample-1.component";
2728
import { ExpansionPanelSample2Component } from "./expansion-panel/expansion-sample-2/expansion-sample-2.component";
2829
import { ExpansionPanelSample3Component } from "./expansion-panel/expansion-sample-3/expansion-sample-3.component";
@@ -124,6 +125,11 @@ export const layoutsRoutes: Routes = [
124125
data: layoutsRoutesData["divider-sample-4"],
125126
path: "divider-sample-4"
126127
},
128+
{
129+
component: DockManagerComponent,
130+
data: layoutsRoutesData["dock-manager-sample"],
131+
path: "dock-manager-sample"
132+
},
127133
{
128134
component: ExpansionPanelSample1Component,
129135
data: layoutsRoutesData["expansion-sample-1"],

‎src/app/layouts/layouts.module.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { CommonModule } from "@angular/common";
2-
import { NgModule } from "@angular/core";
2+
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
33
import { FormsModule } from "@angular/forms";
44
import {
55
IgxAvatarModule,
@@ -47,6 +47,7 @@ import { DividerDashedComponent } from "./divider/dashed/divider-dashed.componen
4747
import { DividerDefaultComponent } from "./divider/default/divider-default.component";
4848
import { DividerInsetComponent } from "./divider/inset/divider-inset.component";
4949
import { DividerVerticalComponent } from "./divider/vertical/divider-vertical.component";
50+
import { DockManagerComponent } from "./dock-manager/dock-manager.component";
5051
import { ExpansionPanelSample1Component } from "./expansion-panel/expansion-sample-1/expansion-sample-1.component";
5152
import { ExpansionPanelSample2Component } from "./expansion-panel/expansion-sample-2/expansion-sample-2.component";
5253
import { ExpansionPanelSample3Component } from "./expansion-panel/expansion-sample-3/expansion-sample-3.component";
@@ -96,6 +97,7 @@ import { TabsStyleComponent } from "./tabs/tabs-style/tabs-style.component";
9697
DividerVerticalComponent,
9798
DividerDashedComponent,
9899
DividerInsetComponent,
100+
DockManagerComponent,
99101
ExpansionPanelSample1Component,
100102
ExpansionPanelSample2Component,
101103
ExpansionPanelSample3Component,
@@ -153,6 +155,7 @@ import { TabsStyleComponent } from "./tabs/tabs-style/tabs-style.component";
153155
IgxSplitterModule,
154156
IgxTabsModule,
155157
IgxToastModule
156-
]
158+
],
159+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
157160
})
158161
export class LayoutsModule { }

‎src/main.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
44
import { AppModule } from "./app/app.module";
55
import { environment } from "./environments/environment";
66

7+
import { defineCustomElements } from "@infragistics/igniteui-dockmanager/loader";
8+
79
if (environment.production) {
810
enableProdMode();
911
}
1012

1113
platformBrowserDynamic().bootstrapModule(AppModule)
1214
.catch((err) => console.log(err));
15+
16+
defineCustomElements(window);

0 commit comments

Comments
 (0)