Merge pull request #2668 from brave/toggle-background-ntp

Change Background Settings for New Tabs Page

browser/ui/webui/brave_webui_source.cc

@@ -134,6 +134,8 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "preferencesPageTitle", IDS_BRAVE_NEW_TAB_PREFERENCES_PAGE_TITLE },
         { "bookmarksPageTitle", IDS_BRAVE_NEW_TAB_BOOKMARKS_PAGE_TITLE },
         { "historyPageTitle", IDS_BRAVE_NEW_TAB_HISTORY_PAGE_TITLE },
+        { "dashboardSettingsTitle", IDS_BRAVE_NEW_TAB_DASHBOARD_SETTINGS_TITLE },
+        { "showBackgroundImage", IDS_BRAVE_NEW_TAB_SHOW_BACKGROUND_IMAGE },
 
         // Private Tab - General
         { "learnMore", IDS_BRAVE_PRIVATE_NEW_TAB_LEARN_MORE },

components/brave_new_tab_ui/actions/new_tab_actions.ts

@@ -66,3 +66,9 @@ export const statsUpdated = () => action(types.NEW_TAB_STATS_UPDATED)
 export const changePrivateSearchEngine = (shouldUse: boolean) => action(types.NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE, {
   shouldUse
 })
+
+export const showSettingsMenu = () => action(types.NEW_TAB_SHOW_SETTINGS_MENU)
+
+export const closeSettingsMenu = () => action(types.NEW_TAB_CLOSE_SETTINGS_MENU)
+
+export const toggleShowBackgroundImage = () => action(types.NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE)

components/brave_new_tab_ui/components/newTab/footerInfo.tsx

@@ -8,18 +8,26 @@ import * as React from 'react'
 import { Link, Navigation, IconLink, PhotoName } from 'brave-ui/features/newTab/default'
 
 // Icons
