Skip to content

Commit f6108fc

Browse files
codediodeiocodediodeio
authored
Merge pull request #1 from hermbit/material
Added AngularMaterial, created basic layout
2 parents 30b88f9 + 9c48e1a commit f6108fc

File tree

10 files changed

+140
-59
lines changed

10 files changed

+140
-59
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@
1313
"private": true,
1414
"dependencies": {
1515
"@angular/animations": "^4.4.6",
16+
"@angular/cdk": "^2.0.0-beta.12",
1617
"@angular/common": "^4.4.6",
1718
"@angular/compiler": "^4.4.6",
1819
"@angular/core": "^4.4.6",
1920
"@angular/forms": "^4.4.6",
2021
"@angular/http": "^4.4.6",
22+
"@angular/material": "^2.0.0-beta.12",
2123
"@angular/platform-browser": "^4.4.6",
2224
"@angular/platform-browser-dynamic": "^4.4.6",
2325
"@angular/router": "^4.4.6",

‎src/app/app.component.html

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
<div class="row">
2-
<div class="column"></div>
2+
<div class="column"></div>
33
<div class="column column-50">
44
<chat-dialog></chat-dialog>
55
</div>
6-
<div class="column"></div>
7-
</div>
8-
9-
10-
6+
<div class="column"></div>
7+
</div>

‎src/app/app.module.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { BrowserModule } from '@angular/platform-browser';
2+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
23
import { NgModule } from '@angular/core';
34

45
import { AppComponent } from './app.component';
56

7+
import { MaterialModule } from './core/material.module';
68
import { ChatModule } from './chat/chat.module';
79

810
@NgModule({
@@ -11,6 +13,8 @@ import { ChatModule } from './chat/chat.module';
1113
],
1214
imports: [
1315
BrowserModule,
16+
BrowserAnimationsModule,
17+
MaterialModule,
1418
ChatModule
1519
],
1620
providers: [],

‎src/app/chat/chat-dialog/chat-dialog.component.html

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
1-
<h1>Angular Bot</h1>
2-
3-
4-
5-
<ng-container *ngFor="let message of messages | async">
6-
7-
<div class="message" [ngClass]="{ 'from': message.sentBy === 'bot',
8-
'to': message.sentBy === 'user' }">
9-
{{ message.content }}
1+
<mat-toolbar color="primary" class="toolbar mat-elevation-z3">
2+
<mat-icon>chat</mat-icon> &nbsp; Angular Chatbot
3+
</mat-toolbar>
4+
5+
<div class="messenger">
6+
7+
<ng-container *ngFor="let message of messages | async">
8+
9+
<div class="message-row" [ngClass]="{ 'from': message.sentBy === 'bot',
10+
'to': message.sentBy === 'user' }">
11+
<div class="message" >
12+
{{ message.content }}
13+
</div>
14+
</div>
15+
16+
</ng-container>
17+
18+
<div class="send-message" (click)="messageInput.click()">
19+
<mat-form-field floatPlaceholder="never">
20+
<input matInput #messageInput [(ngModel)]="formValue" (keyup.enter)="sendMessage()" placeholder="Type a message..." autofocus autocomplete="off">
21+
</mat-form-field>
1022
</div>
1123

12-
</ng-container>
13-
14-
15-
<label for="nameField">Your Message</label>
16-
17-
18-
<input [(ngModel)]="formValue" (keyup.enter)="sendMessage()" type="text"><br>
19-
20-
<button (click)="sendMessage()">Send</button>
21-
24+
</div>

‎src/app/chat/chat-dialog/chat-dialog.component.scss

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,54 @@
1+
.toolbar {
2+
position: fixed;
3+
top: 0;
4+
z-index: 10;
5+
font-weight: 300;
6+
}
7+
8+
.messenger {
9+
overflow: auto;
10+
margin-top: 64px;
11+
}
12+
13+
.message-row {
14+
padding: 0 16px;
15+
margin: 8px;
16+
}
117
.message {
2-
border-radius: 50px;
3-
margin: 0 15px 10px;
4-
padding: 15px 20px;
5-
position: relative;
6-
font-weight: bold;
7-
}
8-
.message.to {
9-
background-color: #2095FE;
10-
color: #fff;
11-
margin-left: 100px;
18+
display: inline-block;
19+
border-radius: 6px;
20+
padding: 16px;
21+
font-weight: 500;
22+
}
23+
.message-row.to {
1224
text-align: right;
25+
.message {
26+
background-color: #2095FE;
27+
color: #fff;
28+
}
1329
}
14-
.message.from {
15-
background-color: #E5E4E9;
16-
color: #363636;
17-
margin-right: 100px;
18-
30+
.message-row.from {
31+
text-align: left;
32+
.message {
33+
background-color: #E5E4E9;
34+
color: #363636;
35+
}
1936
}
20-
.message.to + .message.to,
21-
.message.from + .message.from {
22-
margin-top: -10px;
37+
.message-row.to + .message-row.to,
38+
.message-row.from + .message-row.from {
39+
margin-top: -10px;
2340
}
41+
42+
.send-message {
43+
height: 64px;
44+
width: 100%;
45+
border-top: 1px solid #ccc;
46+
position: fixed;
47+
bottom: 0;
48+
padding: 0 16px;
49+
background-color: #fafafa;
50+
}
51+
52+
::ng-deep .send-message .mat-input-underline {
53+
display: none!important;
54+
}

‎src/app/chat/chat.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ import { ChatService } from './chat.service';
66

77
import { FormsModule } from '@angular/forms';
88

9+
import { MaterialModule } from '../core/material.module';
910

1011
@NgModule({
1112
imports: [
1213
CommonModule,
13-
FormsModule
14+
FormsModule,
15+
MaterialModule,
1416
],
1517
declarations: [
1618
ChatDialogComponent

‎src/app/core/material.module.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { NgModule } from '@angular/core';
2+
3+
import {
4+
MatInputModule,
5+
MatButtonModule,
6+
MatTooltipModule,
7+
MatFormFieldModule,
8+
MatToolbarModule,
9+
MatIconModule,
10+
} from '@angular/material';
11+
12+
const modules = [
13+
MatInputModule,
14+
MatButtonModule,
15+
MatTooltipModule,
16+
MatFormFieldModule,
17+
MatToolbarModule,
18+
MatIconModule,
19+
];
20+
21+
@NgModule({
22+
imports: modules,
23+
exports: modules
24+
})
25+
export class MaterialModule { }

‎src/index.html

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,11 @@
77

88
<meta name="viewport" content="width=device-width, initial-scale=1">
99
<link rel="icon" type="image/x-icon" href="favicon.ico">
10-
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
11-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
12-
10+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,500,700,700italic">
11+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
1312

1413
<!-- CSS Reset -->
1514
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
16-
17-
<!-- Milligram CSS minified -->
18-
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
1915
</head>
2016
<body>
2117
<app-root></app-root>

‎src/styles.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
11
/* You can add global styles to this file, and also import other style files */
2+
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
3+
4+
body {
5+
font-family: 'Roboto', sans-serif;
6+
}

0 commit comments

Comments
 (0)