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

Style conversation flow for group-messages

Browse Source
This commit is contained in:
tiago.kayaya
2020-12-29 17:22:56 +01:00
parent 31cca48adc
commit 126abf2b18
6 changed files with 161 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/chat/group-messages/group-messages.page.html
+61 -4
View File
@@ -26,10 +26,67 @@
<ion-content>
<!-- <p>HHHHH</p> -->
<div class="welcome-text">
<ion-label>Esta conversa passou a grupo</ion-label><br />
<ion-label>A conversa original mantêm-se como chat individual</ion-label>
</div>
<div class="messages">
<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 class="incoming">
<div class="title">
<ion-label>Secretário Assuntos sociais</ion-label>
<span class="time">14:23</span>
</div>
<div>
<ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
</div>
</div>
<div class="incoming">
<div class="title">
<ion-label>Presidente da República</ion-label>
<span class="time">14:23</span>
</div>
<div>
<ion-label>Pois é, momentos históricos</ion-label>
</div>
</div>
<div class="outgoing">
<div class="title">
<ion-label>Ministro do interior</ion-label>
<span class="time">16:23</span>
</div>
<div>
<ion-label>Grande momento</ion-label>
</div>
</div>
<div class="incoming">
<div class="title">
<ion-label>Secretário Assuntos sociais</ion-label>
<span class="time">14:23</span>
</div>
<div>
<ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
</div>
</div>
<div class="outgoing">
<div class="title">
<ion-label>Secretário Assuntos sociais</ion-label>
<span class="time">14:23</span>
</div>
<div>
<ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
</div>
</div>
</div>
</ion-content>
<ion-footer>
src/app/pages/chat/group-messages/group-messages.page.scss
+52 -3
View File
@@ -1,3 +1,4 @@
@import '~src/function.scss';
.header-toolbar{
--background:transparent;
--opacity: 1;
@@ -75,22 +76,70 @@
}
}
}
ion-content{
.welcome-text{
/* width: 322px; */
width: em(422px);
background: #ebebeb;
text-align: center;
font-size: 13px;
color: #797979;
padding: 10px;
margin: 0 auto;
line-height: 1.2rem;
margin: 20px 39px 25px;
border-radius: 8px;
}
.messages{
font-size: 13px;
font-family: Roboto;
overflow: auto;
.incoming, .outgoing{
width: 305px;
padding: 15px 20px;
border-radius: 10px;
}
.incoming{
margin: 10px 75px 10px 20px;
background: #ebebeb;
float: left;
}
}
.outgoing{
margin: 10px 20px 10px 75px;
background: #e4f4fe;
float: right;
}
.title{
color: #0782c9;
font-weight: bold;
margin-bottom: 5px;
.time{
color: #797979;
text-align: right;
float: right;
}
}
}
ion-footer{
.row{
width: 380px;
margin: 0 auto;
}
ion-col{
/* border: 1px solid red; */
}
.chat-icon-options{
display:block !important;
font-size: 25px;
float: right !important;
margin-top: 10px;
}
.chat-icon-send{
font-size: 45px;
margin: 0 auto;