From d9692a586e10123676d093b6ff173a0886506342 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Tue, 19 Jan 2021 10:42:52 +0200
Subject: [PATCH] fadeout fixes
---
.../hy-desktop-menu-links.scss | 9 ++--
.../hy-desktop-menu-links.tsx | 41 +++++++++----------
2 files changed, 24 insertions(+), 26 deletions(-)
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index 98b7175a..d4926454 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -28,6 +28,7 @@
display: flex;
height: 100%;
}
+
// First level menu items
.desktop-menu-link {
background-color: transparent;
@@ -97,7 +98,6 @@
// On hover: heading icon is turned 180deg and grows bigger.
&--is-active {
- //color: var(--link-blue);
position: relative;
&:hover,
&:focus {
@@ -135,20 +135,21 @@
// Panel with second level menu items and shortcuts.
.hy-desktop-menu-panel {
- display: flex;
+ display: none;
flex-direction: row;
opacity: 0;
transition: none;
position: absolute;
left: 0;
top: 0;
+ z-index: 510;
+ width: 100%;
&--is-active {
background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);
box-shadow: 0 0 20px 0 rgba(14, 104, 139, 0.1) inset;
+ display: flex;
padding-left: 300px;
- width: 100%;
- z-index: 510;
}
&__panel-toggle {
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 38881507..0def22ce 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -45,6 +45,7 @@ export class HyDesktopMenuLinks {
private _headerBorderOffset: number = 0;
private _hoverTimer = null;
+ private _fadeOutTimer = null;
@Watch('dataDesktopLinks')
dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
@@ -74,20 +75,7 @@ export class HyDesktopMenuLinks {
// Close menu lang menu if it's open
this.menuDesktopToggled.emit();
- /*
- @Listen('handleClick', {capture: true}) handleClick() {
- this.menuContainerToggled.emit({
- triggerItem: this.menuLinkId,
- triggerType: 'add',
- });
- const currentParent = this.el.parentNode;
- this.addBreadcrumb.emit({
- url: this.url,
- label: currentParent.parentElement.getAttribute('label'),
- bid: this.menuLinkId,
- });
- }
- */
+ clearTimeout(this._fadeOutTimer);
// Open desktop menu panel
this.isDesktopMenuOpen = true;
@@ -189,15 +177,24 @@ export class HyDesktopMenuLinks {
item.setAttribute('aria-expanded', 'false');
});
- menuPanelItems.forEach((item) => {
- item.classList.remove('hy-desktop-menu-panel--is-active');
- item.setAttribute('aria-hidden', 'true');
-
- (item as HTMLElement).style.opacity = '0';
- if (fadeOut) {
+ if (fadeOut) {
+ menuPanelItems.forEach((item) => {
+ (item as HTMLElement).style.opacity = '0';
(item as HTMLElement).style.transition = 'opacity 1s';
- }
- });
+ });
+
+ this._fadeOutTimer = setTimeout(() => {
+ menuPanelItems.forEach((item) => {
+ item.classList.remove('hy-desktop-menu-panel--is-active');
+ item.setAttribute('aria-hidden', 'true');
+ });
+ }, 2500);
+ } else {
+ menuPanelItems.forEach((item) => {
+ item.classList.remove('hy-desktop-menu-panel--is-active');
+ item.setAttribute('aria-hidden', 'true');
+ });
+ }
}
handleDesktopMenuClose(event) {
--
GitLab