Shows addSite tile by default on topSites favorites mode

fix: brave/brave-browser#14480 It's only hidden when user dragging other tiles because it is moving by other tile's dragging although it's position is not changed at the end. There is an issue for it. (see clauderic/react-sortable-hoc#648)
brave · Mar 6, 2021 · 35ef458 · 35ef458
1 parent b682590
commit 35ef458
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/components/brave_new_tab_ui/components/default/gridSites/index.ts b/components/brave_new_tab_ui/components/default/gridSites/index.ts
@@ -36,7 +36,11 @@ export const AddSiteTileImage = styled<{}, 'div'>('div')`
   }
 `
 
-export const AddSiteTile = styled<{}, 'button'>('button')`
+export interface AddSiteTileProps {
+  isDragging: boolean
+}
+
+export const AddSiteTile = styled<AddSiteTileProps, 'button'>('button')`
   background: transparent;
   width: 78px;
   height: 110px;
@@ -49,9 +53,12 @@ export const AddSiteTile = styled<{}, 'button'>('button')`
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  visibility: hidden;
   gap: 8px;
 
+  ${p => p.isDragging && css`
+    visibility: hidden;
+  `}
+
   &:focus-visible, :focus {
     gap: 4px;
 
@@ -67,7 +74,6 @@ export const AddSiteTile = styled<{}, 'button'>('button')`
 
 export interface ListProps {
   blockNumber: number
-  isDragging: boolean
 }
 
 export const List = styled<ListProps, 'div'>('div')`
@@ -86,14 +92,6 @@ export const List = styled<ListProps, 'div'>('div')`
   @media screen and (max-width: 390px) {
     grid-template-columns: repeat(${p => Math.min(p.blockNumber, 2).toString()}, 86px);
   }
-
-  ${p => !p.isDragging && css`
-    &:hover {
-      ${AddSiteTile} {
-        visibility: visible;
-      }
-    }
-  `}
 `
 
 export const TileActionsContainer = styled<{}, 'nav'>('nav')`

diff --git a/components/brave_new_tab_ui/containers/newTab/addSiteTile.tsx b/components/brave_new_tab_ui/containers/newTab/addSiteTile.tsx
@@ -13,12 +13,16 @@ import AddSiteTileIcon from '../../components/default/gridSites/assets/add-site-
 
 interface Props {
   showEditTopSite: () => void
+  isDragging: boolean
 }
 
 class AddSite extends React.PureComponent<Props, {}> {
   render () {
     return (
-      <AddSiteTile onClick={this.props.showEditTopSite}>
+      <AddSiteTile
+        onClick={this.props.showEditTopSite}
+        isDragging={this.props.isDragging}
+      >
         <AddSiteTileImage>
           <AddSiteTileIcon/>
         </AddSiteTileImage>

diff --git a/components/brave_new_tab_ui/containers/newTab/gridSites.tsx b/components/brave_new_tab_ui/containers/newTab/gridSites.tsx
@@ -89,7 +89,6 @@ class TopSitesList extends React.PureComponent<Props, State> {
       <>
         <DynamicList
           blockNumber={maxGridSize}
-          isDragging={this.state.isDragging}
           updateBeforeSortStart={this.updateBeforeSortStart}
           onSortEnd={this.onSortEnd}
           axis='xy'
@@ -122,6 +121,7 @@ class TopSitesList extends React.PureComponent<Props, State> {
             <AddSiteTile
               index={gridSites.length}
               disabled={true}
+              isDragging={this.state.isDragging}
               showEditTopSite={onShowEditTopSite}
             />
           }