Skip to content

Commit d9979dd

Browse files
hnativlyubomyrhnativlyubomyr
authored
Merge pull request #3744 from ita-social-projects/feature/3743-refactor-the-telegram
Feature/3743 refactor the telegram
2 parents 3cff509 + 87becfd commit d9979dd

18 files changed

+397
-186
lines changed

‎.github/workflows/main.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ jobs:
6868
-Dsonar.projectKey=ita-social-projects-green-city-client
6969
-Dsonar.host.url=https://sonarcloud.io
7070
-Dsonar.sources=src
71-
-Dsonar.exclusions=**/node_modules/**,src/app/component/user/components/profile/calendar/calendar-image.*,src/app/component/user/components/profile/calendar/calendar-week/calendar-image.*,src/environments/environment.prod.*,src/app/image-pathes/auth-images.*,src/app/image-pathes/profile-icons.*,src/app/image-pathes/profile-images.*,src/app/image-pathes/single-news-images.*,src/app/image-pathes/sign-in-icons.*,src/app/component/about/about-routing.module.*,src/app/component/about/about.module.*,src/app/component/eco-news/eco-news-routing.module.*,src/app/component/eco-news/eco-news.module.*,src/app/component/map/map-routing.module.*,src/app/component/map/map.module.*,src/app/component/user/user-routing.module.*,src/app/component/user/user.module.*,src/app/app-routing.module.*,src/app/component/shared/shared.module.*,src/app/component/admin/admin-routing.module.*,src/app/component/admin/admin.module.*,src/app/app.module.*,src/app/component/auth/auth.module.*,src/app/component/core/core.module.*,src/app/component/home/home.module.*,src/app/component/layout/layout.module.*,src/app/model/weekDays.model.*,src/app/model/achievement/AchievementDto.*,src/app/model/advice/AdviceDto.*,src/app/model/filtering/filter-discount-dto.model.*,src/app/model/filtering/filter-distance-dto.model.*,src/app/model/filtering/filter-place-dto.model.*,src/app/model/habit-fact/HabitFactDto.*,src/app/model/habit/HabitStatisticLogDto.*,src/app/model/habit/HabitStatisticMapDto.*,src/app/model/habit/HabitStatisticsDto.*,src/app/model/habit/NewHabitDto.*,src/app/component/home/models/NewsDto.*,src/app/service/subscription/SubscriptionDto.*,src/app/model/user/userFilterDto.model.*,src/app/store/effects/ecoEvents.effects.*,src/app/ubs/ubs-admin/components/ubs-admin-certificate/ubs-admin-certificate.component.*,src/app/shared/interceptors/interceptor.service.*,src/app/store/reducers/ecoEvents.reducer.*
71+
-Dsonar.exclusions=**/node_modules/**,src/app/component/user/components/profile/calendar/calendar-image.*,src/app/component/user/components/profile/calendar/calendar-week/calendar-image.*,src/environments/environment.prod.*,src/app/image-pathes/auth-images.*,src/app/image-pathes/profile-icons.*,src/app/image-pathes/profile-images.*,src/app/image-pathes/single-news-images.*,src/app/image-pathes/sign-in-icons.*,src/app/component/about/about-routing.module.*,src/app/component/about/about.module.*,src/app/component/eco-news/eco-news-routing.module.*,src/app/component/eco-news/eco-news.module.*,src/app/component/map/map-routing.module.*,src/app/component/map/map.module.*,src/app/component/user/user-routing.module.*,src/app/component/user/user.module.*,src/app/app-routing.module.*,src/app/component/shared/shared.module.*,src/app/component/admin/admin-routing.module.*,src/app/component/admin/admin.module.*,src/app/app.module.*,src/app/component/auth/auth.module.*,src/app/component/core/core.module.*,src/app/component/home/home.module.*,src/app/component/layout/layout.module.*,src/app/model/weekDays.model.*,src/app/model/achievement/AchievementDto.*,src/app/model/advice/AdviceDto.*,src/app/model/filtering/filter-discount-dto.model.*,src/app/model/filtering/filter-distance-dto.model.*,src/app/model/filtering/filter-place-dto.model.*,src/app/model/habit-fact/HabitFactDto.*,src/app/model/habit/HabitStatisticLogDto.*,src/app/model/habit/HabitStatisticMapDto.*,src/app/model/habit/HabitStatisticsDto.*,src/app/model/habit/NewHabitDto.*,src/app/component/home/models/NewsDto.*,src/app/service/subscription/SubscriptionDto.*,src/app/model/user/userFilterDto.model.*,src/app/store/effects/ecoEvents.effects.*,src/app/ubs/ubs-admin/components/ubs-admin-certificate/ubs-admin-certificate.component.*,src/app/shared/interceptors/interceptor.service.*,src/app/store/reducers/ecoEvents.reducer.*,**/*.mock.ts,**/greencity.routing.module.*
7272
-Dsonar.tests=src
7373
-Dsonar.test.inclusions=**/*.spec.ts
7474
-Dsonar.javascript.lcov.reportPaths=coverage/GreenCityClient/lcov.info

‎karma.conf.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ module.exports = function (config) {
1919
dir: require('path').join(__dirname, './coverage/GreenCityClient'),
2020
subdir: '.',
2121
reporters: [{ type: 'html' }, { type: 'lcovonly', file: 'lcov.info' }, { type: 'text-summary' }],
22-
fixWebpackSourcePaths: true
22+
fixWebpackSourcePaths: true,
23+
exclude: ['**/*.mock.ts']
2324
},
2425
customLaunchers: {
2526
ChromeHeadless: {

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<aside class="sidebar">
33
<div class="search-bar">
44
<label>
5-
<input type="text" placeholder="Enter internal ID (e.g., 12)..." [(ngModel)]="searchId" (input)="filterChatsById()" />
5+
<input type="text" [placeholder]="'chat.chat-placeholder' | translate" [(ngModel)]="searchId" (input)="filterChatsById()" />
66
</label>
77
</div>
88

@@ -27,7 +27,7 @@
2727
<div class="chat-box">
2828
<div class="chat-header">
2929
{{ selectedChat.name }}
30-
<button class="client-info-button" (click)="toggleClientInfo()" title="Клієнтська інформація">🧠</button>
30+
<button class="client-info-button" (click)="toggleClientInfo()" [title]="'chat.client-info' | translate">🧠</button>
3131
</div>
3232

3333
<app-client-info-panel *ngIf="clientInfoVisible" [clientData]="clientInfoData" class="client-info-panel"></app-client-info-panel>
@@ -48,14 +48,18 @@
4848

4949
<div class="message-input-container">
5050
<input type="text" placeholder="Write a message..." [(ngModel)]="newMessage" (keyup.enter)="sendMessage()" />
51-
<button (click)="sendMessage()">➤</button>
51+
<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+
<path d="M4 12L20 4L16 12L20 20L4 12Z" fill="currentColor" />
54+
</svg>
55+
</button>
5256
</div>
5357
</div>
5458
</ng-container>
5559

5660
<ng-template #placeholder>
5761
<div class="empty-chat-wrapper">
58-
<p class="placeholder-text">Select a chat to start messaging</p>
62+
<p class="placeholder-text">{{ 'chat.select-chat' | translate }}</p>
5963
</div>
6064
</ng-template>
6165
</section>

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

Lines changed: 62 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
.chat-container {
22
display: flex;
33
height: 100vh;
4-
background-color: #f5f5f5;
5-
color: #333;
4+
background-color: var(--primary-light-grey);
5+
box-shadow: 0 4px 6px -2px var(--shadow-dark-grey);
6+
color: var(--secondary-dark-grey);
67
font-family: 'Segoe UI', sans-serif;
78
}
89

910
.sidebar {
1011
width: 320px;
11-
background-color: #fff;
12-
border-right: 1px solid #ddd;
12+
background-color: var(--primary-white);
13+
border-right: 1px solid var(--primary-white);
1314
display: flex;
1415
flex-direction: column;
1516
}
@@ -21,9 +22,9 @@
2122
width: 100%;
2223
padding: 8px;
2324
border-radius: 4px;
24-
background-color: #efefef;
25-
border: 1px solid #ccc;
26-
color: #333;
25+
background-color: var(--primary-white);
26+
border: 1px solid var(--quaternary-light-grey);
27+
color: var(--secondary-dark-grey);
2728
}
2829
}
2930

