Skip to content

Commit 2555370

Browse files
holus-bolusholus-bolus
committed
Outut the chat to the separate route, added the texts;
1 parent b3d75bd commit 2555370

11 files changed

Lines changed: 156 additions & 188 deletions

File tree

‎src/app/chat/component/chat-page/chat-page.component.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="chat-container">
2-
<aside class="sidebar">
1+
<div class="chat-page-inner">
2+
<div class="chat-sidebar">
33
<div class="search-bar">
44
<label>
55
<input type="text" [placeholder]="'chat.chat-placeholder' | translate" [(ngModel)]="searchId" (input)="filterChatsById()" />
@@ -21,8 +21,9 @@
2121
<div class="timestamp">{{ chat.time }}</div>
2222
</li>
2323
</ul>
24-
</aside>
25-
<section class="chat-view">
24+
</div>
25+
26+
<div class="chat-view">
2627
<ng-container *ngIf="selectedChat; else placeholder">
2728
<div class="chat-box">
2829
<div class="chat-header">
@@ -47,9 +48,9 @@
4748
</div>
4849

4950
<div class="message-input-container">
50-
<input type="text" placeholder="Write a message..." [(ngModel)]="newMessage" (keyup.enter)="sendMessage()" />
51+
<input type="text" [placeholder]="'chat.chat-placeholder' | translate" [(ngModel)]="newMessage" (keyup.enter)="sendMessage()" />
5152
<button class="send-message-button" (click)="sendMessage()" aria-label="Send message">
52-
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
53+
<svg width="30" height="30" viewBox="0 0 24 24">
5354
<path d="M4 12L20 4L16 12L20 20L4 12Z" fill="currentColor" />
5455
</svg>
5556
</button>
@@ -62,5 +63,5 @@
6263
<p class="placeholder-text">{{ 'chat.select-chat' | translate }}</p>
6364
</div>
6465
</ng-template>
65-
</section>
66+
</div>
6667
</div>

‎src/app/chat/component/chat-page/chat-page.component.scss‎

