feat: move asset preview to horizontal (#870)

feat: change sidebar from vertical to horizontal

Moved the vertical asset previewer to be horizontal and at the bottom of the screen. This helps maximize the size of the picture being tagged when it is a landscape photo.

AB#860

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

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

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

@@ -187,22 +187,13 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                         icon={"fa-lock"}
                         handler={this.handleCtrlTagHotKey} />);
                 })}
-                <SplitPane split="vertical"
-                    defaultSize={this.state.thumbnailSize.width}
+                <SplitPane split="horizontal"
                     minSize={100}
                     maxSize={400}
                     paneStyle={{ display: "flex" }}
                     onChange={this.onSideBarResize}
-                    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>
+                    onDragFinished={this.onSideBarResizeComplete}
+                    primary={"second"}>
                     <div className="editor-page-content" onClick={this.onPageClick}>
                         <div className="editor-page-content-main">
                             <div className="editor-page-content-main-header">
@@ -259,6 +250,15 @@ 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, List } from "react-virtualized";
+import { AutoSizer, Grid } 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(List).exists()).toBe(true);
+        expect(wrapper.find(Grid).exists()).toBe(true);
     });
 
     it("Initializes state without asset selected", () => {
@@ -117,8 +117,8 @@ describe("Editor SideBar", () => {
         };
 
         const wrapper = createComponent(props);
-        const list = wrapper.find(List).instance() as List;
-        const recomputeRowHeightsSpy = jest.spyOn(list, "recomputeRowHeights");
+        const grid = wrapper.find(Grid).instance() as Grid;
+        const recomputeGridSizeSpy = jest.spyOn(grid, "recomputeGridSize");
 
         wrapper.setProps({
             thumbnailSize: {
@@ -127,6 +127,27 @@ describe("Editor SideBar", () => {
             },
         });
 
-        expect(recomputeRowHeightsSpy).toBeCalled();
+        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);
     });
 });

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

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