feat(content-explorer): grid view styling (#1464)

* feat(content-explorer): show cards with thumbnails (#1409)

* feat: showing cards with thumbnails

* feat: moved getThumbnail to api/File

* fix: fixing en-US

* feat: initial styling

* fix: removed column width math in scss

* fix: text goes to ellipsis when necessary

* fix: made GridViewSlot component

* fix: removed button right margin

Author: rickstefanik

src/components/grid-view/GridView.js

@@ -1,10 +1,9 @@
 // @flow
 import * as React from 'react';
-import classNames from 'classnames';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/es/CellMeasurer';
 import Table, { Column } from 'react-virtualized/dist/es/Table';
-import uniqueId from 'lodash/uniqueId';
 import getProp from 'lodash/get';
+import GridViewSlot from './GridViewSlot';
 
 import 'react-virtualized/styles.css';
 import './GridView.scss';
@@ -37,13 +36,13 @@ class GridView extends React.Component<Props> {
         fixedWidth: true,
     });
 
-    componentDidUpdate(prevProps: Props) {
+    componentDidUpdate({ columnCount: prevColumnCount, width: prevWidth }: Props) {
         const { columnCount, width } = this.props;
 
-        // The React Virtualized Table must be notified when either the cached
-        // row sizes or the parent width change. If omitted, rows are sized
+        // The React Virtualized Table must be notified whenever the heights of rows
+        // could potentially change. If omitted, rows are sized
         // incorrectly resulting in gaps or content overlap.
-        if (columnCount !== prevProps.columnCount || width !== prevProps.width) {
+        if (columnCount !== prevColumnCount || width !== prevWidth) {
             this.cache.clearAll();
             this.forceUpdate();
         }
@@ -58,16 +57,19 @@ class GridView extends React.Component<Props> {
         const maxSlotIndex = Math.min(startingIndex + columnCount, count);
 
         for (let slotIndex = startingIndex; slotIndex < maxSlotIndex; slotIndex += 1) {
+            const { id, selected } = getProp(currentCollection, `items[${slotIndex}]`);
+
             // using item's id as key is important for renrendering.  React Virtualized Table rerenders
             // on every 1px scroll, so using improper key would lead to image flickering in each
             // card of the grid view when scrolling.
             contents.push(
-                <div
-                    key={getProp(currentCollection, `items[${slotIndex}].id`) || uniqueId('bdl-GridView-slot')}
-                    className="bdl-GridView-slot"
-                >
-                    {slotRenderer(slotIndex)}
-                </div>,
+                <GridViewSlot
+                    key={id}
+                    selected={selected}
+                    slotIndex={slotIndex}
+                    slotRenderer={slotRenderer}
+                    slotWidth={`${(100 / columnCount).toFixed(4)}%`}
+                />,
             );
         }
 
@@ -89,7 +91,7 @@ class GridView extends React.Component<Props> {
 
         return (
             <Table
-                className={classNames('bdl-GridView', `bdl-GridView--columns-${columnCount}`)}
+                className="bdl-GridView"
                 disableHeader
                 height={height}
                 rowCount={rowCount}

src/components/grid-view/GridView.scss

@@ -1,53 +1,37 @@
-@import '../../elements/common/variables';
-@import '../../styles/variables';
-
 .bdl-GridView {
-    padding: 0 5px;
-
-    &.bdl-GridView--columns-1 .bdl-GridView-slot {
-        $columns1prct: 100%;
-
-        flex-basis: $columns1prct;
-        max-width: $columns1prct;
+    .ReactVirtualized__Table__rowColumn:first-child {
+        margin: 0;
     }
 
-    &.bdl-GridView--columns-3 .bdl-GridView-slot {
-        $columns3prct: calc(33.3333% - 10px); /* 100%/3 - 10px */
-
-        flex-basis: $columns3prct;
-        max-width: $columns3prct;
+    .bce-more-options {
+        align-self: flex-start;
     }
 
-    &.bdl-GridView--columns-5 .bdl-GridView-slot {
-        $columns5prct: calc(20% - 10px); /* 100%/5 - 10px */
+    .bce-btn-more-options {
+        margin-top: 0;
+        margin-right: 0;
+        padding: 5px 10px;
 
-        flex-basis: $columns5prct;
-        max-width: $columns5prct;
+        .btn-content {
+            align-items: center;
+            display: flex;
+            justify-content: center;
+        }
     }
+}
 
-    .ReactVirtualized__Table__rowColumn:first-of-type {
-        margin: 0;
-    }
+.bdl-GridView-body {
+    outline: none;
+    padding: 5px;
 }
 
 .bdl-GridView-row {
     display: flex;
     justify-content: flex-start;
 }
 
-.bdl-GridView-slot {
-    border: 1px solid $bdl-gray-10;
-    flex: 0 1 auto;
-    margin-top: 10px;
-    overflow: hidden;
-    padding: 15px;
-    white-space: normal;
-
-    & + & {
-        margin-left: 10px;
-    }
-}
-
 .bdl-GridView-tableRow {
     border: none;
+    padding-right: 0 !important;
+    width: 100% !important;
 }

src/components/grid-view/GridViewSlot.js

@@ -0,0 +1,27 @@
+// @flow
+import * as React from 'react';
+import classNames from 'classnames';
+import './GridViewSlot.scss';
+
+type Props = {
+    selected: boolean,
+    slotIndex: number,
+    slotRenderer: (slotIndex: number) => ?React.Element<any>,
+    slotWidth: string,
+};
+
+const GridViewSlot = ({ selected, slotIndex, slotRenderer, slotWidth }: Props) => {
+    return (
+        <div className="bdl-GridViewSlot" style={{ maxWidth: slotWidth, flexBasis: slotWidth }}>
+            <div
+                className={classNames('bdl-GridViewSlot-content', {
+                    'bdl-GridViewSlot-content--selected': selected,
+                })}
+            >
+                {slotRenderer(slotIndex)}
+            </div>
+        </div>
+    );
+};
+
+export default GridViewSlot;

src/components/grid-view/GridViewSlot.scss

@@ -0,0 +1,25 @@
+@import '../../elements/common/variables';
+@import '../../styles/variables';
+
+.bdl-GridViewSlot {
+    flex: 0 1 auto;
+    overflow: hidden;
+    padding: 5px;
+    white-space: normal;
+}
+
+.bdl-GridViewSlot-content {
+    border: 1px solid $bdl-gray-10;
+    box-shadow: 0 1px 5px rgba(50, 50, 50, .1);
+    height: 100%;
+
+    &:hover,
+    &:active,
+    &:focus {
+        border-color: $bdl-box-blue-50;
+    }
+
+    &.bdl-GridViewSlot-content--selected {
+        border-color: $bdl-box-blue-50;
+    }
+}

src/components/grid-view/__tests__/__snapshots__/GridView-test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`components/grid-view/GridView should render() 1`] = `
 <Component
-  className="bdl-GridView bdl-GridView--columns-5"
+  className="bdl-GridView"
   disableHeader={true}
   gridClassName="bdl-GridView-body"
   height={600}

src/elements/common/breadcrumbs/Breadcrumb.js

@@ -18,11 +18,11 @@ type Props = {
 
 const Breadcrumb = ({ name = '', onClick, isLast, delimiter }: Props) => {
     const title = onClick ? (
-        <PlainButton onClick={onClick} type="button">
+        <PlainButton onClick={onClick} type="button" className="bdl-Breadcrumb-title">
             {name}
         </PlainButton>
     ) : (
-        <span>{name}</span>
+        <div className="bdl-Breadcrumb-title">{name}</div>
     );
     return (
         <span className="be-breadcrumb">

src/elements/common/breadcrumbs/Breadcrumb.scss

@@ -22,3 +22,10 @@
     flex-shrink: 0;
     margin: 1px 8px 0 5px;
 }
+
+.bdl-Breadcrumb-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}

src/elements/common/breadcrumbs/InlineBreadcrumbs.js

@@ -17,7 +17,7 @@ type Props = {
     rootId: string,
 };
 
-const InlineBreadcrumbs = ({ rootId, item, onItemClick }: Props) => {
+const InlineBreadcrumbs = ({ item, onItemClick, rootId }: Props) => {
     const { path_collection }: BoxItem = item;
     const { entries: breadcrumbs = [] } = path_collection || {};
     return (

src/elements/common/item/ItemName.scss

@@ -1,7 +1,11 @@
 @import '../variables';
 
 .be-item-label {
+    display: block;
     outline: none;
+    overflow: hidden;
     text-align: left;
+    text-overflow: ellipsis;
     white-space: nowrap;
+    width: 100%;
 }

src/elements/common/item/ItemSubDetails.js

@@ -10,13 +10,14 @@ import getSize from '../../../utils/size';
 import Datefield from '../date';
 import messages from '../messages';
 import { VIEW_RECENTS } from '../../../constants';
+import './ItemSubDetails.scss';
 
 type Props = {
     item: BoxItem,
     view: View,
 };
 
-const ItemSubDetails = ({ view, item }: Props) => {
+const ItemSubDetails = ({ item, view }: Props) => {
     const { modified_at = '', interacted_at = '', modified_by }: BoxItem = item;
     const modifiedBy: string = modified_by ? modified_by.name || '' : '';
     const isRecents: boolean = view === VIEW_RECENTS;
@@ -33,17 +34,16 @@ const ItemSubDetails = ({ view, item }: Props) => {
 
     return (
         <span>
-            <FormattedMessage
-                {...message}
-                values={{
-                    date: DateValue,
-                    name: modifiedBy,
-                }}
-            />
-            <span>
-                &nbsp;-&nbsp;
-                {getSize(size)}
+            <span className="bdl-ItemSubDetails-modifiedBy">
+                <FormattedMessage
+                    {...message}
+                    values={{
+                        date: DateValue,
+                        name: modifiedBy,
+                    }}
+                />
             </span>
+            <span className="bdl-ItemSubDetails-size">{getSize(size)}</span>
         </span>
     );
 };