-import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon } from 'brave-ui/components/icons'
+import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon, SettingsIcon } from 'brave-ui/components/icons'
 
 // Helpers
 import { getLocale } from '../../../common/locale'
 
 interface Props {
   backgroundImageInfo: NewTab.Image | undefined
+  onClickSettings: () => void
+  isSettingsMenuOpen: boolean
+  showPhotoInfo: boolean
 }
 
 export default class FooterInfo extends React.Component<Props, {}> {
   render () {
-    const { backgroundImageInfo } = this.props
+    const {
+      backgroundImageInfo,
+      onClickSettings,
+      isSettingsMenuOpen,
+      showPhotoInfo
+    } = this.props
 
     if (!backgroundImageInfo) {
       return null
@@ -28,14 +36,18 @@ export default class FooterInfo extends React.Component<Props, {}> {
     return (
       <>
       <div>
+        {showPhotoInfo &&
         <PhotoName>
           {`${getLocale('photoBy')} `}
           <Link href={backgroundImageInfo.link} rel='noreferrer noopener' target='_blank'>
           {backgroundImageInfo.author}
           </Link>
-        </PhotoName>
+        </PhotoName>}
       </div>
         <Navigation>
+          <IconLink title={getLocale('dashboardSettingsTitle')} onClick={onClickSettings} disabled={isSettingsMenuOpen}>
+            <SettingsIcon />
+          </IconLink>
           <IconLink title={getLocale('preferencesPageTitle')} href='chrome://settings'>
             <SettingsAdvancedIcon />
           </IconLink>

components/brave_new_tab_ui/components/newTab/index.tsx

@@ -17,6 +17,7 @@ import {
 } from 'brave-ui/features/newTab/default'
 
 // Components
+import Settings from './settings'
 import Stats from './stats'
 import Block from './block'
 import FooterInfo from './footerInfo'
@@ -61,6 +62,18 @@ class NewTabPage extends React.Component<Props, {}> {
     this.props.actions.siteIgnored(site.url)
   }
 
+  toggleShowBackgroundImage = () => {
+    this.props.actions.toggleShowBackgroundImage()
+  }
+
+  showSettings = () => {
+    this.props.actions.showSettingsMenu()
+  }
+
+  closeSettings = () => {
+    this.props.actions.closeSettingsMenu()
+  }
+
   render () {
     const { newTabData, actions } = this.props
 
@@ -69,8 +82,8 @@ class NewTabPage extends React.Component<Props, {}> {
     }
 
     return (
-      <DynamicBackground background={newTabData.backgroundImage.source}>
-        <Gradient />
+      <DynamicBackground showBackgroundImage={newTabData.showBackgroundImage} background={newTabData.backgroundImage.source}>
+        {newTabData.showBackgroundImage && <Gradient />}
         <Page>
           <Header>
             <Stats stats={newTabData.stats} />
@@ -104,8 +117,21 @@ class NewTabPage extends React.Component<Props, {}> {
               }
             </Main>
           </Header>
+          {
+            newTabData.showSettings &&
+            <Settings
+              onClickOutside={this.closeSettings}
+              toggleShowBackgroundImage={this.toggleShowBackgroundImage}
+              showBackgroundImage={newTabData.showBackgroundImage}
+            />
+          }
           <Footer>
-            <FooterInfo backgroundImageInfo={newTabData.backgroundImage} />
+            <FooterInfo
+              backgroundImageInfo={newTabData.backgroundImage}
+              onClickSettings={this.showSettings}
+              isSettingsMenuOpen={newTabData.showSettings}
+              showPhotoInfo={newTabData.showBackgroundImage}
+            />
           </Footer>
         </Page>
       </DynamicBackground>

components/brave_new_tab_ui/components/newTab/settings.tsx

@@ -0,0 +1,58 @@
+/* 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'
+
+import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from 'brave-ui/features/newTab/default'
+
+import { Toggle } from 'brave-ui/features/newTab/toggle'
+
+import { getLocale } from '../../../common/locale'
+
+export interface Props {
+  onClickOutside: () => void
+  toggleShowBackgroundImage: () => void
+  showBackgroundImage: boolean
+}
+
+export default class Settings extends React.PureComponent<Props, {}> {
+  settingsMenuRef: React.RefObject<any>
+  constructor (props: Props) {
+    super(props)
+    this.settingsMenuRef = React.createRef()
+  }
+
+  handleClickOutside = (event: Event) => {
+    if (this.settingsMenuRef && !this.settingsMenuRef.current.contains(event.target)) {
+      this.props.onClickOutside()
+    }
+  }
+
+  componentDidMount () {
+    document.addEventListener('mousedown', this.handleClickOutside)
+  }
+
+  componentWillUnmount () {
+    document.removeEventListener('mousedown', this.handleClickOutside)
+  }
+
+  render () {
+    const { toggleShowBackgroundImage, showBackgroundImage } = this.props
+    return (
+      <SettingsWrapper>
+        <SettingsMenu innerRef={this.settingsMenuRef}>
+          <SettingsTitle>{getLocale('dashboardSettingsTitle')}</SettingsTitle>
+          <SettingsRow>
+            <SettingsText>{getLocale('showBackgroundImage')}</SettingsText>
+            <Toggle
+              onChange={toggleShowBackgroundImage}
+              checked={showBackgroundImage}
+              size='small'
+            />
+          </SettingsRow>
+        </SettingsMenu>
+      </SettingsWrapper>
+    )
+  }
+}

components/brave_new_tab_ui/constants/new_tab_types.ts

@@ -17,5 +17,8 @@ export const enum types {
   NEW_TAB_BOOKMARK_INFO_AVAILABLE = '@@newtab/NEW_TAB_BOOKMARK_INFO_AVAILABLE',
   NEW_TAB_GRID_SITES_UPDATED = '@@newtab/NEW_TAB_GRID_SITES_UPDATED',
   NEW_TAB_STATS_UPDATED = '@@newtab/NEW_TAB_STATS_UPDATED',
-  NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE = '@@newtab/NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE'
+  NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE = '@@newtab/NEW_TAB_USE_ALTERNATIVE_PRIVATE_SEARCH_ENGINE',
+  NEW_TAB_SHOW_SETTINGS_MENU = '@@newtab/NEW_TAB_SHOW_SETTINGS_MENU',
+  NEW_TAB_CLOSE_SETTINGS_MENU = '@@newtab/NEW_TAB_CLOSE_SETTINGS_MENU',
+  NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE = '@@newtab/NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE'
 }

components/brave_new_tab_ui/reducers/new_tab_reducer.tsx

@@ -26,6 +26,18 @@ export const newTabReducer: Reducer<NewTab.State | undefined> = (state: NewTab.S
   const startingState = state
   const payload = action.payload
   switch (action.type) {
+    case types.NEW_TAB_SHOW_SETTINGS_MENU:
+      state = { ...state, showSettings: true }
+      break
+
+    case types.NEW_TAB_CLOSE_SETTINGS_MENU:
+      state = { ...state, showSettings: false }
+      break
+
+    case types.NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE:
+      state = { ...state, showBackgroundImage: !state.showBackgroundImage }
+      break
+
     case types.BOOKMARK_ADDED:
       const topSite: NewTab.Site | undefined = state.topSites.find((site) => site.url === payload.url)
       if (topSite) {

components/brave_new_tab_ui/storage.ts

@@ -10,6 +10,8 @@ import { debounce } from '../common/debounce'
 const keyName = 'new-tab-data'
 
 const defaultState: NewTab.State = {
+  showBackgroundImage: false,
+  showSettings: false,
   topSites: [],
   ignoredTopSites: [],
   pinnedTopSites: [],

components/definitions/newTab.d.ts

@@ -55,5 +55,7 @@ declare namespace NewTab {
     backgroundImage?: Image
     gridLayoutSize?: 'small'
     showSiteRemovalNotification?: boolean
+    showBackgroundImage: boolean
+    showSettings: boolean
   }
 }

components/resources/brave_components_strings.grd

@@ -138,6 +138,8 @@
       <message name="IDS_BRAVE_NEW_TAB_PREFERENCES_PAGE_TITLE" desc="Title for preferences page">Edit Preferences</message>
       <message name="IDS_BRAVE_NEW_TAB_BOOKMARKS_PAGE_TITLE" desc="Title for bookmarks page">View and Manage Bookmarks</message>
       <message name="IDS_BRAVE_NEW_TAB_HISTORY_PAGE_TITLE" desc="Title for history page">View your browsing history</message>
+      <message name="IDS_BRAVE_NEW_TAB_DASHBOARD_SETTINGS_TITLE" desc="Title for dashboard settings">Dashboard Settings</message>
+      <message name="IDS_BRAVE_NEW_TAB_SHOW_BACKGROUND_IMAGE" desc="Text for settings option">Show background image</message>
 
       <!-- WebUI private tab resources -->
       <message name="IDS_BRAVE_PRIVATE_NEW_TAB_LEARN_MORE" desc="">Learn more</message>

components/test/brave_new_tab_ui/actions/new_tab_actions_test.ts

@@ -144,4 +144,19 @@ describe('newTabActions', () => {
       payload: { shouldUse }
     })
   })
+  it('showSettingsMenu', () => {
+    expect(actions.showSettingsMenu()).toEqual({
+      type: types.NEW_TAB_SHOW_SETTINGS_MENU
+    })
+  })
+  it('closeSettingsMenu', () => {
+    expect(actions.showSettingsMenu()).toEqual({
+      type: types.NEW_TAB_SHOW_SETTINGS_MENU
+    })
+  })
+  it('toggleShowBackgroundImage', () => {
+    expect(actions.toggleShowBackgroundImage()).toEqual({
+      type: types.NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE
+    })
+  })
 })

components/test/brave_new_tab_ui/components/settings_test.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { SettingsMenu, SettingsWrapper } from 'brave-ui/features/newTab/default'
+import Settings, { Props } from '../../../../components/brave_new_tab_ui/components/newTab/settings'
+
+describe('settings component tests', () => {
+  const mockProps: Props = {
+    onClickOutside: () => null,
+    toggleShowBackgroundImage: () => null,
+    showBackgroundImage: true
+  }
+  it('should render the component properly', () => {
+    const wrapper = shallow(
+      <Settings
+        onClickOutside={mockProps.onClickOutside}
+        toggleShowBackgroundImage={mockProps.toggleShowBackgroundImage}
+        showBackgroundImage={mockProps.showBackgroundImage}
+      />)
+    expect(wrapper.find(SettingsMenu)).toHaveLength(1)
+    expect(wrapper.find(SettingsWrapper)).toHaveLength(1)
+  })
+})

components/test/brave_new_tab_ui/reducers/new_tab_reducer_test.ts

@@ -324,4 +324,43 @@ describe('newTabReducer', () => {
       })
     })
   })
+
+  describe('NEW_TAB_SHOW_SETTINGS_MENU', () => {
+    it('should set show settings to true', () => {
+      const mockState = { ...fakeState, showSettings: false }
+      const assertion = newTabReducer(mockState, {
+        type: types.NEW_TAB_SHOW_SETTINGS_MENU
+      })
+      const expected = {
+        ...mockState,
+        showSettings: true
+      }
+      expect(assertion).toEqual(expected)
+    })
+  })
+
+  describe('NEW_TAB_CLOSE_SETTINGS_MENU', () => {
+    it('should set show settings to false', () => {
+      const mockState = { ...fakeState, showSettings: true }
+      const assertion = newTabReducer(mockState, {
+        type: types.NEW_TAB_CLOSE_SETTINGS_MENU
+      })
+      const expected = {
+        ...mockState,
+        showSettings: false
+      }
+      expect(assertion).toEqual(expected)
+    })
+  })
+
+  describe('NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE', () => {
+    it('should toggle showBackgroundimage status to be true', () => {
+      const mockState = { ...fakeState, showBackgroundImage: false }
+      const expected = { ...mockState, showBackgroundImage: true }
+      const assertion = newTabReducer(mockState, {
+        type: types.NEW_TAB_TOGGLE_SHOW_BACKGROUND_IMAGE
+      })
+      expect(assertion).toEqual(expected)
+    })
+  })
 })

components/test/testData.ts

@@ -41,6 +41,8 @@ export const syncInitialState: Sync.ApplicationState = { syncData }
 
 export const newTabInitialState: NewTab.ApplicationState = {
   newTabData: {
+    showBackgroundImage: false,
+    showSettings: false,
     topSites: [],
     ignoredTopSites: [],
     pinnedTopSites: [],

package.json

@@ -277,7 +277,7 @@
     "@types/react-redux": "6.0.4",
     "@types/redux-logger": "^3.0.7",
     "awesome-typescript-loader": "^5.2.1",
-    "brave-ui": "github:brave/brave-ui#624be474ee7d3e4dc3409712ac9ec56e33ef9b04",
+    "brave-ui": "github:brave/brave-ui#77b4e9f2687aa3032479b322e382f82a7fdd29b2",
     "css-loader": "^2.1.1",
     "csstype": "^2.5.5",
     "deep-freeze-node": "^1.1.3",