Designing a footer bar for chat app


#1

i started with a basic footer bar which has a input text with a send button. the code looked as below:

<ion-footer padding>
	<form [formGroup]="chatForm" (ngSubmit)="sendChatMessage()">
		
		<ion-input type="text" #sendInput formControlName="messageInput" placeholder="start typing..."></ion-input>
		<ion-buttons end>
			<button ion-button clear type="submit" [disabled]="chatForm.controls['messageInput'].value === ''"><ion-icon name="ios-send" style="zoom:2.0;"></ion-icon></button>
		</ion-buttons>
	</form>
</ion-footer>

the scss is as below:

page-chat {
	.input[type=text] {
	    border: 1px solid grey;
    	border-radius: 10px;
    	padding: 5px;
    	position: absolute;
  	    width: 80%;
	}

now i came up with a requirement to add a microphone to speak to type. I want it to be as the first button and then input box and then the send button. the new one looks like below:

<ion-footer padding>
	<form [formGroup]="chatForm" (ngSubmit)="sendChatMessage()">
		<button ion-button (click)="listenForSpeech()" clear><ion-icon name="microphone" isActive={{microphoneActive}} style="zoom:1.0;"></ion-icon></button>
		<ion-input type="text" #sendInput formControlName="messageInput" placeholder="start typing..."></ion-input>
		<ion-buttons end>
			<button ion-button clear type="submit" [disabled]="chatForm.controls['messageInput'].value === ''"><ion-icon name="ios-send" style="zoom:2.0;"></ion-icon></button>
		</ion-buttons>
	</form>
</ion-footer>

but now the microphone comes in a different row which is above the input box and send button.