Split scroll between titles and folders for BM manager

- Auditors: @bsclifton - Close #5076
brave · Apr 27, 2017 · da6e3ac · da6e3ac
1 parent 8b7c008
commit da6e3ac
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 46 deletions.
diff --git a/js/about/bookmarks.js b/js/about/bookmarks.js
@@ -16,6 +16,7 @@ const SortableTable = require('../components/sortableTable')
 const siteUtil = require('../state/siteUtil')
 const formatUtil = require('../../app/common/lib/formatUtil')
 const iconSize = require('../../app/common/lib/faviconUtil').iconSize
+const ScrollableContent = require('../../app/renderer/components/common/scrollableContent')
 
 const ipc = window.chrome.ipcRenderer
 
@@ -136,55 +137,57 @@ class BookmarkFolderItem extends React.Component {
 class BookmarkFolderList extends ImmutableComponent {
   render () {
     return <list className='bookmarkFolderList'>
-      {
-        this.props.isRoot && this.props.search
-        ? <div role='listitem' className='listItem selected'>
-          <span className='bookmarkFolderIcon fa fa-search' />
-          <span data-l10n-id='allFolders' />
-        </div>
-        : null
-      }
-      {
-        this.props.isRoot
-        ? <BookmarkFolderItem
-          onClearSelection={this.props.onClearSelection}
-          search={this.props.search}
-          selected={!this.props.search && this.props.selectedFolderId === 0}
-          dataL10nId='bookmarksToolbar'
-          draggable={false}
-          onChangeSelectedFolder={this.props.onChangeSelectedFolder}
-          allBookmarkFolders={this.props.allBookmarkFolders}
-          selectedFolderId={this.props.selectedFolderId}
-          bookmarkFolder={Immutable.fromJS({folderId: 0, tags: [siteTags.BOOKMARK_FOLDER]})} />
-        : null
-      }
-      {
-        this.props.bookmarkFolders.map((bookmarkFolder) =>
-          this.props.isRoot && bookmarkFolder.get('parentFolderId') === -1
-          ? null
-          : <BookmarkFolderItem
+      <ScrollableContent>
+        {
+          this.props.isRoot && this.props.search
+          ? <div role='listitem' className='listItem selected'>
+            <span className='bookmarkFolderIcon fa fa-search' />
+            <span data-l10n-id='allFolders' />
+          </div>
+          : null
+        }
+        {
+          this.props.isRoot
+          ? <BookmarkFolderItem
             onClearSelection={this.props.onClearSelection}
-            bookmarkFolder={bookmarkFolder}
+            search={this.props.search}
+            selected={!this.props.search && this.props.selectedFolderId === 0}
+            dataL10nId='bookmarksToolbar'
+            draggable={false}
+            onChangeSelectedFolder={this.props.onChangeSelectedFolder}
             allBookmarkFolders={this.props.allBookmarkFolders}
+            selectedFolderId={this.props.selectedFolderId}
+            bookmarkFolder={Immutable.fromJS({folderId: 0, tags: [siteTags.BOOKMARK_FOLDER]})} />
+          : null
+        }
+        {
+          this.props.bookmarkFolders.map((bookmarkFolder) =>
+            this.props.isRoot && bookmarkFolder.get('parentFolderId') === -1
+            ? null
+            : <BookmarkFolderItem
+              onClearSelection={this.props.onClearSelection}
+              bookmarkFolder={bookmarkFolder}
+              allBookmarkFolders={this.props.allBookmarkFolders}
+              search={this.props.search}
+              selected={!this.props.search && this.props.selectedFolderId === bookmarkFolder.get('folderId')}
+              selectedFolderId={this.props.selectedFolderId}
+              onChangeSelectedFolder={this.props.onChangeSelectedFolder} />)
+        }
+        {
+          this.props.isRoot
+          ? <BookmarkFolderItem
+            onClearSelection={this.props.onClearSelection}
             search={this.props.search}
-            selected={!this.props.search && this.props.selectedFolderId === bookmarkFolder.get('folderId')}
+            selected={!this.props.search && this.props.selectedFolderId === -1}
+            dataL10nId='otherBookmarks'
+            draggable={false}
+            onChangeSelectedFolder={this.props.onChangeSelectedFolder}
+            allBookmarkFolders={this.props.allBookmarkFolders}
             selectedFolderId={this.props.selectedFolderId}
-            onChangeSelectedFolder={this.props.onChangeSelectedFolder} />)
-      }
-      {
-        this.props.isRoot
-        ? <BookmarkFolderItem
-          onClearSelection={this.props.onClearSelection}
-          search={this.props.search}
-          selected={!this.props.search && this.props.selectedFolderId === -1}
-          dataL10nId='otherBookmarks'
-          draggable={false}
-          onChangeSelectedFolder={this.props.onChangeSelectedFolder}
-          allBookmarkFolders={this.props.allBookmarkFolders}
-          selectedFolderId={this.props.selectedFolderId}
-          bookmarkFolder={Immutable.fromJS({folderId: -1, tags: [siteTags.BOOKMARK_FOLDER]})} />
-        : null
-      }
+            bookmarkFolder={Immutable.fromJS({folderId: -1, tags: [siteTags.BOOKMARK_FOLDER]})} />
+          : null
+        }
+      </ScrollableContent>
     </list>
   }
 }
@@ -448,7 +451,7 @@ class AboutBookmarks extends React.Component {
     this.refs.bookmarkSearch.focus()
   }
   render () {
-    return <div className='siteDetailsPage' onClick={this.onClick}>
+    return <div className='siteDetailsPage bookmarksManager' onClick={this.onClick}>
       <div className='siteDetailsPageHeader'>
         <AboutPageSectionTitle data-l10n-id='bookmarkManager' />
         <div className='headerActions'>

diff --git a/less/about/bookmarks.less b/less/about/bookmarks.less
@@ -11,6 +11,11 @@
   height: 100%;
   min-height: 100vh;
 
+  &.bookmarksManager {
+    position: fixed;
+    width: 100%;
+  }
+
   .siteDetailsPageHeader {
     display: flex;
     padding: 24px;
@@ -51,6 +56,11 @@
 
       > .bookmarkFolderList {
         display: block;
+        overflow-x: auto;
+        overflow-y: auto;
+        max-width: 410px;
+        // viewport - header size - header size
+        max-height: calc(~"100vh - 84px - 35px");
 
         .listItem >* {
           color: @buttonColor;
@@ -76,6 +86,8 @@
     .organizeView {
       flex-grow: 5;
       border-left: 1px solid @braveOrange;
+      overflow: scroll;
+      max-height: 100vh;
 
       .sortableTable {
         user-select: none;
@@ -185,3 +197,27 @@
 .exportBookmarks {
   -webkit-mask-image: url('../../img/toolbar/bookmarks_export.svg');
 }
+
+// Reset styles for small breakpoints
+@media (max-width: @breakpointForBookmarksPage) {
+  .siteDetailsPage.bookmarksManager {
+    position: static;
+  }
+
+  .siteDetailsPage {
+    .siteDetailsPageContent {
+      .folderView {
+        .organizeView {
+          overflow: visible;
+          max-height: inherit;
+        }
+        > .bookmarkFolderList {
+          overflow-x: visible;
+          overflow-y: visible;
+          max-width: inherit;
+          max-height: inherit;
+        }
+      }
+    }
+  }
+}
diff --git a/less/variables.less b/less/variables.less
@@ -155,6 +155,7 @@
 
 @breakpointWideViewport: 1000px;
 @breakpointNarrowViewport: 600px;
+@breakpointForBookmarksPage: 565px;
 @breakpointExtensionButtonPadding: 720px;
 @breakpointSmallWin32: 650px;
 @breakpointTinyWin32: 500px;