Skip to content

Commit 16349cc

Browse files
hanastasovhanastasov
authored
Merge pull request #3235 from IgniteUI/dTsvetkov/update-crm-project-structure
Include docs-layout and home to crm project structure
2 parents 202f7b7 + 0f0364e commit 16349cc

26 files changed

+829
-16
lines changed

‎live-editing/Routes.ts

-2
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,6 @@ import { PaginationModule } from '../src/app/pagination/pagination.module';
4848
import * as PaginatorRouting from '../src/app/pagination/pagination-routing.module';
4949
import { PivotGridsModule } from '../src/app/pivot-grid/pivot-grids.module';
5050
import { PivotGridsRoutingModule } from '../src/app/pivot-grid/pivot-grids-routing.module';
51-
import { GridCRMComponent } from '../projects/app-crm/src/app/grid-crm/grid-crm.component';
52-
import { AppModule } from '../projects/app-crm/src/app/app.module';
5351
import { GridsCrmModule } from '../projects/app-crm/src/app/grid-crm/grid-crm.module';
5452

5553
export const MODULE_ROUTES = [

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"sass-js-compile-check": "gulp sass-js-compile-check",
1818
"build": "gulp generate-live-editing && gulp overwrite-package-json && node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production",
1919
"build:app-lob": "gulp generate-live-editing --appDv=true && gulp overwrite-package-json && node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build app-lob --configuration production && gulp prerenderPages",
20-
"build:app-crm": "ng build app-crm --configuration production",
20+
"build:app-crm": "gulp generate-live-editing --appCrm=true && gulp overwrite-package-json && node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build app-crm --configuration production",
2121
"test": "ng test",
2222
"lint": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng lint",
2323
"lint:app-lob": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng lint app-lob",

‎projects/app-crm/src/app/app.module.ts

+17-2
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
11
import { NgModule } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
23
import { BrowserModule, HammerModule } from '@angular/platform-browser';
34
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
45
import {
5-
IgxAutocompleteModule, IgxLayoutModule
6+
IgxButtonModule, IgxIconModule, IgxInputGroupModule, IgxAutocompleteModule,
7+
IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule
68
} from 'igniteui-angular';
79
import { AppComponent } from './app.component';
810
import { AppRoutingModule } from './app.routing.module';
911
import { GridsCrmModule } from './grid-crm/grid-crm.module';
12+
import { HomeComponent } from './home/home.component';
13+
import { DocsLayoutComponent } from './index/docs-layout.component';
14+
import { IndexComponent } from './index/index.component';
1015

1116
@NgModule({
1217
bootstrap: [AppComponent],
1318
declarations: [
14-
AppComponent
19+
AppComponent,
20+
HomeComponent,
21+
DocsLayoutComponent,
22+
IndexComponent
1523
],
1624
imports: [
25+
IgxButtonModule,
26+
IgxIconModule,
27+
IgxInputGroupModule,
28+
IgxNavbarModule,
29+
IgxNavigationDrawerModule,
30+
IgxRippleModule,
1731
IgxAutocompleteModule,
1832
IgxLayoutModule,
1933
BrowserModule,
2034
AppRoutingModule,
35+
FormsModule,
2136
BrowserAnimationsModule,
2237
HammerModule,
2338
GridsCrmModule

‎projects/app-crm/src/app/app.routing.module.ts

+28-11
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,40 @@
11
import { NgModule } from '@angular/core';
22
import { RouterModule, Routes } from '@angular/router';
3+
import { HomeComponent } from './home/home.component';
4+
import { DocsLayoutComponent } from './index/docs-layout.component';
5+
import { IndexComponent } from './index/index.component';
6+
7+
8+
export const samplesRoutes: Routes = [
9+
{
10+
component: HomeComponent,
11+
data: { displayName: 'Home' },
12+
path: 'home'
13+
},
14+
{
15+
loadChildren: () => import('./grid-crm/grid-crm.module').then(m => m.GridsCrmModule),
16+
path: 'grid-crm'
17+
}
18+
];
319

420
export const appRoutes: Routes = [
521
{
6-
path: '', pathMatch: 'full', loadChildren: () => import('./grid-crm/grid-crm.module').then(m => m.GridsCrmModule)
22+
path: '', pathMatch: 'full', redirectTo: '/samples/home'
723
},
824
{
9-
path: 'grid-crm', loadChildren: () => import('./grid-crm/grid-crm.module').then(m => m.GridsCrmModule)
25+
children: samplesRoutes,
26+
component: DocsLayoutComponent,
27+
path: ''
1028
},
11-
{
12-
path: '**', redirectTo: ''
13-
}
29+
{
30+
children: samplesRoutes,
31+
component: IndexComponent,
32+
path: 'samples'
33+
}
1434
];
35+
1536
@NgModule({
16-
exports: [
17-
RouterModule
18-
],
19-
imports: [
20-
RouterModule.forRoot(appRoutes)
21-
]
37+
imports: [RouterModule.forRoot(appRoutes, {})],
38+
exports: [RouterModule]
2239
})
2340
export class AppRoutingModule { }

‎projects/app-crm/src/app/grid-crm/grid-crm-routes-data.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const gridsRoutesData = {
2+
'grid-crm': { displayName: 'Grid CRM', parentName: 'Grid' }
3+
};

‎projects/app-crm/src/app/home/home.component.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<div class="home">
2+
<section class="header">
3+
<h2 class="title">
4+
Welcome to Ignite UI for Angular!
5+
</h2>
6+
<p class="description">
7+
Browse the left menu to see the complete set of samples for each control. You’ll see the full array of capabilities in Ignite
8+
UI for Angular, all the different features for the controls and how they are implemented.
9+
</p>
10+
</section>
11+
<section class="content">
12+
<h3 class="contentTitle">
13+
Building your first Ignite UI for Angular app
14+
</h3>
15+
<p class="contentText">
16+
After you’ve looked at the Ignite UI for Angular samples and explored the online docs, it’s time to get started building
17+
your first Ignite UI for Angular app. Using the Ignite UI for Angular CLI (Command Line Interface), it’s super-easy
18+
to get started building full-featured Angular apps. Our CLI gives you the ability to initialize, develop, scaffold,
19+
and maintain applications in Angular with Ignite UI, all with pre-set navigation, templates for each control
20+
and full screen views that can help you kick off any type of Angular app development.
21+
</p>
22+
<p class="contentText">
23+
We’ve included 2 videos that will help you install the pre-requisites and walk you through using the Ignite UI for Angular
24+
CLI to build your first Ignite UI for Angular app.
25+
</p>
26+
<div class="videos">
27+
<div class="videoWrapper">
28+
<a class="video videoInstall" href="https://youtu.be/lsEY90yYQIs" target="_blank">
29+
<img src="../../assets/images/home/Play.svg" />
30+
</a>
31+
<p class="videoText">Installing the Ignite UI for Angular CLI</p>
32+
</div>
33+
<div class="videoWrapper">
34+
<a class="video videoBuild" href="https://youtu.be/QK_NsdtdA70" target="_blank">
35+
<img src="../../assets/images/home/Play.svg" />
36+
</a>
37+
<p class="videoText">Building Your First Ignite UI CLI App</p>
38+
</div>
39+
</div>
40+
<div class="installDescription">
41+
<p>
42+
If you are already familiar with node.js and using a CLI, you can skip the videos and type:
43+
</p>
44+
<span class="code-snippet">
45+
npm install igniteui-cli –g
46+
</span>
47+
<p>
48+
in Terminal, PowerShell or Bash to install our CLI. We include an alias, so just type:
49+
</p>
50+
<span class="code-snippet">
51+
ig
52+
</span>
53+
<p>
54+
to get started with the wizard, or type
55+
</p>
56+
<span class="code-snippet">
57+
ig -v
58+
</span>
59+
<p>
60+
to check the version or to get a list of commands, type
61+
</p>
62+
<span class="code-snippet">
63+
ig -h
64+
</span>
65+
</div>
66+
<div class="bannerArea">
67+
<div>
68+
<img src="../../assets/images/home/angular-image.png" />
69+
</div>
70+
<div class="bannerItem">
71+
<img src="../../assets/images/home/angular-logo.png" />
72+
<p class="bannerText">To get further help if you need it, or if you run into any issues, go to the forums.</p>
73+
<a class="bannerButton bannerText" href="https://www.infragistics.com/community/forums/f/ignite-ui-for-angular" target="_blank">Ignite UI for Angular Forums</a>
74+
</div>
75+
</div>
76+
</section>
77+
</div>
78+
<section class="footer">
79+
<img src="../../assets/images/home/ig-logo.svg" />
80+
</section>

‎projects/app-crm/src/app/home/home.component.scss

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
img {
2+
max-width:100%;
3+
}
4+
5+
section {
6+
padding-left: 56px;
7+
padding-right: 56px;
8+
}
9+
10+
.header {
11+
background: url("../../assets/images/home/hero-background.png") #09f no-repeat fixed;
12+
background-size: contain;
13+
min-height: 350px;
14+
display: flex;
15+
flex-direction: column;
16+
justify-content: center;
17+
}
18+
19+
.title {
20+
color: white;
21+
font-size: 32px;
22+
vertical-align: middle;
23+
margin-top: 20px;
24+
max-width: 300px;
25+
}
26+
27+
.description {
28+
color: white;
29+
font-size: 20px;
30+
max-width: 800px;
31+
}
32+
33+
.contentTitle {
34+
color: #0099FF;
35+
margin-top: 50px;
36+
margin-bottom: 25px;
37+
}
38+
39+
.contentText {
40+
font-size: 16px;
41+
}
42+
43+
.video {
44+
display: flex;
45+
justify-content: center;
46+
align-content: center;
47+
min-width: 350px;
48+
min-height: 200px;
49+
}
50+
51+
.videoWrapper {
52+
display: inline-block;
53+
margin-right: 24px;
54+
}
55+
56+
.video img {
57+
vertical-align: middle;
58+
}
59+
60+
.videoInstall {
61+
background: url("../../assets/images/home/installing-CLI.gif");
62+
}
63+
64+
.videoBuild {
65+
background: url("../../assets/images/home/usage-CLI.gif");
66+
}
67+
68+
.videoText {
69+
color: #666666;
70+
font-size: 16px;
71+
}
72+
73+
.installDescription p {
74+
margin-top: 10px;
75+
margin-bottom: 10px;
76+
}
77+
78+
.code-snippet {
79+
width: fit-content;
80+
background-color: #EDEFF1;
81+
justify-content: left;
82+
text-align: left;
83+
padding: 4px 6px 4px 6px;
84+
}
85+
86+
.bannerArea {
87+
margin-top: 100px;
88+
background: #014CB1;
89+
display: flex;
90+
height: 320px;
91+
min-width: 800px;
92+
align-items: flex-end;
93+
}
94+
95+
.bannerItem {
96+
width: 300px;
97+
margin-left: auto;
98+
margin-right: 32px;
99+
margin-bottom: 24px;
100+
}
101+
102+
.bannerText {
103+
color: white;
104+
font-size: 16px;
105+
}
106+
107+
.bannerButton {
108+
background: #0099FF;
109+
padding: 5px 15px 5px 15px;
110+
}
111+
112+
.footer {
113+
background: black;
114+
width: 100%;
115+
height:50px;
116+
margin-top: 50px;
117+
display: flex;
118+
align-items: center;
119+
}
120+
121+
.footer img {
122+
vertical-align: middle;
123+
}

‎projects/app-crm/src/app/home/home.component.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-home',
5+
styleUrls: ['./home.component.scss'],
6+
templateUrl: './home.component.html'
7+
})
8+
export class HomeComponent {
9+
constructor() { }
10+
}

‎projects/app-crm/src/app/index/docs-layout.component.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
::ng-deep {
2+
.custom-body {
3+
color: var(--ig-surface-500-contrast);
4+
background: hsla(var(--ig-surface-500));
5+
}
6+
}

‎projects/app-crm/src/app/index/docs-layout.component.ts

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { DOCUMENT } from '@angular/common';
2+
import { Component, HostListener, Inject, OnInit } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-docs-layout',
6+
styleUrls: ['./docs-layout.component.scss'],
7+
template: `<router-outlet></router-outlet>`
8+
})
9+
10+
export class DocsLayoutComponent implements OnInit {
11+
private isIE = !((window as any).ActiveXObject) && 'ActiveXObject' in window;
12+
private theme = 'default-theme';
13+
private styleElem: HTMLStyleElement;
14+
private typefacesLoaded = ['Titillium Web', 'Roboto'];
15+
private typefaceUrl = 'https://fonts.googleapis.com/css?family=';
16+
17+
constructor(@Inject(DOCUMENT) private document: Document) {}
18+
19+
@HostListener('window:message', ['$event'])
20+
private onMessage(e: MessageEvent) {
21+
if (e.origin === e.data.origin && typeof e.data.themeStyle === 'string') {
22+
this.styleElem.textContent = e.data.themeStyle;
23+
24+
const typeface = window.getComputedStyle(this.document.body).fontFamily.replace(/\'/g, '');
25+
if (!(typeface.match(/,/g) || []).length &&
26+
!this.typefacesLoaded.includes(typeface)) {
27+
this.typefacesLoaded.push(typeface);
28+
this.createTypefaceLink(typeface);
29+
}
30+
} else if (e.origin === e.data.origin && typeof e.data.theme === 'string') {
31+
this.document.body.classList.remove(this.theme);
32+
this.document.body.classList.add(e.data.theme);
33+
this.theme = e.data.theme;
34+
}
35+
}
36+
37+
public ngOnInit() {
38+
this.createThemeStyle();
39+
}
40+
41+
private createThemeStyle() {
42+
if (this.isIE) {
43+
this.document.body.classList.add(this.theme);
44+
} else {
45+
this.styleElem = document.createElement('style');
46+
this.styleElem.id = 'igniteui-theme';
47+
document.head.insertBefore(this.styleElem, this.document.head.lastElementChild);
48+
this.document.body.classList.add('custom-body');
49+
}
50+
}
51+
52+
private createTypefaceLink(typeface: string) {
53+
const typefaceElem = this.document.createElement('link');
54+
typefaceElem.rel = 'stylesheet';
55+
typefaceElem.id = 'ignteui-theme-typeface';
56+
typefaceElem.href = this.typefaceUrl + typeface.split(' ').join('+');
57+
document.head.insertBefore(typefaceElem, this.document.head.lastElementChild);
58+
}
59+
}

0 commit comments

Comments
 (0)