Skip to content

Commit ec5447b

Browse files
carloskotachocarloskotacho
committed
Atualizando design da lista de mensagens
1 parent 17e5e3f commit ec5447b

File tree

3 files changed

+100
-48
lines changed

3 files changed

+100
-48
lines changed

‎src/app/message/message-search/message-search.component.css

+68-16
Original file line numberDiff line numberDiff line change
@@ -24,26 +24,78 @@
2424
border: 1px solid #FF8080;
2525
}
2626

27-
/* Start - message list */
27+
/* Start - Message list */
28+
.member{
29+
display: flex;
30+
align-items: center;
31+
}
2832

29-
.message-list-name{
30-
color: #5E6C84;
31-
font-weight: bold;
32-
margin-bottom: .4em;
33-
padding: 0;
34-
margin-right: .8em;
33+
.team-box{
34+
display: flex;
35+
align-items: center;
3536
}
3637

37-
.message-list-email{
38-
color: #CCCFD4;
39-
font-weight: normal;
40-
padding: 0;
38+
.profile-image{
39+
margin-right: 10px;
4140
}
4241

43-
.message-list-category{
44-
color: #5E6C84;
45-
font-weight: normal;
46-
padding: 0;
42+
.profile-image img{
43+
width: 40px;
44+
height: 40px;
45+
border-radius: 100px;
46+
}
47+
48+
.team-member{
49+
font-size: 14px;
50+
font-weight: 500;
51+
margin: 0;
52+
}
53+
54+
.team-member-email{
55+
font-size: 12px;
56+
color: #9199a9;
57+
}
58+
59+
.icons{
60+
display: flex;
61+
justify-content: flex-end;
62+
align-items: center;
63+
}
64+
65+
.icon{
66+
height: 24px;
67+
width: 24px;
68+
border-radius: 50%;
69+
margin: 3px;
70+
cursor: pointer;
71+
display: flex;
72+
justify-content: center;
73+
align-items: center;
74+
}
75+
76+
.icon.icon-search,
77+
.icon.icon-edit,
78+
.icon.icon-delete{
79+
background-color: #bbbbbb;
80+
color: #fff;
81+
}
82+
83+
.icon.icon-search:hover,
84+
.icon.icon-edit:hover,
85+
.icon.icon-delete:hover{
86+
background-color: #5E6C84;
87+
}
88+
89+
.status{
90+
margin-right: .3em;
91+
vertical-align: middle;
92+
height: .5em;
93+
width: .5em;
94+
border-radius: 50%;
95+
display: inline-block;
4796
}
4897

49-
/* End - message list */
98+
.status.status-open{ background-color: #4ECCA3; }
99+
.status.status-pending{ background-color: #FFBA92; }
100+
.status.status-closed{ background-color: #FF8080; }
101+
/* End - Message list */

‎src/app/message/message-search/message-search.component.html

+24-24
Original file line numberDiff line numberDiff line change
@@ -42,36 +42,36 @@
4242

4343
<ng-template pTemplate="listItem" let-messages>
4444
<div class="ui-g">
45-
<div class="ui-sm-12"><img src="https://avatars.dicebear.com/v2/initials/{{ messages.name }}.svg" width="50" alt="Avatar"></div>
46-
<div class="ui-sm-12 message-list-name">{{ messages.name }}</div>
47-
<div class="ui-sm-12 message-list-email">({{ messages.email }})</div>
48-
<br />
49-
<div class="ui-sm-12 ui-g-12 message-list-category">{{ messages.category }}</div>
45+
<div class="ui-g-12">
46+
<div class="member">
47+
<div class="ui-g-7 team-box">
48+
<div class="profile-image">
49+
<img src="https://avatars.dicebear.com/v2/initials/{{ messages.name }}.svg" alt="Avatar">
50+
</div>
51+
<div>
52+
<h2 class="team-member">{{ messages.name }}</h2>
53+
<div class="status" [ngClass]="{ 'status-open' : messages.status == 'open',
54+
'status-pending' : messages.status == 'pending',
55+
'status-closed' : messages.status == 'closed' }"></div>
56+
<span class="team-member-email">
57+
{{ messages.email }}
58+
</span>
59+
</div>
60+
</div>
61+
<div class="ui-g-5 ui-md-12 ui-lg-12 icons">
62+
<div class="icon icon-search"><i class="pi pi-search"></i></div>
63+
<div class="icon icon-edit"><i class="pi pi-pencil"></i></div>
64+
<div class="icon icon-delete"><i class="pi pi-trash"></i></div>
65+
</div>
66+
</div>
67+
</div>
68+
5069
</div>
5170
</ng-template>
5271

5372
</p-dataView>
5473
</div>
5574
</div>
56-
<!--
57-
<div class="ui-g">
58-
<div class="ui-g-12 ui-md-12 ui-lg-12">
59-
<p-virtualScroller [value]="messages" scrollHeight="500px" [itemSize]="50">
60-
<ng-template pTemplate="messages" let-messages>
61-
<div class="message-content">
62-
{{ messages.name }} ({{ messages.email }})
63-
<br />
64-
{{ messages.category }}
65-
</div>
66-
</ng-template>
67-
</p-virtualScroller>
68-
</div>
69-
</div>
70-
71-
72-
<div class="message-list-name">{{ messages.name }}<span class="message-list-email">({{ messages.email }})</span></div>
73-
<div class="message-list-category">{{ messages.category }}</div>
74-
-->
7575

7676
</p-card>
7777
</div>

‎src/app/message/message-search/message-search.component.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ export class MessageSearchComponent implements OnInit {
1616
ngOnInit() {
1717

1818
this.messages = [
19-
{ name: 'Katherine May', email: 'katherine@hotmail.com', category: 'Sugestão' },
20-
{ name: 'Brandon Williams', email: 'brandonw@hotmail.com', category: 'Reclamação' },
21-
{ name: 'Lara Cohen', email: 'larac@hotmail.com', category: 'Dúvida' },
22-
{ name: 'Carmelita Marsham', email: 'carmelitamar@hotmail.com', category: 'Elogios' },
23-
{ name: 'Gvozden Boskovsky', email: 'gvozden@hotmail.com', category: 'Solicitação' },
24-
{ name: 'Athar Makakooti', email: 'atharm@hotmail.com', category: 'Denúncia' },
25-
{ name: 'Olisha Farmer', email: 'olishaf@hotmail.com', category: 'Reclamação' },
26-
{ name: 'Tokunaga Yae', email: 'tokunaga@hotmail.com', category: 'Outro' },
19+
{ name: 'Katherine May', email: 'katherine@hotmail.com', category: 'Sugestão', status: 'open' },
20+
{ name: 'Brandon Williams', email: 'brandonw@hotmail.com', category: 'Reclamação', status: 'pending' },
21+
{ name: 'Lara Cohen', email: 'larac@hotmail.com', category: 'Dúvida', status: 'closed' },
22+
{ name: 'Carmelita Marsham', email: 'carmelitamar@hotmail.com', category: 'Elogios', status: 'pending' },
23+
{ name: 'Gvozden Boskovsky', email: 'gvozden@hotmail.com', category: 'Solicitação', status: 'open' },
24+
{ name: 'Athar Makakooti', email: 'atharm@hotmail.com', category: 'Denúncia', status: 'closed' },
25+
{ name: 'Olisha Farmer', email: 'olishaf@hotmail.com', category: 'Reclamação', status: 'open' },
26+
{ name: 'Tokunaga Yae', email: 'tokunaga@hotmail.com', category: 'Outro', status: 'pending' },
2727
];
2828

2929
}

0 commit comments

Comments
 (0)