Step 6.12: Add message editor to messages view template

Urigo · Feb 13, 2017 · 9933ca1 · 9933ca1
1 parent c4684c7
commit 9933ca1
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/client/imports/pages/messages/messages.html b/client/imports/pages/messages/messages.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)="sendTextMessage()">
+        <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>