diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-11 03:10:14 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-11 03:10:14 +0300 |
commit | 9ae44f98c841d785b52087348de2e8cba9a13a2d (patch) | |
tree | 76a2b21d1c14266c4c13a6f057f0374da4e064ba /app/assets/javascripts/fly_out_nav.js | |
parent | b20c558db21c0ba8f033217bd6bc2b470716a105 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/fly_out_nav.js')
-rw-r--r-- | app/assets/javascripts/fly_out_nav.js | 25 |
1 files changed, 13 insertions, 12 deletions
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js index 07ce2f3f93d..893b74a9895 100644 --- a/app/assets/javascripts/fly_out_nav.js +++ b/app/assets/javascripts/fly_out_nav.js @@ -1,7 +1,9 @@ import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar'; +const isRefactoring = document.body.classList.contains('sidebar-refactoring'); const HIDE_INTERVAL_TIMEOUT = 300; +const COLLAPSED_PANEL_WIDTH = isRefactoring ? 48 : 50; const IS_OVER_CLASS = 'is-over'; const IS_ABOVE_CLASS = 'is-above'; const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out'; @@ -22,12 +24,7 @@ export const setOpenMenu = (menu = null) => { export const slope = (a, b) => (b.y - a.y) / (b.x - a.x); -let headerHeight = 50; - -export const getHeaderHeight = () => headerHeight; -const setHeaderHeight = () => { - headerHeight = sidebar.offsetTop; -}; +export const getHeaderHeight = () => sidebar?.offsetTop || 0; export const isSidebarCollapsed = () => sidebar && sidebar.classList.contains(SIDEBAR_COLLAPSED_CLASS); @@ -87,14 +84,20 @@ export const hideMenu = (el) => { }; export const moveSubItemsToPosition = (el, subItems) => { + const hasSubItems = subItems.parentNode.querySelector('.has-sub-items'); + const header = subItems.querySelector('.fly-out-top-item'); const boundingRect = el.getBoundingClientRect(); - const top = calculateTop(boundingRect, subItems.offsetHeight); - const left = sidebar ? sidebar.offsetWidth : 50; + const left = sidebar ? sidebar.offsetWidth : COLLAPSED_PANEL_WIDTH; + let top = calculateTop(boundingRect, subItems.offsetHeight); + if (isRefactoring && hasSubItems) { + top -= header.offsetHeight; + } else if (isRefactoring) { + top = boundingRect.top; + } const isAbove = top < boundingRect.top; subItems.classList.add('fly-out-list'); - subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign - + subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - getHeaderHeight()}px, 0)`; // eslint-disable-line no-param-reassign const subItemsRect = subItems.getBoundingClientRect(); menuCornerLocs = [ @@ -188,8 +191,6 @@ export default () => { }); } - requestIdleCallback(setHeaderHeight); - items.forEach((el) => { const subItems = el.querySelector('.sidebar-sub-level-items'); |