Skip to content

Commit 8db0eeb

Browse files
ilmartyrkbelka09
ilmartyrk
and
belka09
authored
update joined group design Co-authored-by: Dzmitry Zimnitski <[email protected]>
1 parent 29e72be commit 8db0eeb

File tree

4 files changed

+71
-137
lines changed

4 files changed

+71
-137
lines changed

‎src/app/public-groups/components/groups/groups.component.html‎

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@
2424
<div class="selection">
2525
<div class="selected_item">
2626
<ng-container [ngSwitch]="filterKey">
27-
<span *ngSwitchCase="'visibility'">{{ getActiveFilterText("visibility", filtersData.visibility.selectedValue) | uppercase | translate | titlecase }}</span>
28-
<span *ngSwitchDefault>{{ getActiveFilterText(filterKey, filtersData[filterKey].selectedValue) | translate }}</span>
27+
<span *ngSwitchCase="'visibility'">{{ getActiveFilterText("visibility",
28+
filtersData.visibility.selectedValue) | uppercase | translate | titlecase }}</span>
29+
<span *ngSwitchDefault>{{ getActiveFilterText(filterKey, filtersData[filterKey].selectedValue) |
30+
translate }}</span>
2931
</ng-container>
3032
</div>
3133
<div>
@@ -97,7 +99,8 @@
9799
<a class="filter_option" (click)="filtersData[filterKey].isMobileOpen = true">
98100
<span class="filter_option_text">{{ filtersData[filterKey].placeholder | translate }}</span>
99101
<ng-container [ngSwitch]="filterKey">
100-
<span *ngSwitchDefault class="bold">{{ getActiveFilterText(filterKey, filtersData[filterKey].selectedValue) | translate }}</span>
102+
<span *ngSwitchDefault class="bold">{{ getActiveFilterText(filterKey,
103+
filtersData[filterKey].selectedValue) | translate }}</span>
101104
</ng-container>
102105
</a>
103106
</ng-container>
@@ -133,21 +136,13 @@
133136
<ng-container *ngFor="let filterKey of filterKeys">
134137
<div class="options button_options" *ngIf="filtersData[filterKey].isMobileOpen">
135138
<ng-container [ngSwitch]="filterKey">
136-
<search-filter
137-
*ngSwitchCase="'country'"
138-
[term]="countrySearch"
139-
[placeholder]="'VIEWS.MY_TOPICS.FILTER_COUNTRY' | translate"
140-
[search]="searchCountry.bind(this)"
141-
[close]="closeMobileFilter.bind(this)"
142-
/>
139+
<search-filter *ngSwitchCase="'country'" [term]="countrySearch"
140+
[placeholder]="'VIEWS.MY_TOPICS.FILTER_COUNTRY' | translate" [search]="searchCountry.bind(this)"
141+
[close]="closeMobileFilter.bind(this)" />
143142

144-
<search-filter
145-
*ngSwitchCase="'language'"
146-
[term]="languageSearch"
147-
[placeholder]="'VIEWS.MY_TOPICS.FILTER_LANGUAGE' | translate"
148-
[search]="searchLanguage.bind(this)"
149-
[close]="closeMobileFilter.bind(this)"
150-
/>
143+
<search-filter *ngSwitchCase="'language'" [term]="languageSearch"
144+
[placeholder]="'VIEWS.MY_TOPICS.FILTER_LANGUAGE' | translate" [search]="searchLanguage.bind(this)"
145+
[close]="closeMobileFilter.bind(this)" />
151146

