Skip to content

Commit 7c15e66

Browse files
aromanovvaromanovv
committed
PD-3630 update visibility icons
1 parent 7ba0966 commit 7c15e66

20 files changed

Lines changed: 136 additions & 157 deletions

‎src/app/account-settings/components/settings-defaults-visibility/settings-defaults-visibility.component.html‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,16 @@
77
<mat-radio-group
88
formControlName="activitiesVisibilityDefault"
99
color="primary"
10+
class="grid gap-2"
1011
>
1112
<mat-radio-button
1213
id="cy-visibility-everyone-input"
1314
[value]="visibilityOptions[0]"
1415
class="orcid-radio-button-with-icons"
1516
>
16-
<img
17-
src="./assets/vectors/visibility-everyone.svg"
18-
aria-hidden="true"
19-
alt=""
20-
/>
17+
<mat-icon aria-hidden="true" class="everyone mr-2 ml-1"
18+
>visibility</mat-icon
19+
>
2120
<div class="inlined">
2221
<strong i18n="@@register.VisibilityEveryone">Everyone</strong>
2322

@@ -31,11 +30,12 @@
3130
[value]="visibilityOptions[1]"
3231
class="orcid-radio-button-with-icons"
3332
>
34-
<img
35-
src="./assets/vectors/visibility-trusted-source.svg"
33+
<mat-icon
3634
aria-hidden="true"
37-
alt=""
38-
/>
35+
class="trusted material-symbols-outlined mr-2 ml-1"
36+
>visibility_lock</mat-icon
37+
>
38+
3939
<div class="inlined">
4040
<strong i18n="@@register.VisibilityTrusted"
4141
>Trusted Organizations</strong
@@ -50,11 +50,10 @@
5050
[value]="visibilityOptions[2]"
5151
class="orcid-radio-button-with-icons"
5252
>
53-
<img
54-
src="./assets/vectors/visibility-only-me.svg"
55-
aria-hidden="true"
56-
alt=""
57-
/>
53+
<mat-icon aria-hidden="true" class="private mr-2 ml-1"
54+
>visibility_off</mat-icon
55+
>
56+
5857
<div class="inlined">
5958
<strong i18n="@@register.VisibilityPrivate">Only me</strong>
6059

‎src/app/account-settings/components/settings-defaults-visibility/settings-defaults-visibility.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,7 @@ mat-radio-group {
22
display: flex;
33
flex-direction: column;
44
}
5+
6+
.trusted {
7+
font-variation-settings: 'FILL' 1 !important;
8+
}

‎src/app/account-settings/components/settings-defaults-visibility/settings-defaults-visibility.component.scss-theme.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@import 'src/assets/scss/material.orcid-theme.scss';
2+
3+
@mixin settings-defaults-visibility-theme($theme) {
4+
$primary: map-get($theme, primary);
5+
$accent: map-get($theme, accent);
6+
$warn: map-get($theme, accent);
7+
$foreground: map-get($theme, foreground);
8+
$background: map-get($theme, background);
9+
10+
.everyone {
11+
color: map-get($foreground, 'visibility-everyone');
12+
}
13+
14+
.private {
15+
color: map-get($foreground, 'visibility-private');
16+
}
17+
18+
.trusted {
19+
color: map-get($foreground, 'visibility-trusted');
20+
}
21+
}
22+
23+
@include settings-defaults-visibility-theme($orcid-app-theme);

‎src/app/account-settings/components/settings-defaults-visibility/settings-defaults-visibility.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ import { RecordService } from 'src/app/core/record/record.service'
1515
@Component({
1616
selector: 'app-settings-defaults-visibility',
1717
templateUrl: './settings-defaults-visibility.component.html',
18-
styleUrls: ['./settings-defaults-visibility.component.scss'],
18+
styleUrls: [
19+
'./settings-defaults-visibility.component.scss',
20+
'./settings-defaults-visibility.component.scss-theme.scss',
21+
],
1922
preserveWhitespaces: true,
2023
standalone: false,
2124
})

‎src/app/cdk/panel/panel-privacy/panel-privacy.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@
99
>
1010
<mat-icon
1111
aria-hidden="false"
12-
class="trusted"
12+
class="trusted material-symbols-outlined"
1313
*ngIf="visibility === 'LIMITED'"
1414
[attr.aria-label]="label"
1515
[ngClass]="{ active: visibility === 'LIMITED' }"
16-
>visibility</mat-icon
16+
>visibility_lock</mat-icon
1717
>
1818
<mat-icon
1919
aria-hidden="false"
2020
class="private"
2121
[attr.aria-label]="label"
2222
*ngIf="visibility === 'PRIVATE'"
2323
[ngClass]="{ active: visibility === 'PRIVATE' }"
24-
>visibility</mat-icon
24+
>visibility_off</mat-icon
2525
>
2626
</div>

