purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Chat Panel) Styling adjustments

Browse Source
This commit is contained in:
Sercan Yemen 2018-07-04 17:21:51 +03:00
parent 49c8e32dce
commit dbb925334a
2 changed files with 78 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/layout/components/chat-panel/chat-panel.component.html
View File

@ -79,6 +79,17 @@
</div> </div>
<ng-container *ngIf="chat.dialog.length === 0">
<div class="no-messages-icon">
<mat-icon class="s-128">chat</mat-icon>
</div>
<div class="no-messages secondary-text">
Start a conversation by typing your message below.
</div>
</ng-container>
</div> </div>
<div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center"> <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
@ -86,17 +97,17 @@
<form #replyForm="ngForm" <form #replyForm="ngForm"
(ngSubmit)="reply($event)" (ngSubmit)="reply($event)"
(keydown.enter)="reply($event)" (keydown.enter)="reply($event)"
fxFlex class="reply-form" fxFlex
fxLayout="row" fxLayout="row"
fxLayoutAlign="start center"> fxLayoutAlign="start center">
<mat-form-field fxFlex floatLabel="never"> <mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
<textarea matInput #replyInput placeholder="Type and hit enter to send message" <textarea matInput #replyInput ngModel name="message" placeholder="Type your message"
ngModel name="message"></textarea> [rows]="1" [matTextareaAutosize]="true"></textarea>
</mat-form-field> </mat-form-field>
<button mat-mini-fab type="submit" aria-label="Send message"> <button class="send-message-button" mat-icon-button type="submit" aria-label="Send message">
<mat-icon>send</mat-icon> <mat-icon class="secondary-text">send</mat-icon>
</button> </button>
</form> </form>

62
src/app/layout/components/chat-panel/chat-panel.component.scss
View File

@ -104,6 +104,7 @@ chat-panel {
background-color: mat-color(mat-palette($mat-grey, 300)); background-color: mat-color(mat-palette($mat-grey, 300));
.messages { .messages {
position: relative;
overflow: auto; overflow: auto;
padding: 16px 0 40px 40px; padding: 16px 0 40px 40px;
@ -244,11 +245,70 @@ chat-panel {
} }
} }
} }
.no-messages-icon {
position: absolute;
top: 50%;
right: 0;
left: 0;
padding: 0 24px;
margin-top: -64px;
text-align: center;
mat-icon {
color: rgba(0, 0, 0, 0.06);
}
}
.no-messages {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0 16px 24px 16px;
text-align: center;
}
} }
.reply-form { .reply-form {
position: relative; position: relative;
@include mat-elevation(8);
.message-text {
padding: 16px 8px;
.mat-form-field-wrapper {
padding: 0;
.mat-form-field-flex {
padding: 0;
.mat-form-field-infix {
padding: 0;
border: none;
background: white;
border-radius: 20px;
@include mat-elevation(2);
textarea {
overflow: hidden;
margin: 16px 48px 16px 16px;
width: calc(100% - 64px);
padding: 0;
}
}
}
.mat-form-field-underline {
display: none !important;
}
}
}
.send-message-button {
position: absolute;
right: 16px;
bottom: 21px;
}
} }
} }
} }