152147
<a *ngSwitchDefault class="btn_medium_close icon" (click)="closeMobileFilter()">
153148
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -166,9 +161,10 @@
166161
<input type="radio" name="country">
167162
<span class="checkmark"></span>
168163
</label>
169-
164+
170165
<ng-container *ngIf="countries$ | async as countries">
171-
<label class="checkbox" *ngFor="let country of countries" (click)="filtersData.country.preSelectedValue = country.name;">
166+
<label class="checkbox" *ngFor="let country of countries"
167+
(click)="filtersData.country.preSelectedValue = country.name;">
172168
<span>{{country.name}}</span>
173169
<input type="radio" name="country">
174170
<span class="checkmark"></span>
@@ -182,9 +178,10 @@
182178
<input type="radio" name="language">
183179
<span class="checkmark"></span>
184180
</label>
185-
181+
186182
<ng-container *ngIf="languages$ | async as languages">
187-
<label class="checkbox" *ngFor="let language of languages" (click)="filtersData.language.preSelectedValue = language.name;">
183+
<label class="checkbox" *ngFor="let language of languages"
184+
(click)="filtersData.language.preSelectedValue = language.name;">
188185
<span>{{language.name}}</span>
189186
<input type="radio" name="language">
190187
<span class="checkmark"></span>
@@ -206,8 +203,9 @@
206203
</ng-container>
207204
</ng-container>
208205
</div>
209-
210-
<button class="btn_medium_secondary" (click)="setFilterValue(filterKey, filtersData[filterKey].preSelectedValue); closeMobileFilter();"
206+
207+
<button class="btn_medium_secondary"
208+
(click)="setFilterValue(filterKey, filtersData[filterKey].preSelectedValue); closeMobileFilter();"
211209
translate="VIEWS.MY_TOPICS.BTN_APPLY"></button>
212210
</div>
213211
</ng-container>
@@ -216,14 +214,8 @@
216214
<div class="groups_content">
217215
<ng-container *ngIf="groups$ | async as groups;">
218216
<ng-container *ngFor="let group of groups">
219-
<ng-container *ngIf="!group.userLevel">
220-
<public-group-box [group]="group">
221-
</public-group-box>
222-
</ng-container>
223-
<ng-container *ngIf="group.userLevel">
224-
<group-box [group]="group">
225-
</group-box>
226-
</ng-container>
217+
<public-group-box [group]="group">
218+
</public-group-box>
227219
</ng-container>
228220
</ng-container>
229221
</div>

‎src/app/public-groups/components/publicgroupbox/publicgroupbox.component.html‎

