From 1dc8c646f7b0c43faa074a62640fd49bbde74173 Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 2 Sep 2020 17:42:45 +0100 Subject: [PATCH] WIP title bar below image --- .../components/image-list/CustomImageList.js | 2 +- .../components/image-list/CustomImageList.tsx | 2 +- .../image-list/TitlebarBelowImageList.js | 60 +++++++++++++++++++ .../image-list/TitlebarBelowImageList.tsx | 60 +++++++++++++++++++ .../TitlebarBelowMasonryImageList.js | 44 ++++++++++++++ .../TitlebarBelowMasonryImageList.tsx | 44 ++++++++++++++ .../image-list/TitlebarImageList.js | 2 - .../image-list/TitlebarImageList.tsx | 2 - .../pages/components/image-list/image-list.md | 6 ++ .../src/ImageListItem/ImageListItem.js | 4 +- .../ImageListItemBar/ImageListItemBar.d.ts | 16 ++--- .../src/ImageListItemBar/ImageListItemBar.js | 47 ++++++++++----- 12 files changed, 260 insertions(+), 29 deletions(-) create mode 100644 docs/src/pages/components/image-list/TitlebarBelowImageList.js create mode 100644 docs/src/pages/components/image-list/TitlebarBelowImageList.tsx create mode 100644 docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.js create mode 100644 docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.tsx diff --git a/docs/src/pages/components/image-list/CustomImageList.js b/docs/src/pages/components/image-list/CustomImageList.js index 68f6aa3f768a3a..4c41642796c20f 100644 --- a/docs/src/pages/components/image-list/CustomImageList.js +++ b/docs/src/pages/components/image-list/CustomImageList.js @@ -54,7 +54,7 @@ export default function AdvancedImageList() { {item.title} + {itemData.map((item) => ( + + {item.title} + by: {item.author}} + actionIcon={ + + + + } + position="below" + /> + + ))} + + ); +} diff --git a/docs/src/pages/components/image-list/TitlebarBelowImageList.tsx b/docs/src/pages/components/image-list/TitlebarBelowImageList.tsx new file mode 100644 index 00000000000000..cbc238000e114d --- /dev/null +++ b/docs/src/pages/components/image-list/TitlebarBelowImageList.tsx @@ -0,0 +1,60 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import ImageList from '@material-ui/core/ImageList'; +import ImageListItem from '@material-ui/core/ImageListItem'; +import ImageListItemBar from '@material-ui/core/ImageListItemBar'; +import IconButton from '@material-ui/core/IconButton'; +import InfoIcon from '@material-ui/icons/Info'; +import itemData from './itemData'; + +const useStyles = makeStyles({ + root: { + width: 500, + height: 450, + }, + icon: { + color: 'rgba(255, 255, 255, 0.54)', + }, +}); + +/** + * The example data is structured as follows: + * + * import image from 'path/to/image.jpg'; + * [etc...] + * + * const itemData = [ + * { + * img: 'image-path', + * title: 'text', + * author: 'name', + * }, + * { etc... }, + * ]; + */ +export default function TitlebarBelowImageList() { + const classes = useStyles(); + + return ( + + {itemData.map((item) => ( + + {item.title} + by: {item.author}} + actionIcon={ + + + + } + position="below" + /> + + ))} + + ); +} diff --git a/docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.js b/docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.js new file mode 100644 index 00000000000000..a9ba628e140359 --- /dev/null +++ b/docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.js @@ -0,0 +1,44 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import ImageList from '@material-ui/core/ImageList'; +import ImageListItem from '@material-ui/core/ImageListItem'; +import ImageListItemBar from '@material-ui/core/ImageListItemBar'; +import itemData from './peerItemData'; + +const useStyles = makeStyles({ + root: { + width: 500, + height: 450, + overflowY: 'scroll', + }, +}); + +/** + * The example data is structured as follows: + * + * const itemData = [ + * { + * img: 'image-path', + * title: 'text', + * author: 'name' + * }, + * { etc... }, + * ]; + * + */ +export default function TitlebarBelowMasonryImageList() { + const classes = useStyles(); + + return ( +
+ + {itemData.map((item) => ( + + {item.title} + + + ))} + +
+ ); +} diff --git a/docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.tsx b/docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.tsx new file mode 100644 index 00000000000000..2fb542851fd319 --- /dev/null +++ b/docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import ImageList from '@material-ui/core/ImageList'; +import ImageListItem from '@material-ui/core/ImageListItem'; +import ImageListItemBar from '@material-ui/core/ImageListItemBar'; +import itemData from './peerItemData'; + +const useStyles = makeStyles({ + root: { + width: 500, + height: 450, + overflowY: 'scroll', + }, +}); + +/** + * The example data is structured as follows: + * + * const itemData = [ + * { + * img: 'image-path', + * title: 'text', + * author: 'name' + * }, + * { etc... }, + * ]; + * + */ +export default function TitlebarBelowMasonryImageList() { + const classes = useStyles(); + + return ( +
+ + {itemData.map((item) => ( + + {item.title} + + + ))} + +
+ ); +} diff --git a/docs/src/pages/components/image-list/TitlebarImageList.js b/docs/src/pages/components/image-list/TitlebarImageList.js index 17d1e4422191c5..1e025639e3351b 100644 --- a/docs/src/pages/components/image-list/TitlebarImageList.js +++ b/docs/src/pages/components/image-list/TitlebarImageList.js @@ -29,8 +29,6 @@ const useStyles = makeStyles({ * img: 'image-path', * title: 'text', * author: 'name', - * rows: 2, - * cols: 2, * }, * { etc... }, * ]; diff --git a/docs/src/pages/components/image-list/TitlebarImageList.tsx b/docs/src/pages/components/image-list/TitlebarImageList.tsx index 17d1e4422191c5..1e025639e3351b 100644 --- a/docs/src/pages/components/image-list/TitlebarImageList.tsx +++ b/docs/src/pages/components/image-list/TitlebarImageList.tsx @@ -29,8 +29,6 @@ const useStyles = makeStyles({ * img: 'image-path', * title: 'text', * author: 'name', - * rows: 2, - * cols: 2, * }, * { etc... }, * ]; diff --git a/docs/src/pages/components/image-list/image-list.md b/docs/src/pages/components/image-list/image-list.md index f6603c8add6e2f..9ac1729fb7e524 100644 --- a/docs/src/pages/components/image-list/image-list.md +++ b/docs/src/pages/components/image-list/image-list.md @@ -44,6 +44,12 @@ The overlay can accommodate a `title`, `subtitle` and secondary action - in this {{"demo": "pages/components/image-list/TitlebarImageList.js", "hideEditButton": true}} +The title bar can be placed below the image. + +{{"demo": "pages/components/image-list/TitlebarBelowImageList.js", "hideEditButton": true}} + +{{"demo": "pages/components/image-list/TitlebarBelowMasonryImageList.js", "hideEditButton": true}} + ## Custom image list In this example the items have a customized titlebar, positioned at the top and with a custom gradient `titleBackground`. diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.js b/packages/material-ui/src/ImageListItem/ImageListItem.js index 55daaab60d1294..f2820ddaa49c35 100644 --- a/packages/material-ui/src/ImageListItem/ImageListItem.js +++ b/packages/material-ui/src/ImageListItem/ImageListItem.js @@ -10,7 +10,9 @@ export const styles = { /* Styles applied to the root element. */ root: { position: 'relative', - lineHeight: 0, + lineHeight: 0, // Fix masonry item spacing + // display: 'flex', + // flexDirection: 'column', }, /* Styles applied to an `img` element to ensure it covers the item. */ img: { diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts index a2e263e77ae164..5d17953a113219 100644 --- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts +++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.d.ts @@ -18,10 +18,10 @@ export interface ImageListItemBarProps classes?: { /** Styles applied to the root element. */ root?: string; - /** Styles applied to the root element if `titlePosition="bottom"`. */ - titlePositionBottom?: string; - /** Styles applied to the root element if `titlePosition="top"`. */ - titlePositionTop?: string; + /** Styles applied to the root element if `position="bottom"`. */ + positionBottom?: string; + /** Styles applied to the root element if `position="top"`. */ + positionTop?: string; /** Styles applied to the root element if a `subtitle` is provided. */ rootSubtitle?: string; /** Styles applied to the title and subtitle container element. */ @@ -39,6 +39,10 @@ export interface ImageListItemBarProps /** Styles applied to the actionIcon if `actionPosition="left"`. */ actionIconActionPosLeft?: string; }; + /** + * Position of the title bar. + */ + position?: 'below' | 'top' | 'bottom'; /** * String or element serving as subtitle (support text). */ @@ -47,10 +51,6 @@ export interface ImageListItemBarProps * Title to be displayed on item. */ title?: React.ReactNode; - /** - * Position of the title bar. - */ - titlePosition?: 'top' | 'bottom'; } export type ImageListItemBarClassKey = keyof NonNullable; diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js index 57446a7679a53d..0c9dcbc62b1f6f 100644 --- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js +++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.js @@ -15,17 +15,28 @@ export const styles = (theme) => ({ alignItems: 'center', fontFamily: theme.typography.fontFamily, }, - /* Styles applied to the root element if `titlePosition="bottom"`. */ - titlePositionBottom: { + /* Styles applied to the root element if a `subtitle` is provided. */ + rootSubtitle: { + height: 68, + }, + /* Styles applied to the root element if `position="bottom"`. */ + positionBottom: { bottom: 0, }, - /* Styles applied to the root element if `titlePosition="top"`. */ - titlePositionTop: { + /* Styles applied to the root element if `position="top"`. */ + positionTop: { top: 0, }, - /* Styles applied to the root element if a `subtitle` is provided. */ - rootSubtitle: { - height: 68, + /* Styles applied to the root element if `position="below"`. */ + positionBelow: { + height: 40, + position: 'relative', + background: 'transparent', + alignItems: 'normal', + }, + /* Styles applied to the root element if `position="below"` and a `subtitle` is provided. */ + positionBelowSubtitle: { + height: 60, }, /* Styles applied to the title and subtitle container element. */ titleWrap: { @@ -35,6 +46,11 @@ export const styles = (theme) => ({ color: theme.palette.common.white, overflow: 'hidden', }, + titleWrapBelow: { + marginTop: 4, + marginLeft: 0, + color: 'inherit', + }, /* Styles applied to the container element if `actionPosition="left"`. */ titleWrapActionPosLeft: { marginLeft: 0, @@ -75,7 +91,7 @@ const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref) className, subtitle, title, - titlePosition = 'bottom', + position = 'bottom', ...other } = props; @@ -86,9 +102,11 @@ const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref) className={clsx( classes.root, { - [classes.titlePositionBottom]: titlePosition === 'bottom', - [classes.titlePositionTop]: titlePosition === 'top', [classes.rootSubtitle]: subtitle, + [classes.positionBelow]: position === 'below', + [classes.positionBelowSubtitle]: position === 'below' && subtitle, + [classes.positionBottom]: position === 'bottom', + [classes.positionTop]: position === 'top', }, className, )} @@ -97,6 +115,7 @@ const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref) >