Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(header): scrolling behaviour #1252

Open
wants to merge 17 commits into
base: next
Choose a base branch
from
Open

fix(header): scrolling behaviour #1252

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
435190a
fix(header): remove obsolete background scroll
mivaylo Feb 16, 2024
e5fb87f
fix(header): clarity.api.md file
mivaylo Feb 16, 2024
c6b775b
fix(header): make menus in story longer
mivaylo Feb 16, 2024
17a6c33
fix(header): add scrolls for subnavs
mivaylo Feb 19, 2024
fb72798
fix(header): make close button visible
mivaylo Feb 21, 2024
9c4d2bf
fix(header): use scrolling service only in directive
mivaylo Feb 22, 2024
d3ff19e
fix(header): update api.md
mivaylo Feb 22, 2024
f46a322
Merge branch 'next' into cde-1659-header-scrolling
mivaylo Feb 22, 2024
9a30836
fix(header): incorrect spacing in header-nav
mivaylo Feb 26, 2024
d43075b
fix(header): make use of tokens
mivaylo Feb 26, 2024
6a14785
fix(header): make use of tokens
mivaylo Feb 27, 2024
aae2062
fix(header): make use of tokens
mivaylo Feb 27, 2024
d01216b
fix(header): make use of tokens
mivaylo Feb 27, 2024
bb6571e
fix(header): enhance query selector
mivaylo Feb 27, 2024
37e1764
fix(header): update api.md
mivaylo Feb 27, 2024
b1cd057
Merge branch 'next' into cde-1659-header-scrolling
mivaylo Jun 13, 2024
8e661f7
chore: update visual snapshots for `cde-1659-header-scrolling`
web-flow Jun 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions .storybook/stories/header/header.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,18 @@ const defaultStory: Story = args => ({
<a href="javascript://" class="nav-link nav-text">Home</a>
<a href="javascript://" class="nav-link nav-text">About</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
mivaylo marked this conversation as resolved.
Show resolved Hide resolved
<a href="javascript://" class="nav-link nav-text">Services</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
<a href="javascript://" class="nav-link nav-text">Services</a>
</div>
<div class="header-actions">
<a href="javascript://" class="nav-link">
Expand All @@ -45,6 +57,48 @@ const defaultStory: Story = args => ({
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript://">Tenants</a>
</li>
</ul>
</nav>
</clr-main-container>
Expand Down
4 changes: 2 additions & 2 deletions projects/angular/clarity.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2748,7 +2748,7 @@ export class ClrNavigationModule {

// @public (undocumented)
export class ClrNavLevel implements OnInit {
constructor(platformId: any, cdkTrapFocus: ClrStandaloneCdkTrapFocus, responsiveNavService: ResponsiveNavigationService, elementRef: ElementRef<HTMLElement>, renderer: Renderer2, injector: Injector);
constructor(platformId: any, cdkTrapFocus: ClrStandaloneCdkTrapFocus, responsiveNavService: ResponsiveNavigationService, elementRef: ElementRef<HTMLElement>, renderer: Renderer2, scrollingService: ScrollingService, injector: Injector);
// (undocumented)
addNavClass(level: number): void;
// (undocumented)
Expand Down Expand Up @@ -5141,7 +5141,7 @@ export class ÇlrWrappedRow implements DynamicWrapper, AfterViewInit, OnDestroy
// Warnings were encountered during analysis:
//
// dist/clr-angular/button/button-group/button-group.d.ts:59:217 - (ae-forgotten-export) The symbol "i1_6" needs to be exported by the entry point index.d.ts
// dist/clr-angular/layout/nav/nav-level.d.ts:35:185 - (ae-forgotten-export) The symbol "i1_39" needs to be exported by the entry point index.d.ts
// dist/clr-angular/layout/nav/nav-level.d.ts:37:185 - (ae-forgotten-export) The symbol "i1_39" needs to be exported by the entry point index.d.ts
// dist/clr-angular/utils/popover/popover-host.directive.d.ts:5:114 - (ae-forgotten-export) The symbol "i1_7" needs to be exported by the entry point index.d.ts

// (No @packageDocumentation comment for this package)
Expand Down
17 changes: 14 additions & 3 deletions projects/angular/src/layout/nav/_responsive-nav.clarity.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,11 @@
.subnav.clr-nav-level-2,
.sub-nav.clr-nav-level-2,
.clr-vertical-nav.clr-nav-level-2 {
.nav {
overflow-y: scroll;
}
box-shadow: none;

@include sliding-nav-positioning(0, 0, 0, auto);
transform: translateX(responsive-nav-variables.$clr-sliding-panel-width);
transition: responsive-nav-variables.$clr-sliding-panel-animation;
Expand Down Expand Up @@ -392,7 +397,9 @@
left: 0;
overflow: hidden;
width: responsive-nav-variables.$clr-sliding-panel-width;
background: vertical-nav-variables.$clr-vertical-nav-bg-color;
max-width: responsive-nav-variables.$clr-sliding-panel-width;
margin-left: calc(-1 * var(--scrollbar-width));
z-index: responsive-nav-variables.$clr-sliding-panel-z-index + 1;
padding-left: tokens.$cds-global-space-9;

Expand Down Expand Up @@ -432,7 +439,7 @@
.subnav.clr-nav-level-1,
.sub-nav.clr-nav-level-1,
.clr-vertical-nav.clr-nav-level-1 {
padding-top: calc(header-variables.$clr-header-height + tokens.$cds-global-space-9);
padding-top: tokens.$cds-global-space-10;
transform: translateX(0);
transition: responsive-nav-variables.$clr-sliding-panel-animation;
}
Expand Down Expand Up @@ -464,7 +471,12 @@
.subnav.clr-nav-level-1,
.sub-nav.clr-nav-level-1,
.clr-vertical-nav.clr-nav-level-1 {
overflow: inherit;
overflow-y: auto;
overflow-x: visible;
// This value equals the height of the branding (branding is not part of the scrollable area)
margin-top: mixins.baselinePx(52);
max-height: calc(100% - #{mixins.baselinePx(52)});

width: responsive-nav-variables.$clr-sliding-panel-width;
max-width: responsive-nav-variables.$clr-sliding-panel-width;

Expand Down Expand Up @@ -528,7 +540,6 @@
.subnav.clr-nav-level-1,
.sub-nav.clr-nav-level-1,
.clr-vertical-nav.clr-nav-level-1 {
overflow: inherit;
width: responsive-nav-variables.$clr-sliding-panel-width-sm;
max-width: responsive-nav-variables.$clr-sliding-panel-width-sm;
}
Expand Down
40 changes: 40 additions & 0 deletions projects/angular/src/layout/nav/nav-level.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { filter } from 'rxjs/operators';
import { commonStringsDefault } from '../../utils';
import { LARGE_BREAKPOINT } from '../../utils/breakpoints/breakpoints';
import { ClrStandaloneCdkTrapFocus } from '../../utils/focus/focus-trap';
import { ScrollingService } from '../../utils/scrolling/scrolling-service';
import { ResponsiveNavigationService } from './providers/responsive-navigation.service';
import { ResponsiveNavCodes } from './responsive-nav-codes';

Expand All @@ -41,9 +42,21 @@ const createCdsCloseButton = (document: Document, ariaLabel: string) => {
return cdsCloseButton;
};

const createOrGetNavElementWrapperForLinks = (document: Document) => {
let navHtmlElementWrapper = document.querySelector('nav.header-nav.clr-nav-level-1');

if (!navHtmlElementWrapper) {
navHtmlElementWrapper = document.createElement('nav');
navHtmlElementWrapper.className = 'header-nav clr-nav-level-1';
}

return navHtmlElementWrapper;
};

@Directive({
selector: '[clr-nav-level]',
hostDirectives: [ClrStandaloneCdkTrapFocus],
providers: [ScrollingService],
})
export class ClrNavLevel implements OnInit {
@Input('clr-nav-level') _level: number;
Expand All @@ -59,6 +72,7 @@ export class ClrNavLevel implements OnInit {
private responsiveNavService: ResponsiveNavigationService,
private elementRef: ElementRef<HTMLElement>,
private renderer: Renderer2,
private scrollingService: ScrollingService,
injector: Injector
) {
if (isPlatformBrowser(platformId)) {
Expand Down Expand Up @@ -186,6 +200,15 @@ export class ClrNavLevel implements OnInit {
}

open(): void {
this.scrollingService.stopScrolling();

if (this.level === ResponsiveNavCodes.NAV_LEVEL_1) {
this.elementRef.nativeElement.className = 'clr-nav-level-1';

this.wrapLinksInsideNavElement();
this.insertCloseButtonBeforeNav();
}

this._isOpen = true;
this.showNavigation();
this.cdkTrapFocus.enabled = true;
Expand All @@ -198,6 +221,7 @@ export class ClrNavLevel implements OnInit {
this.hideNavigation();
this.cdkTrapFocus.enabled = false;
this.hideCloseButton();
this.scrollingService.resumeScrolling();
this.responsiveNavService.sendControlMessage(ResponsiveNavCodes.NAV_CLOSE, this.level);
}

Expand All @@ -220,4 +244,20 @@ export class ClrNavLevel implements OnInit {
this.renderer.setAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'aria-hidden', 'false');
this.renderer.removeAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'hidden');
}

private wrapLinksInsideNavElement() {
const navLinksWrapper = createOrGetNavElementWrapperForLinks(document);
const navLinks = this.elementRef.nativeElement.querySelectorAll('.clr-nav-level-1 .nav-link');

navLinks.forEach(navLink => {
this.renderer.appendChild(navLinksWrapper, navLink);
});

this.renderer.appendChild(this.elementRef.nativeElement, navLinksWrapper);
}

private insertCloseButtonBeforeNav() {
const closeButton = createCdsCloseButton(this._document, this.closeButtonAriaLabel);
this.renderer.listen(closeButton, 'click', this.close.bind(this));
}
}
Loading