Lines changed: 34 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -3,68 +3,36 @@
33
<div class="image_area">
44
<img *ngIf="group.imageUrl" [src]="group.imageUrl" />
55
<div class="initial_wrap" *ngIf="!group.imageUrl && group.name">
6-
<cos-initials
7-
class="table_cell"
8-
[name]="group.name"
9-
[initialLimit]="1"
10-
></cos-initials>
6+
<cos-initials class="table_cell" [name]="group.name" [initialLimit]="1"></cos-initials>
117
</div>
128
</div>
139
<div class="info_area">
1410
<div class="item" *ngIf="group.visibility === 'private'">
15-
<svg
16-
width="24"
17-
height="24"
18-
viewBox="0 0 24 24"
19-
fill="none"
20-
xmlns="http://www.w3.org/2000/svg"
21-
>
22-
<path
23-
fill-rule="evenodd"
24-
clip-rule="evenodd"
11+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
12+
<path fill-rule="evenodd" clip-rule="evenodd"
2513
d="M8 9V7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7V9H17C18.1046 9 19 9.89543 19 11V17C19 18.1046 18.1046 19 17 19H7C5.89543 19 5 18.1046 5 17V11C5 9.89543 5.89543 9 7 9H8ZM14 7V9H10V7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V13Z"
26-
fill="#2C3B47"
27-
/>
14+
fill="#2C3B47" />
2815
</svg>
2916
</div>
3017
<div class="item" *ngIf="group.favourite">
31-
<svg
32-
width="24"
33-
height="24"
34-
viewBox="0 0 24 24"
35-
fill="none"
36-
xmlns="http://www.w3.org/2000/svg"
37-
>
18+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
3819
<path
3920
d="M12 3L14.645 8.35942L20.5595 9.21885L16.2798 13.3906L17.2901 19.2812L12 16.5L6.70993 19.2812L7.72025 13.3906L3.44049 9.21885L9.35497 8.35942L12 3Z"
40-
fill="#2C3B47"
41-
/>
21+
fill="#2C3B47" />
4222
</svg>
4323
</div>
4424
<div class="item" *ngIf="group">
45-
<svg
46-
width="16"
47-
height="16"
48-
viewBox="0 0 16 16"
49-
fill="none"
50-
xmlns="http://www.w3.org/2000/svg"
51-
>
52-
<path
53-
fill-rule="evenodd"
54-
clip-rule="evenodd"
25+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
26+
<path fill-rule="evenodd" clip-rule="evenodd"
5527
d="M8.00002 8.00016C9.84097 8.00016 11.3334 6.50778 11.3334 4.66683C11.3334 2.82588 9.84097 1.3335 8.00002 1.3335C6.15907 1.3335 4.66669 2.82588 4.66669 4.66683C4.66669 6.50778 6.15907 8.00016 8.00002 8.00016Z"
56-
fill="#2C3B47"
57-
/>
58-
<path
59-
fill-rule="evenodd"
60-
clip-rule="evenodd"
28+
fill="#2C3B47" />
29+
<path fill-rule="evenodd" clip-rule="evenodd"
6130
d="M4 11.63C4 9.99356 5.19391 8.66699 6.66667 8.66699H9.33333C10.8061 8.66699 12 9.99356 12 11.63V15.3337H4V11.63Z"
62-
fill="#2C3B47"
63-
/>
31+
fill="#2C3B47" />
6432
</svg>
6533
<span class="members_count_text">{{
6634
group.members?.users?.count || 1
67-
}}</span>
35+
}}</span>
6836
</div>
6937
</div>
7038
</div>
@@ -74,88 +42,53 @@
7442
</div>
7543
<div class="group_info_area">
7644
<div class="info_item">
77-
<svg
78-
width="16"
79-
height="16"
80-
viewBox="0 0 16 16"
81-
fill="none"
82-
xmlns="http://www.w3.org/2000/svg"
83-
>
45+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
8446
<path
8547
d="M14.0001 9.76344C14.0241 9.72875 14.0472 9.69281 14.071 9.65906C14.6754 8.76079 14.9988 7.70299 15.0001 6.62031C15.0101 3.51719 12.3919 1 9.15444 1C6.33069 1 3.97506 2.92156 3.42319 5.4725C3.3404 5.85056 3.29849 6.23642 3.29819 6.62344C3.29819 9.72969 5.81569 12.3144 9.05319 12.3144C9.56787 12.3144 10.2613 12.1597 10.6416 12.0553C11.0219 11.9509 11.3988 11.8131 11.4963 11.7759C11.5938 11.7387 11.7463 11.7006 11.8679 11.7356L14.2872 12.435C14.3085 12.4413 14.3311 12.4418 14.3526 12.4365C14.3742 12.4312 14.3939 12.4202 14.4098 12.4048C14.4257 12.3893 14.4372 12.3699 14.4431 12.3485C14.449 12.3271 14.4492 12.3046 14.4435 12.2831L13.8897 10.1741C13.8513 10.0178 13.8463 9.98844 14.0001 9.76344Z"
86-
fill="#1168A8"
87-
/>
48+
fill="#1168A8" />
8849
<path
8950
d="M9.76691 12.9807C9.52643 13.0191 9.28353 13.0406 9.04004 13.0447C7.7141 13.0447 6.46191 12.6947 5.44629 12.0385C4.79661 11.6397 4.23267 11.1158 3.78722 10.4972C2.97222 9.41693 2.52785 8.04381 2.52785 6.60693C2.52785 6.50912 2.53129 6.41506 2.53472 6.32068C2.53596 6.29285 2.5286 6.26531 2.51363 6.24181C2.49867 6.21831 2.47683 6.19999 2.45109 6.18934C2.42534 6.17868 2.39695 6.17622 2.36975 6.18227C2.34256 6.18833 2.31789 6.20261 2.2991 6.22318C1.55083 7.0419 1.09849 8.08775 1.01431 9.19369C0.930138 10.2996 1.21898 11.4019 1.83472 12.3244C1.91191 12.4422 1.95566 12.5332 1.94222 12.5938L1.50191 14.8519C1.49785 14.8734 1.49949 14.8956 1.50666 14.9162C1.51384 14.9369 1.5263 14.9553 1.5428 14.9696C1.55931 14.9839 1.57928 14.9937 1.60073 14.9978C1.62218 15.002 1.64435 15.0005 1.66504 14.9935L3.79004 14.236C3.85448 14.2105 3.92331 14.198 3.9926 14.1992C4.06188 14.2004 4.13025 14.2152 4.19378 14.2429C4.82972 14.4929 5.53316 14.6466 6.2366 14.6466C7.5906 14.651 8.89485 14.1366 9.88129 13.2091C9.90165 13.1893 9.91518 13.1635 9.9199 13.1354C9.92463 13.1074 9.92031 13.0785 9.90758 13.0531C9.89485 13.0277 9.87436 13.0069 9.84907 12.9939C9.82378 12.9809 9.79501 12.9763 9.76691 12.9807Z"
90-
fill="#1168A8"
91-
/>
51+
fill="#1168A8" />
9252
</svg>
9353
<span class="bold">{{
9454
group.members?.topics.count?.inProgress || 0
95-
}}</span>
55+
}}</span>
9656
</div>
9757
<div class="info_item">
98-
<svg
99-
width="16"
100-
height="16"
101-
viewBox="0 0 16 16"
102-
fill="none"
103-
xmlns="http://www.w3.org/2000/svg"
104-
>
105-
<path
106-
fill-rule="evenodd"
107-
clip-rule="evenodd"
58+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
59+
<path fill-rule="evenodd" clip-rule="evenodd"
10860
d="M14 7.96667C13.6318 7.96667 13.3334 7.66819 13.3334 7.3C13.3334 6.93181 13.6318 6.63334 14 6.63334H14.6667C15.0349 6.63334 15.3334 6.93181 15.3334 7.3C15.3334 7.66819 15.0349 7.96667 14.6667 7.96667H14ZM13.1647 2.13798C12.9046 1.87789 12.4827 1.87848 12.2234 2.13929L11.9674 2.39667C11.7091 2.65646 11.7097 3.0763 11.9687 3.33536C12.2288 3.59544 12.6507 3.59486 12.91 3.33405L13.166 3.07666C13.4243 2.81688 13.4237 2.39704 13.1647 2.13798ZM7.33336 1.3C7.33336 1.66819 7.63183 1.96667 8.00002 1.96667C8.36821 1.96667 8.66669 1.66819 8.66669 1.3V0.666667C8.66669 0.298477 8.36821 0 8.00002 0C7.63183 0 7.33336 0.298477 7.33336 0.666667V1.3ZM2.00002 6.63333C2.36821 6.63333 2.66669 6.93181 2.66669 7.3C2.66669 7.66819 2.36821 7.96667 2.00002 7.96667L1.33335 7.96667C0.965163 7.96667 0.666687 7.66819 0.666687 7.3C0.666687 6.93181 0.965163 6.63333 1.33335 6.63333L2.00002 6.63333ZM3.78204 2.13131C3.52341 1.87122 3.10272 1.87064 2.84335 2.13C2.58399 2.38936 2.58458 2.81005 2.84466 3.06869L3.10539 3.32797C3.36405 3.58519 3.78208 3.58461 4.04002 3.32667C4.29796 3.06872 4.29855 2.6507 4.04132 2.39204L3.78204 2.13131ZM3.84084 7.26117C3.84084 4.88191 5.88704 3.19987 8.0009 3.19987C10.1148 3.19987 12.1608 4.88207 12.1608 7.26117C12.1608 8.94158 11.4912 9.89858 10.8811 10.7705C10.4343 11.409 10.0195 12.0019 9.92303 12.7999H6.08303C5.98651 12.0018 5.57079 11.4088 5.12303 10.7702C4.51178 9.89839 3.84084 8.94144 3.84084 7.26117ZM6.08211 14.0819H9.92211V13.4401H6.08211V14.0819ZM6.08211 14.7201H9.92211C9.92211 15.427 9.34903 16.0001 8.64211 16.0001H7.36211C6.65518 16.0001 6.08211 15.427 6.08211 14.7201Z"
109-
fill="#E4B722"
110-
/>
61+
fill="#E4B722" />
11162
</svg>
11263
<span class="bold">{{ group.members?.topics.count?.ideation || 0 }}</span>
11364
</div>
11465
<div class="info_item">
115-
<svg
116-
width="16"
117-
height="16"
118-
viewBox="0 0 16 16"
119-
fill="none"
120-
xmlns="http://www.w3.org/2000/svg"
121-
>
122-
<path
123-
fill-rule="evenodd"
124-
clip-rule="evenodd"
66+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
67+
<path fill-rule="evenodd" clip-rule="evenodd"
12568
d="M8 0C3.584 0 0 3.584 0 8C0 12.416 3.584 16 8 16C12.416 16 16 12.416 16 8C16 3.584 12.416 0 8 0ZM6.44444 12L12.6667 5.82456L11.5 4.66667L6.44444 9.68421L4.5 7.75439L3.33333 8.91228L6.44444 12Z"
126-
fill="#5AB467"
127-
/>
69+
fill="#5AB467" />
12870
</svg>
12971
<span class="bold">{{ group.members?.topics.count?.voting || 0 }}</span>
13072
</div>
13173
<div class="info_item">
132-
<svg
133-
width="16"
134-
height="16"
135-
viewBox="0 0 16 16"
136-
fill="none"
137-
xmlns="http://www.w3.org/2000/svg"
138-
>
74+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
13975
<rect width="16" height="16" rx="8" fill="#DA7AB1" />
14076
<path
14177
d="M9.26255 5.01961L9.06699 4H4.66699V12.6667H5.64477V9.09804H8.38255L8.5781 10.1176H12.0003V5.01961H9.26255Z"
142-
fill="white"
143-
/>
78+
fill="white" />
14479
</svg>
14580

