Merge pull request #2681 from Zadielerick/gridListDocsUpdate

[Docs] Updated Docs for Grid List
mui · Dec 29, 2015 · e3dee6f · e3dee6f
2 parents 9d654b1 + b280f5b
commit e3dee6f
Show file tree

Hide file tree

Showing 9 changed files with 245 additions and 287 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/DatePicker/Page';
 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 GridListPage 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';
@@ -93,7 +93,7 @@ const AppRoutes = (
       <Route path="dialog" component={DialogPage} />
       <Route path="divider" component={DividerPage} />
       <Route path="dropdown-menu" component={DropDownMenuPage} />
-      <Route path="grid-list" component={GridList} />
+      <Route path="grid-list" component={GridListPage} />
       <Route path="icons" component={Icons} />
       <Route path="icon-buttons" component={IconButtons} />
       <Route path="icon-menus" component={IconMenus} />

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,79 @@
+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/lib/svg-icons/toggle/star-border';
+import IconButton from 'material-ui/lib/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%)';
+const tileElements = 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>);
+const gridListStyle = {width: 500, height: 400, overflowY: 'auto', marginBottom: 24};
+
+const GridListExampleComplex = () => (
+  <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
+    {/*Grid list with all possible overrides*/}
+    <GridList
+      cols={2}
+      cellHeight={200}
+      padding={1}
+      style={gridListStyle}
+      >
+      {tileElements}
+    </GridList>
+  </div>
+);
+
+export default GridListExampleComplex;
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,70 @@
+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 'material-ui/lib/icon-button';
+
+const tilesData = [
+  {
+    img: 'images/grid-list/00-52-29-429_640.jpg',
+    title: 'Breakfast',
+    author: 'jill111',
+  },
+  {
+    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',
+  },
+  {
+    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 tileElements = 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>);
+const gridListStyle = {width: 500, height: 400, overflowY: 'auto', marginBottom: 24};
+
+const GridListExampleSimple = () => (
+  <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
+    {/* Basic grid list with mostly default options */}
+    <GridList
+      cellHeight={200}
+      style={gridListStyle}
+      >
+      {tileElements}
+    </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,28 @@
+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';
+
+const GridListPage = () => (
+  <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