Fix #1367: Image picker enhancements

src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx

@@ -35,6 +35,7 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
             label={strings.LinkFileInstructions}
             ariaLabel={strings.LinkFileInstructions}
             defaultValue={"https://"}
+            placeholder={"https://"}
             onGetErrorMessage={(value: string) => this._getErrorMessagePromise(value)}
             autoAdjustHeight={false}
             underlined={false}

src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss

@@ -2,95 +2,55 @@
 //@import "../PropertyPaneFilePicker.module.scss";
 
 /** TILES **/
-.filePickerFolderCardGrid {
-  overflow: hidden;
-  font-size: 0;
-
-  :global {
-    .ms-List-page {
-      overflow: hidden;
-      font-size: 0;
-    }
-
-    .ms-List-surface {
-      position: relative;
-    }
-  }
+.documentLibraryBrowserContainer {
+  padding: 0;
 }
 
 .filePickerFolderCardTile {
+  max-width: 176px;
   text-align: center;
   outline: none;
   position: relative;
   @include ms-float(left);
-}
-
-.filePickerFolderCardPadder {
-  position: absolute;
-  left: 5px;
-  top: 5px;
-  right: 5px;
-  bottom: 5px;
-}
-
-:global(.ms-Fabric--isFocusVisible) .filePickerFolderCardTile:focus:after {
-  content: "";
-  position: absolute;
-  left: 2px;
-  right: 2px;
-  top: 2px;
-  bottom: 2px;
-  box-sizing: border-box;
-  border: 1px solid "[theme:white, default:#{$ms-color-white}]";
-}
-
-.filePickerFolderCardSizer {
-  padding-bottom: 100%;
-}
-
-.filePickerFolderCardImage {
-  width: 100%;
-  left: 0;
-  top: 0;
-  color: "[theme:white, default:#{$ms-color-white}]";
-  position: absolute;
-  bottom: 0;
-  font-size: 12px;
-  width: 100%;
-}
-
-.filePickerFolderCardLabel {
-  background-color: "[theme:neutralLight, default:#{$ms-color-neutralLight}]";
-  height: 100%;
-  width: 100%;
-  top: 0;
-  color: "[theme:black, default:#{$ms-color-black}]";
-  padding: 10px;
-  position: absolute;
-  bottom: 0;
-  font-size: 12px;
-  left: 0;
-  width: 100%;
-  box-sizing: border-box;
-  font-size: 21px;
-  font-weight: 600;
-
-  :global .ms-Button-textContainer {
-    max-width: 100%;
-    word-break: break-word;
-  }
 
   &:hover {
-    color: "[theme:black, default:#{$ms-color-black}]";
-    background-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
+    background-color: $ms-color-neutralLighter;
+    border-radius: 5px;
+    .filePickerFolderCardTitle {
+      text-decoration: underline;
+    }
   }
 
-  &:active {
-    color: "[theme:black, default:#{$ms-color-black}]";
-    background-color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+  .filePickerFolderCardImage {
+    position: relative;
+    width: 112px;
+    height: 80px;
+    margin: 24px 32px 0px 32px;
+    cursor: pointer;
+
+    .filePickerFolderCoverBack,
+    .filePickerFolderCoverFront {
+      display: block;
+      position: absolute;
+      left: -3px;
+      right: -3px;
+      bottom: -4px;
+
+      img {
+        border: none;
+        padding: 0;
+        margin: 0;
+      }
+    }
   }
-}
 
-.documentLibraryBrowserContainer {
-  padding: 0;
+  .filePickerFolderCardTitle {
+    cursor: pointer;
+    font-size: 14px;
+    overflow:hidden;
+    white-space:nowrap;
+    text-overflow: ellipsis;
+    padding: 12px 8px;
+    text-align: center;
+  }
 }

src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.tsx

@@ -1,34 +1,21 @@
-import * as React from 'react';
-import { List } from '@fluentui/react/lib/List';
-import { Spinner } from '@fluentui/react/lib/Spinner';
-import { Image, ImageFit } from '@fluentui/react/lib/Image';
-import { IDocumentLibraryBrowserProps } from './IDocumentLibraryBrowserProps';
-import { IDocumentLibraryBrowserState } from './IDocumentLibraryBrowserState';
-import { ILibrary } from '../../../../services/FileBrowserService.types';
+import * as React from "react";
+import { Spinner } from "@fluentui/react/lib/Spinner";
+import { Stack } from "@fluentui/react/lib/Stack";
+import { Icon } from "@fluentui/react/lib/Icon";
+import { IDocumentLibraryBrowserProps } from "./IDocumentLibraryBrowserProps";
+import { IDocumentLibraryBrowserState } from "./IDocumentLibraryBrowserState";
+import { ILibrary } from "../../../../services/FileBrowserService.types";
 
-import { IRectangle } from '@fluentui/react/lib/Utilities';
-import { DefaultButton } from '@fluentui/react/lib/Button';
-
-import styles from './DocumentLibraryBrowser.module.scss';
-import * as strings from 'ControlStrings';
-
-/**
- * Rows per page
- */
-export const ROWS_PER_PAGE = 3;
-
-/**
- * Maximum row height
- */
-export const MAX_ROW_HEIGHT = 250;
+import styles from "./DocumentLibraryBrowser.module.scss";
+import * as strings from "ControlStrings";
 
 /**
  * This would have been better done as an Office Fabric TileList, but it isn't available yet for production use
  */
-export class DocumentLibraryBrowser extends React.Component<IDocumentLibraryBrowserProps, IDocumentLibraryBrowserState> {
-  private _columnCount: number;
-  private _columnWidth: number;
-  private _rowHeight: number;
+export class DocumentLibraryBrowser extends React.Component<
+  IDocumentLibraryBrowserProps,
+  IDocumentLibraryBrowserState
+> {
 
   constructor(props: IDocumentLibraryBrowserProps) {
     super(props);
@@ -54,58 +41,42 @@ export class DocumentLibraryBrowser extends React.Component<IDocumentLibraryBrow
     return (
       <div className={styles.documentLibraryBrowserContainer}>
         {isLoading && <Spinner label={strings.Loading} />}
-        <List
-          className={styles.filePickerFolderCardGrid}
-          items={lists}
-          getItemCountForPage={this._getItemCountForPage}
-          getPageHeight={this._getPageHeight}
-          renderedWindowsAhead={4}
-          onRenderCell={this._onRenderLibraryTile}
-        />
+        <Stack wrap horizontal horizontalAlign="start" verticalAlign="center">
+          {lists.map((list, index) =>
+            this._onRenderLibraryTile(list, index)
+          )}
+        </Stack>
       </div>
     );
   }
 
-  /**
-   * Calculates how many items there should be in the page
-   */
-  private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => {
-    if (itemIndex === 0) {
-      this._columnCount = Math.ceil(surfaceRect.width / MAX_ROW_HEIGHT);
-      this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);
-      this._rowHeight = this._columnWidth;
-    }
-
-    return this._columnCount * ROWS_PER_PAGE;
-  }
-
-  /**
-   * Gets the height of a list "page"
-   */
-  private _getPageHeight = (): number => {
-    return this._rowHeight * ROWS_PER_PAGE;
-  }
-
-  /**
+   /**
    * Renders a cell for search suggestions
    */
   private _onRenderLibraryTile = (item: ILibrary, index: number | undefined): JSX.Element => {
-    const imgSrc = item.iconPath ? item.iconPath : "";
 
     return (
       <div
+        key={item.absoluteUrl}
         className={styles.filePickerFolderCardTile}
         data-is-focusable={true}
-        style={{
-          width: 100 / this._columnCount + '%'
-        }}
+        onClick={(_event) => this._handleOpenLibrary(item)}
       >
-        <div className={styles.filePickerFolderCardSizer}>
-          <div className={styles.filePickerFolderCardPadder}>
-            <Image src={imgSrc} className={styles.filePickerFolderCardImage} imageFit={ImageFit.cover} />
-            <DefaultButton className={styles.filePickerFolderCardLabel} onClick={(_event) => this._handleOpenLibrary(item)}>{item.title}</DefaultButton>
+          <div className={styles.filePickerFolderCardImage}>
+            <Icon
+              className={styles.filePickerFolderCoverBack}
+              imageProps={{
+                src: strings.FolderBackPlate
+            }} />
+            <Icon
+              className={styles.filePickerFolderCoverFront}
+              imageProps={{
+                src: strings.FolderFrontPlate
+            }} />
+          </div>
+            <div className={styles.filePickerFolderCardTitle}>
+              {item.title}
           </div>
-        </div>
       </div>
     );
   }