Revert horizontal asset bar (#881)

The horizontal asset bar looks more visually appealing on the bottom and it also opens up more real estate for the main editing surface.

However, it also reduces the overall usability of the app. The vertical scrolling behavior on the moues wheel no longer works and the keyboard shortcut hot keys are inverted.

Let's revert this change for now until we are able to overcome these critical usability requirements.

src/react/components/pages/editorPage/editorPage.scss

@@ -8,13 +8,11 @@
   overflow: hidden;
   position: relative;
 
-  &-bottombar {
+  &-sidebar {
     display: flex;
     flex-grow: 1;
-    flex-direction: row;
 
     &-nav {
-      height: 100%;
       width: 100%;
 
       .asset-list {

src/react/components/pages/editorPage/editorPage.tsx

@@ -187,13 +187,22 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                         icon={"fa-lock"}
                         handler={this.handleCtrlTagHotKey} />);
                 })}
-                <SplitPane split="horizontal"
+                <SplitPane split="vertical"
+                    defaultSize={this.state.thumbnailSize.width}
                     minSize={100}
                     maxSize={400}
                     paneStyle={{ display: "flex" }}
                     onChange={this.onSideBarResize}
-                    onDragFinished={this.onSideBarResizeComplete}
-                    primary={"second"}>
+                    onDragFinished={this.onSideBarResizeComplete}>
+                    <div className="editor-page-sidebar bg-lighter-1">
+                        <EditorSideBar
+                            assets={rootAssets}
+                            selectedAsset={selectedAsset ? selectedAsset.asset : null}
+                            onBeforeAssetSelected={this.onBeforeAssetSelected}
+                            onAssetSelected={this.selectAsset}
+                            thumbnailSize={this.state.thumbnailSize}
+                        />
+                    </div>
                     <div className="editor-page-content" onClick={this.onPageClick}>
                         <div className="editor-page-content-main">
                             <div className="editor-page-content-main-header">
@@ -250,15 +259,6 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                             confirmButtonColor="danger"
                             onConfirm={this.onTagDeleted} />
                     </div>
-                    <div className="editor-page-bottombar bg-lighter-1">
-                        <EditorSideBar
-                            assets={rootAssets}
-                            selectedAsset={selectedAsset ? selectedAsset.asset : null}
-                            onBeforeAssetSelected={this.onBeforeAssetSelected}
-                            onAssetSelected={this.selectAsset}
-                            thumbnailSize={this.state.thumbnailSize}
-                        />
-                    </div>
                 </SplitPane>
                 <Alert show={this.state.showInvalidRegionWarning}
                     title={strings.editorPage.messages.enforceTaggedRegions.title}

src/react/components/pages/editorPage/editorSideBar.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import EditorSideBar, { IEditorSideBarProps, IEditorSideBarState } from "./editorSideBar";
 import { ReactWrapper, mount } from "enzyme";
-import { AutoSizer, Grid } from "react-virtualized";
+import { AutoSizer, List } from "react-virtualized";
 import MockFactory from "../../../../common/mockFactory";
 
 describe("Editor SideBar", () => {
@@ -21,7 +21,7 @@ describe("Editor SideBar", () => {
         const wrapper = createComponent(props);
         expect(wrapper.exists()).toBe(true);
         expect(wrapper.find(AutoSizer).exists()).toBe(true);
-        expect(wrapper.find(Grid).exists()).toBe(true);
+        expect(wrapper.find(List).exists()).toBe(true);
     });
 
     it("Initializes state without asset selected", () => {
@@ -117,8 +117,8 @@ describe("Editor SideBar", () => {
         };
 
         const wrapper = createComponent(props);
-        const grid = wrapper.find(Grid).instance() as Grid;
-        const recomputeGridSizeSpy = jest.spyOn(grid, "recomputeGridSize");
+        const list = wrapper.find(List).instance() as List;
+        const recomputeRowHeightsSpy = jest.spyOn(list, "recomputeRowHeights");
 
         wrapper.setProps({
             thumbnailSize: {
@@ -127,27 +127,6 @@ describe("Editor SideBar", () => {
             },
         });
 
-        expect(recomputeGridSizeSpy).toBeCalled();
-    });
-
-    it("Correctly computes Grid column size", () => {
-        const props: IEditorSideBarProps = {
-            assets: testAssets,
-            onAssetSelected: onSelectAssetHandler,
-            thumbnailSize: {
-                width: 175,
-                height: 155,
-            },
-        };
-
-        const wrapper = createComponent(props);
-        const grid = wrapper.find(Grid).instance() as Grid;
-        const autoSizer = wrapper.find(AutoSizer).instance() as AutoSizer;
-        autoSizer.setState({
-            width: 150,
-            height: 91,
-        });
-
-        expect(grid.props.columnWidth()).toBe(100);
+        expect(recomputeRowHeightsSpy).toBeCalled();
     });
 });

src/react/components/pages/editorPage/editorSideBar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AutoSizer, Grid } from "react-virtualized";
+import { AutoSizer, List } from "react-virtualized";
 import { IAsset, AssetState, ISize } from "../../../../models/applicationState";
 import { AssetPreview } from "../../common/assetPreview/assetPreview";
 import { strings } from "../../../../common/strings";
@@ -38,24 +38,23 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
             : 0,
     };
 
-    private listRef: React.RefObject<Grid> = React.createRef();
+    private listRef: React.RefObject<List> = React.createRef();
 
     public render() {
         return (
             <div className="editor-page-bottombar-nav">
                 <AutoSizer>
                     {({ height, width }) => (
-                        <Grid
+                        <List
                             ref={this.listRef}
                             className="asset-list"
-                            cellRenderer={this.rowRenderer}
-                            columnCount={this.props.assets.length}
-                            columnWidth={() => this.getColumnWidth(height)}
                             height={height}
                             width={width}
-                            rowCount={1}
-                            rowHeight={height}
+                            rowCount={this.props.assets.length}
+                            rowHeight={() => this.getRowHeight(width)}
                             rowRenderer={this.rowRenderer}
+                            overscanRowCount={2}
+                            scrollToIndex={this.state.scrollToIndex}
                         />
                     )}
                 </AutoSizer>
@@ -65,7 +64,7 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
 
     public componentDidUpdate(prevProps: IEditorSideBarProps) {
         if (prevProps.thumbnailSize !== this.props.thumbnailSize) {
-            this.listRef.current.recomputeGridSize();
+            this.listRef.current.recomputeRowHeights();
         }
 
         if (!prevProps.selectedAsset && !this.props.selectedAsset) {
@@ -78,11 +77,8 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
         }
     }
 
-    private getColumnWidth = (height: number) => {
-        const padding = 16;
-        const aspectRatio = (4 / 3);
-
-        return (height - padding) * aspectRatio;
+    private getRowHeight = (width: number) => {
+        return width / (4 / 3) + 16;
     }
 
     private selectAsset = (selectedAsset: IAsset): void => {
@@ -91,7 +87,7 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
         this.setState({
             scrollToIndex,
         }, () => {
-            this.listRef.current.forceUpdate();
+            this.listRef.current.forceUpdateGrid();
         });
     }
 
@@ -106,8 +102,8 @@ export default class EditorSideBar extends React.Component<IEditorSideBarProps,
         this.props.onAssetSelected(asset);
     }
 
-    private rowRenderer = ({ columnIndex, key, style }): JSX.Element => {
-        const asset = this.props.assets[columnIndex];
+    private rowRenderer = ({ key, index, style }): JSX.Element => {
+        const asset = this.props.assets[index];
         const selectedAsset = this.props.selectedAsset;
 
         return (