From 928e93aeeca718f12563e1186378123c4441cb6e Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Fri, 4 Aug 2017 15:35:42 -0500 Subject: [PATCH] Improves bookmark folder render for context menu Resolves #10054 Auditors: Test Plan: --- app/common/state/contextMenuState.js | 6 +++ .../common/contextMenu/contextMenuItem.js | 48 +++++++++++-------- app/renderer/reducers/contextMenuReducer.js | 25 +++++++--- js/actions/windowActions.js | 5 +- 4 files changed, 57 insertions(+), 27 deletions(-) diff --git a/app/common/state/contextMenuState.js b/app/common/state/contextMenuState.js index d278e679561..31840aa9830 100644 --- a/app/common/state/contextMenuState.js +++ b/app/common/state/contextMenuState.js @@ -2,6 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ +const Immutable = require('immutable') const assert = require('assert') const { makeImmutable, isMap } = require('./immutableUtil') @@ -33,6 +34,11 @@ const api = { return windowState }, + getContextMenu: (windowState) => { + windowState = validateState(windowState) + return windowState.get('contextMenuDetail', Immutable.Map()) + }, + selectedIndex: (windowState) => { const selectedIndex = windowState.getIn(['ui', 'contextMenu', 'selectedIndex']) return (typeof selectedIndex === 'object' && diff --git a/app/renderer/components/common/contextMenu/contextMenuItem.js b/app/renderer/components/common/contextMenu/contextMenuItem.js index 5c7c3d9637c..2d13f130494 100644 --- a/app/renderer/components/common/contextMenu/contextMenuItem.js +++ b/app/renderer/components/common/contextMenu/contextMenuItem.js @@ -28,7 +28,7 @@ class ContextMenuItem extends ImmutableComponent { return this.props.contextMenuItem.get('items') } get hasSubmenu () { - return this.submenu && this.submenu.size > 0 + return (this.submenu && this.submenu.size > 0) || this.props.contextMenuItem.has('folderKey') } get isMulti () { return this.items && this.items.size > 0 @@ -43,6 +43,23 @@ class ContextMenuItem extends ImmutableComponent { get hasAccelerator () { return this.accelerator !== null } + + getYAxis (e) { + let node = e.target + // TODO we shouldn't be relaying on classList + while (node && node.classList && !node.classList.contains('contextMenuItem')) { + node = node.parentNode + } + let parentNode = node.parentNode + while (parentNode && parentNode.classList && !parentNode.classList.contains('contextMenu')) { + parentNode = parentNode.parentNode + } + const parentBoundingRect = parentNode.getBoundingClientRect() + const boundingRect = node.getBoundingClientRect() + + return boundingRect.top - parentBoundingRect.top - 1 + parentNode.scrollTop + } + onClick (clickAction, shouldHide, e) { e.stopPropagation() if (clickAction) { @@ -87,28 +104,21 @@ class ContextMenuItem extends ImmutableComponent { } onMouseEnter (e) { - let openedSubmenuDetails = this.props.contextMenuDetail.get('openedSubmenuDetails') - openedSubmenuDetails = openedSubmenuDetails - ? openedSubmenuDetails.splice(this.props.submenuIndex, this.props.contextMenuDetail.get('openedSubmenuDetails').size) - : new Immutable.List() - - if (this.hasSubmenu) { - let node = e.target - while (node && node.classList && !node.classList.contains('contextMenuItem')) { - node = node.parentNode - } - let parentNode = node.parentNode - while (parentNode && parentNode.classList && !parentNode.classList.contains('contextMenu')) { - parentNode = parentNode.parentNode - } - const parentBoundingRect = parentNode.getBoundingClientRect() - const boundingRect = node.getBoundingClientRect() + if (this.props.contextMenuItem.has('folderKey')) { + const yAxis = this.getYAxis(e) + windowActions.onShowBookmarkFolderMenu(this.props.contextMenuItem.get('folderKey'), yAxis, null, this.props.submenuIndex) + } else if (this.hasSubmenu) { + let openedSubmenuDetails = this.props.contextMenuDetail.get('openedSubmenuDetails') + openedSubmenuDetails = openedSubmenuDetails + ? openedSubmenuDetails.splice(this.props.submenuIndex, this.props.contextMenuDetail.get('openedSubmenuDetails').size) + : new Immutable.List() + const yAxis = this.getYAxis(e) openedSubmenuDetails = openedSubmenuDetails.push(Immutable.fromJS({ - y: boundingRect.top - parentBoundingRect.top - 1 + parentNode.scrollTop, + y: yAxis, template: this.submenu })) + windowActions.setContextMenuDetail(this.props.contextMenuDetail.set('openedSubmenuDetails', openedSubmenuDetails)) } - windowActions.setContextMenuDetail(this.props.contextMenuDetail.set('openedSubmenuDetails', openedSubmenuDetails)) } getLabelForItem (item) { const label = item.get('label') diff --git a/app/renderer/reducers/contextMenuReducer.js b/app/renderer/reducers/contextMenuReducer.js index 87fe93f1f63..fd0db84763a 100644 --- a/app/renderer/reducers/contextMenuReducer.js +++ b/app/renderer/reducers/contextMenuReducer.js @@ -464,7 +464,7 @@ const bookmarkItemsInit = (state, items) => { } } if (isFolder) { - templateItem.submenu = showBookmarkFolderInit(state, siteKey) + templateItem.folderKey = siteKey } template.push(templateItem) } @@ -509,11 +509,24 @@ const onShowBookmarkFolderMenu = (state, action) => { state = validateState(state) const menuTemplate = showBookmarkFolderInit(state, action.get('bookmarkKey')) - state = contextMenuState.setContextMenu(state, makeImmutable({ - left: action.get('left'), - top: action.get('top'), - template: menuTemplate - })) + if (action.get('submenuIndex') != null) { + let contextMenu = contextMenuState.getContextMenu(state) + let openedSubmenuDetails = contextMenu.get('openedSubmenuDetails', Immutable.List()) + + openedSubmenuDetails = openedSubmenuDetails + .splice(action.get('submenuIndex'), openedSubmenuDetails.size) + .push(makeImmutable({ + y: action.get('left'), + template: menuTemplate + })) + state = contextMenuState.setContextMenu(state, contextMenu.set('openedSubmenuDetails', openedSubmenuDetails)) + } else { + state = contextMenuState.setContextMenu(state, makeImmutable({ + left: action.get('left'), + top: action.get('top'), + template: menuTemplate + })) + } return state } diff --git a/js/actions/windowActions.js b/js/actions/windowActions.js index db4c40e04e6..181bd3a4688 100644 --- a/js/actions/windowActions.js +++ b/js/actions/windowActions.js @@ -1230,12 +1230,13 @@ const windowActions = { }) }, - onShowBookmarkFolderMenu: function (bookmarkKey, left, top) { + onShowBookmarkFolderMenu: function (bookmarkKey, left, top, submenuIndex) { dispatch({ actionType: windowConstants.WINDOW_ON_SHOW_BOOKMARK_FOLDER_MENU, bookmarkKey, left, - top + top, + submenuIndex }) },