peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 04:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

finish styling individual messages view for desktop

Browse Source
This commit is contained in:
tiago.kayaya
2021-03-12 17:35:54 +01:00
parent 82c49c8a8a
commit 24c767d6e0
11 changed files with 303 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/chat/group-messages/group-messages.page.scss
+1 -1
View File
@@ -171,4 +171,4 @@
align-self: center;
}
}
}
}
src/app/shared/chat/messages/messages.page.html
+23 -43
View File
@@ -29,28 +29,15 @@
</ion-refresher-content>
</ion-refresher>
<div class="messages" #scrollMe>
<!-- <ion-infinite-scroll position="top" threshold="25%" (ionInfinite)="loadMoreMessages($event)">
<ion-infinite-scroll-content loadindSpiniter="crescent" loadingText="Carregando...">
</ion-infinite-scroll-content>
</ion-infinite-scroll> -->
<!-- <div class="incoming">
<div class="title">
<ion-label>Secretário Assuntos sociais</ion-label>
<span class="time">14:23</span>
</div>
<div>
<img src='assets/images/1.jpg' tappable>
<ion-label hidden >Investidura Filipe Nyusi</ion-label>
</div>
</div> -->
<div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
</div>
<div>
<ion-label>{{msg.msg}}</ion-label>
<div class="container-width-100" *ngFor="let msg of messages">
<div class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
<div class="title">
<ion-label>{{msg.u.name}}</ion-label>
<span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
</div>
<div>
<ion-label>{{msg.msg}}</ion-label>
</div>
</div>
</div>
</div>
@@ -59,26 +46,19 @@
<ion-footer>
<ion-toolbar>
<ion-row align-items-center class="row">
<ion-col size="1">
<ion-label class="ion-no-padding" lines="none">
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
</ion-label>
</ion-col>
<ion-col size="9">
<ion-item class="ion-no-padding type-message" lines="none">
<ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
</ion-item>
</ion-col>
<ion-col size="2">
<!-- [disabled]="message === ''" -->
<ion-label>
<ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
</ion-label>
</ion-col>
</ion-row>
</ion-toolbar>
<div class="container width-100 d-flex">
<div>
<ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
</div>
<div class="width-80">
<ion-item class="ion-no-padding type-message" lines="none">
<ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
</ion-item>
</div>
<div>
<ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
</div>
</div>
</ion-footer>
src/app/shared/chat/messages/messages.page.scss
+25 -20
View File
@@ -2,7 +2,6 @@
.header-toolbar{
--background:transparent;
--opacity: 1;
border: 1px solid red;
.main-header{
width: 100%; /* 400px */
@@ -12,21 +11,21 @@
border-top-right-radius: 25px;
background-color: #fff;
overflow:hidden;
padding: 0px 20px 0px 20px;
//padding: 0px 20px 0px 20px;
color:#000;
transform: translate3d(0, 1px, 0);
padding: 30px 20px 0 20px !important;
.header-top{
//width: 360px;
margin: 0px auto;
width: 100%;
overflow: auto;
padding: 0 !important;
//padding: 0 !important;
background: #fff;
.middle{
padding: 0!important;
//padding: 0!important;
float: left;
width: 280px;
margin: 2.5px 0 0 5px;
margin: 2px 0 0 5px;
display: flex;
align-items: center;
@@ -40,9 +39,9 @@
}
}
.header-bottom{
width: 310px;
width: 95%;
overflow: auto;
margin: 0 auto;
.header-bottom-icon{
width: 30px;
@@ -85,7 +84,7 @@
ion-content{
width: 100%;
height: 100%;
border: 1px solid red;
padding: 30px 20px 0 20px !important;
.welcome-text{
/* width: 322px; */
/* width: em(422px); */
@@ -97,10 +96,10 @@
padding: 10px;
margin: 0 auto;
line-height: 1.2rem;
margin: 20px 39px 25px;
//margin: 20px 39px 25px;
border-radius: 8px;
}
.messages{
font-size: 13px;
font-family: Roboto;
@@ -116,10 +115,14 @@
height: 100%;
word-wrap: break-word;
-webkit-overflow-scrolling: touch;
.container-width-100{
width: 100%;
overflow: auto;
}
.incoming-true, .incoming-false{
width: 305px;
padding: 15px 20px;
border-radius: 10px;
}
@@ -144,19 +147,21 @@
.time{
color: #797979;
text-align: right;
margin-left: 10px;
float: right;
}
}
}
ion-footer{
width: 100%;
border: 1px solid red;
.row{
width: 380px;
margin: 0 auto;
}
padding-top: 7.5px;
padding-bottom: 7.5px;
.container{
justify-content: center;
justify-content: space-evenly;
}
.chat-icon-options{
display:block !important;
font-size: 25px;