Skip to content

Commit cfbcf67

Browse files
cryptalithcryptalith
committed
PD-3704
1 parent 6b6b455 commit cfbcf67

11 files changed

Lines changed: 109 additions & 59 deletions

File tree

‎projects/orcid-ui-docs/src/app/docs-shell.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ <h1 class="docs-logo">Orcid UI</h1>
2929
Alert Message
3030
</a>
3131
<a routerLink="/panel" routerLinkActive="active"> Panel </a>
32+
<a routerLink="/skeleton-placeholder" routerLinkActive="active">
33+
Skeleton Placeholder
34+
</a>
3235

3336
<div class="nav-section">Directives</div>
3437
<a routerLink="/accent-button" routerLinkActive="active">

‎projects/orcid-ui-docs/src/app/pages/panel-page.component.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,6 @@ export class PanelPageComponent {
4848
showContent: true,
4949
}
5050

51-
get showStackToggle(): boolean {
52-
return (
53-
this.config.hasExternalIds &&
54-
this.config.userVersionPresent &&
55-
!this.config.isPublicRecord
56-
)
57-
}
58-
5951
iconOptions = [
6052
{ value: '', label: 'None' },
6153
{ value: 'work', label: 'work' },

‎projects/orcid-ui-docs/src/app/pages/skeleton-placeholder-page.component.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,18 @@
2121
<mat-label>Height</mat-label>
2222
<input matInput [(ngModel)]="config.height" />
2323
</mat-form-field>
24+
25+
<mat-form-field appearance="outline">
26+
<mat-label>Shimmer Percentage</mat-label>
27+
<input
28+
matInput
29+
type="number"
30+
min="0"
31+
max="100"
32+
[(ngModel)]="config.shimmerPercentage"
33+
/>
34+
<span matSuffix>%</span>
35+
</mat-form-field>
2436
</div>
2537
</div>
2638

@@ -32,6 +44,7 @@ <h4>Playground</h4>
3244
[shape]="config.shape"
3345
[width]="config.width"
3446
[height]="config.height"
47+
[shimmerPercentage]="config.shimmerPercentage"
3548
></orcid-skeleton-placeholder>
3649
</div>
3750
</div>
@@ -42,6 +55,10 @@ <h4>Playground</h4>
4255
<li><code>shape</code>: 'square' | 'circle' (default: 'square')</li>
4356
<li><code>width</code>: string (default: '100%')</li>
4457
<li><code>height</code>: string (default: '100%')</li>
58+
<li>
59+
<code>shimmerPercentage</code>: number (default: 100) - Percentage of
60+
container size that the shimmer effect will cover (centered)
61+
</li>
4562
</ul>
4663
</div>
4764
</app-documentation-page>

‎projects/orcid-ui-docs/src/app/pages/skeleton-placeholder-page.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,6 @@ export class SkeletonPlaceholderPageComponent {
3535
shape: 'square' as 'square' | 'circle',
3636
width: '100px',
3737
height: '100px',
38+
shimmerPercentage: 100,
3839
}
3940
}

‎projects/orcid-ui/src/lib/components/panel/panel.component.html‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
<div class="orcid-panel" [class.orcid-panel--preferred]="isPreferred">
22
<div class="orcid-panel__header">
33
<div class="orcid-panel__header-main">
4-
<button
5-
mat-icon-button
6-
class="featured-affiliation-star"
4+
<div
75
*ngIf="enableStartToggl"
8-
[disabled]="startToggleDisabled"
96
[matTooltip]="startToggleTooltip"
10-
(click)="toggleFeatured.emit()"
7+
class="featured-affiliation-star-wrapper"
118
>
12-
<mat-icon *ngIf="startToggleOn" class="star-filled">star</mat-icon>
13-
<mat-icon *ngIf="!startToggleOn" class="star-outline"
14-
>star_outline</mat-icon
9+
<button
10+
mat-icon-button
11+
class="featured-affiliation-star"
12+
[disabled]="startToggleDisabled"
13+
(click)="!startToggleDisabled && toggleFeatured.emit()"
1514
>
16-
</button>
15+
<mat-icon *ngIf="startToggleOn" class="star-filled">star</mat-icon>
16+
<mat-icon *ngIf="!startToggleOn" class="star-outline"
17+
>star_outline</mat-icon
18+
>
19+
</button>
20+
</div>
1721
<ng-container *ngIf="showIcon">
1822
<mat-icon [class]="iconClass">{{ icon }}</mat-icon>
1923
<div class="vl"></div>

‎projects/orcid-ui/src/lib/components/panel/panel.component.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,27 @@
8787
font: inherit;
8888
}
8989