14681
<span class="bold">{{ group.members?.topics.count?.followUp || 0 }}</span>
14782
</div>
14883
</div>
149-
<button
150-
*ngIf="!group.userLevel"
151-
class="btn_medium_secondary"
152-
(click)="joinGroup(); $event.stopPropagation()"
153-
translate="VIEWS.PUBLIC_GROUPS.BTN_JOIN_GROUP"
154-
></button>
155-
<button
156-
*ngIf="group.userLevel"
157-
class="btn_medium_secondary"
158-
(click)="viewGroup()"
159-
translate="VIEWS.PUBLIC_GROUPS.BTN_VIEW_GROUP"
160-
></button>
84+
<button *ngIf="!group.userLevel" class="btn_medium_secondary" (click)="joinGroup(); $event.stopPropagation()"
85+
translate="VIEWS.PUBLIC_GROUPS.BTN_JOIN_GROUP"></button>
86+
87+
<button *ngIf="group.userLevel" class="btn_medium_secondary disabled" disabled>
88+
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
89+
<path d="M4.88602 8.80885L13.0256 0L14.5 1.59558L4.88602 12L0.5 7.25336L1.97436 5.65779L4.88602 8.80885Z"
90+
fill="#2C3B47" />
91+
</svg>
92+
<span translate="VIEWS.PUBLIC_GROUPS.BTN_JOINED_GROUP"></span>
93+
</button>
16194
</a>

