Skip to content

Commit d320ddb

Browse files
cryptalithcryptalith
authored
Merge pull request #2688 from ORCID/lmendoza/PD-3696
Lmendoza/pd 3696
2 parents da900f4 + fed6b81 commit d320ddb

File tree

9 files changed

+259
-101
lines changed

9 files changed

+259
-101
lines changed

‎projects/orcid-ui-docs/src/app/pages/record-header-page.component.html‎

Lines changed: 167 additions & 16 deletions
Large diffs are not rendered by default.

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { MatInputModule } from '@angular/material/input'
88
import { MatCheckboxModule } from '@angular/material/checkbox'
99
import { MatSelectModule } from '@angular/material/select'
1010
import { MatTooltipModule } from '@angular/material/tooltip'
11-
import { HeaderBannerComponent } from '@orcid/ui'
11+
import { AccentButtonDirective, HeaderBannerComponent } from '@orcid/ui'
1212

1313
@Component({
1414
selector: 'orcid-record-header-page',
@@ -24,6 +24,7 @@ import { HeaderBannerComponent } from '@orcid/ui'
2424
MatCheckboxModule,
2525
MatSelectModule,
2626
MatTooltipModule,
27+
AccentButtonDirective
2728
],
2829
styleUrls: ['./record-header-page.component.scss'],
2930
templateUrl: './record-header-page.component.html',
@@ -40,5 +41,6 @@ export class RecordHeaderPageComponent {
4041
loading: false,
4142
regionNames: 'Names',
4243
regionOrcidId: 'Orcid iD',
44+
issueBannerText: 'This record has been deactivated',
4345
}
4446
}

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

Lines changed: 32 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,26 @@
1515
>
1616
<div class="orc-row names-wrapper" *ngIf="!loading && title">
1717
<div class="orc-row names">
18-
<orcid-text-with-tooltip [text]="title">
19-
<h1
20-
[ngClass]="{
21-
'orc-ui-font-heading-small': !isDesktop,
22-
'orc-ui-font-heading': isDesktop
23-
}"
24-
>
25-
{{ title }}
26-
</h1>
27-
</orcid-text-with-tooltip>
18+
<h1
19+
[ngClass]="{
20+
'orc-ui-font-heading-small': !isDesktop,
21+
'orc-ui-font-heading': isDesktop
22+
}"
23+
>
24+
{{ title }}
25+
</h1>
2826
<!-- Mobile-only: show other-names above the projected actions -->
2927
<div
3028
class="orc-row other-names mobile"
3129
*ngIf="!isDesktop && subtitle"
3230
>
33-
<orcid-text-with-tooltip [text]="subtitle">
34-
<p class="orc-ui-font-body">{{ subtitle }}</p>
35-
</orcid-text-with-tooltip>
31+
<p class="orc-ui-font-body">{{ subtitle }}</p>
3632
</div>
3733
<ng-content select="[record-header-name-actions]"></ng-content>
3834
</div>
3935
<!-- Desktop-only: other names below names row -->
4036
<div class="orc-row other-names" *ngIf="isDesktop && subtitle">
41-
<orcid-text-with-tooltip [text]="subtitle">
42-
<p class="orc-ui-font-body">{{ subtitle }}</p>
43-
</orcid-text-with-tooltip>
37+
<p class="orc-ui-font-body">{{ subtitle }}</p>
4438
</div>
4539
</div>
4640

@@ -74,26 +68,16 @@
7468
</div>
7569

7670
<div class="issue" *ngIf="!loading">
77-
<h1
78-
[ngClass]="{
79-
'orc-ui-font-heading-small': !isDesktop,
80-
'orc-ui-font-heading': isDesktop
81-
}"
82-
>
83-
<ng-content select="[header-banner-issue]"></ng-content>
84-
</h1>
85-
</div>
86-
87-
<div class="no-public-information" *ngIf="!loading">
88-
<h1
89-
[ngClass]="{
90-
'orc-ui-font-heading-small': !isDesktop,
91-
'orc-ui-font-heading': isDesktop
92-
}"
93-
class="thin-font-heading"
94-
>
95-
<ng-content select="[header-banner-name-private]"></ng-content>
96-
</h1>
71+
<orcid-text-with-tooltip>
72+
<h1
73+
[ngClass]="{
74+
'orc-ui-font-heading-small': !isDesktop,
75+
'orc-ui-font-heading': isDesktop
76+
}"
77+
>
78+
<ng-content select="[header-banner-issue]"></ng-content>
79+
</h1>
80+
</orcid-text-with-tooltip>
9781
</div>
9882
</section>
9983

