Merge pull request #5090 from brave/fix-8883

Adds new hover states, items for widget menus

browser/ui/webui/brave_webui_source.cc

@@ -168,6 +168,9 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "showRewards", IDS_BRAVE_NEW_TAB_SHOW_REWARDS },
         { "showBinance", IDS_BRAVE_NEW_TAB_SHOW_BINANCE },
         { "brandedWallpaperOptIn", IDS_BRAVE_NEW_TAB_BRANDED_WALLPAPER_OPT_IN },
+        { "topSitesTitle", IDS_BRAVE_NEW_TAB_TOP_SITES },
+        { "statsTitle", IDS_BRAVE_NEW_TAB_STATS },
+        { "clockTitle", IDS_BRAVE_NEW_TAB_CLOCK },
         // Private Tab - General
         { "learnMore", IDS_BRAVE_PRIVATE_NEW_TAB_LEARN_MORE },
         { "done", IDS_BRAVE_PRIVATE_NEW_TAB_DONE },

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

@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
+import createWidget from '../widget/index'
 import {
   WidgetWrapper,
   Copy,
@@ -51,7 +52,7 @@ interface Props {
   onSetUserTLDAutoSet: () => void
 }
 
-export default class Binance extends React.PureComponent<Props, State> {
+class Binance extends React.PureComponent<Props, State> {
   private fiatList: string[]
   private usCurrencies: string[]
   private comCurrencies: string[]
@@ -291,3 +292,5 @@ export default class Binance extends React.PureComponent<Props, State> {
     )
   }
 }
+
+export const BinanceWidget = createWidget(Binance)

components/brave_new_tab_ui/components/default/index.ts

@@ -8,9 +8,8 @@ import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper
 import { ListWidget, Tile, TileActionsContainer, TileAction, TileFavicon } from './gridSites'
 import { SiteRemovalNotification, SiteRemovalText, SiteRemovalAction } from './notification'
 import { ClockWidget } from './clock'
-import RewardsWidget from './rewards'
-import { WidgetStack } from './widgetStack'
-import BinanceWidget from './binance'
+import { RewardsWidget } from './rewards'
+import { BinanceWidget } from './binance'
 import createWidget from './widget'
 
 export * from './page'
@@ -33,7 +32,6 @@ export {
   SettingsTitle,
   SettingsWrapper,
   RewardsWidget,
-  WidgetStack,
   BinanceWidget,
   createWidget
 }

components/brave_new_tab_ui/components/default/page/index.ts

@@ -89,8 +89,7 @@ export const GridItemWidgetStack = styled('section')`
   grid-column: 3 / span 1;
   grid-row-end: span 2;
   @media screen and (max-width: ${breakpointLargeBlocks}) {
-    grid-column: 2 / span 2;
-    justify-self: end;
+    max-width: 284px;
   }
 `
 
@@ -262,6 +261,7 @@ export const Navigation = styled<{}, 'nav'>('nav')`
 
 interface IconButtonProps {
   clickDisabled?: boolean
+  isClickMenu?: boolean
 }
 
 export const IconLink = styled<{}, 'a'>('a')`
@@ -286,7 +286,8 @@ export const IconButton = styled<IconButtonProps, 'button'>('button')`
   height: 24px;
   padding: 0;
   border: none;
-  margin: 12px;
+  margin: 7px;
+  margin: ${p => p.isClickMenu ? 7 : 12}px;
   cursor: pointer;
   color: #ffffff;
   background-color: transparent;

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

@@ -3,6 +3,7 @@
 * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
+import createWidget from '../widget/index'
 import { convertBalance } from '../../../../brave_rewards/resources/page/utils'
 import { getLocale, splitStringForTag } from '../../../../common/locale'
 
@@ -69,7 +70,7 @@ const enum AmountItemType {
   TIPS = 1
 }
 
-export default class Rewards extends React.PureComponent<RewardsProps, {}> {
+class Rewards extends React.PureComponent<RewardsProps, {}> {
 
   getButtonText = (isAds: boolean = false) => {
     if (isAds) {
@@ -397,3 +398,5 @@ export default class Rewards extends React.PureComponent<RewardsProps, {}> {
     )
   }
 }
+
+export const RewardsWidget = createWidget(Rewards)

components/brave_new_tab_ui/components/default/widget/assets/ellipsis.tsx

@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* 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/. */
+
+import * as React from 'react'
+
+export default class EllipsisIcon extends React.Component {
+  render () {
+    return (
+      <svg xmlns={'http://www.w3.org/2000/svg'} width={'24'} height={'24'}>
+        <path d={'M18 14.25a2.25 2.25 0 110-4.5 2.25 2.25 0 010 4.5zm-6 0a2.25 2.25 0 110-4.5 2.25 2.25 0 010 4.5zm-6 0a2.25 2.25 0 110-4.5 2.25 2.25 0 010 4.5z'} fill={'#ffffff'} fillRule={'evenodd'}/>
+      </svg>
+    )
+  }
+}

components/brave_new_tab_ui/components/default/widget/assets/hide.tsx

@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* 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/. */
+
+import * as React from 'react'
+
+export default class HideIcon extends React.Component {
+  render () {
+    return (
+      <svg xmlns={'http://www.w3.org/2000/svg'} width={'24'} height={'24'}>
+        <path d={'M5.812 19.138a.663.663 0 01-.943 0 .666.666 0 010-.943l2.054-2.054C4.744 14.741 4 12.805 4 12c0-1.741 2.803-6 8-6 2.001 0 3.263.607 3.961 1.103l2.242-2.241a.666.666 0 11.942.942L5.812 19.138zm4.396-6.282l2.653-2.652A1.994 1.994 0 0012 10c-1.103 0-2 .898-2 2 0 .3.08.589.208.856zM12 7.333c-4.523 0-6.667 3.744-6.667 4.667 0 .297.476 1.954 2.562 3.168l1.359-1.358c-.047-.043-.101-.075-.135-.133A3.337 3.337 0 0112 8.667c.66 0 1.293.202 1.835.562l1.162-1.161c-.55-.34-1.502-.735-2.997-.735zm0 8A.667.667 0 0111.956 14 2.198 2.198 0 0014 11.956a.666.666 0 111.33.087 3.537 3.537 0 01-3.288 3.289H12zm-1.84 1.113c.582.146 1.201.22 1.84.22 4.523 0 6.667-3.743 6.667-4.666 0-.279-.289-1.185-1.182-2.204a.667.667 0 111.004-.878C19.407 9.966 20 11.176 20 12c0 1.74-2.803 6-8 6a8.871 8.871 0 01-2.165-.262.667.667 0 11.326-1.292z'} fill={'#3B3E4F'} fillRule={'evenodd'} />
+      </svg>
+    )
+  }
+}

components/brave_new_tab_ui/components/default/widget/assets/learn-more.tsx

@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* 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/. */
+
+import * as React from 'react'
+
+export default class LearnMoreIcon extends React.Component {
+  render () {
+    return (
+      <svg xmlns={'http://www.w3.org/2000/svg'} width={'24'} height={'24'}>
+        <path d={'M9 1.688a7.313 7.313 0 110 14.625A7.313 7.313 0 019 1.688zm0 1.218a6.094 6.094 0 100 12.188A6.094 6.094 0 009 2.906zm0 2.438a.61.61 0 110 1.218.61.61 0 010-1.218zm.61 6.703a.61.61 0 01-1.22 0v-3.7a.61.61 0 111.22 0v3.7z'} fill={'#3B3E4F'} transform={'translate(3 3)'} fillRule={'evenodd'} />
+      </svg>
+    )
+  }
+}

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

@@ -13,6 +13,10 @@ export interface WidgetProps {
   hideWidget?: HideWidgetFunction
   preventFocus?: boolean
   textDirection: string
+  isCrypto?: boolean
+  isCryptoTab?: boolean
+  widgetTitle?: string
+  onLearnMore?: () => void
 }
 
 export interface WidgetState {
@@ -32,33 +36,43 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
       this.setState({ widgetMenuPersist: !this.state.widgetMenuPersist })
     }
 
+    persistWidgetHover = () => {
+      this.setState({ widgetMenuPersist: true })
+    }
+
     unpersistWidgetHover = () => {
       this.setState({ widgetMenuPersist: false })
     }
 
     render () {
-      const { menuPosition, hideWidget, textDirection, preventFocus } = this.props
+      const { menuPosition, hideWidget, textDirection, preventFocus, isCrypto, isCryptoTab, widgetTitle, onLearnMore } = this.props
       const { widgetMenuPersist } = this.state
 
       return (
         <StyledWidgetContainer
           menuPosition={menuPosition}
           textDirection={textDirection}
+          onMouseLeave={this.unpersistWidgetHover}
         >
           <StyledWidget
+            isCrypto={isCrypto}
+            isCryptoTab={isCryptoTab}
             widgetMenuPersist={widgetMenuPersist}
             preventFocus={preventFocus}
           >
               <WrappedComponent {...this.props as P}/>
           </StyledWidget>
           {hideWidget && !preventFocus &&
           <WidgetMenu
+            widgetTitle={widgetTitle}
+            onLearnMore={onLearnMore}
             widgetMenuPersist={widgetMenuPersist}
             toggleWidgetHover={this.toggleWidgetHover}
             textDirection={textDirection}
             menuPosition={menuPosition}
             hideWidget={hideWidget as HideWidgetFunction}
             unpersistWidgetHover={this.unpersistWidgetHover}
+            onMouseEnter={this.persistWidgetHover}
           />
           }
         </StyledWidgetContainer>

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

@@ -3,7 +3,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/.
 
-import styled, { css } from 'brave-ui/theme'
+import styled from 'brave-ui/theme'
 
 interface WidgetPositionProps {
   menuPosition: 'right' | 'left'
@@ -20,36 +20,15 @@ export const StyledWidgetContainer = styled<WidgetContainerProps, 'div'>('div')`
   flex-direction: ${p => p.menuPosition === 'right' ? 'row' : 'row-reverse'};
   height: fit-content;
   min-width: 0;
-`
-
-interface WidgetVisibilityProps {
-  widgetMenuPersist: boolean
-  preventFocus?: boolean
-}
-
-export const StyledWidget = styled<WidgetVisibilityProps, 'div'>('div')`
-  padding: 24px;
-  max-width: 100%;
   position: relative;
-  ${p => !p.preventFocus && css`
-    ${StyledWidgetContainer}:hover & {
-      border-radius: 16px;
-      background: rgba(33, 37, 41, 0.48);
-    }
-  `}
-
-  // Also hover when menu button has been clicked
-  ${ p => p.widgetMenuPersist && `
-    border-radius: 16px;
-    background: rgba(33, 37, 41, 0.48);
-  `}
-
 `
 
 export const StyledWidgetMenuContainer = styled<WidgetVisibilityProps & WidgetPositionProps, 'div'>('div')`
   visibility: hidden;
   pointer-events: none;
-  position: relative;
+  position: absolute;
+  top: 5px;
+  right: 5px;
 
   ${StyledWidgetContainer}:hover & {
     visibility: visible;
@@ -61,13 +40,35 @@ export const StyledWidgetMenuContainer = styled<WidgetVisibilityProps & WidgetPo
     visibility: visible;
     pointer-events: auto;
   `}
+`
+
+interface WidgetVisibilityProps {
+  widgetMenuPersist: boolean
+  preventFocus?: boolean
+  isCrypto?: boolean
+  isCryptoTab?: boolean
+}
 
-  // Float in gutter
-  ${p => p.menuPosition === 'left' ? css`
-      margin-left: -48px;
-    ` : css`
-      margin-right: -48px;
-    `}
+export const StyledWidget = styled<WidgetVisibilityProps, 'div'>('div')`
+  padding: ${p => p.isCrypto ? 0 : 24}px;
+  max-width: 100%;
+  min-width: ${p => p.isCrypto ? '284px' : 'initial'};
+  position: relative;
+  transition: background 0.5s ease;
+  border-radius: ${p => p.isCrypto ? 'initial' : '16px'};
+
+  ${StyledWidgetMenuContainer}:hover & {
+    background: rgba(33, 37, 41, 0.48);
+  }
+
+  // Also hover when menu button has been clicked
+  ${ 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 {
@@ -84,6 +85,7 @@ export const StyledWidgetMenu = styled<WidgetMenuProps, 'div'>('div')`
   box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
   border-radius: 4px;
   top: 48px;
+  z-index: 1;
 
   @media screen and (min-width: 1150px) {
     ${p => (p.menuPosition === 'right' && p.textDirection === 'ltr') || (p.menuPosition === 'left' && p.textDirection === 'rtl')
@@ -120,6 +122,29 @@ export const StyledWidgetButton = styled<WidgetButtonProps, 'button'>('button')`
   outline-color: #FF7654;
   outline-width: 2px;
   outline-offset: -3px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${p => p.theme.color.contextMenuHoverBackground};
+    color: ${p => p.theme.color.contextMenuHoverForeground};
+  }
+`
+
+export const StyledWidgetLink = styled<WidgetButtonProps, 'a'>('a')`
+  border-style: none;
+  background: transparent;
+  padding: 0;
+  display: flex;
+  height: 30px;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  outline-color: #FF7654;
+  outline-width: 2px;
+  outline-offset: -3px;
+  cursor: pointer;
+  text-decoration: none;
 
   &:hover {
     background-color: ${p => p.theme.color.contextMenuHoverBackground};
@@ -130,7 +155,7 @@ export const StyledWidgetButton = styled<WidgetButtonProps, 'button'>('button')`
 export const StyledWidgetIcon = styled<{}, 'div'>('div')`
   height: 13px;
   width: 13px;
-  margin: 0 10px 0 18px;
+  margin: -7px 15px 0 10px;
 `
 export const StyledSpan = styled<{}, 'span'>('span')`
   height: 13px;