Lines changed: 107 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,38 @@
1-
.chat-container {
1+
.chat-page-inner {
22
display: flex;
33
height: 100vh;
4-
background-color: var(--primary-light-grey);
5-
box-shadow: 0 4px 6px -2px var(--shadow-dark-grey);
6-
color: var(--secondary-dark-grey);
7-
font-family: 'Segoe UI', sans-serif;
4+
width: 100%;
5+
overflow: hidden;
6+
font-family: 'Inter', sans-serif;
87
}
98

10-
.sidebar {
9+
.chat-sidebar {
1110
width: 320px;
12-
background-color: var(--primary-white);
13-
border-right: 1px solid var(--primary-white);
11+
min-width: 250px;
12+
max-width: 400px;
13+
border-right: 1px solid var(--quaternary-light-grey);
14+
background: var(--primary-light-grey);
15+
padding: 1rem;
1416
display: flex;
1517
flex-direction: column;
1618
}
1719

1820
.search-bar {
19-
padding: 12px;
21+
margin-bottom: 1rem;
2022

2123
input {
2224
width: 100%;
23-
padding: 8px;
24-
border-radius: 4px;
25-
background-color: var(--primary-white);
25+
padding: 0.5rem 0.75rem;
26+
border-radius: 8px;
2627
border: 1px solid var(--quaternary-light-grey);
27-
color: var(--secondary-dark-grey);
28+
background-color: var(--primary-white);
29+
font-size: 14px;
30+
31+
&:focus {
32+
outline: none;
33+
border-color: var(--tertiary-light-green);
34+
box-shadow: 0 0 0 1px var(--tertiary-light-green);
35+
}
2836
}
2937
}
3038

@@ -33,219 +41,180 @@
3341
padding: 0;
3442
margin: 0;
3543
overflow-y: auto;
36-
flex-grow: 1;
44+
flex: 1;
3745
}
3846

3947
.chat-item {
4048
display: flex;
4149
align-items: center;
42-
padding: 12px;
50+
padding: 0.75rem;
51+
border-radius: 8px;
4352
cursor: pointer;
44-
transition: background 0.2s;
53+
transition: background 0.2s ease;
4554

46-
&:hover {
47-
background-color: var(--after-primary-light-grey);
55+
&.selected {
56+
background-color: var(--quintynary-dark-grey);
4857
}
4958

50-
&.selected {
51-
background-color: var(--primary-light-grey);
59+
&:hover {
60+
background-color: var(--light-green-grey-color);
5261
}
5362

5463
.avatar {
55-
background-color: var(--quaternary-light-grey);
56-
color: var(--freinacht-black);
5764
width: 40px;
5865
height: 40px;
66+
background-color: var(--quaternary-light-grey);
67+
color: var(--tertiary-dark-grey);
5968
border-radius: 50%;
6069
font-weight: bold;
6170
display: flex;
6271
align-items: center;
6372
justify-content: center;
64-
margin-right: 12px;
73+
margin-right: 0.75rem;
6574
}
6675

6776
.chat-details {
68-
flex-grow: 1;
77+
flex: 1;
6978

7079
.chat-name {
71-
font-weight: bold;
80+
font-weight: 600;
81+
font-size: 14px;
82+
color: var(--secondary-dark-grey);
7283
}
7384

7485
.last-message {
75-
font-size: 0.85em;
86+
font-size: 13px;
7687
color: var(--tertiary-grey);
88+
margin-top: 2px;
89+
white-space: nowrap;
90+
overflow: hidden;
91+
text-overflow: ellipsis;
92+
max-width: 200px;
7793
}
7894
}
7995

8096
.timestamp {
81-
font-size: 0.75em;
97+
font-size: 12px;
8298
color: var(--quintynary-light-grey);
99+
margin-left: 0.5rem;
100+
white-space: nowrap;
83101
}
84102
}
85103

86104
.chat-view {
87-
flex-grow: 1;
105+
flex: 1;
106+
padding: 1rem;
88107
display: flex;
89108
flex-direction: column;
90109
background-color: var(--after-primary-light-grey);
91-
overflow: hidden;
92-
padding: 0;
93-
}
94-
95-
.chat-box {
96-
display: flex;
97-
flex-direction: column;
98-
height: 90vh;
99-
padding: 16px 24px;
100110
}
101111

102112
.chat-header {
103-
font-weight: bold;
104-
font-size: 1.2em;
105-
padding: 12px 0;
106-
border-bottom: 1px solid var(--quaternary-light-grey);
107-
color: var(--secondary-dark-grey);
108-
flex-shrink: 0;
109113
display: flex;
110-
justify-content: space-between;
111114
align-items: center;
115+
justify-content: space-between;
116+
font-size: 18px;
117+
font-weight: 600;
118+
color: var(--secondary-dark-grey);
119+
margin-bottom: 1rem;
120+
}
121+
122+
.client-info-button {
123+
background: var(--primary-white);
124+
border: none;
125+
font-size: 24px;
126+
cursor: pointer;
127+
padding: 6px 10px;
128+
border-radius: 50%;
129+
box-shadow: 0 0 0 1px var(--quaternary-light-grey);
130+
transition: box-shadow 0.2s;
131+
132+
&:hover {
133+
box-shadow: 0 0 0 2px var(--tertiary-light-green);
134+
}
112135
}
113136

114137
.messages {
115-
flex-grow: 1;
138+
flex: 1;
116139
overflow-y: auto;
140+
padding-right: 0.5rem;
117141
display: flex;
142+
height: 60vh;
118143
flex-direction: column;
119-
gap: 12px;
120-
margin-top: 16px;
121-
padding-right: 12px;
144+
gap: 0.5rem;
122145
}
123146

124147
.message {
125-
max-width: 60%;
126-
padding: 10px 14px;
127-
border-radius: 10px;
148+
max-width: 70%;
149+
padding: 0.6rem 0.9rem;
150+
border-radius: 1rem;
128151
font-size: 14px;
129152
line-height: 1.4;
130153
position: relative;
131154

132155
&.sent {
133156
align-self: flex-end;
134157
background-color: var(--primary-light-green);
135-
color: var(--freinacht-black);
158+
color: var(--secondary-dark-grey);
136159
}
137160

138161
&.received {
139162
align-self: flex-start;
140-
background-color: var(--shadow-dark-grey);
141-
color: var(--freinacht-black);
163+
background-color: var(--primary-white);
164+
color: var(--secondary-dark-grey);
165+
border: 1px solid var(--quaternary-light-grey);
142166
}
143167

144168
.message-time {
145-
font-size: 0.75em;
146-
color: var(--quintynary-light-grey);
169+
font-size: 11px;
147170
margin-top: 4px;
148171
text-align: right;
172+
color: var(--quintynary-light-grey);
149173
}
150174
}
151175

152-
.placeholder-text {
153-
color: var(--quaternary-light-grey);
154-
font-size: 1.2em;
155-
text-align: center;
156-
}
157-
158176
.message-input-container {
159177
display: flex;
160-
padding: 12px 0;
161-
border-top: 1px solid var(--quaternary-light-grey);
162-
margin-top: auto;
178+
align-items: center;
179+
gap: 0.5rem;
180+
margin-top: 1rem;
163181

164-
input {
165-
flex-grow: 1;
166-
padding: 10px 14px;
167-
border: 1px solid var(--quaternary-light-grey);
182+
input[type='text'] {
183+
flex: 1;
184+
padding: 0.6rem 0.9rem;
168185
border-radius: 20px;
186+
border: 1px solid var(--quaternary-light-grey);
169187
font-size: 14px;
170-
outline: none;
171-
margin-right: 10px;
172-
}
173-
}
174-
175-
.client-info-button {
176-
font-size: 1.5rem;
177-
background-color: var(--after-primary-light-grey);
178-
border: none;
179-
border-radius: 50%;
180-
padding: 0.5rem;
181-
cursor: pointer;
182-
box-shadow: 0 2px 5px var(--shadow-dark-grey);
183-
transition: background-color 0.2s ease;
184-
width: 52px;
188+
background-color: var(--primary-white);
185189

186-
&:hover {
187-
background-color: var(--secondary-grey);
190+
&:focus {
191+
outline: none;
192+
border-color: var(--tertiary-light-green);
193+
}
188194
}
189-
}
190-
191-
.client-info-panel {
192-
background-color: var(--primary-light-grey);
193-
border-top: 1px solid var(--quintynary-light-grey);
194-
padding: 1rem;
195-
font-size: 0.95rem;
196-
animation: fade-in-panel 250ms ease-in-out;
197-
box-shadow: inset 0 1px 3px var(--shadow-dark-grey);
198195

199-
strong {
200-
color: var(--secondary-dark-grey);
201-
}
202-
}
196+
.send-message-button {
197+
background-color: var(--tertiary-light-green);
198+
border: none;
199+
border-radius: 50%;
200+
padding: 0.6rem;
201+
cursor: pointer;
203202

204-
@keyframes fade-in-panel {
205-
from {
206-
opacity: 0;
207-
transform: translateY(-4px);
208-
}
203+
svg {
204+
fill: var(--primary-white);
205+
}
209206

210-
to {
211-
opacity: 1;
212-
transform: translateY(0);
207+
&:hover {
208+
background-color: var(--secondary-dark-green);
209+
}
213210
}
214211
}
215212

216213
.empty-chat-wrapper {
217-
display: flex;
218-
justify-content: center;
219-
align-items: center;
220-
min-height: 100vh;
221-
}
222-
223-
.send-message-button {
214+
flex: 1;
224215
display: flex;
225216
align-items: center;
226217
justify-content: center;
227-
background-color: var(--primary-green);
228-
border: none;
229-
color: var(--primary-white);
230-
width: 42px;
231-
height: 42px;
232-
border-radius: 50%;
233-
cursor: pointer;
234-
transition: background-color 0.3s;
235-
236-
svg {
237-
display: block;
238-
width: 30px;
239-
height: 30px;
240-
transform: rotate(180deg);
241-
}
242-
243-
&:hover {
244-
background-color: var(--secondary-dark-green);
245-
}
246-
247-
&:focus {
248-
outline: 2px solid var(--primary-green);
249-
outline-offset: 2px;
250-
}
218+
color: var(--tertiary-grey);
219+
font-size: 16px;
251220
}

0 commit comments

Comments
 (0)