‎src/app/cdk/panel/panel-privacy/panel-privacy.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,7 @@
88
mat-icon {
99
padding-inline-start: 16px;
1010
}
11+
12+
.trusted {
13+
font-variation-settings: 'FILL' 1 !important;
14+
}

‎src/app/cdk/visibility-selector/visibility-selector/visibility-selector.component.html‎

Lines changed: 24 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,23 @@
99
class="main-menu"
1010
[attr.aria-label]="(itemTitle || '') + ' ' + mainButtonLabel"
1111
>
12-
<mat-icon
13-
*ngIf="mobile"
14-
class="menu-icon"
15-
[ngClass]="{
16-
limitedIcon: privacy === 'LIMITED',
17-
publicIcon: privacy === 'PUBLIC',
18-
privateIcon: privacy === 'PRIVATE'
19-
}"
20-
>visibility</mat-icon
21-
>
12+
@if (mobile) { @if (privacy === 'PUBLIC') {
13+
<mat-icon class="menu-icon publicIcon">visibility</mat-icon>
14+
} @if (privacy === 'LIMITED') {
15+
<mat-icon class="menu-icon limitedIcon">visibility_lock</mat-icon>
16+
} @if (privacy === 'PRIVATE') {
17+
<mat-icon class="menu-icon privateIcon">visibility_off</mat-icon>
18+
} }
2219
<div class="main-button-container" *ngIf="!mobile">
2320
<div class="icon-title-container">
24-
<mat-icon
25-
class="menu-icon"
26-
[ngClass]="{
27-
limitedIcon: privacy === 'LIMITED',
28-
publicIcon: privacy === 'PUBLIC',
29-
privateIcon: privacy === 'PRIVATE'
30-
}"
31-
>visibility</mat-icon
32-
>
21+
@if (privacy === 'PUBLIC') {
22+
<mat-icon class="menu-icon publicIcon">visibility</mat-icon>
23+
} @if (privacy === 'LIMITED') {
24+
<mat-icon class="menu-icon limitedIcon">visibility_lock</mat-icon>
25+
} @if (privacy === 'PRIVATE') {
26+
<mat-icon class="menu-icon privateIcon">visibility_off</mat-icon>
27+
}
28+
3329
<ng-container
3430
*ngIf="privacy === 'PUBLIC'"
3531
i18n="@@register.VisibilityEveryone"
@@ -84,28 +80,10 @@ <h1 class="orc-font-body" i18n="@@shared.setVisibilityFor">
8480
noSelectedMenu: privacy !== 'PUBLIC' || visibilityError,
8581
selectedMenu: privacy === 'PUBLIC' && !visibilityError
8682
}"
87-
class="public-button cy-visibility-public flex-menu-item"
83+
class="public-button cy-visibility-public flex-menu-item mb-2!"
8884
>
89-
<div class="icon-circle icon-public">
90-
<svg
91-
xmlns="http://www.w3.org/2000/svg"
92-
width="25"
93-
height="25"
94-
viewBox="0 0 32 32"
95-
>
96-
<g fill-rule="evenodd" transform="translate(2 8)">
97-
<path
98-
d="M4.89285309,3 C6.32345505,3 7.48318708,4.198431 7.48318708,6.16476204 C7.48318708,7.39927189 7.02606362,8.48703297 6.33177897,9.12571199 L6.33192132,9.85514246 C6.93430296,9.95767004 7.48953333,10.1208324 7.99761243,10.3446296 C6.59349146,10.931755 5.4631016,11.8164312 4.6050382,13 L4.609,12.995 L-7.54951657e-15,12.9951477 L-7.54951657e-15,11.5705277 C0.76712784,10.590195 1.9183686,10.0004474 3.45372228,9.8012851 L3.45313835,9.12498602 C2.75929632,8.48620889 2.3025191,7.39880427 2.3025191,6.16476204 C2.3025191,4.198431 3.46225113,3 4.89285309,3 Z"
99-
/>
100-
<path
101-
d="M24.8904655,3 C26.3210675,3 27.4807995,4.198431 27.4807995,6.16476204 C27.4807995,7.39927189 27.0236761,8.48703297 26.3293914,9.12571199 L26.3295337,9.85514246 C26.9319154,9.95767004 27.4871458,10.1208324 27.9952249,10.3446296 C26.5911039,10.931755 25.460714,11.8164312 24.6026506,13 L24.6066124,12.995 L19.9976124,12.9951477 L19.9976124,11.5705277 C20.7647403,10.590195 21.915981,10.0004474 23.4513347,9.8012851 L23.4507508,9.12498602 C22.7569087,8.48620889 22.3001315,7.39880427 22.3001315,6.16476204 C22.3001315,4.198431 23.4598636,3 24.8904655,3 Z"
102-
transform="matrix(-1 0 0 1 47.993 0)"
103-
/>
104-
<path
105-
d="M13.9976124,0 C16.3766852,0 17.8888022,1.83293682 17.8888022,4.84033613 C17.8888022,6.60373271 17.3689221,8.17135716 16.4592223,9.1665201 L16.4593096,10.4940226 C18.7142116,10.8564413 20.5603125,11.6917671 21.9976124,13 L21.9976124,16 L5.99761243,16 L5.99761243,13 C7.23371328,11.5789972 9.07977703,10.7159448 11.5358037,10.4108427 L11.536008,9.18074833 C10.6617792,8.21159109 10.1619793,6.6729659 10.1064226,4.84033613 C10.0106366,1.68067227 11.6185397,0 13.9976124,0 Z"
106-
/>
107-
</g>
108-
</svg>
85+
<div class="icon-choice icon-public">
86+
<mat-icon class="menu-icon publicIcon">visibility</mat-icon>
10987
</div>
11088
<div class="title-container" i18n="@@register.VisibilityEveryone">
11189
Everyone
@@ -124,20 +102,10 @@ <h1 class="orc-font-body" i18n="@@shared.setVisibilityFor">
124102
noSelectedMenu: privacy !== 'LIMITED' || visibilityError,
125103
selectedMenu: privacy === 'LIMITED' && !visibilityError
126104
}"
127-
class="limited-button cy-visibility-limited flex-menu-item"
105+
class="limited-button cy-visibility-limited flex-menu-item mb-2!"
128106
>
129-
<div class="icon-circle icon-limited">
130-
<svg
131-
xmlns="http://www.w3.org/2000/svg"
132-
width="25"
133-
height="25"
134-
viewBox="0 0 32 32"
135-
>
136-
<path
137-
d="M21.3241161,1.2027958 L21.3241161,4.80204218 L16.802377,4.80204218 L16.802377,6.00179097 L21.3241161,6.00179097 L21.3241161,9.60103736 L16.802377,9.60103736 L16.8025334,13.9532859 C20.1760796,14.7070044 22.7027958,17.7951245 22.7027958,21.490125 C22.7027958,25.7497154 19.3449314,29.2027958 15.2027958,29.2027958 C11.0606602,29.2027958 7.7027958,25.7497154 7.7027958,21.490125 C7.7027958,17.8976017 10.0913034,14.8787633 13.3243619,14.0213468 L13.3241161,1.2027958 L21.3241161,1.2027958 Z M15.2027958,16.8625225 C12.7175144,16.8625225 10.7027958,18.9343707 10.7027958,21.490125 C10.7027958,24.0458793 12.7175144,26.1177275 15.2027958,26.1177275 C17.6880772,26.1177275 19.7027958,24.0458793 19.7027958,21.490125 C19.7027958,18.9343707 17.6880772,16.8625225 15.2027958,16.8625225 Z"
138-
transform="rotate(45 15.203 15.203)"
139-
/>
140-
</svg>
107+
<div class="icon-choice icon-limited">
108+
<mat-icon class="menu-icon limitedIcon">visibility_lock</mat-icon>
141109
</div>
142110
<div class="title-container" i18n="@@account.trustedParties">
143111
Trusted Parties
@@ -152,24 +120,14 @@ <h1 class="orc-font-body" i18n="@@shared.setVisibilityFor">
152120
"
153121
mat-menu-item
154122
(click)="private()"
155-
class="private-button cy-visibility-private flex-menu-item"
123+
class="private-button cy-visibility-private flex-menu-item mb-4!"
156124
[ngClass]="{
157125
noSelectedMenu: privacy !== 'PRIVATE' || visibilityError,
158126
selectedMenu: privacy === 'PRIVATE' && !visibilityError
159127
}"
160128
>
161-
<div class="icon-circle icon-private">
162-
<svg
163-
xmlns="http://www.w3.org/2000/svg"
164-
width="25"
165-
height="25"
166-
viewBox="0 0 32 32"
167-
>
168-
<path
169-
fill-rule="evenodd"
170-
d="M20.5833333,8.75 C20.5833333,8.23716416 20.1972931,7.81449284 19.6999545,7.75672773 L19.5833333,7.75 L12.4166667,7.75 C11.9038308,7.75 11.4811595,8.13604019 11.4233944,8.63337887 L11.4166667,8.75 L11.4166667,12.3333333 L8.66666667,12.3333333 L8.66666667,10 C8.66666667,7.23857625 10.9052429,5 13.6666667,5 L18.3333333,5 C21.0947571,5 23.3333333,7.23857625 23.3333333,10 L23.3333333,12.3333333 L25,12.3333333 C26.1045695,12.3333333 27,13.2287638 27,14.3333333 L27,25 C27,26.1045695 26.1045695,27 25,27 L7,27 C5.8954305,27 5,26.1045695 5,25 L5,14.3333333 C5,13.2287638 5.8954305,12.3333333 7,12.3333333 L20.5833333,12.3333333 L20.5833333,8.75 Z M16,16 C15.0381041,16 14.2492271,16.7407822 14.1727441,17.6829715 L14.1666667,17.8333333 L14.1666667,21.5 C14.1666667,22.512522 14.987478,23.3333333 16,23.3333333 C16.9618959,23.3333333 17.7507729,22.5925511 17.8272559,21.6503618 L17.8333333,21.5 L17.8333333,17.8333333 C17.8333333,16.8208113 17.012522,16 16,16 Z"
171-
/>
172-
</svg>
129+
<div class="icon-choice icon-private">
130+
<mat-icon class="menu-icon privateIcon">visibility_off</mat-icon>
173131
</div>
174132
<div class="title-container" i18n="@@shared.onlyMe">Only me</div>
175133
</button>

