Resolves brave/brave-browser#10318 - NTP Widget Settings design updates

brave · Jul 11, 2020 · 23d7cfa · 23d7cfa
1 parent 389dcb1
commit 23d7cfa
Show file tree

Hide file tree

Showing 26 changed files with 383 additions and 93 deletions.
diff --git a/browser/brave_profile_prefs.cc b/browser/brave_profile_prefs.cc
@@ -215,6 +215,7 @@ void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry) {
   registry->RegisterBooleanPref(kNewTabPageShowRewards, true);
   registry->RegisterBooleanPref(kNewTabPageShowBinance, true);
   registry->RegisterBooleanPref(kNewTabPageShowTogether, true);
+  registry->RegisterBooleanPref(kNewTabPageShowAddCard, true);
 
   // Brave Wallet
   registry->RegisterIntegerPref(kBraveWalletPrefVersion, 0);

diff --git a/browser/extensions/api/settings_private/brave_prefs_util.cc b/browser/extensions/api/settings_private/brave_prefs_util.cc
@@ -95,6 +95,8 @@ const PrefsUtil::TypedPrefMap& BravePrefsUtil::GetWhitelistedKeys() {
         settings_api::PrefType::PREF_TYPE_BOOLEAN;
   (*s_brave_whitelist)[kNewTabPageShowTogether] =
         settings_api::PrefType::PREF_TYPE_BOOLEAN;
+  (*s_brave_whitelist)[kNewTabPageShowAddCard] =
+        settings_api::PrefType::PREF_TYPE_BOOLEAN;
   // Clear browsing data on exit prefs.
   (*s_brave_whitelist)[browsing_data::prefs::kDeleteBrowsingHistoryOnExit] =
     settings_api::PrefType::PREF_TYPE_BOOLEAN;

diff --git a/browser/ui/webui/brave_new_tab_message_handler.cc b/browser/ui/webui/brave_new_tab_message_handler.cc
@@ -94,6 +94,9 @@ base::DictionaryValue GetPreferencesDictionary(PrefService* prefs) {
   pref_data.SetBoolean(
       "showTogether",
       prefs->GetBoolean(kNewTabPageShowTogether));
+  pref_data.SetBoolean(
+      "showAddCard",
+      prefs->GetBoolean(kNewTabPageShowAddCard));
   return pref_data;
 }
 
@@ -252,6 +255,9 @@ void BraveNewTabMessageHandler::OnJavascriptAllowed() {
   pref_change_registrar_.Add(kNewTabPageShowTogether,
     base::Bind(&BraveNewTabMessageHandler::OnPreferencesChanged,
     base::Unretained(this)));
+  pref_change_registrar_.Add(kNewTabPageShowAddCard,
+    base::Bind(&BraveNewTabMessageHandler::OnPreferencesChanged,
+    base::Unretained(this)));
 }
 
 void BraveNewTabMessageHandler::OnJavascriptDisallowed() {
@@ -325,6 +331,8 @@ void BraveNewTabMessageHandler::HandleSaveNewTabPagePref(
     settingsKey = kNewTabPageShowBinance;
   } else if (settingsKeyInput == "showTogether") {
     settingsKey = kNewTabPageShowTogether;
+  } else if (settingsKeyInput == "showAddCard") {
+    settingsKey = kNewTabPageShowAddCard;
   } else {
     LOG(ERROR) << "Invalid setting key";
     return;

diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
@@ -167,8 +167,12 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "topSitesTitle", IDS_BRAVE_NEW_TAB_TOP_SITES },
         { "statsTitle", IDS_BRAVE_NEW_TAB_STATS },
         { "clockTitle", IDS_BRAVE_NEW_TAB_CLOCK },
-        { "rewardsTitle", IDS_BRAVE_NEW_TAB_REWARDS },
         { "backgroundImageTitle", IDS_BRAVE_NEW_TAB_BACKGROUND_IMAGE },
+        { "addWidget", IDS_BRAVE_NEW_TAB_WIDGET_ADD },
+        { "hideWidget", IDS_BRAVE_NEW_TAB_WIDGET_HIDE },
+        { "rewardsWidgetDesc", IDS_BRAVE_NEW_TAB_REWARDS_WIDGET_DESC },
+        { "binanceWidgetDesc", IDS_BRAVE_NEW_TAB_BINANCE_WIDGET_DESC },
+        { "braveRewardsTitle", IDS_BRAVE_NEW_TAB_BRAVE_REWARDS_TITLE },
         // Private Tab - General
         { "learnMore", IDS_BRAVE_PRIVATE_NEW_TAB_LEARN_MORE },
         { "done", IDS_BRAVE_PRIVATE_NEW_TAB_DONE },
@@ -232,6 +236,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "rewardsWidgetBrandedNotificationTitle", IDS_REWARDS_WIDGET_BRANDED_NOTIFICATION_TITLE },      // NOLINT
         { "rewardsWidgetBrandedNotificationDescription", IDS_REWARDS_WIDGET_BRANDED_NOTIFICATION_DESCRIPTION }, // NOLINT
         { "rewardsWidgetBrandedNotificationHideAction", IDS_REWARDS_WIDGET_BRANDED_NOTIFICATION_HIDE_ACTION }, // NOLINT
+        { "addCardWidgetTitle", IDS_ADD_CARD_WIDGET_TITLE },
         // Together Widget
         { "togetherWidgetTitle", IDS_TOGETHER_WIDGET_TITLE },
         { "togetherWidgetWelcomeTitle", IDS_TOGETHER_WIDGET_WELCOME_TITLE },

diff --git a/common/pref_names.cc b/common/pref_names.cc
@@ -65,6 +65,7 @@ const char kNewTabPageShowStats[] = "brave.new_tab_page.show_stats";
 const char kNewTabPageShowRewards[] = "brave.new_tab_page.show_rewards";
 const char kNewTabPageShowBinance[] = "brave.new_tab_page.show_binance";
 const char kNewTabPageShowTogether[] = "brave.new_tab_page.show_together";
+const char kNewTabPageShowAddCard[] = "brave.new_tab_page.show_addcard";
 const char kBraveEnabledMediaRouter[] = "brave.enable_media_router";
 const char kBraveWalletAES256GCMSivNonce[] =
     "brave.wallet.aes_256_gcm_siv_nonce";

diff --git a/common/pref_names.h b/common/pref_names.h
@@ -57,6 +57,7 @@ extern const char kNewTabPageShowStats[];
 extern const char kNewTabPageShowRewards[];
 extern const char kNewTabPageShowBinance[];
 extern const char kNewTabPageShowTogether[];
+extern const char kNewTabPageShowAddCard[];
 extern const char kBraveEnabledMediaRouter[];
 extern const char kBraveWalletAES256GCMSivNonce[];
 extern const char kBraveWalletEncryptedSeed[];

diff --git a/components/brave_new_tab_ui/api/preferences.ts b/components/brave_new_tab_ui/api/preferences.ts
@@ -17,6 +17,7 @@ export type Preferences = {
   showClock: boolean
   showTopSites: boolean
   showRewards: boolean
+  showAddCard: boolean
   isBrandedWallpaperNotificationDismissed: boolean
 }
 
@@ -58,6 +59,10 @@ export function saveShowBinance (value: boolean): void {
   sendSavePref('showBinance', value)
 }
 
+export function saveShowAddCard (value: boolean): void {
+  sendSavePref('showAddCard', value)
+}
+
 export function saveBrandedWallpaperOptIn (value: boolean): void {
   sendSavePref('brandedWallpaperOptIn', value)
 }

diff --git a/components/brave_new_tab_ui/components/default/addCard/assets/add-icon.tsx b/components/brave_new_tab_ui/components/default/addCard/assets/add-icon.tsx
@@ -0,0 +1,16 @@
+/* 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 AddIcon extends React.PureComponent {
+
+  render () {
+    return (
+      <svg width={'17'} height={'18'} viewBox={'0 0 17 18'} fill={'none'} xmlns={'http://www.w3.org/2000/svg'}>
+        <path fillRule={'evenodd'} clipRule={'evenodd'} d={'M15.9722 9.69428H9.02778V16.6387C9.02778 17.0221 8.71667 17.3332 8.33333 17.3332C7.95 17.3332 7.63889 17.0221 7.63889 16.6387V9.69428H0.694444C0.311111 9.69428 0 9.38317 0 8.99984C0 8.6165 0.311111 8.30539 0.694444 8.30539H7.63889V1.36095C7.63889 0.977615 7.95 0.666504 8.33333 0.666504C8.71667 0.666504 9.02778 0.977615 9.02778 1.36095V8.30539H15.9722C16.3556 8.30539 16.6667 8.6165 16.6667 8.99984C16.6667 9.38317 16.3556 9.69428 15.9722 9.69428Z'} fill={'#F0F2FF'}/>
+      </svg>
+    )
+  }
+}
diff --git a/components/brave_new_tab_ui/components/default/addCard/index.tsx b/components/brave_new_tab_ui/components/default/addCard/index.tsx
@@ -0,0 +1,44 @@
+/* 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 createWidget from '../widget/index'
+import { getLocale } from '../../../../common/locale'
+
+// Components
+import { StyledTitleTab } from '../widgetTitleTab'
+import {
+  Header,
+  StyledTitle,
+  StyledAddIcon
+} from './style'
+import AddCardIcon from './assets/add-icon'
+
+interface Props {
+  onAddCard: () => void
+}
+
+class AddCard extends React.PureComponent<Props, {}> {
+
+  render () {
+    const { onAddCard } = this.props
+
+    return (
+      <StyledTitleTab onClick={onAddCard}>
+        <Header>
+          <StyledTitle>
+            <StyledAddIcon>
+              <AddCardIcon />
+            </StyledAddIcon>
+            <>
+              {getLocale('addCardWidgetTitle')}
+            </>
+          </StyledTitle>
+        </Header>
+      </StyledTitleTab>
+    )
+  }
+}
+
+export const AddCardWidget = createWidget(AddCard)
diff --git a/components/brave_new_tab_ui/components/default/addCard/style.ts b/components/brave_new_tab_ui/components/default/addCard/style.ts
@@ -0,0 +1,29 @@
+/* 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 styled from 'brave-ui/theme'
+import palette from 'brave-ui/theme/colors'
+
+export const Header = styled<{}, 'div'>('div')`
+  text-align: left;
+`
+
+export const StyledTitle = styled<{}, 'div'>('div')`
+  margin-top: 6px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 18px;
+  font-weight: 600;
+  color: ${palette.white};
+  font-family: ${p => p.theme.fontFamily.heading};
+`
+
+export const StyledAddIcon = styled<{}, 'div'>('div')`
+  width: 24px;
+  height: 24px;
+  margin-right: 7px;
+  margin-left: 5px;
+  margin-top: 2px;
+`
diff --git a/components/brave_new_tab_ui/components/default/index.ts b/components/brave_new_tab_ui/components/default/index.ts
@@ -11,6 +11,7 @@ import { ClockWidget } from './clock'
 import { RewardsWidget } from './rewards'
 import { BinanceWidget } from './binance'
 import { TogetherWidget } from './together'
+import { AddCardWidget } from './addCard'
 import createWidget from './widget'
 
 export * from './page'
@@ -30,5 +31,6 @@ export {
   RewardsWidget,
   BinanceWidget,
   TogetherWidget,
+  AddCardWidget,
   createWidget
 }
diff --git a/components/brave_new_tab_ui/components/default/page/index.ts b/components/brave_new_tab_ui/components/default/page/index.ts
@@ -20,6 +20,7 @@ interface PageProps {
   showBinance: boolean
   showTogether: boolean
   showTopSites: boolean
+  showAddCard: boolean
   showBrandedWallpaper: boolean
 }
 

diff --git a/components/brave_new_tab_ui/components/default/settings/index.ts b/components/brave_new_tab_ui/components/default/settings/index.ts
@@ -14,7 +14,8 @@ const isDarkTheme = (p: any) => {
 }
 
 export const SettingsMenu = styled<Props, 'div'>('div')`
-  width: 680px;
+  width: 720px;
+  min-width: 720px;
   ${p => p.textDirection && (p.textDirection === 'rtl') ? `left: 12px` : `right: 12px`}
   background-color: ${p => p.theme.color.contextMenuBackground};
   color:  ${p => p.theme.color.contextMenuForeground};
@@ -180,10 +181,16 @@ export const SettingsSidebarButton = styled<SettingsSidebarButtonProps, 'button'
       color: ${p => p.theme.color.brandBrave};
     }
   }
+
+  &:focus {
+    outline: none;
+  }
 `
 
 export const SettingsFeatureBody = styled<{}, 'section'>('section')`
   padding: 10px 16px 0;
+  max-height: 305px;
+  overflow-y: scroll;
 `
 
 export const SettingsTitle = styled<{}, 'div'>('div')`
@@ -274,3 +281,66 @@ export const SettingsWrapper = styled<SettingsWrapperProps, 'div'>('div')`
     color: #ffffff;
   }
 `
+
+export const StyledWidgetSettings = styled<{}, 'div'>('div')`
+  font-family: ${p => p.theme.fontFamily.heading};
+`
+
+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')`
+  margin-bottom: 10px;
+`
+
+export const StyledSettingsInfo = styled<{}, 'div'>('div')`
+  float: left;
+  max-width: 250px;
+`
+
+export const StyledSettingsTitle = styled<{}, 'div'>('div')`
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 5px;
+`
+
+export const StyledSettingsCopy = styled<{}, 'div'>('div')`
+  font-size: 13px;
+  font-weight: 300;
+`
+
+interface WidgetToggleProps {
+  isAdd: boolean
+  float: boolean
+}
+
+export const StyledWidgetToggle = styled<WidgetToggleProps, 'button'>('button')`
+  color: white;
+  font-weight: 600;
+  font-size: 13px;
+  padding: 10px 25px;
+  border-radius: 100px;
+  float: ${p => p.float ? 'right' : 'none'};
+  border: none;
+  margin-top: 8px;
+  cursor: pointer;
+  background: ${p => p.isAdd ? '#FB542B' : '#212529'};
+
+  &:focus {
+    outline: none;
+  }
+`
+
+export const StyledButtonIcon = styled<{}, 'div'>('div')`
+  display: inline-block;
+  vertical-align: sub;
+  margin-right: 5px;
+`
diff --git a/components/brave_new_tab_ui/components/default/widget/index.tsx b/components/brave_new_tab_ui/components/default/widget/index.tsx
@@ -16,6 +16,7 @@ export interface WidgetProps {
   isCrypto?: boolean
   isCryptoTab?: boolean
   widgetTitle?: string
+  hideMenu?: boolean
   onLearnMore?: () => void
   onDisconnect?: () => void
   onRefreshData?: () => void
@@ -55,6 +56,7 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
         isCrypto,
         isCryptoTab,
         widgetTitle,
+        hideMenu,
         onLearnMore,
         onDisconnect,
         onRefreshData
@@ -75,7 +77,7 @@ const createWidget = <P extends object>(WrappedComponent: React.ComponentType<P>
           >
               <WrappedComponent {...this.props as P}/>
           </StyledWidget>
-          {hideWidget && !preventFocus &&
+          {hideWidget && !hideMenu && !preventFocus &&
           <WidgetMenu
             widgetTitle={widgetTitle}
             onLearnMore={onLearnMore}

diff --git a/components/brave_new_tab_ui/containers/app.tsx b/components/brave_new_tab_ui/containers/app.tsx
@@ -47,6 +47,7 @@ class DefaultPage extends React.Component<Props, {}> {
           saveShowRewards={PreferencesAPI.saveShowRewards}
           saveShowTogether={PreferencesAPI.saveShowTogether}
           saveShowBinance={PreferencesAPI.saveShowBinance}
+          saveShowAddCard={PreferencesAPI.saveShowAddCard}
           saveBrandedWallpaperOptIn={PreferencesAPI.saveBrandedWallpaperOptIn}
         />
       )