Merge pull request #6327 from brave/fix-10199-2

Persists widget menus when they aren't in the foreground

components/brave_new_tab_ui/components/default/widget/index.tsx

@@ -17,6 +17,7 @@ export interface WidgetProps {
  isCryptoTab?: boolean
  widgetTitle?: string
  hideMenu?: boolean
+ isForeground?: boolean
  onLearnMore?: () => void
  onDisconnect?: () => void
  onRefreshData?: () => void
@@ -31,19 +32,15 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
  constructor (props: P & WidgetProps) {
  super(props)
  this.state = {
- widgetMenuPersist: false
+ widgetMenuPersist: !!props.isForeground
  }
  }
 
- toggleWidgetHover = () => {
- this.setState({ widgetMenuPersist: !this.state.widgetMenuPersist })
- }
-
- persistWidgetHover = () => {
+ persistWidget = () => {
  this.setState({ widgetMenuPersist: true })
  }
 
- unpersistWidgetHover = () => {
+ unpersistWidget = () => {
  this.setState({ widgetMenuPersist: false })
  }
 
@@ -57,6 +54,7 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
  isCryptoTab,
  widgetTitle,
  hideMenu,
+ isForeground,
  onLearnMore,
  onDisconnect,
  onRefreshData
@@ -67,29 +65,28 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
  <StyledWidgetContainer
  menuPosition={menuPosition}
  textDirection={textDirection}
- onMouseLeave={this.unpersistWidgetHover}
  >
  <StyledWidget
  isCrypto={isCrypto}
  isCryptoTab={isCryptoTab}
  widgetMenuPersist={widgetMenuPersist}
  preventFocus={preventFocus}
  >
-  <WrappedComponent {...this.props as P}/>
+ <WrappedComponent {...this.props as P}/>
  </StyledWidget>
  {hideWidget && !hideMenu && !preventFocus &&
  <WidgetMenu
  widgetTitle={widgetTitle}
  onLearnMore={onLearnMore}
  onDisconnect={onDisconnect}
  onRefreshData={onRefreshData}
+ isForeground={isForeground}
  widgetMenuPersist={widgetMenuPersist}
- toggleWidgetHover={this.toggleWidgetHover}
  textDirection={textDirection}
  menuPosition={menuPosition}
  hideWidget={hideWidget as HideWidgetFunction}
- unpersistWidgetHover={this.unpersistWidgetHover}
- onMouseEnter={this.persistWidgetHover}
+ persistWidget={this.persistWidget}
+ unpersistWidget={this.unpersistWidget}
  />
  }
  </StyledWidgetContainer>

components/brave_new_tab_ui/components/default/widget/styles.ts

@@ -23,30 +23,18 @@ export const StyledWidgetContainer = styled<WidgetContainerProps, 'div'>('div')`
  position: relative;
 `
 
-export const StyledWidgetMenuContainer = styled<WidgetVisibilityProps & WidgetPositionProps, 'div'>('div')`
- visibility: hidden;
- pointer-events: none;
+export const StyledWidgetMenuContainer = styled<{}, 'div'>('div')`
  position: absolute;
  top: 5px;
  right: 5px;
-
- ${StyledWidgetContainer}:hover & {
- visibility: visible;
- pointer-events: auto;
- }
-
- // Also hover when menu button has been clicked
- ${ p => p.widgetMenuPersist && `
- visibility: visible;
- pointer-events: auto;
- `}
 `
 
 interface WidgetVisibilityProps {
  widgetMenuPersist: boolean
  preventFocus?: boolean
  isCrypto?: boolean
  isCryptoTab?: boolean
+ isForeground?: boolean
 }
 
 export const StyledWidget = styled<WidgetVisibilityProps, 'div'>('div')`
@@ -76,16 +64,24 @@ interface WidgetMenuProps {
  textDirection: string
 }
 
-export const StyledWidgetMenu = styled<WidgetMenuProps, 'div'>('div')`
+export const StyledWidgetMenu = styled<WidgetVisibilityProps & WidgetMenuProps, 'div'>('div')`
  position absolute;
- width: 166px;
+ width: max-content;
+ min-width: 166px;
  padding: 8px 0;
  background-color: ${p => p.theme.color.contextMenuBackground};
  color: ${p => p.theme.color.contextMenuForeground};
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  top: 48px;
  z-index: 4;
+ visibility: hidden;
+ pointer-events: none;
+
+ ${p => p.widgetMenuPersist && `
+ visibility: visible;
+ pointer-events: auto;
+ `}
 
  @media screen and (min-width: 1150px) {
  ${p => (p.menuPosition === 'right' && p.textDirection === 'ltr') || (p.menuPosition === 'left' && p.textDirection === 'rtl')
@@ -157,6 +153,21 @@ interface WidgetIconProps {
  isBinance?: boolean
 }
 
+export const StyledEllipsis = styled<WidgetVisibilityProps, 'div'>('div')`
+ visibility: hidden;
+ pointer-events: none;
+
+ ${p => (p.widgetMenuPersist || p.isForeground) && `
+ visibility: visible;
+ pointer-events: auto;
+ `}
+
+ ${StyledWidgetContainer}:hover & {
+ visibility: visible;
+ pointer-events: auto;
+ }
+`
+
 export const StyledWidgetIcon = styled<WidgetIconProps, 'div'>('div')`
  height: 13px;
  width: 13px;
@@ -168,5 +179,6 @@ export const StyledWidgetIcon = styled<WidgetIconProps, 'div'>('div')`
  }
 `
 export const StyledSpan = styled<{}, 'span'>('span')`
- height: 13px;
+ text-align: left;
+ margin-right: 10px;
 `

components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx

@@ -5,7 +5,7 @@
 
 import * as React from 'react'
 
-import { StyledWidgetMenuContainer, StyledWidgetMenu, StyledWidgetButton, StyledWidgetIcon, StyledSpan, StyledWidgetLink } from './styles'
+import { StyledWidgetMenuContainer, StyledWidgetMenu, StyledWidgetButton, StyledWidgetIcon, StyledSpan, StyledWidgetLink, StyledEllipsis } from './styles'
 import { IconButton } from '../../default'
 import EllipsisIcon from './assets/ellipsis'
 import HideIcon from './assets/hide'
@@ -18,12 +18,12 @@ interface Props {
  menuPosition: 'right' | 'left'
  hideWidget: () => void
  textDirection: string
- toggleWidgetHover: () => void
  widgetMenuPersist: boolean
- unpersistWidgetHover: () => void
+ persistWidget: () => void
+ unpersistWidget: () => void
  widgetTitle?: string
+ isForeground?: boolean
  onLearnMore?: () => void
- onMouseEnter: () => void
  onDisconnect?: () => void
  onRefreshData?: () => void
 }
@@ -44,7 +44,7 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
 
  handleClickOutsideMenu = (event: Event) => {
  if (this.settingsMenuRef && !this.settingsMenuRef.current.contains(event.target)) {
- this.props.unpersistWidgetHover()
+ this.props.unpersistWidget()
  this.closeMenu()
  }
  }
@@ -58,6 +58,10 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
  }
 
  toggleMenu = () => {
+ if (!this.state.showMenu) {
+ this.props.persistWidget()
+ }
+
  this.setState({ showMenu: !this.state.showMenu })
  }
 
@@ -67,7 +71,7 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
 
  unmountWidget = () => {
  this.props.hideWidget()
- this.props.unpersistWidgetHover()
+ this.props.unpersistWidget()
  this.closeMenu()
  }
 
@@ -82,25 +86,25 @@ export default class WidgetMenu extends React.PureComponent<Props, State> {
  textDirection,
  widgetMenuPersist,
  widgetTitle,
+ isForeground,
  onLearnMore,
- onMouseEnter,
  onDisconnect,
  onRefreshData
  } = this.props
  const { showMenu } = this.state
  const hideString = widgetTitle ? `${getLocale('hide')} ${widgetTitle}` : getLocale('hide')
 
  return (
- <StyledWidgetMenuContainer
- menuPosition={menuPosition}
- innerRef={this.settingsMenuRef}
- widgetMenuPersist={widgetMenuPersist}
- onMouseEnter={onMouseEnter}
- >
- <IconButton isClickMenu={true} onClick={this.toggleMenu}><EllipsisIcon/></IconButton>
+ <StyledWidgetMenuContainer innerRef={this.settingsMenuRef}>
+ <StyledEllipsis widgetMenuPersist={widgetMenuPersist} isForeground={isForeground}>
+ <IconButton isClickMenu={true} onClick={this.toggleMenu}>
+ <EllipsisIcon/>
+ </IconButton>
+ </StyledEllipsis>
  {showMenu && <StyledWidgetMenu
  textDirection={textDirection}
  menuPosition={menuPosition}
+ widgetMenuPersist={widgetMenuPersist}
  >
  <StyledWidgetButton
  onClick={this.unmountWidget}

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -719,6 +719,7 @@ class NewTabPage extends React.Component<Props, State> {
  menuPosition={'left'}
  isCrypto={true}
  isCryptoTab={!showContent}
+ isForeground={showContent}
  textDirection={textDirection}
  preventFocus={false}
  hideWidget={this.toggleShowRewards}
@@ -781,6 +782,7 @@ class NewTabPage extends React.Component<Props, State> {
  isCryptoTab={!showContent}
  menuPosition={'left'}
  widgetTitle={'Binance'}
+ isForeground={showContent}
  textDirection={textDirection}
  preventFocus={false}
  hideWidget={this.toggleShowBinance}
@@ -828,6 +830,7 @@ class NewTabPage extends React.Component<Props, State> {
  isCryptoTab={!showContent}
  menuPosition={'left'}
  widgetTitle={'Gemini'}
+ isForeground={showContent}
  textDirection={textDirection}
  preventFocus={false}
  hideWidget={this.toggleShowGemini}