@@ -43,16 +44,16 @@
4344
transition: background 0.2s;
4445

4546
&:hover {
46-
background-color: #f0f0f0;
47+
background-color: var(--after-primary-light-grey);
4748
}
4849

4950
&.selected {
50-
background-color: #e0e0e0;
51+
background-color: var(--primary-light-grey);
5152
}
5253

5354
.avatar {
54-
background-color: #ccc;
55-
color: #000;
55+
background-color: var(--quaternary-light-grey);
56+
color: var(--freinacht-black);
5657
width: 40px;
5758
height: 40px;
5859
border-radius: 50%;
@@ -72,21 +73,21 @@
7273

7374
.last-message {
7475
font-size: 0.85em;
75-
color: #666;
76+
color: var(--tertiary-grey);
7677
}
7778
}
7879

7980
.timestamp {
8081
font-size: 0.75em;
81-
color: #999;
82+
color: var(--quintynary-light-grey);
8283
}
8384
}
8485

8586
.chat-view {
8687
flex-grow: 1;
8788
display: flex;
8889
flex-direction: column;
89-
background-color: #fafafa;
90+
background-color: var(--after-primary-light-grey);
9091
overflow: hidden;
9192
padding: 0;
9293
}
@@ -102,8 +103,8 @@
102103
font-weight: bold;
103104
font-size: 1.2em;
104105
padding: 12px 0;
105-
border-bottom: 1px solid #ccc;
106-
color: #333;
106+
border-bottom: 1px solid var(--quaternary-light-grey);
107+
color: var(--secondary-dark-grey);
107108
flex-shrink: 0;
108109
display: flex;
109110
justify-content: space-between;
@@ -130,93 +131,73 @@
130131

