From 46af5b8a1bcfbf294c86f57d598eca13ffe39de0 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Mon, 18 Jan 2021 13:12:49 +0200
Subject: [PATCH] fading out and delay effects on desktop menu panel
---
.../hy-desktop-menu-links.scss | 26 ++++++++------
.../hy-desktop-menu-links.tsx | 35 ++++++++-----------
2 files changed, 31 insertions(+), 30 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 856cd528..2838469e 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
@@ -97,14 +97,19 @@
// On hover: heading icon is turned 180deg and grows bigger.
&--is-active {
- color: var(--link-blue);
+ //color: var(--link-blue);
position: relative;
+ &:hover {
+ color: var(--link-blue);
+ hy-icon {
+ svg {
+ fill: var(--link-blue);
+ }
+ }
+ }
hy-icon {
transform: rotateX(180deg);
- svg {
- fill: var(--link-blue);
- }
}
.desktop-menu-link__label--is-active-trail::after {
@@ -129,16 +134,17 @@
// Panel with second level menu items and shortcuts.
.hy-desktop-menu-panel {
- display: none;
+ display: flex;
+ flex-direction: row;
+ opacity: 0;
+ transition: none;
+ position: absolute;
+ left: 0;
+ top: 0;
&--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;
- flex-direction: row;
- opacity: 1;
- position: absolute;
- left: 0;
padding-left: 300px;
width: 100%;
z-index: 510;
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 be6bb178..43b970e5 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
@@ -88,12 +88,15 @@ export class HyDesktopMenuLinks {
menuPanelItems.forEach((item) => {
item.classList.remove('hy-desktop-menu-panel--is-active');
item.setAttribute('aria-hidden', 'true');
+ (item as HTMLElement).style.transition = 'none';
});
// Add active classes to the currently active item and its sibling element.
activeMenuItem.classList.add('desktop-menu-link--is-active');
activeMenuItem.setAttribute('aria-expanded', 'true');
activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active');
+ (activeMenuItemSibling as HTMLElement).style.opacity = '1';
+
if (this.hasToolbar) {
activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active--has-toolbar');
}
@@ -118,17 +121,6 @@ export class HyDesktopMenuLinks {
let rect = activeMenuItemSibling.getBoundingClientRect();
this.showBackdropShadow('open', rect.bottom);
- /*
- if (this.el.parentElement.classList.contains('hy-site-header--sticky-active')) {
- console.log(rect.top + ' ' + rect.height + ' ' + rect.bottom) ;
- this.showBackdropShadow('open', parseInt(headerHeight)+rect.height);
- }
- else {
- console.log(rect.top + ' ' + rect.height + ' ' + rect.bottom) ;
- this.showBackdropShadow('open', rect.bottom);
- }
- */
-
// Position submenu block under the activated top menu item.
let activeButtonRect = activeMenuItem.getBoundingClientRect();
const menuPanelLeftPosition = activeButtonRect.left - this._submenuLeftMargin;
@@ -154,20 +146,17 @@ export class HyDesktopMenuLinks {
}
}
- closePanel() {
+ closePanel(fadeOut = false) {
this.isDesktopMenuOpen = false;
this.currenOpenMenuId = 0;
this.showBackdropShadow();
- this.clearPanelItemsStatus();
+ this.clearPanelItemsStatus(fadeOut);
+ clearTimeout(this._hoverTimer);
}
- clearPanelItemsStatus() {
+ clearPanelItemsStatus(fadeOut = false) {
const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
- //const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[aria-expanded="true"]`) as HTMLElement;
-
- // Return focus to the button of the last desktop panel that was active.
- //if (activeMenuItem !== null) activeMenuItem.focus();
//Show is-active-trail underlining
const activeTrailMenuItem = this.el.shadowRoot.querySelector(
@@ -182,14 +171,21 @@ export class HyDesktopMenuLinks {
item.classList.remove('desktop-menu-link--is-active');
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) {
+ (item as HTMLElement).style.transition = 'opacity 1s';
+ }
});
}
handleDesktopMenuClose(event) {
- this.closePanel();
+ let fadeOut = true;
+ this.closePanel(fadeOut);
event.stopPropagation();
}
@@ -216,7 +212,6 @@ export class HyDesktopMenuLinks {
if (leaveEvent.clientY < headerHeight - 4) {
this.closePanel();
- clearTimeout(this._hoverTimer);
}
event.stopPropagation();
--
GitLab