Skip to content

Commit 2fa480c

Browse files
Ateinamichaelmaillot
Ateina
and
michaelmaillot
authored
Fix #1367: Image picker enhancements (#1805)
* #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]>
1 parent 9ad640d commit 2fa480c

File tree

3 files changed

+78
-141
lines changed

3 files changed

+78
-141
lines changed

‎src/controls/filePicker/LinkFilePickerTab/LinkFilePickerTab.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default class LinkFilePickerTab extends React.Component<ILinkFilePickerTa
3434
className={styles.linkTextField}
3535
label={strings.LinkFileInstructions}
3636
ariaLabel={strings.LinkFileInstructions}
37+
placeholder={"https://"}
3738
onGetErrorMessage={(value: string) => this._getErrorMessagePromise(value)}
3839
autoAdjustHeight={false}
3940
underlined={false}

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

Lines changed: 42 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -2,95 +2,60 @@
22
//@import "../PropertyPaneFilePicker.module.scss";
33

44
/** TILES **/
5-
.filePickerFolderCardGrid {
6-
overflow: hidden;
7-
font-size: 0;
8-
9-
:global {
10-
.ms-List-page {
11-
overflow: hidden;
12-
font-size: 0;
13-
}
14-
15-
.ms-List-surface {
16-
position: relative;
17-
}
18-
}
5+
.documentLibraryBrowserContainer {
6+
padding: 0;
197
}
208

219
.filePickerFolderCardTile {
10+
width: 10vw;
11+
margin: 1vh 0;
2212
text-align: center;
2313
outline: none;
24-
position: relative;
2514
@include ms-float(left);
26-
}
27-
28-
.filePickerFolderCardPadder {
29-
position: absolute;
30-
left: 5px;
31-
top: 5px;
32-
right: 5px;
33-
bottom: 5px;
34-
}
3515

36-
:global(.ms-Fabric--isFocusVisible) .filePickerFolderCardTile:focus:after {
37-
content: "";
38-
position: absolute;
39-
left: 2px;
40-
right: 2px;
41-
top: 2px;
42-
bottom: 2px;
43-
box-sizing: border-box;
44-
border: 1px solid "[theme:white, default:#{$ms-color-white}]";
45-
}
46-
47-
.filePickerFolderCardSizer {
48-
padding-bottom: 100%;
49-
}
16+
&:hover {
17+
background-color: $ms-color-neutralLighter;
18+
border-radius: 5px;
19+
.filePickerFolderCardTitle {
20+
text-decoration: underline;
21+
}
22+
}
5023

51-
.filePickerFolderCardImage {
52-
width: 100%;
53-
left: 0;
54-
top: 0;
55-
color: "[theme:white, default:#{$ms-color-white}]";
56-
position: absolute;
57-
bottom: 0;
58-
font-size: 12px;
59-
width: 100%;
60-
}
24+
.filePickerFolderCardImage {
25+
height: 100%;
26+
cursor: pointer;
27+
margin: 1vw 0 0;
6128

62-
.filePickerFolderCardLabel {
63-
background-color: "[theme:neutralLight, default:#{$ms-color-neutralLight}]";
64-
height: 100%;
65-
width: 100%;
66-
top: 0;
67-
color: "[theme:black, default:#{$ms-color-black}]";
68-
padding: 10px;
69-
position: absolute;
70-
bottom: 0;
71-
font-size: 12px;
72-
left: 0;
73-
width: 100%;
74-
box-sizing: border-box;
75-
font-size: 21px;
76-
font-weight: 600;
29+
.filePickerFolderCoverBack {
30+
display: block;
31+
position: absolute;
32+
}
7733

78-
:global .ms-Button-textContainer {
79-
max-width: 100%;
80-
word-break: break-word;
81-
}
34+
.filePickerFolderCoverFront {
35+
display: block;
36+
}
8237

83-
&:hover {
84-
color: "[theme:black, default:#{$ms-color-black}]";
85-
background-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
38+
.filePickerFolderCoverBack,
39+
.filePickerFolderCoverFront {
40+
margin: 0 1vw;
41+
width: 8vw;
42+
43+
img {
44+
border: none;
45+
padding: 0;
46+
margin: 0;
47+
width: 100%;
48+
}
49+
}
8650
}
8751

88-
&:active {
89-
color: "[theme:black, default:#{$ms-color-black}]";
90-
background-color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
52+
.filePickerFolderCardTitle {
53+
cursor: pointer;
54+
font-size: $ms-font-size-14;
55+
overflow:hidden;
56+
white-space:nowrap;
57+
text-overflow: ellipsis;
58+
padding: 1vh 0.5vw;
59+
text-align: center;
9160
}
9261
}
93-
94-
.documentLibraryBrowserContainer {
95-
padding: 0;
96-
}

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

Lines changed: 35 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,21 @@
1-
import * as React from 'react';
2-
import { List } from '@fluentui/react/lib/List';
3-
import { Spinner } from '@fluentui/react/lib/Spinner';
4-
import { Image, ImageFit } from '@fluentui/react/lib/Image';
5-
import { IDocumentLibraryBrowserProps } from './IDocumentLibraryBrowserProps';
6-
import { IDocumentLibraryBrowserState } from './IDocumentLibraryBrowserState';
7-
import { ILibrary } from '../../../../services/FileBrowserService.types';
1+
import * as React from "react";
2+
import { Spinner } from "@fluentui/react/lib/Spinner";
3+
import { Stack } from "@fluentui/react/lib/Stack";
4+
import { Icon } from "@fluentui/react/lib/Icon";
5+
import { IDocumentLibraryBrowserProps } from "./IDocumentLibraryBrowserProps";
6+
import { IDocumentLibraryBrowserState } from "./IDocumentLibraryBrowserState";
7+
import { ILibrary } from "../../../../services/FileBrowserService.types";
88

9-
import { IRectangle } from '@fluentui/react/lib/Utilities';
10-
import { DefaultButton } from '@fluentui/react/lib/Button';
11-
12-
import styles from './DocumentLibraryBrowser.module.scss';
13-
import * as strings from 'ControlStrings';
14-
15-
/**
16-
* Rows per page
17-
*/
18-
export const ROWS_PER_PAGE = 3;
19-
20-
/**
21-
* Maximum row height
22-
*/
23-
export const MAX_ROW_HEIGHT = 250;
9+
import styles from "./DocumentLibraryBrowser.module.scss";
10+
import * as strings from "ControlStrings";
2411

2512
/**
2613
* This would have been better done as an Office Fabric TileList, but it isn't available yet for production use
2714
*/
28-
export class DocumentLibraryBrowser extends React.Component<IDocumentLibraryBrowserProps, IDocumentLibraryBrowserState> {
29-
private _columnCount: number;
30-
private _columnWidth: number;
31-
private _rowHeight: number;
15+
export class DocumentLibraryBrowser extends React.Component<
16+
IDocumentLibraryBrowserProps,
17+
IDocumentLibraryBrowserState
18+
> {
3219

3320
constructor(props: IDocumentLibraryBrowserProps) {
3421
super(props);
@@ -54,58 +41,42 @@ export class DocumentLibraryBrowser extends React.Component<IDocumentLibraryBrow
5441
return (
5542
<div className={styles.documentLibraryBrowserContainer}>
5643
{isLoading && <Spinner label={strings.Loading} />}
57-
<List
58-
className={styles.filePickerFolderCardGrid}
59-
items={lists}
60-
getItemCountForPage={this._getItemCountForPage}
61-
getPageHeight={this._getPageHeight}
62-
renderedWindowsAhead={4}
63-
onRenderCell={this._onRenderLibraryTile}
64-
/>
44+
<Stack wrap horizontal horizontalAlign="start" verticalAlign="center">
45+
{lists.map((list, index) =>
46+
this._onRenderLibraryTile(list, index)
47+
)}
48+
</Stack>
6549
</div>
6650
);
6751
}
6852

69-
/**
70-
* Calculates how many items there should be in the page
71-
*/
72-
private _getItemCountForPage = (itemIndex: number, surfaceRect: IRectangle): number => {
73-
if (itemIndex === 0) {
74-
this._columnCount = Math.ceil(surfaceRect.width / MAX_ROW_HEIGHT);
75-
this._columnWidth = Math.floor(surfaceRect.width / this._columnCount);
76-
this._rowHeight = this._columnWidth;
77-
}
78-
79-
return this._columnCount * ROWS_PER_PAGE;
80-
}
81-
82-
/**
83-
* Gets the height of a list "page"
84-
*/
85-
private _getPageHeight = (): number => {
86-
return this._rowHeight * ROWS_PER_PAGE;
87-
}
88-
89-
/**
53+
/**
9054
* Renders a cell for search suggestions
9155
*/
9256
private _onRenderLibraryTile = (item: ILibrary, index: number | undefined): JSX.Element => {
93-
const imgSrc = item.iconPath ? item.iconPath : "";
9457

9558
return (
9659
<div
60+
key={item.absoluteUrl}
9761
className={styles.filePickerFolderCardTile}
9862
data-is-focusable={true}
99-
style={{
100-
width: 100 / this._columnCount + '%'
101-
}}
63+
onClick={(_event) => this._handleOpenLibrary(item)}
10264
>
103-
<div className={styles.filePickerFolderCardSizer}>
104-
<div className={styles.filePickerFolderCardPadder}>
105-
<Image src={imgSrc} className={styles.filePickerFolderCardImage} imageFit={ImageFit.cover} />
106-
<DefaultButton className={styles.filePickerFolderCardLabel} onClick={(_event) => this._handleOpenLibrary(item)}>{item.title}</DefaultButton>
65+
<div className={styles.filePickerFolderCardImage}>
66+
<Icon
67+
className={styles.filePickerFolderCoverBack}
68+
imageProps={{
69+
src: strings.FolderBackPlate
70+
}} />
71+
<Icon
72+
className={styles.filePickerFolderCoverFront}
73+
imageProps={{
74+
src: strings.FolderFrontPlate
75+
}} />
76+
</div>
77+
<div className={styles.filePickerFolderCardTitle}>
78+
{item.title}
10779
</div>
108-
</div>
10980
</div>
11081
);
11182
}

0 commit comments

Comments
 (0)