Merge pull request #6372 from brave/menu-fixes-1.13

NTP Settings Dashboard, widget menu fixes (1.13)

components/brave_new_tab_ui/components/default/addCard/index.tsx

@@ -17,16 +17,17 @@ import AddCardIcon from './assets/add-icon'
 
 interface Props {
  isAlone: boolean
+ stackPosition: number
  onAddCard: () => void
 }
 
 class AddCard extends React.PureComponent<Props, {}> {
 
  render () {
- const { isAlone, onAddCard } = this.props
+ const { isAlone, onAddCard, stackPosition } = this.props
 
  return (
- <StyledTitleTab onClick={onAddCard} isAlone={isAlone}>
+ <StyledTitleTab onClick={onAddCard} isAlone={isAlone} stackPosition={stackPosition}>
  <Header>
  <StyledTitle>
  <StyledAddIcon>

components/brave_new_tab_ui/components/default/binance/index.tsx

@@ -137,6 +137,7 @@ interface Props {
  disconnectInProgress: boolean
  authInvalid: boolean
  selectedView: string
+ stackPosition: number
  onShowContent: () => void
  onBuyCrypto: (coin: string, amount: string, fiat: string) => void
  onBinanceUserTLD: (userTLD: NewTab.BinanceTLD) => void
@@ -605,10 +606,10 @@ class Binance extends React.PureComponent<Props, State> {
  }
 
  renderTitleTab () {
- const { onShowContent } = this.props
+ const { onShowContent, stackPosition } = this.props
 
  return (
- <StyledTitleTab onClick={onShowContent}>
+ <StyledTitleTab onClick={onShowContent} stackPosition={stackPosition}>
  {this.renderTitle()}
  </StyledTitleTab>
  )

components/brave_new_tab_ui/components/default/gemini/index.tsx

@@ -123,6 +123,7 @@ interface Props {
  tickerPrices: Record<string, string>
  disconnectInProgress: boolean
  authInvalid: boolean
+ stackPosition: number
  onShowContent: () => void
  onDisableWidget: () => void
  onValidAuthCode: () => void
@@ -1077,10 +1078,10 @@ class Gemini extends React.PureComponent<Props, State> {
  }
 
  renderTitleTab () {
- const { onShowContent } = this.props
+ const { onShowContent, stackPosition } = this.props
 
  return (
- <StyledTitleTab onClick={onShowContent}>
+ <StyledTitleTab onClick={onShowContent} stackPosition={stackPosition}>
  {this.renderTitle()}
  </StyledTitleTab>
  )

components/brave_new_tab_ui/components/default/rewards/index.tsx

@@ -57,6 +57,7 @@ export interface RewardsProps {
  showBrandedWallpaperNotification: boolean
  brandedWallpaperData?: NewTab.BrandedWallpaper
  showContent: boolean
+ stackPosition: number
  onShowContent: () => void
  onCreateWallet: () => void
  onEnableAds: () => void
@@ -330,10 +331,10 @@ class Rewards extends React.PureComponent<RewardsProps, {}> {
  }
 
  renderTitleTab = () => {
- const { onShowContent } = this.props
+ const { onShowContent, stackPosition } = this.props
 
  return (
- <StyledTitleTab onClick={onShowContent}>
+ <StyledTitleTab onClick={onShowContent} stackPosition={stackPosition}>
  {this.renderTitle()}
  </StyledTitleTab>
  )

components/brave_new_tab_ui/components/default/settings/index.ts

@@ -21,14 +21,15 @@ export const SettingsMenu = styled<Props, 'div'>('div')`
  color: ${p => p.theme.color.contextMenuForeground};
  border-radius: 8px;
  padding: 24px;
+ padding-bottom: 0px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.24);
  font-family: ${p => p.theme.fontFamily.body};
 `
 
 export const SettingsContent = styled<{}, 'div'>('div')`
  display: grid;
  grid-template-columns: auto 1fr;
- grid-gap: 40px;
+ grid-gap: 20px;
 
  @media screen and (max-width: 1150px) {
  grid-gap: 0px;
@@ -181,11 +182,20 @@ export const SettingsSidebarButton = styled<SettingsSidebarButtonProps, 'button'
  color: ${p => p.theme.color.brandBrave};
  }
  }
+
+ &:active {
+ outline: none;
+ }
+
+ &:focus {
+ outline-color: ${p => p.theme.color.brandBrave};
+ outline-width: 1px;
+ }
 `
 
 export const SettingsFeatureBody = styled<{}, 'section'>('section')`
- padding: 10px 16px 0;
- height: 305px;
+ padding: 10px 0;
+ height: 360px;
  overflow-y: scroll;
 `
 
@@ -272,28 +282,33 @@ export const SettingsWrapper = styled<SettingsWrapperProps, 'div'>('div')`
  margin-left: ${p => p.textDirection === 'rtl' && '8px'};
  border-right: ${p => p.textDirection === 'ltr' && '1px solid rgba(255, 255, 255, 0.6)'};
  border-left: ${p => p.textDirection === 'rtl' && '1px solid rgba(255, 255, 255, 0.6)'};
+ background: rgba(33, 37, 41, 0.32);
 
  &:hover {
  color: #ffffff;
  }
 `
 
+export const SettingsWidget = styled<{}, 'div'>('div')`
+ float: left;
+ width: 48%;
+ margin-top: 20px;
+`
+
 export const StyledWidgetSettings = styled<{}, 'div'>('div')`
  font-family: ${p => p.theme.fontFamily.heading};
+
+ ${SettingsWidget}:nth-child(even) {
+ margin-right: 17px;
+ }
 `
 
 export const FeaturedSettingsWidget = styled<{}, 'div'>('div')`
  width: 100%;
 `
 
-export const SettingsWidget = styled<{}, 'div'>('div')`
- float: left;
- width: 50%;
- padding: 5px;
- margin-top: 20px;
-`
-
 export const StyledBannerImage = styled<{}, 'img'>('img')`
+ width: 100%;
  margin-bottom: 10px;
 `
 
@@ -311,6 +326,7 @@ export const StyledSettingsTitle = styled<{}, 'div'>('div')`
 export const StyledSettingsCopy = styled<{}, 'div'>('div')`
  font-size: 13px;
  font-weight: 300;
+ line-height: 17px;
 `
 
 interface WidgetToggleProps {
@@ -325,6 +341,7 @@ export const StyledWidgetToggle = styled<WidgetToggleProps, 'button'>('button')`
  padding: 10px 25px;
  border-radius: 100px;
  float: ${p => p.float ? 'right' : 'none'};
+ margin-right: ${p => p.float ? 10 : 0}px;
  border: none;
  margin-top: 8px;
  cursor: pointer;

components/brave_new_tab_ui/components/default/together/index.tsx

@@ -24,6 +24,7 @@ import getRandomBase64 from '../../../getRandomBytes'
 
 interface Props {
  showContent: boolean
+ stackPosition: number
  onShowContent: () => void
 }
 
@@ -49,10 +50,10 @@ class Together extends React.PureComponent<Props, {}> {
  }
 
  renderTitleTab () {
- const { onShowContent } = this.props
+ const { onShowContent, stackPosition } = this.props
 
  return (
- <StyledTitleTab onClick={onShowContent}>
+ <StyledTitleTab onClick={onShowContent} stackPosition={stackPosition}>
  {this.renderTitle()}
  </StyledTitleTab>
  )

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')`
@@ -65,27 +53,31 @@ export const StyledWidget = styled<WidgetVisibilityProps, 'div'>('div')`
  ${ p => (p.widgetMenuPersist && !p.isCryptoTab) && `
  background: rgba(33, 37, 41, 0.48);
  `}
-
- &:hover {
- box-shadow: ${p => p.isCrypto && !p.isCryptoTab ? '0px 0px 16px 0px rgba(0, 0, 0, 0.5)' : 'initial'};
- }
 `
 
 interface WidgetMenuProps {
  menuPosition: 'right' | 'left'
  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 +149,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 +175,6 @@ export const StyledWidgetIcon = styled<WidgetIconProps, 'div'>('div')`
  }
 `
 export const StyledSpan = styled<{}, 'span'>('span')`
- height: 13px;
+ text-align: left;
+ margin-right: 10px;
 `