@@ -117,17 +101,15 @@
117101
dir="ltr"
118102
>
119103
<div class="orc-row" *ngIf="compactMode && !loading && title">
120-
<orcid-text-with-tooltip [text]="title">
121-
<h1
122-
class="orc-ui-font-body-large"
123-
style="font-weight: bold"
124-
[ngClass]="{
125-
mobile: !isDesktop
126-
}"
127-
>
128-
{{ title }}
129-
</h1>
130-
</orcid-text-with-tooltip>
104+
<h1
105+
class="orc-ui-font-body-large"
106+
style="font-weight: bold"
107+
[ngClass]="{
108+
mobile: !isDesktop
109+
}"
110+
>
111+
{{ title }}
112+
</h1>
131113
</div>
132114

133115
<!-- Placeholder to reserve title height during loading in compact mode -->
@@ -220,6 +202,7 @@
220202
<button
221203
*ngIf="canToggleExpanded"
222204
mat-button
205+
accentButton
223206
(click)="onToggleExpanded()"
224207
class="orc-ui-font-body-small"
225208
>
@@ -239,3 +222,5 @@
239222
</div>
240223
</div>
241224
</div>
225+
226+

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

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,16 @@
1818

1919
.record-header {
2020
gap: 32px; // Desktop non-compact: 32px gap
21+
22+
// Desktop non-compact: fix heights for issue and no-public-information banners
23+
// only when there is actual text content (text-with-tooltip.has-text)
24+
.issue:has(orcid-text-with-tooltip.has-text) {
25+
min-height: 72px;
26+
}
27+
28+
.no-public-information:has(orcid-text-with-tooltip.has-text) {
29+
min-height: 72px;
30+
}
2131
}
2232
}
2333

@@ -134,9 +144,7 @@
134144
line-height: 24px; // Match actual content line-height
135145
}
136146

137-
// Mobile non-compact: ensure other-names.mobile is 30px during loading (matches loaded state)
138147
.other-names.mobile {
139-
height: 30px; // Match loaded state height (30px) for mobile non-compact mode
140148
display: flex;
141149
align-items: center;
142150
}
@@ -247,6 +255,18 @@
247255
}
248256
}
249257

258+
// Desktop non-compact: keep the last 48px free so title text doesn't sit under the name-actions button
259+
.record-header-wrapper:not(.mobile) .orcid-id-section .names-wrapper {
260+
padding-right: 48px;
261+
box-sizing: border-box;
262+
}
263+
264+
// Mobile compact: keep the last 48px free so title/ID text doesn't sit under the summary/edit button
265+
.record-header-wrapper.mobile .orcid-id-text-and-buttons.compact {
266+
padding-right: 48px;
267+
box-sizing: border-box;
268+
}
269+
250270
/* Internal layout container for ORCID UI header components.
251271
This mirrors the main app's .container behavior but is scoped to the UI library. */
252272
.orc-container {
@@ -282,6 +302,17 @@
282302
display: flex;
283303
align-items: center;
284304
}
305+
306+
// Mobile non-compact: fix heights for issue and no-public-information banners
307+
// only when there is actual text content (text-with-tooltip.has-text)
308+
&:has(.orcid-id-section) {
309+
.record-header {
310+
.issue:has(orcid-text-with-tooltip.has-text),
311+
.no-public-information:has(orcid-text-with-tooltip.has-text) {
312+
min-height: 144px;
313+
}
314+
}
315+
}
285316
}
286317

287318
.expand_more {
@@ -574,13 +605,6 @@ section#orcid-id {
574605
height: 40px; // Match names row line-height (40px)
575606
}
576607

577-
// Desktop non-compact: ensure orcid-id-section loading placeholder matches loaded state height (92px)
578-
// Only apply to desktop non-compact mode (not mobile)
579-
.record-header-wrapper:not(.mobile)
580-
.orcid-id-section
581-
.names-wrapper.loading-placeholder {
582-
min-height: 92px; // Match loaded state height (92px) for desktop non-compact mode
583-
}
584608

585609
// Mobile non-compact: ensure loading placeholder matches loaded state height
586610
// Mobile structure: names row (h1 + other-names.mobile + edit button) with gap: 8px
@@ -605,8 +629,13 @@ section#orcid-id {
605629
height: 48px;
606630
}
607631

