Step 6.12: Add message editor to messages view template

Urigo · Jun 13, 2017 · c7f8586 · c7f8586
1 parent eb1d8c0
commit c7f8586
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/src/pages/messages/messages.html b/src/pages/messages/messages.html
@@ -23,3 +23,19 @@
     </div>
   </ion-scroll>
 </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>