Merge pull request #19 from first87/feature/message-input-stage1

Implement message-input feature [STAGE1]
firstor · Jun 28, 2017 · 4684956 · 4684956
2 parents b6c0faa + d821fc4
commit 4684956
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 4 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -30,6 +30,10 @@
     text-overflow: ellipsis;
 }
 
+.message-list {
+    margin-bottom: 90px;
+}
+
 @media (max-width: 600px) {
     .app-logged-user {
         width: 97vw;

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -40,5 +40,8 @@
     <div class="message-list">
       <message-item *ngFor="let message of messages" [message]="message" class="message-item" id="{{message.id}}"></message-item>
     </div>
+
+    <message-input></message-input>
+
   </app-header-layout>
 </app-drawer-layout>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -6,12 +6,14 @@ import {AppElementsModule, IronElementsModule, PaperElementsModule} from '@codeb
 import {AppComponent} from './app.component';
 import {MessageService} from './common/service/message.service';
 import {MessageItemComponent} from './message/message-item.component';
+import {MessageInputComponent} from './message/input/message-input.component';
 import {MessagePostTimePipe} from './message/message-post-time.pipe';
 
 @NgModule({
     declarations: [
         AppComponent,
         MessageItemComponent,
+        MessageInputComponent,
         MessagePostTimePipe
     ],
     imports: [

diff --git a/src/app/message/input/message-input.component.css b/src/app/message/input/message-input.component.css
@@ -0,0 +1,27 @@
+.message-input-container {
+    position: fixed;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+    width: calc(100% - 320px);
+    border: none;
+    background: var(--app-color-body);
+}
+
+.message-input-card {
+    width: 95%;
+    margin: 1% 2%;
+    padding: 0.5em 1em;
+    box-shadow: 0px 0px 12px 0px var(--primary-color);
+}
+
+.message-input-field {
+    --paper-input-container-input-color: var(--app-color-green);
+    --paper-input-container-underline: {
+        display: none;
+    }
+    --paper-input-container-underline-focus: {
+        display: none;
+    }
+    @apply --app-word-wrapping;
+}
diff --git a/src/app/message/input/message-input.component.html b/src/app/message/input/message-input.component.html
@@ -0,0 +1,12 @@
+<div class="message-input-container">
+  <paper-card class="message-input-card">
+    <paper-textarea class="form-control message-input-field"
+                    id="newMessage"
+                    label="Input a message to send"
+                    no-label-float
+                    max-rows="3"
+                    auto-validate="false"
+                    (keypress)="messageInputKeyPressed($event)">
+    </paper-textarea>
+  </paper-card>
+</div>
diff --git a/src/app/message/input/message-input.component.ts b/src/app/message/input/message-input.component.ts
@@ -0,0 +1,18 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+    selector: 'message-input',
+    templateUrl: 'message-input.component.html',
+    styleUrls: ['message-input.component.css']
+})
+export class MessageInputComponent {
+    public sendMessage() {
+    }
+
+    public messageInputKeyPressed(e: any): void {
+        if (e.keyCode === 13 && e.code === 'Enter' || e.code === 'NumpadEnter') {
+            this.sendMessage();
+            e.preventDefault();
+        }
+    }
+}
diff --git a/src/assets/components.html b/src/assets/components.html
@@ -22,6 +22,7 @@
 <link rel="import" href="bower_components/paper-card/paper-card.html">
 <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="bower_components/paper-input/paper-input.html">
+<link rel="import" href="bower_components/paper-input/paper-textarea.html">
 <link rel="import" href="bower_components/paper-item/paper-item.html">
 <link rel="import" href="bower_components/paper-item/paper-item-body.html">
 <link rel="import" href="bower_components/paper-listbox/paper-listbox.html">

diff --git a/src/index.html b/src/index.html
@@ -32,6 +32,21 @@
 
       * {
         font-family: 'SegoeUI', sans-serif;
+        --app-font: {
+          font-family: 'SegoeUI', sans-serif;
+        };
+        --paper-font-common-base: {
+          @apply --app-font;
+        };
+        --paper-font-subhead: {
+          @apply --app-font;
+        };
+        --paper-font-body2: {
+          @apply --app-font;
+        };
+        --paper-font-caption: {
+          @apply --app-font;
+        };
       }
 
       body {
@@ -42,10 +57,6 @@
       }
 
       :root {
-        --paper-font-common-base: {
-          font-family: 'SegoeUI', sans-serif;
-        }
-
         --app-header-height: 8%;
         --app-min-width-desktop: 600px;
         --app-panel-width-desktop: 320px;
@@ -62,6 +73,7 @@
         --app-color-blue-text: dodgerblue;
         --app-color-green: green;
         --app-color-black: black;
+        --app-color-body: #fbfbfb;
         --app-color-white: #f7f7f7;
         --app-color-snow: #ffffff;
         --app-color-card: #757575;