608-
// Mobile normal mode: ensure link-wrapper height matches between loading and loaded states
609-
.record-header-wrapper.mobile .link-wrapper {
632+
// Mobile normal (non-compact) mode: ensure link-wrapper height matches between loading and loaded states
633+
// Scope to non-compact by requiring an .id-wrapper without the .compact class.
634+
.record-header-wrapper.mobile:has(.id-wrapper:not(.compact)) .link-wrapper {
635+
// Ensure this row matches the overall mobile header height (ID row + summary/actions)
636+
// Total height target: 116px
637+
min-height: 116px;
638+
610639
// During loading: ensure orcid-id-text-and-buttons reserves space for buttons-wrapper
611640
section#orcid-id .id-wrapper:not(.compact) {
612641
.orcid-id-text-and-buttons {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { MatDividerModule } from '@angular/material/divider'
55
import { MatButtonModule } from '@angular/material/button'
66
import { MatIconModule } from '@angular/material/icon'
77
import { TextWithTooltipComponent } from '../text-with-tooltip/text-with-tooltip.component'
8+
import { AccentButtonDirective } from '../../directives/accent-button.directive'
89

910
@Component({
1011
selector: 'orcid-header-banner',
@@ -17,6 +18,7 @@ import { TextWithTooltipComponent } from '../text-with-tooltip/text-with-tooltip
1718
MatButtonModule,
1819
MatIconModule,
1920
TextWithTooltipComponent,
21+
AccentButtonDirective,
2022
],
2123
templateUrl: './record-header.component.html',
2224
styleUrls: ['./record-header.component.scss'],

‎projects/orcid-ui/src/lib/components/text-with-tooltip/text-with-tooltip.component.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
OnDestroy,
1010
HostListener,
1111
ChangeDetectorRef,
12+
HostBinding,
1213
} from '@angular/core'
1314
import { CommonModule, NgIf } from '@angular/common'
1415

@@ -216,6 +217,18 @@ export class TextWithTooltipComponent
216217
return this.overflows && !!this.tooltipText
217218
}
218219

220+
@HostBinding('style.display')
221+
get hostDisplay(): string {
222+
// Hide the host entirely when there is no text content,
223+
// so containers like header banners don't reserve empty space.
224+
return this.tooltipText ? 'inline-block' : 'none'
225+
}
226+
227+
@HostBinding('class.has-text')
228+
get hasTextClass(): boolean {
229+
return !!this.tooltipText
230+
}
231+
219232
onMouseEnter(event: MouseEvent) {
220233
if (this.shouldShowTooltip) {
221234
this.updateTooltipPosition(event)

‎src/app/core/header-compact/header-compact.service.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export class HeaderCompactService {
2626
false
2727
)
2828
// Threshold configuration
29-
private readonly baseThresholdDesktop = -205
30-
private readonly baseThresholdMobile = -250
29+
private readonly baseThresholdDesktop = -200
30+
private readonly baseThresholdMobile = -170
3131
private readonly hysteresisBuffer = 0
3232

3333
readonly eligible$ = this._eligibleSubject.asObservable()

‎src/app/record/components/record-header/record-header.component.html‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,6 @@
3939
</ng-container>
4040
</ng-container>
4141

42-
<span
43-
*ngIf="!userInfo?.RECORD_WITH_ISSUES && !bannerTitle && !bannerSubtitle"
44-
header-banner-name-private
45-
>
46-
{{ privateName }}
47-
</span>
4842

4943
<app-record-edit-button
5044
*ngIf="headerCompactEnabled"
@@ -87,9 +81,3 @@
8781
</button>
8882
</ng-container>
8983
</orcid-header-banner>
90-
91-
<!---
92-
On compact mode the record summary is displayed in the record header (here)
93-
on non-compact mode the record summary is displayed in my-orcid page.
94-
--->
95-
<app-record-summary *ngIf="compactMode"></app-record-summary>

‎src/app/record/components/record-summary/record-summary.component.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
:host {
2-
display: block;
3-
max-height: 50vh;
4-
overflow-y: auto;
5-
&.compact-mode {
6-
max-height: 50vh;
7-
}
8-
}
91

102
.summary-container-head {
113
max-width: 1304px;
@@ -23,7 +15,3 @@
2315
margin-top: 4px;
2416
}
2517
}
26-
27-
.summary-container-head-actions {
28-
position: relative;
29-
}

0 commit comments

Comments
 (0)