Merge pull request #5103 from brave/ca-4930

NTP: Add "Customize" text to dashboard settings icon
brave · Apr 2, 2020 · 7ecfdd7 · 7ecfdd7
2 parents b75db38 + 1d42142
commit 7ecfdd7
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 11 deletions.
diff --git a/.storybook/locale.ts b/.storybook/locale.ts
@@ -326,11 +326,12 @@ const locale: Record<string, string> = {
   estimatedTimeSaved: 'Estimated Time Saved',
   minutes: 'minutes',
   photoBy: 'Photo by',
+  customize: 'Customize',
   thumbRemoved: 'Top site removed',
   undoRemoved: 'Undo',
   close: 'Close',
   hide: 'Hide',
-  dashboardSettingsTitle: 'Dashboard Settings',
+  dashboardSettingsTitle: 'Customize Dashboard',
   showBackgroundImg: 'Show background image',
   showBraveStats: 'Show Brave Stats',
   showClock: 'Show Clock',

diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
@@ -161,6 +161,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "historyPageTitle", IDS_BRAVE_NEW_TAB_HISTORY_PAGE_TITLE },
         { "dashboardSettingsTitle",
             IDS_BRAVE_NEW_TAB_DASHBOARD_SETTINGS_TITLE },
+        { "customize", IDS_BRAVE_NEW_TAB_CUSTOMIZE },
         { "showBackgroundImage", IDS_BRAVE_NEW_TAB_SHOW_BACKGROUND_IMAGE },
         { "showBraveStats", IDS_BRAVE_NEW_TAB_SHOW_BRAVE_STATS },
         { "showClock", IDS_BRAVE_NEW_TAB_SHOW_CLOCK },

diff --git a/components/brave_new_tab_ui/components/default/page/index.ts b/components/brave_new_tab_ui/components/default/page/index.ts
@@ -257,6 +257,8 @@ export const Navigation = styled<{}, 'nav'>('nav')`
   align-self: flex-end;
   display: flex;
   justify-content: flex-end;
+  height: 40px;
+  align-items: center;
 `
 
 interface IconButtonProps {
@@ -265,10 +267,10 @@ interface IconButtonProps {
 }
 
 export const IconLink = styled<{}, 'a'>('a')`
-  display: flex;
+  display: block;
   width: 24px;
   height: 24px;
-  margin: 12px;
+  margin: 8px;
   cursor: pointer;
   color: #ffffff;
   opacity: 0.7;
@@ -286,8 +288,7 @@ export const IconButton = styled<IconButtonProps, 'button'>('button')`
   height: 24px;
   padding: 0;
   border: none;
-  margin: 7px;
-  margin: ${p => p.isClickMenu ? 7 : 12}px;
+  margin: ${p => p.isClickMenu ? '7' : '0 12'}px;
   cursor: pointer;
   color: #ffffff;
   background-color: transparent;
@@ -297,3 +298,32 @@ export const IconButton = styled<IconButtonProps, 'button'>('button')`
     opacity: 0.95;
   }
 `
+
+interface IconButtonSideTextProps {
+  textDirection: string
+}
+
+export const IconButtonSideText = styled<IconButtonSideTextProps, 'label'>('label')`
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  margin-right: ${p => p.textDirection === 'ltr' && '24px'};
+  margin-left: ${p => p.textDirection === 'rtl' && '24px'};
+  color: inherit;
+  cursor: pointer;
+  user-select: none;
+
+  &:focus-within {
+    /* get the browser defaults */
+    outline-color: rgba(0, 103, 244, 0.247);
+    outline-style: auto;
+    outline-width: 5px;
+  }
+
+  > ${IconButton} {
+    margin-left: ${p => p.textDirection === 'ltr' && '0'};
+    margin-right: ${p => p.textDirection === 'rtl' && '0'};
+    /* No need to show the outline since the parent is handling it */
+    outline: 0;
+  }
+`
diff --git a/components/brave_new_tab_ui/components/default/settings/index.ts b/components/brave_new_tab_ui/components/default/settings/index.ts
@@ -52,8 +52,24 @@ export const SettingsText = styled<{}, 'span'>('span')`
   font-weight: normal;
 `
 
-export const SettingsWrapper = styled<{}, 'div'>('div')`
+interface SettingsWrapperProps {
+  textDirection: string
+}
+
+export const SettingsWrapper = styled<SettingsWrapperProps, 'div'>('div')`
   position: relative;
   display: flex;
   justify-content: flex-end;
+  font-family: ${p => p.theme.fontFamily.heading};
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(255,255,255,0.8);
+  margin-right: ${p => p.textDirection === 'ltr' && '8px'};
+  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)'};
+
+  &:hover {
+    color: #ffffff;
+  }
 `
diff --git a/components/brave_new_tab_ui/containers/newTab/settings.tsx b/components/brave_new_tab_ui/containers/newTab/settings.tsx
@@ -4,7 +4,15 @@
 
 import * as React from 'react'
 
-import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper, IconButton } from '../../components/default'
+import {
+  SettingsMenu,
+  SettingsRow,
+  SettingsText,
+  SettingsTitle,
+  SettingsWrapper,
+  IconButton,
+  IconButtonSideText
+} from '../../components/default'
 
 import { Toggle } from '../../components/toggle'
 
@@ -87,8 +95,15 @@ export default class Settings extends React.PureComponent<Props, {}> {
       binanceSupported
     } = this.props
     return (
-      <SettingsWrapper title={getLocale('dashboardSettingsTitle')} innerRef={this.settingsMenuRef}>
-        <IconButton onClick={onClick} onKeyDown={this.onKeyPressSettings}><SettingsIcon/></IconButton>
+      <SettingsWrapper
+        textDirection={textDirection}
+        title={getLocale('dashboardSettingsTitle')}
+        innerRef={this.settingsMenuRef}
+      >
+        <IconButtonSideText textDirection={textDirection}>
+          <IconButton onClick={onClick} onKeyDown={this.onKeyPressSettings}><SettingsIcon/></IconButton>
+          {getLocale('customize')}
+        </IconButtonSideText>
         {showSettingsMenu &&
           <SettingsMenu textDirection={textDirection}>
             <SettingsTitle>{getLocale('dashboardSettingsTitle')}</SettingsTitle>
@@ -157,7 +172,7 @@ export default class Settings extends React.PureComponent<Props, {}> {
             </SettingsRow>
         </SettingsMenu>
       }
-    </SettingsWrapper>
+      </SettingsWrapper>
     )
   }
 }
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
@@ -174,7 +174,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_DASHBOARD_SETTINGS_TITLE" desc="Title for dashboard settings">Customize Dashboard</message>
+      <message name="IDS_BRAVE_NEW_TAB_CUSTOMIZE" desc="Title for dashboard settings">Customize</message>
       <message name="IDS_BRAVE_NEW_TAB_SHOW_BACKGROUND_IMAGE" desc="Text for settings background option">Show Background Image</message>
       <message name="IDS_BRAVE_NEW_TAB_SHOW_BRAVE_STATS" desc="Text for settings show stats option">Show Brave Stats</message>
       <message name="IDS_BRAVE_NEW_TAB_SHOW_CLOCK" desc="Text for settings show clock option">Show Clock</message>