Skip to content

Commit f58078c

Browse files
cryptalithcryptalith
authored
Merge pull request #2843 from ORCID/lmendoza/PD-5506-v2
PD-5506 (2)
2 parents bed9a1e + 5e0ea7b commit f58078c

5 files changed

Lines changed: 87 additions & 95 deletions

File tree

‎src/app/layout/header/header.component.html‎

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -100,45 +100,6 @@
100100
[ngClass]="{ container: platform.columns12 }"
101101
tabindex="-1"
102102
>
103-
<ul
104-
class="row mobile-auth-menu"
105-
*ngIf="checkMenuItemRequirements({ desktop: false })"
106-
>
107-
<li
108-
class="col no-gutters"
109-
*ngIf="
110-
checkMenuItemRequirements({ logging: false }) &&
111-
signinRegisterButton
112-
"
113-
>
114-
<button
115-
mat-button
116-
class="top-menu-button sign-in-button"
117-
[ngClass]="{ active: activeMenuItemId === 'header-signin' }"
118-
(click)="onNavClick('signin', 'header-signin')"
119-
>
120-
<ng-container i18n="@@header.signin">Sign in</ng-container
121-
>&nbsp;/&nbsp;<ng-container i18n="@@header.register"
122-
>Register</ng-container
123-
>
124-
</button>
125-
</li>
126-
<li
127-
class="col no-gutters"
128-
*ngIf="checkMenuItemRequirements({ logging: true })"
129-
>
130-
<button
131-
mat-button
132-
class="top-menu-button sign-in-button"
133-
[ngClass]="{ active: activeMenuItemId === 'header-signout' }"
134-
(click)="onNavClick('signout', 'header-signout')"
135-
>
136-
<ng-container i18n="#upperCase@@public-layout.sign_out"
137-
>SIGN OUT</ng-container
138-
>
139-
</button>
140-
</li>
141-
</ul>
142103
<ng-template #recursiveList let-list let-parents="parents">
143104
<ul class="row" *ngIf="!isDesktopThirdLevelMenu(parents)">
144105
<ng-container *ngFor="let item of list">

‎src/app/layout/header/header.component.scss‎