‎src/app/public-groups/components/publicgroupbox/publicgroupbox.component.scss‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@
2121
}
2222

2323
&:hover {
24-
box-shadow: 0px 8px 20px 0px rgba(220, 231, 240, 0.30), 0px 12px 16px 0px rgba(50, 85, 112, 0.10);
24+
box-shadow: 0px 8px 20px 0px rgba(220, 231, 240, 0.3),
25+
0px 12px 16px 0px rgba(50, 85, 112, 0.1);
2526
text-decoration: none;
2627
.group_title {
2728
color: var(--color-link);
2829
}
29-
3030
}
3131
.group_header {
3232
display: flex;
@@ -127,8 +127,16 @@
127127
}
128128
}
129129

130-
.btn_big_secondary {
131-
font-size: 14px;
132-
line-height: 16px;
130+
.btn_medium_secondary.disabled {
131+
background: var(--color-surface-contrast);
132+
opacity: 1;
133+
134+
path {
135+
fill: var(--color-text) !important;
136+
}
137+
138+
span {
139+
color: var(--color-text);
140+
}
133141
}
134142
}

‎src/assets/i18n/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2664,6 +2664,7 @@
26642664
"LNK_CLEAR": "@:LNK_CLEAR",
26652665
"BTN_LEAVE_GROUP": "Leave group",
26662666
"BTN_VIEW_GROUP": "View group",
2667+
"BTN_JOINED_GROUP": "Joined",
26672668
"ORDER_TITLE_ASC": "Order groups A-Z",
26682669
"ORDER_TITLE_DESC": "Order groups Z-A",
26692670
"HEADING_NO_RESUTS": "@:VIEWS.MY.NO_RESULTS_FOUND_TITLE",

0 commit comments

Comments
 (0)