Improves bookmark folder render for context menu

Resolves brave#10054 Auditors: Test Plan:
NejcZdovc · Aug 4, 2017 · 4fb2f73 · 4fb2f73
1 parent d7c40a2
commit 4fb2f73
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 27 deletions.
diff --git a/app/common/state/contextMenuState.js b/app/common/state/contextMenuState.js
@@ -33,6 +33,12 @@ const api = {
  return windowState
  },
 
+ getContextMenu: (windowState) => {
+ windowState = validateState(windowState)
+
+ return windowState.get('contextMenuDetail')
+ },
+
  selectedIndex: (windowState) => {
  const selectedIndex = windowState.getIn(['ui', 'contextMenu', 'selectedIndex'])
  return (typeof selectedIndex === 'object' &&

diff --git a/app/renderer/components/common/contextMenu.js b/app/renderer/components/common/contextMenu.js
@@ -34,7 +34,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
@@ -49,6 +49,24 @@ class ContextMenuItem extends ImmutableComponent {
  get hasAccelerator () {
  return this.accelerator !== null
  }
+
+ getNewCoordinates (e) {
+ 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()
+
+ return {
+ y: boundingRect.top - parentBoundingRect.top - 1 + parentNode.scrollTop
+ }
+ }
+
  onClick (clickAction, shouldHide, e) {
  e.stopPropagation()
  if (clickAction) {
@@ -93,28 +111,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 coordinates = this.getNewCoordinates(e)
+ windowActions.onShowBookmarkFolderMenu(this.props.contextMenuItem.get('folderKey'), coordinates.y, 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 coordinates = this.getNewCoordinates(e)
  openedSubmenuDetails = openedSubmenuDetails.push(Immutable.fromJS({
- y: boundingRect.top - parentBoundingRect.top - 1 + parentNode.scrollTop,
+ y: coordinates.y,
  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
@@ -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({
+ left: 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
@@ -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
  })
  },