Angular Material

l0ll098 · Nov 27, 2017 · c2b4f55 · c2b4f55
1 parent 389c552
commit c2b4f55
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 32 deletions.
diff --git a/#RunAll.cmd b/#RunAll.cmd
@@ -0,0 +1,2 @@
+start cmd /c "npm start"
+start cmd /c "cd client && npm start"
diff --git a/Client/package.json b/Client/package.json
@@ -12,12 +12,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.4",
+    "@angular/animations": "^4.4.6",
+    "@angular/cdk": "^5.0.0-rc.1",
     "@angular/common": "^4.2.4",
     "@angular/compiler": "^4.2.4",
     "@angular/core": "^4.2.4",
     "@angular/forms": "^4.2.4",
     "@angular/http": "^4.2.4",
+    "@angular/material": "^5.0.0-rc.1",
     "@angular/platform-browser": "^4.2.4",
     "@angular/platform-browser-dynamic": "^4.2.4",
     "@angular/router": "^4.2.4",

diff --git a/Client/src/app/app.component.css b/Client/src/app/app.component.css
@@ -0,0 +1,20 @@
+* {
+    font-family: 'Roboto', sans-serif;
+}
+
+mat-toolbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    min-height: 64px;
+}
+
+#content {
+    overflow: auto;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 64px;
+    margin-top: 10px;
+}
diff --git a/Client/src/app/app.component.html b/Client/src/app/app.component.html
@@ -1,30 +1,36 @@
-<button (click)="makecall()">Authorize</button>
+<mat-toolbar color="primary">
+    <span>TwitterHashtagsCounter</span>
+</mat-toolbar>
 
 
-<div class="row">
-    <form class="col s4">
-        <div class="row">
-            <div class="input-field col s12">
-                <input id="hashtags" type="text" [(ngModel)]="searchquery" [ngModelOptions]="{standalone: true}">
-                <label for="hashtags">Search by hashtags</label>
-            </div>
-        </div>
-        <button class="waves-effect waves-light btn" (click)="searchcall()">Search</button>
-        <div *ngFor="let item of tweetsdata" class="col s12 m7">
-            <div class="card">
-                <div class="card-image">
-                    <img style={width:10px,height:10px;} src={{item.user.profile_image_url}} />
+<div id="content">
+    <button (click)="makecall()">Authorize</button>
+
+    <div class="row">
+        <form class="col s4">
+            <div class="row">
+                <div class="input-field col s12">
+                    <input id="hashtags" type="text" [(ngModel)]="searchquery" [ngModelOptions]="{standalone: true}">
+                    <label for="hashtags">Search by hashtags</label>
                 </div>
-                <div class="right-content">
-                    <span class="card-title">{{item.user.name}}</span>
-                    <div class="card-content">
-                        <p>{{item.text}}</p>
+            </div>
+            <button class="waves-effect waves-light btn" (click)="searchcall()">Search</button>
+            <div *ngFor="let item of tweetsdata" class="col s12 m7">
+                <div class="card">
+                    <div class="card-image">
+                        <img style={width:10px,height:10px;} src={{item.user.profile_image_url}} />
                     </div>
-                    <div class="card-action">
-                        <a href="#">This is a link</a>
+                    <div class="right-content">
+                        <span class="card-title">{{item.user.name}}</span>
+                        <div class="card-content">
+                            <p>{{item.text}}</p>
+                        </div>
+                        <div class="card-action">
+                            <a href="#">This is a link</a>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </form>
-</div>
+        </form>
+    </div>
+</div>
diff --git a/Client/src/app/app.module.ts b/Client/src/app/app.module.ts
@@ -3,6 +3,8 @@ import { NgModule } from '@angular/core';
 
 import { HttpModule } from "@angular/http";
 import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatToolbarModule } from "@angular/material/toolbar";
 
 import { AppComponent } from './app.component';
 
@@ -12,9 +14,12 @@ import { AppComponent } from './app.component';
 	],
 	imports: [
 		BrowserModule,
+		BrowserAnimationsModule,
 
 		HttpModule,
-		FormsModule
+		FormsModule,
+
+		MatToolbarModule
 	],
 	providers: [],
 	bootstrap: [AppComponent]

diff --git a/Client/src/index.html b/Client/src/index.html
@@ -1,14 +1,15 @@
-<!doctype html>
+<!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <title>TwitterHashtagsCounter</title>
-  <base href="/">
+    <meta charset="utf-8">
+    <title>TwitterHashtagsCounter</title>
+    <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <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">
 </head>
 <body>
-  <app-root></app-root>
+    <app-root></app-root>
 </body>
 </html>
diff --git a/Client/src/styles.css b/Client/src/styles.css
@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
diff --git a/TwitterHashtagsCounter.njsproj b/TwitterHashtagsCounter.njsproj
@@ -7,6 +7,7 @@
     <EnableTypeScript>true</EnableTypeScript>
     <TypeScriptSourceMap>true</TypeScriptSourceMap>
     <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
+    <ToolsVersionPromptShown>0.0</ToolsVersionPromptShown>
   </PropertyGroup>
   <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
   <PropertyGroup>
@@ -43,8 +44,13 @@
     <Content Include="Client\src\.angular-cli.json" />
     <Content Include="Client\src\app\app.component.css" />
     <Content Include="Client\src\app\app.component.html" />
+    <Content Include="Client\src\favicon.ico" />
+    <Content Include="Client\src\index.html" />
     <Content Include="Client\src\package.json" />
+    <Content Include="Client\src\styles.css" />
+    <Content Include="Client\src\tsconfig.app.json" />
     <Content Include="Client\src\tsconfig.json" />
+    <Content Include="Client\src\tsconfig.spec.json" />
     <Content Include="Client\tsconfig.json" />
     <Content Include="package.json" />
   </ItemGroup>
@@ -61,6 +67,10 @@
     <TypeScriptCompile Include="Client\src\app\app.module.ts" />
     <TypeScriptCompile Include="Client\src\environments\environment.prod.ts" />
     <TypeScriptCompile Include="Client\src\environments\environment.ts" />
+    <TypeScriptCompile Include="Client\src\main.ts" />
+    <TypeScriptCompile Include="Client\src\polyfills.ts" />
+    <TypeScriptCompile Include="Client\src\test.ts" />
+    <TypeScriptCompile Include="Client\src\typings.d.ts" />
   </ItemGroup>
   <!-- Do not delete the following Import Project.  While this appears to do nothing it is a marker for setting TypeScript properties before our import that depends on them. -->
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="False" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		start cmd /c "npm start"
		start cmd /c "cd client && npm start"
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		/* You can add global styles to this file, and also import other style files */
		@import "~@angular/material/prebuilt-themes/indigo-pink.css";