Skip to content

Commit

Permalink
Fix #1367: Image picker enhancements (#1805)
Browse files Browse the repository at this point in the history 
* #1367: added placeholder to the FilePicker "From a link" tab

* #1367: update libraries layout for FilePicker "Site" tab

* #1367: remove unused styles

* #1367: use controlStrings instead of direct url for folder image

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

Co-authored-by: Michaël Maillot <[email protected]>

* #1367: update styles

---------

Co-authored-by: Michaël Maillot <[email protected]>
  • Loading branch information
@Ateina @michaelmaillot
Ateina and michaelmaillot authored Nov 26, 2024
1 parent 9ad640d commit 2fa480c
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 141 deletions.
1 change: 1 addition & 0 deletions src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
className={styles.linkTextField}
label={strings.LinkFileInstructions}
ariaLabel={strings.LinkFileInstructions}
placeholder={"https://"}
onGetErrorMessage={(value: string) => this._getErrorMessagePromise(value)}
autoAdjustHeight={false}
underlined={false}
Expand Down
119 changes: 42 additions & 77 deletions src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,95 +2,60 @@
//@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 {
width: 10vw;
margin: 1vh 0;
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%;
}
&:hover {
background-color: $ms-color-neutralLighter;
border-radius: 5px;
.filePickerFolderCardTitle {
text-decoration: underline;
}
}

.filePickerFolderCardImage {
width: 100%;
left: 0;
top: 0;
color: "[theme:white, default:#{$ms-color-white}]";
position: absolute;
bottom: 0;
font-size: 12px;
width: 100%;
}
.filePickerFolderCardImage {
height: 100%;
cursor: pointer;
margin: 1vw 0 0;

.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;
.filePickerFolderCoverBack {
display: block;
position: absolute;
}

:global .ms-Button-textContainer {
max-width: 100%;
word-break: break-word;
}
.filePickerFolderCoverFront {
display: block;
}

&:hover {
color: "[theme:black, default:#{$ms-color-black}]";
background-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
.filePickerFolderCoverBack,
.filePickerFolderCoverFront {
margin: 0 1vw;
width: 8vw;

img {
border: none;
padding: 0;
margin: 0;
width: 100%;
}
}
}

&:active {
color: "[theme:black, default:#{$ms-color-black}]";
background-color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
.filePickerFolderCardTitle {
cursor: pointer;
font-size: $ms-font-size-14;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
padding: 1vh 0.5vw;
text-align: center;
}
}

.documentLibraryBrowserContainer {
padding: 0;
}
99 changes: 35 additions & 64 deletions src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.tsx
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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>
);
}
Expand Down

0 comments on commit 2fa480c

Please sign in to comment.