131132
&.sent {
132133
align-self: flex-end;
133-
background-color: #daf1ff;
134-
color: #003d66;
134+
background-color: var(--primary-light-green);
135+
color: var(--freinacht-black);
135136
}
136137

137138
&.received {
138139
align-self: flex-start;
139-
background-color: #e8e8e8;
140-
color: #222;
140+
background-color: var(--shadow-dark-grey);
141+
color: var(--freinacht-black);
141142
}
142143

143144
.message-time {
144145
font-size: 0.75em;
145-
color: #777;
146+
color: var(--quintynary-light-grey);
146147
margin-top: 4px;
147148
text-align: right;
148149
}
149150
}
150151

151152
.placeholder-text {
152-
color: #999;
153+
color: var(--quaternary-light-grey);
153154
font-size: 1.2em;
154155
text-align: center;
155156
}
156157

157158
.message-input-container {
158159
display: flex;
159160
padding: 12px 0;
160-
border-top: 1px solid #ccc;
161+
border-top: 1px solid var(--quaternary-light-grey);
161162
margin-top: auto;
162163

163164
input {
164165
flex-grow: 1;
165166
padding: 10px 14px;
166-
border: 1px solid #ccc;
167+
border: 1px solid var(--quaternary-light-grey);
167168
border-radius: 20px;
168169
font-size: 14px;
169170
outline: none;
170171
margin-right: 10px;
171172
}
172-
173-
button {
174-
background-color: #007bff;
175-
border: none;
176-
color: white;
177-
font-size: 16px;
178-
padding: 10px 16px;
179-
border-radius: 50%;
180-
cursor: pointer;
181-
transition: background 0.3s;
182-
183-
&:hover {
184-
background-color: #0056b3;
185-
}
186-
}
187173
}
188174

189175
.client-info-button {
190176
font-size: 1.5rem;
191-
background-color: #f0f0f0;
177+
background-color: var(--after-primary-light-grey);
192178
border: none;
193179
border-radius: 50%;
194180
padding: 0.5rem;
195181
cursor: pointer;
196-
box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
182+
box-shadow: 0 2px 5px var(--shadow-dark-grey);
197183
transition: background-color 0.2s ease;
198184
width: 52px;
199185

200186
&:hover {
201-
background-color: #e0e0e0;
202-
}
203-
204-
&:focus {
205-
outline: 2px solid #007bff;
206-
outline-offset: 2px;
187+
background-color: var(--secondary-grey);
207188
}
208189
}
209190

210191
.client-info-panel {
211-
background-color: #f3f3f3;
212-
border-top: 1px solid #ccc;
192+
background-color: var(--primary-light-grey);
193+
border-top: 1px solid var(--quintynary-light-grey);
213194
padding: 1rem;
214195
font-size: 0.95rem;
215196
animation: fade-in-panel 250ms ease-in-out;
216-
box-shadow: inset 0 1px 3px rgb(0 0 0 / 5%);
197+
box-shadow: inset 0 1px 3px var(--shadow-dark-grey);
217198

218199
strong {
219-
color: #333;
200+
color: var(--secondary-dark-grey);
220201
}
221202
}
222203

@@ -238,3 +219,33 @@
238219
align-items: center;
239220
min-height: 100vh;
240221
}
222+
223+
.send-message-button {
224+
display: flex;
225+
align-items: center;
226+
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+
}
251+
}

0 commit comments

Comments
 (0)