Step 4.13: Add message editor to messages view template

Urigo · Dec 16, 2016 · bf3aaa5 · bf3aaa5
1 parent c755efb
commit bf3aaa5
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/client/imports/pages/chat/messages-page.component.html b/client/imports/pages/chat/messages-page.component.html
@@ -22,4 +22,20 @@
       </div>
     </div>
   </ion-scroll>
-</ion-content>
+</ion-content>
+
+<ion-footer>
+  <ion-toolbar color="whatsapp" class="messages-page-footer" position="bottom">
+    <ion-input [(ngModel)]="message" (keypress)="onInputKeypress($event)" class="message-editor" placeholder="Type a message"></ion-input>
+
+    <ion-buttons end>
+      <button ion-button icon-only *ngIf="message" class="message-editor-button" (click)="sendMessage()">
+        <ion-icon name="send"></ion-icon>
+      </button>
+
+      <button ion-button icon-only *ngIf="!message" class="message-editor-button">
+        <ion-icon name="mic"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>