‎src/app/cdk/visibility-selector/visibility-selector/visibility-selector.component.scss‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,19 @@
55
padding: 16px;
66
}
77

8-
.icon-circle {
8+
.icon-choice {
9+
.menu-icon {
10+
font-size: 32px;
11+
width: 32px;
12+
height: 32px;
13+
}
914
display: flex;
1015
height: 32px;
1116
width: 32px;
1217
border-radius: 50%;
1318
align-items: center;
1419
justify-content: center;
15-
margin-inline-end: 16px;
20+
margin-inline-end: 12px;
1621
}
1722

1823
.main-menu {
@@ -21,7 +26,7 @@
2126
}
2227

2328
.menu-icon {
24-
margin-right: 6px;
29+
margin-right: 8px;
2530
}
2631

2732
[mat-button] {
@@ -39,6 +44,7 @@
3944
align-items: center;
4045

4146
.icon-title-container {
47+
margin-top: -1px;
4248
min-width: 100px;
4349
display: flex;
4450
align-items: center;
@@ -74,7 +80,6 @@ h1 {
7480
margin-right: 0;
7581
}
7682
min-width: 0;
77-
width: 40px;
7883
border-radius: 50%;
7984
padding: 0;
8085
justify-content: center;
@@ -83,7 +88,7 @@ h1 {
8388
:host {
8489
::ng-deep {
8590
button {
86-
padding: 0 16px;
91+
padding: 8px;
8792
.mdc-button__label {
8893
color: initial;
8994
}
@@ -96,3 +101,7 @@ h1 {
96101
}
97102
}
98103
}
104+
105+
.limitedIcon {
106+
font-variation-settings: 'FILL' 1 !important;
107+
}

‎src/app/cdk/visibility-selector/visibility-selector/visibility-selector.component.scss-theme.scss‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -57,36 +57,6 @@
5757
border: solid 1px;
5858
}
5959

60-
svg path {
61-
fill: black;
62-
}
63-
.icon-public,
64-
.icon-private,
65-
.icon-limited {
66-
background-color: map-get($background, 'ui-background-lightest');
67-
}
68-
.selectedMenu {
69-
.icon-public {
70-
background: map-get($foreground, visibility-everyone);
71-
svg path {
72-
fill: white;
73-
}
74-
}
75-
76-
.icon-private {
77-
background: map-get($foreground, visibility-private);
78-
svg path {
79-
fill: white;
80-
}
81-
}
82-
.icon-limited {
83-
background: map-get($foreground, visibility-trusted);
84-
svg path {
85-
fill: white;
86-
}
87-
}
88-
}
89-
9060
::ng-deep {
9161
.mat-mdc-menu-item.selectedMenu.private-button:not([disabled]) {
9262
background: rgba(171, 22, 0, 0.05);

0 commit comments

Comments
 (0)