✨NTP: Dynamically resize top-sites element based on number of top sit…

…es: closes brave/brave-browser#5015
brave · Aug 14, 2019 · 836696e · 836696e
1 parent f13c840
commit 836696e
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 10 deletions.
diff --git a/components/brave_new_tab_ui/components/default/index.ts b/components/brave_new_tab_ui/components/default/index.ts
@@ -6,7 +6,7 @@
 import { StatsContainer, StatsItem } from './stats'
 import { Header, Main, Footer } from './grid'
 import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle, SettingsWrapper } from './settings'
-import { List, ListWidget, Tile, TileActionsContainer, TileAction, TileFavicon } from './topSites'
+import { ListWidget, Tile, TileActionsContainer, TileAction, TileFavicon } from './topSites'
 import { SiteRemovalNotification, SiteRemovalText, SiteRemovalAction } from './notification'
 import { ClockWidget } from './clock'
 import createWidget from './widget'
@@ -19,7 +19,6 @@ export {
   Header,
   Main,
   Footer,
-  List,
   ListWidget,
   Tile,
   TileActionsContainer,

diff --git a/components/brave_new_tab_ui/components/default/topSites/index.ts b/components/brave_new_tab_ui/components/default/topSites/index.ts
@@ -5,21 +5,25 @@
 import styled from 'brave-ui/theme'
 import createWidget from '../widget'
 
-export const List = styled<{}, 'div'>('div')`
+interface ListProps {
+  blockNumber: number
+}
+
+export const List = styled<ListProps, 'div'>('div')`
   height: 100%;
   display: grid;
-  grid-template-columns: repeat(6, 92px);
+  grid-template-columns: repeat(${p => Math.min(p.blockNumber, 6).toString()}, 92px);
 
   @media screen and (max-width: 1150px) {
     justify-content: center;
   }
 
   @media screen and (max-width: 700px) {
-    grid-template-columns: repeat(3, 92px);
+    grid-template-columns: repeat(${p => Math.min(p.blockNumber, 3).toString()}, 92px);
   }
 
   @media screen and (max-width: 390px) {
-    grid-template-columns: repeat(2, 92px);
+    grid-template-columns: repeat(${p => Math.min(p.blockNumber, 2).toString()}, 92px);
   }
 `
 

diff --git a/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx b/components/brave_new_tab_ui/components/default/widget/widgetMenu.tsx
@@ -1,3 +1,8 @@
+// Copyright (c) 2019 The Brave Authors. All rights reserved.
+// 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 { StyledWidgetMenuContainer, StyledWidgetMenu, StyledWidgetButton, StyledWidgetIcon, StyledSpan } from './styles'

diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx
@@ -174,7 +174,8 @@ class NewTabPage extends React.Component<Props, State> {
               hideWidget={this.toggleShowClock}
               menuPosition={'left'}
             />
-            <List
+            {this.props.newTabData.gridSites.length && <List
+              blockNumber={this.props.newTabData.gridSites.length}
               textDirection={newTabData.textDirection}
               showWidget={newTabData.showTopSites}
               menuPosition={'right'}
@@ -199,7 +200,7 @@ class NewTabPage extends React.Component<Props, State> {
                   />
                 )
               }
-            </List>
+            </List>}
             {
               this.props.newTabData.showSiteRemovalNotification
               ? <SiteRemovalNotification actions={actions} />

diff --git a/components/brave_new_tab_ui/stories/default/topSites/topSitesList.tsx b/components/brave_new_tab_ui/stories/default/topSites/topSitesList.tsx
@@ -9,7 +9,7 @@ import { DragDropContext, Droppable } from 'react-beautiful-dnd'
 import { reorder, getItems } from '../helpers'
 
 // Feature-specific components
-import { List } from '../../../components/default'
+import { List } from '../../../components/default/topSites'
 import createWidget from '../../../components/default/widget'
 
 // Component group
@@ -43,7 +43,11 @@ class TopSitesList extends React.PureComponent<Props, State> {
         <Droppable droppableId='droppable' direction='horizontal'>
           {(provided) => {
             return (
-              <List {...provided.droppableProps} innerRef={provided.innerRef}>
+              <List
+                blockNumber={this.state.items.length}
+                {...provided.droppableProps}
+                innerRef={provided.innerRef}
+              >
                 {this.state.items.map((item, index) => <TopSite item={item} index={index} key={index} />)}
                 {provided.placeholder}
               </List>