90-
.featured-affiliation-star {
90+
.featured-affiliation-star-wrapper {
9191
margin-inline-start: -12px;
92+
display: inline-flex;
93+
align-items: center;
94+
justify-content: center;
95+
position: relative;
96+
cursor: pointer;
97+
}
98+
99+
.featured-affiliation-star {
92100
width: 40px;
93101
height: 40px;
94102
display: flex !important;
95103
align-items: center;
96104
justify-content: center;
97105
line-height: normal;
98106

107+
&[disabled] {
108+
pointer-events: none;
109+
}
110+
99111
mat-icon {
100112
line-height: inherit;
101113

‎projects/orcid-ui/src/lib/components/record-header/record-header.component.html‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,8 @@
8686
shape="circle"
8787
width="48px"
8888
height="48px"
89+
[shimmerPercentage]="60"
90+
8991
></orcid-skeleton-placeholder>
9092
</div>
9193
</section>
@@ -160,6 +162,8 @@
160162
class="id-logo-placeholder"
161163
></orcid-skeleton-placeholder>
162164
<orcid-skeleton-placeholder
165+
width="331px"
166+
height="24px"
163167
class="id-text-placeholder"
164168
></orcid-skeleton-placeholder>
165169
</div>
@@ -181,11 +185,14 @@
181185
width="48px"
182186
height="48px"
183187
style="margin-right: 8px"
188+
[shimmerPercentage]="60"
189+
184190
></orcid-skeleton-placeholder>
185191
<orcid-skeleton-placeholder
186192
shape="circle"
187193
width="48px"
188194
height="48px"
195+
[shimmerPercentage]="60"
189196
style="margin-right: 8px"
190197
></orcid-skeleton-placeholder>
191198
</div>
@@ -248,12 +255,13 @@
248255
></orcid-skeleton-placeholder>
249256
</ng-container>
250257

251-
<ng-container *ngIf="!compactMode && !isDesktop">
258+
<ng-container *ngIf="!compactMode">
252259
<orcid-skeleton-placeholder
253260
shape="square"
254-
width="127px"
261+
width="194px"
255262
height="36px"
256263
textHeightSkeleton="14px"
264+
[shimmerPercentage]="70"
257265
></orcid-skeleton-placeholder>
258266
</ng-container>
259267
</div>

‎projects/orcid-ui/src/lib/components/record-header/record-header.component.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -486,9 +486,6 @@ orcid-skeleton-placeholder.id-logo-placeholder {
486486
}
487487

488488
orcid-skeleton-placeholder.id-text-placeholder {
489-
width: 200px !important;
490-
height: 24px !important;
491-
492489
.compact & {
493490
height: 18px !important;
494491
}

‎projects/orcid-ui/src/lib/components/skeleton-placeholder/skeleton-placeholder.component.ts‎

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,27 +10,52 @@ import { CommonModule } from '@angular/common'
1010
`
1111
:host {
1212
display: block;
13-
background-color: rgba(255, 255, 255, 0.2);
14-
animation: pulse 1.5s infinite ease-in-out;
13+
background-color: rgba(255, 255, 255, 0.01);
14+
position: relative;
15+
overflow: hidden;
16+
}
17+
18+
:host::before {
19+
content: '';
20+
position: absolute;
21+
top: var(--shimmer-top, 0);
22+
left: var(--shimmer-left, 0);
23+
width: var(--shimmer-width, 100%);
24+
height: var(--shimmer-height, 100%);
25+
background: linear-gradient(
26+
90deg,
27+
rgba(255, 255, 255, 0.08) 0%,
28+
rgba(255, 255, 255, 0.08) 30%,
29+
rgba(255, 255, 255, 0.12) 50%,
30+
rgba(255, 255, 255, 0.08) 70%,
31+
rgba(255, 255, 255, 0.08) 100%
32+
);
33+
background-size: 200% 100%;
34+
animation: shimmer 2s infinite ease-in-out;
1535
}
1636
1737
:host.circle {
1838
border-radius: 50%;
1939
}
2040
41+
:host.circle::before {
42+
border-radius: 50%;
43+
}
44+
2145
:host.square {
2246
border-radius: 4px;
2347
}
2448
25-
@keyframes pulse {
49+
:host.square::before {
50+
border-radius: 4px;
51+
}
52+
53+
@keyframes shimmer {
2654
0% {
27-
opacity: 0.6;
28-
}
29-
50% {
30-
opacity: 0.3;
55+
background-position: -200% 0;
3156
}
3257
100% {
33-
opacity: 0.6;
58+
background-position: 200% 0;
3459
}
3560
}
3661
`,
@@ -40,6 +65,7 @@ export class SkeletonPlaceholderComponent {
4065
@Input() shape: 'square' | 'circle' = 'square'
4166
@Input() width = '100%'
4267
@Input() height = '100%'
68+
@Input() shimmerPercentage = 100
4369

4470
@HostBinding('class') get hostClasses() {
4571
return this.shape
@@ -52,4 +78,20 @@ export class SkeletonPlaceholderComponent {
5278
@HostBinding('style.height') get hostHeight() {
5379
return this.height
5480
}
81+
82+
@HostBinding('style.--shimmer-width') get shimmerWidth() {
83+
return `${this.shimmerPercentage}%`
84+
}
85+
86+
@HostBinding('style.--shimmer-left') get shimmerLeft() {
87+
return `${(100 - this.shimmerPercentage) / 2}%`
88+
}
89+
90+
@HostBinding('style.--shimmer-height') get shimmerHeight() {
91+
return `${this.shimmerPercentage}%`
92+
}
93+
94+
@HostBinding('style.--shimmer-top') get shimmerTop() {
95+
return `${(100 - this.shimmerPercentage) / 2}%`
96+
}
5597
}

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,6 @@
1515
}"
1616
[attr.id]="'cy-panel-component-' + panelId + '-' + type + '-' + putCode"
1717
>
18-
<div class="featured-affiliation-star" *ngIf="isAffiliation()">
19-
<mat-icon *ngIf="isFeatured" class="star-filled">star</mat-icon>
20-
<mat-icon *ngIf="!isFeatured" class="star-outline">star_outline</mat-icon>
21-
</div>
2218
<div class="featured-work-star" *ngIf="featuredWorksSection">
2319
<mat-icon> star_filled </mat-icon>
2420
</div>
@@ -230,4 +226,4 @@
230226

231227
<ng-template #tempHeader>
232228
<ng-content select="[header]"></ng-content>
233-
</ng-template>
229+
</ng-template>

0 commit comments

Comments
 (0)