Updated Docs for Grid List

mui · Dec 28, 2015 · f9e3265 · f9e3265
1 parent a695a87
commit f9e3265
Show file tree

Hide file tree

Showing 9 changed files with 273 additions and 286 deletions.
diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx
@@ -32,7 +32,7 @@ import DatePicker from './components/pages/components/date-picker';
 import DialogPage from './components/pages/components/Dialog/Page';
 import DividerPage from './components/pages/components/Divider/Page';
 import DropDownMenuPage from './components/pages/components/DropDownMenu/Page';
-import GridList from './components/pages/components/grid-list';
+import GridList from './components/pages/components/GridList/Page';
 import Icons from './components/pages/components/icons';
 import IconButtons from './components/pages/components/icon-buttons';
 import IconMenus from './components/pages/components/icon-menus';

diff --git a/docs/src/app/components/pages/components/GridList/ExampleComplex.jsx b/docs/src/app/components/pages/components/GridList/ExampleComplex.jsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import GridList from 'material-ui/lib/grid-list/grid-list';
+import GridTile from 'material-ui/lib/grid-list/grid-tile';
+import StarBorder from 'material-ui/svg-icons/toggle/star-border';
+import IconButton from 'icon-button';
+
+const tilesData = [
+  {
+    img: 'images/grid-list/00-52-29-429_640.jpg',
+    title: 'Breakfast',
+    author: 'jill111',
+    featured: true,
+  },
+  {
+    img: 'images/grid-list/burger-827309_640.jpg',
+    title: 'Tasty burger',
+    author: 'pashminu',
+  },
+  {
+    img: 'images/grid-list/camera-813814_640.jpg',
+    title: 'Camera',
+    author: 'Danson67',
+  },
+  {
+    img: 'images/grid-list/morning-819362_640.jpg',
+    title: 'Morning',
+    author: 'fancycrave1',
+    featured: true,
+  },
+  {
+    img: 'images/grid-list/hats-829509_640.jpg',
+    title: 'Hats',
+    author: 'Hans',
+  },
+  {
+    img: 'images/grid-list/honey-823614_640.jpg',
+    title: 'Honey',
+    author: 'fancycravel',
+  },
+  {
+    img: 'images/grid-list/vegetables-790022_640.jpg',
+    title: 'Vegetables',
+    author: 'jill111',
+  },
+  {
+    img: 'images/grid-list/water-plant-821293_640.jpg',
+    title: 'Water plant',
+    author: 'BkrmadtyaKarki',
+  },
+];
+
+const gradientBg = 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)';
+
+export default class GridListExampleSimple extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
+        {/*Grid list with all possible overrides*/}
+        <GridList
+          cols={2}
+          cellHeight={200}
+          padding={1}
+          style={{width: 500, height: 400, overflowY: 'auto', marginBottom: 24}}
+          >
+          {
+            tilesData.map(tile => <GridTile
+              key={tile.img}
+              title={tile.title}
+              actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+              actionPosition="left"
+              titlePosition="top"
+              titleBackground={gradientBg}
+              cols={tile.featured ? 2 : 1}
+              rows={tile.featured ? 2 : 1}
+              ><img src={tile.img} /></GridTile>)
+          }
+        </GridList>
+      </div>
+    );
+  }
+}
+
+export default GridListExampleSimple;
diff --git a/docs/src/app/components/pages/components/GridList/ExampleSimple.jsx b/docs/src/app/components/pages/components/GridList/ExampleSimple.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import GridList from 'material-ui/lib/grid-list/grid-list';
+import GridTile from 'material-ui/lib/grid-list/grid-tile';
+import StarBorder from 'material-ui/svg-icons/toggle/star-border';
+import IconButton from 'icon-button';
+
+const tilesData = [
+  {
+    img: 'images/grid-list/00-52-29-429_640.jpg',
+    title: 'Breakfast',
+    author: 'jill111',
+    featured: true,
+  },
+  {
+    img: 'images/grid-list/burger-827309_640.jpg',
+    title: 'Tasty burger',
+    author: 'pashminu',
+  },
+  {
+    img: 'images/grid-list/camera-813814_640.jpg',
+    title: 'Camera',
+    author: 'Danson67',
+  },
+  {
+    img: 'images/grid-list/morning-819362_640.jpg',
+    title: 'Morning',
+    author: 'fancycrave1',
+    featured: true,
+  },
+  {
+    img: 'images/grid-list/hats-829509_640.jpg',
+    title: 'Hats',
+    author: 'Hans',
+  },
+  {
+    img: 'images/grid-list/honey-823614_640.jpg',
+    title: 'Honey',
+    author: 'fancycravel',
+  },
+  {
+    img: 'images/grid-list/vegetables-790022_640.jpg',
+    title: 'Vegetables',
+    author: 'jill111',
+  },
+  {
+    img: 'images/grid-list/water-plant-821293_640.jpg',
+    title: 'Water plant',
+    author: 'BkrmadtyaKarki',
+  },
+];
+
+const gradientBg = 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)';
+
+export default class GridListExampleSimple extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
+        {/* Basic grid list with mostly default options */}
+        <GridList
+          cellHeight={200}
+          style={{width: 500, height: 400, overflowY: 'auto', marginBottom: 24}}
+          >
+          {
+            tilesData.map(tile => <GridTile
+              key={tile.img}
+              title={tile.title}
+              subtitle={<span>by <b>{tile.author}</b></span>}
+              actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+              ><img src={tile.img} /></GridTile>)
+          }
+        </GridList>
+      </div>
+    );
+  }
+}
+
+export default GridListExampleSimple;
diff --git a/docs/src/app/components/pages/components/GridList/Page.jsx b/docs/src/app/components/pages/components/GridList/Page.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import gridListCode from '!raw!material-ui/lib/grid-list/grid-list';
+import gridTileCode from '!raw!material-ui/lib/grid-list/grid-tile';
+import gridListReadmeText from './README';
+import gridListExampleSimpleCode from '!raw!./ExampleSimple';
+import GridListExampleSimple from './ExampleSimple';
+import gridListExampleComplexCode from '!raw!./ExampleComplex';
+import GridListExampleComplex from './ExampleComplex';
+
+class GridListPage extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <MarkdownElement text={gridListReadmeText} />
+        <CodeExample code={gridListExampleSimpleCode}>
+          <GridListExampleSimple />
+        </CodeExample>
+        <CodeExample code={gridListExampleComplexCode} >
+          <GridListExampleComplex />
+        </CodeExample>
+        <PropTypeDescription code={gridListCode}/>
+        <PropTypeDescription code={gridTileCode}/>
+      </div>
+    );
+  }
+}
+
+export default GridListPage;
diff --git a/docs/src/app/components/pages/components/GridList/README.md b/docs/src/app/components/pages/components/GridList/README.md
@@ -0,0 +1,3 @@
+## Grid List
+Simple flex-box based [Grid List](https://www.google.com/design/spec/components/grid-lists.html) implementation. Support tiles with arbitrary cell size, but cannot implement complex layouts (limited to flex-box limitations).
+### Examples