Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NTP: Add "Customize" text to dashboard settings icon #5103

Merged
merged 3 commits into from
Apr 2, 2020
Merged

NTP: Add "Customize" text to dashboard settings icon #5103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9f27e03
NTP: Add "Customize" text to dashboard settings icon
cezaraugusto Mar 30, 2020
3ec3932
NTP: Add support for footer text label in RTL langs
cezaraugusto Apr 1, 2020
1d42142
NTP: Use right color and font for footer icon label
cezaraugusto Apr 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .storybook/locale.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions browser/ui/webui/brave_webui_source.cc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down
38 changes: 34 additions & 4 deletions components/brave_new_tab_ui/components/default/page/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
`
18 changes: 17 additions & 1 deletion components/brave_new_tab_ui/components/default/settings/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`
23 changes: 19 additions & 4 deletions components/brave_new_tab_ui/containers/newTab/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -157,7 +172,7 @@ export default class Settings extends React.PureComponent<Props, {}> {
</SettingsRow>
</SettingsMenu>
}
</SettingsWrapper>
</SettingsWrapper>
)
}
}
3 changes: 2 additions & 1 deletion components/resources/brave_components_strings.grd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down