WIP title bar below image

mui · Sep 2, 2020 · 1dc8c64 · 1dc8c64
1 parent 18b0931
commit 1dc8c64
Show file tree

Hide file tree

Showing 12 changed files with 260 additions and 29 deletions.
diff --git 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() {
           <img src={item.img} alt={item.title} />
           <ImageListItemBar
             title={item.title}
-            titlePosition="top"
+            position="top"
             actionIcon={
               <IconButton
                 aria-label={`star ${item.title}`}

diff --git a/docs/src/pages/components/image-list/CustomImageList.tsx b/docs/src/pages/components/image-list/CustomImageList.tsx
@@ -54,7 +54,7 @@ export default function AdvancedImageList() {
           <img src={item.img} alt={item.title} />
           <ImageListItemBar
             title={item.title}
-            titlePosition="top"
+            position="top"
             actionIcon={
               <IconButton
                 aria-label={`star ${item.title}`}

diff --git a/docs/src/pages/components/image-list/TitlebarBelowImageList.js b/docs/src/pages/components/image-list/TitlebarBelowImageList.js
@@ -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 (
+    <ImageList className={classes.root}>
+      {itemData.map((item) => (
+        <ImageListItem key={item.img}>
+          <img src={item.img} alt={item.title} />
+          <ImageListItemBar
+            title={item.title}
+            subtitle={<span>by: {item.author}</span>}
+            actionIcon={
+              <IconButton
+                aria-label={`info about ${item.title}`}
+                className={classes.icon}
+              >
+                <InfoIcon />
+              </IconButton>
+            }
+            position="below"
+          />
+        </ImageListItem>
+      ))}
+    </ImageList>
+  );
+}
diff --git a/docs/src/pages/components/image-list/TitlebarBelowImageList.tsx 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 (
+    <ImageList className={classes.root}>
+      {itemData.map((item) => (
+        <ImageListItem key={item.img}>
+          <img src={item.img} alt={item.title} />
+          <ImageListItemBar
+            title={item.title}
+            subtitle={<span>by: {item.author}</span>}
+            actionIcon={
+              <IconButton
+                aria-label={`info about ${item.title}`}
+                className={classes.icon}
+              >
+                <InfoIcon />
+              </IconButton>
+            }
+          position="below"
+          />
+        </ImageListItem>
+      ))}
+    </ImageList>
+  );
+}
diff --git a/docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.js 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 (
+    <div className={classes.root}>
+      <ImageList variant="masonry" cols={3} spacing={8}>
+        {itemData.map((item) => (
+          <ImageListItem key={item.img}>
+            <img src={item.img} alt={item.title} />
+            <ImageListItemBar position="below" title={item.author} />
+          </ImageListItem>
+        ))}
+      </ImageList>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/image-list/TitlebarBelowMasonryImageList.tsx 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 (
+    <div className={classes.root}>
+      <ImageList variant="masonry" cols={3} spacing={8}>
+        {itemData.map((item) => (
+          <ImageListItem key={item.img}>
+            <img src={item.img} alt={item.title} />
+            <ImageListItemBar position="below" title={item.author} />
+          </ImageListItem>
+        ))}
+      </ImageList>
+    </div>
+  );
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<ImageListItemBarProps['classes']>;