✨ NTP: Enhance NTP widgets with hover state, custom menu, and removal

brave · Aug 14, 2019 · f13c840 · f13c840
1 parent f10bfe4
commit f13c840
Showing 1 changed file with 42 additions and 29 deletions.
diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx
@@ -9,7 +9,6 @@ import {
   Page,
   Header,
   ClockWidget as Clock,
-  Main,
   ListWidget as List,
   Footer,
   App,
@@ -162,36 +161,50 @@ class NewTabPage extends React.Component<Props, State> {
         }
         <Page>
           <Header>
-            <Stats stats={newTabData.stats} showWidget={newTabData.showStats}/>
-            <Clock showWidget={newTabData.showClock} />
-            <Main>
-              <List showWidget={newTabData.showTopSites}>
-                {
-                  this.props.newTabData.gridSites.map((site: NewTab.Site) =>
-                    <Block
-                      key={site.url}
-                      id={site.url}
-                      title={site.title}
-                      href={site.url}
-                      favicon={site.favicon}
-                      style={{ backgroundColor: site.themeColor || site.computedThemeColor }}
-                      onToggleBookmark={this.onToggleBookmark.bind(this, site)}
-                      onPinnedTopSite={this.onTogglePinnedTopSite.bind(this, site)}
-                      onIgnoredTopSite={this.onIgnoredTopSite.bind(this, site)}
-                      onDraggedSite={this.onDraggedSite}
-                      onDragEnd={this.onDragEnd}
-                      isPinned={site.pinned}
-                      isBookmarked={site.bookmarked !== undefined}
-                    />
-                  )
-                }
-              </List>
+            <Stats
+              textDirection={newTabData.textDirection}
+              stats={newTabData.stats}
+              showWidget={newTabData.showStats}
+              hideWidget={this.toggleShowStats}
+              menuPosition={'right'}
+            />
+            <Clock
+              textDirection={newTabData.textDirection}
+              showWidget={newTabData.showClock}
+              hideWidget={this.toggleShowClock}
+              menuPosition={'left'}
+            />
+            <List
+              textDirection={newTabData.textDirection}
+              showWidget={newTabData.showTopSites}
+              menuPosition={'right'}
+              hideWidget={this.toggleShowTopSites}
+            >
               {
-                this.props.newTabData.showSiteRemovalNotification
-                ? <SiteRemovalNotification actions={actions} />
-                : null
+                this.props.newTabData.gridSites.map((site: NewTab.Site) =>
+                  <Block
+                    key={site.url}
+                    id={site.url}
+                    title={site.title}
+                    href={site.url}
+                    favicon={site.favicon}
+                    style={{ backgroundColor: site.themeColor || site.computedThemeColor }}
+                    onToggleBookmark={this.onToggleBookmark.bind(this, site)}
+                    onPinnedTopSite={this.onTogglePinnedTopSite.bind(this, site)}
+                    onIgnoredTopSite={this.onIgnoredTopSite.bind(this, site)}
+                    onDraggedSite={this.onDraggedSite}
+                    onDragEnd={this.onDragEnd}
+                    isPinned={site.pinned}
+                    isBookmarked={site.bookmarked !== undefined}
+                  />
+                )
               }
-            </Main>
+            </List>
+            {
+              this.props.newTabData.showSiteRemovalNotification
+              ? <SiteRemovalNotification actions={actions} />
+              : null
+            }
           </Header>
           <Footer>
             <FooterInfo