Lines changed: 82 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@ nav {
125125
.top-bar-new-info {
126126
height: 54px;
127127
background-color: var(--orcid-surface, #ffffff);
128-
border-top: 1px solid var(--orcid-color-ui-background-light, #eeeeee);
129128
border-bottom: 1px solid var(--orcid-color-ui-background-light, #eeeeee);
130129

131130
.menu-container {
@@ -303,18 +302,36 @@ nav {
303302
outline: none;
304303
}
305304

306-
&.sign-in-button {
307-
width: 100%;
308-
margin-top: 0;
309-
left: 0;
310-
font-weight: var(--orcid-font-weight-bold, 700);
311-
border-bottom: 1px solid
312-
var(--orcid-color-brand-secondary-dark, #085c77);
313-
[dir='rtl'] & {
314-
left: 0;
315-
right: 0;
305+
&.mat-mdc-button:not(:disabled),
306+
&.mat-button:not(:disabled) {
307+
--mat-button-text-label-text-color: var(
308+
--orcid-color-brand-white,
309+
#ffffff
310+
);
311+
color: var(--orcid-color-brand-white, #ffffff);
312+
313+
.mdc-button__label {
314+
color: inherit;
315+
}
316+
317+
&:hover:not(.active) {
318+
--mat-button-text-label-text-color: var(
319+
--orcid-color-brand-secondary-darkest,
320+
#003449
321+
);
322+
color: var(--orcid-color-brand-secondary-darkest, #003449);
323+
}
324+
325+
&.active,
326+
&.active:hover {
327+
--mat-button-text-label-text-color: var(
328+
--orcid-color-brand-secondary-darkest,
329+
#003449
330+
);
331+
color: var(--orcid-color-brand-secondary-darkest, #003449);
316332
}
317333
}
334+
318335
.button-box {
319336
display: flex;
320337
justify-content: space-between;
@@ -414,19 +431,21 @@ app-user-menu {
414431
text-align: center;
415432
color: var(--orcid-color-brand-secondary-dark, #085c77);
416433
background-color: var(--orcid-surface, #ffffff);
417-
border-bottom-color: var(--orcid-surface, #ffffff);
434+
border-bottom-color: transparent;
418435

419-
&:hover:not(.active),
420-
&.cdk-keyboard-focused:not(.active),
421-
&.cdk-program-focused:not(.active) {
436+
&:hover:not(.active) {
422437
color: var(--orcid-color-brand-secondary-darkest, #003449);
423438
border-bottom-color: var(--orcid-color-brand-secondary-darkest, #003449);
424439
}
425440

441+
&.cdk-keyboard-focused:not(.active):not(:hover),
442+
&.cdk-program-focused:not(.active):not(:hover) {
443+
color: var(--orcid-color-brand-secondary-dark, #085c77);
444+
border-bottom-color: transparent;
445+
}
446+
426447
&.active,
427-
&.active:hover,
428-
&.active.cdk-keyboard-focused,
429-
&.active.cdk-program-focused {
448+
&.active:hover {
430449
color: var(--orcid-color-brand-secondary-darkest, #003449);
431450
border-bottom-color: var(--orcid-color-brand-primary, #a6ce39);
432451
}
@@ -438,12 +457,51 @@ app-user-menu {
438457
outline: none;
439458
}
440459

441-
&.sign-in-button {
442-
font-weight: var(--orcid-font-weight-bold, 700);
443-
}
444-
445-
&.mat-mdc-button,
446-
&.mat-button {
460+
&.mat-mdc-button:not(:disabled),
461+
&.mat-button:not(:disabled) {
447462
border-radius: 0;
463+
--mat-button-text-label-text-color: var(
464+
--orcid-color-brand-secondary-dark,
465+
#085c77
466+
);
467+
color: var(--orcid-color-brand-secondary-dark, #085c77);
468+
469+
.mdc-button__label {
470+
color: inherit;
471+
}
472+
473+
&:hover:not(.active) {
474+
--mat-button-text-label-text-color: var(
475+
--orcid-color-brand-secondary-darkest,
476+
#003449
477+
);
478+
color: var(--orcid-color-brand-secondary-darkest, #003449);
479+
}
480+
481+
&.active,
482+
&.active:hover {
483+
--mat-button-text-label-text-color: var(
484+
--orcid-color-brand-secondary-darkest,
485+
#003449
486+
);
487+
color: var(--orcid-color-brand-secondary-darkest, #003449);
488+
}
489+
490+
&.cdk-keyboard-focused:not(.active):not(:hover),
491+
&.cdk-program-focused:not(.active):not(:hover) {
492+
--mat-button-text-label-text-color: var(
493+
--orcid-color-brand-secondary-dark,
494+
#085c77
495+
);
496+
color: var(--orcid-color-brand-secondary-dark, #085c77);
497+
}
498+
499+
&:focus-visible {
500+
--mat-button-text-label-text-color: var(
501+
--orcid-color-brand-secondary-dark,
502+
#085c77
503+
);
504+
color: var(--orcid-color-brand-secondary-dark, #085c77);
505+
}
448506
}
449507
}

‎src/app/layout/header/header.component.spec.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,9 @@ describe('HeaderComponent', () => {
7171
expect(fixture.nativeElement.querySelector('app-search')).toBeFalsy()
7272
})
7373

74-
it('renders the mobile sign-in/register action before public nav items', () => {
74+
it('renders public nav items without a sign-in/register action', () => {
7575
component.platform = mobilePlatform
7676
component.mobileMenuState = true
77-
component.signinRegisterButton = true
7877
component.user = undefined
7978
fixture.detectChanges()
8079

@@ -86,8 +85,10 @@ describe('HeaderComponent', () => {
8685
button.textContent?.replace(/\s+/g, ' ').trim()
8786
)
8887

89-
expect(buttonLabels[0]).toBe('Sign in / Register')
90-
expect(buttonLabels[1]).toBe('ABOUT')
88+
expect(buttonLabels[0]).toBe('ABOUT')
89+
expect(
90+
buttonLabels.some((label) => label?.includes('Sign in'))
91+
).toBe(false)
9192
})
9293

9394
it('sets active menu item id when a navigable item is clicked', () => {

‎src/app/layout/header/header.component.ts‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ export class HeaderComponent implements OnInit, AfterViewInit, OnDestroy {
5555
menu: ApplicationMenuItem[] = this.createMenuList(menu)
5656
user: UserInfo
5757
togglz: Config
58-
signinRegisterButton = true
5958
labelLogo = $localize`:@@layout.ariaLabelConnectingResearchers:Connecting research and researchers`
6059
labelMenu = $localize`:@@layout.ariaLabelMenu:main menu`
6160

@@ -121,9 +120,6 @@ export class HeaderComponent implements OnInit, AfterViewInit, OnDestroy {
121120

122121
_router.events.subscribe(() => {
123122
const path = location.path()
124-
this.signinRegisterButton =
125-
path !== `/${ApplicationRoutes.signin}` &&
126-
path !== `/${ApplicationRoutes.register}`
127123
this.hideMainMenu = path.indexOf(`/${ApplicationRoutes.home}`) !== -1
128124
})
129125
}
@@ -167,11 +163,6 @@ export class HeaderComponent implements OnInit, AfterViewInit, OnDestroy {
167163
return routeMatch || this.activeMenuItemId === item.id
168164
}
169165

170-
onNavClick(route: string, menuItemId: string) {
171-
this.activeMenuItemId = menuItemId
172-
this.goto(route)
173-
}
174-
175166
private lockBodyScroll() {
176167
if (this._bodyOverflowBeforeLock === null) {
177168
this._bodyOverflowBeforeLock = this.window.document.body.style.overflow

‎src/app/layout/header/menu.ts‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,4 @@ export const menu: ApplicationMenuItemBasic[] = [
3131
label: $localize`:@@public-layout.newsEvents:News & Events`,
3232
route: '',
3333
},
34-
35-
{
36-
id: 'public-layout.sign_in',
37-
label: $localize`:@@public-layout.sign_in:SIGN IN`,
38-
requirements: {
39-
desktop: true,
40-
logging: false,
41-
},
42-
route: 'signin',
43-
},
44-
{
45-
id: 'public-layout.sign_out',
46-
label: $localize`:@@public-layout.sign_out:SIGN OUT`,
47-
requirements: {
48-
desktop: true,
49-
logging: true,
50-
},
51-
route: 'signout',
52-
},
5334
]

0 commit comments

Comments
 (0)