Merge pull request #157 from IgniteUI/IGanchev/ng-cli-mockup

Implement igx-ts empty project mockup
IgniteUI · Feb 16, 2018 · 1ac4f4d · 1ac4f4d
2 parents 9740945 + 7254119
commit 1ac4f4d
Show file tree

Hide file tree

Showing 16 changed files with 109 additions and 36 deletions.
diff --git a/lib/Util.ts b/lib/Util.ts
@@ -4,7 +4,7 @@ import * as fsExtra from "fs-extra";
 import * as glob from "glob";
 import * as path from "path";
 import through2 = require("through2");
-const imageExtensions = [".png", ".jpg", "jpeg", "gif", "bmp"];
+const imageExtensions = [".png", ".jpg", ".jpeg", ".gif", ".bmp"];
 const applyConfig = (configuration: { [key: string]: string }) => {
 	return through2((data, enc, cb) => {
 		cb(null, new Buffer(Util.applyConfigTransformation(data.toString(), configuration)));

diff --git a/...angular/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__name__.component.ts b/...angular/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__name__.component.ts
@@ -16,7 +16,7 @@ import {
 	PagingError,
 	SortingDirection,
 	StableSortingStrategy,
-	IgxIcon
+	IgxIconComponent
   } from 'igniteui-angular/main';
   import { IgxGridComponent } from 'igniteui-angular/grid/grid.component';
   import { timer } from 'rxjs/observable/timer';

diff --git a/templates/angular/igx-ts/date-picker/default/files/src/app/__path__/__name__.component.html b/templates/angular/igx-ts/date-picker/default/files/src/app/__path__/__name__.component.html
@@ -1,5 +1,5 @@
 <div>
 	<p>igx-date-picker component. You can read more about configuring the igx-date-picker component
 		<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/src/date-picker/README.md" target="_blank">here</a>.</p>
-		<igx-datePicker [cancelButtonLabel]="'Close'"[todayButtonLabel]="'Today'"></igx-datePicker>
+		<igx-datePicker [cancelButtonLabel]="'Close'"[todayButtonLabel]="'Today'" [value]="today"></igx-datePicker>
 </div>
diff --git a/templates/angular/igx-ts/date-picker/default/files/src/app/__path__/__name__.component.ts b/templates/angular/igx-ts/date-picker/default/files/src/app/__path__/__name__.component.ts
@@ -11,4 +11,6 @@ export class $(ClassName)Component implements OnInit {
 
 	public ngOnInit() {
 	}
+
+	public today: Date = new Date(Date.now());
 }
diff --git a/templates/angular/igx-ts/list/default/files/src/app/__path__/__name__.component.ts b/templates/angular/igx-ts/list/default/files/src/app/__path__/__name__.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from "@angular/core";
-import { IgxFilterOptions, IgxListItem } from 'igniteui-angular/main';
+import { IgxFilterOptions, IgxListItemComponent } from 'igniteui-angular/main';
 
 @Component({
 	selector: "$(filePrefix)",
@@ -47,7 +47,7 @@ export class $(ClassName)Component implements OnInit {
 
 	ngOnInit() { }
 
-	public toggleFavorite(item: IgxListItem) {
+	public toggleFavorite(item: IgxListItemComponent) {
 		const contact = this.contacts[item.index - 1];
 		contact.isFavorite = !contact.isFavorite;
 	}

diff --git a/templates/angular/igx-ts/projects/empty/files/.angular-cli.json b/templates/angular/igx-ts/projects/empty/files/.angular-cli.json
@@ -19,8 +19,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css",
-        "../node_modules/igniteui-angular/igniteui-angular.css"
+        "styles.sass"
       ],
       "scripts": ["../node_modules/hammerjs/hammer.min.js"],
       "environmentSource": "environments/environment.ts",
@@ -55,7 +54,7 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "sass",
     "component": {}
   }
 }
diff --git a/templates/angular/igx-ts/projects/empty/files/package.json b/templates/angular/igx-ts/projects/empty/files/package.json
@@ -23,7 +23,7 @@
     "@angular/router": "^5.0.0",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^5.1.3",
+    "igniteui-angular": "5.2.0-beta.1",
     "igniteui-cli": "^1.0.4",
     "rxjs": "^5.5.2",
     "zone.js": "^0.8.14",

diff --git a/templates/angular/igx-ts/projects/empty/files/src/app/app.component.css b/templates/angular/igx-ts/projects/empty/files/src/app/app.component.css
@@ -0,0 +1,12 @@
+.main {
+	width: 100%;
+}
+
+h3 {
+  padding-left: 16px;
+}
+
+.content {
+  flex: 1 1 100%;
+  padding: 20px;
+}
diff --git a/templates/angular/igx-ts/projects/empty/files/src/app/app.component.html b/templates/angular/igx-ts/projects/empty/files/src/app/app.component.html
@@ -1,4 +1,15 @@
-<nav style="display: flex; justify-content: center; flex-wrap: wrap">
-  <span igxButton *ngFor="let route of topNavLinks" routerLink="{{route.path}}">{{route.name}}</span>
-</nav>
-<router-outlet></router-outlet>
+<div class="main" igxLayout>
+	<igx-nav-drawer #nav id="project-menu" isOpen="true" [enableGestures]='true' width="280px">
+		<ng-template igxDrawer>
+			<span igxDrawerItem [isHeader]="true">Views</span>
+			<span *ngFor="let route of topNavLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{route.path}}">{{route.name}}</span>
+		</ng-template>
+	</igx-nav-drawer>
+	<div igxFlex>
+		<igx-navbar title="IgniteUI for Angular!" actionButtonIcon="menu" (onAction)="nav.toggle()" igxFlex></igx-navbar>
+		<div class="content">
+			<router-outlet></router-outlet>
+		 </div>
+	  </div>
+  </div>
+
diff --git a/templates/angular/igx-ts/projects/empty/files/src/app/app.module.ts b/templates/angular/igx-ts/projects/empty/files/src/app/app.module.ts
@@ -5,23 +5,26 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
-import { IgxButtonModule } from 'igniteui-angular/main';
+import { IgxNavigationDrawerModule, IgxNavbarModule, IgxLayoutModule, IgxRippleModule } from 'igniteui-angular/main';
 import { HomeComponent } from './home/home.component';
 
 @NgModule({
-	declarations: [
-		AppComponent,
-		HomeComponent
-	],
-	imports: [
-		BrowserModule,
-		FormsModule,
-		BrowserModule,
-		BrowserAnimationsModule,
-		AppRoutingModule,
-		IgxButtonModule
-	],
-	providers: [],
-	bootstrap: [AppComponent]
+
+  declarations: [
+    AppComponent,
+    HomeComponent
+  ],
+  imports: [
+    FormsModule,
+    BrowserModule,
+    BrowserAnimationsModule,
+    AppRoutingModule,
+    IgxNavigationDrawerModule,
+    IgxNavbarModule,
+    IgxLayoutModule,
+    IgxRippleModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/templates/angular/igx-ts/projects/empty/files/src/app/home/home.component.css b/templates/angular/igx-ts/projects/empty/files/src/app/home/home.component.css
@@ -0,0 +1,13 @@
+a {
+  color: #731963;
+}
+
+.links{
+  display: inline-block;
+  text-align: center;
+  flex: 1 1 33%;
+}
+
+ul#linksContainer {
+  display: flex;
+}
diff --git a/templates/angular/igx-ts/projects/empty/files/src/app/home/home.component.html b/templates/angular/igx-ts/projects/empty/files/src/app/home/home.component.html
@@ -3,14 +3,17 @@
   <h1>
     Welcome to {{title}}!
   </h1>
-  <img src="assets/Ignite-header-apps-960.png" alt="Ignite UI" height="602" width="602" >
+  <img src="assets/responsive.gif" alt="Ignite UI CLI">
 </div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://www.infragistics.com/products/ignite-ui-angular">Ignite UI for Angular</a></h2>
+
+<ul id="linksContainer">
+  <li class="links">
+    <h3><a target="_blank" rel="noopener" href="https://github.com/IgniteUI/ignite-ui-cli">Ignite UI CLI </a></h3>
   </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/IgniteUI/ignite-ui-cli">Ignite UI CLI </a></h2>
+  <li class="links">
+      <h3><a target="_blank" rel="noopener" href="https://www.infragistics.com/products/ignite-ui-angular">Component Demos</a></h3>
+  </li>
+  <li class="links">
+    <h3><a target="_blank" rel="noopener" href="https://github.com/IgniteUI/igniteui-angular-ui-kits">Sketch UI Kit</a></h3>
   </li>
 </ul>
diff --git a/templates/angular/igx-ts/projects/empty/files/src/assets/responsive.gif b/templates/angular/igx-ts/projects/empty/files/src/assets/responsive.gif
diff --git a/templates/angular/igx-ts/projects/empty/files/src/index.html b/templates/angular/igx-ts/projects/empty/files/src/index.html
@@ -7,6 +7,9 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

diff --git a/templates/angular/igx-ts/projects/empty/files/src/styles.css b/templates/angular/igx-ts/projects/empty/files/src/styles.css
diff --git a/templates/angular/igx-ts/projects/empty/files/src/styles.sass b/templates/angular/igx-ts/projects/empty/files/src/styles.sass
@@ -0,0 +1,28 @@
+/* You can add global styles to this file, and also import other style files */
+@import "~igniteui-angular/core/styles/themes/index"
+
+@include igx-core()
+@include igx-theme()
+
+$purple: #731963 !default
+$grey: #f0f0f0 !default
+
+$app-palette: igx-palette($purple, $grey);
+@include igx-theme($app-palette)
+
+//$navbar-theme: igx-navbar-theme($background: #731963)
+//@include igx-navbar($navbar-theme)
+
+$title-margin: 15px
+
+$carosel-width: 80%
+$datepicker-width: 200px
+
+.content p
+    margin: $title-margin
+
+.igx-carousel
+    width: $carosel-width
+
+.igx-date-picker
+    width: $datepicker-width
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,4 +11,6 @@ export class $(ClassName)Component implements OnInit { @@
     	public ngOnInit() {
     	}
+    	public today: Date = new Date(Date.now());
     }