Merge pull request #24 from status-im/feat/project-list-style-switcher

Add list view and favorites
2025-01-12 04:24:23 +00:00 · 2019-04-28 19:07:31 -04:00 · 2019-04-28 19:07:31 -04:00 · 1b207e4021
commit 1b207e4021
parent 20dff143d2 26a5719745
4 changed files with 220 additions and 70 deletions
--- a/package.json
+++ b/package.json
@ -76,6 +76,7 @@
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "chai": "^4.1.0",
    "chart.js": "^2.7.3",
+    "classnames": "^2.2.6",
    "cryptocurrency-icons": "^0.9.3",
    "css-loader": "1.0.0",
    "cytoscape": "^3.3.0",
@ -190,8 +191,18 @@
      "react-app"
    ],
    "plugins": [
-      ["@babel/plugin-proposal-decorators", { "legacy": true }],
-      ["@babel/plugin-proposal-class-properties", { "loose": true }],
+      [
+        "@babel/plugin-proposal-decorators",
+        {
+          "legacy": true
+        }
+      ],
+      [
+        "@babel/plugin-proposal-class-properties",
+        {
+          "loose": true
+        }
+      ],
      [
        "@babel/plugin-transform-runtime",
        {
--- a/public/images/favorite-sprite.png
+++ b/public/images/favorite-sprite.png
--- a/src/components/projects/Projects.jsx
+++ b/src/components/projects/Projects.jsx
@ -21,6 +21,12 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 import SearchIcon from '@material-ui/icons/Search';
 import ListIcon from '@material-ui/icons/Reorder';
 import DashboardIcon from '@material-ui/icons/Dashboard';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import classnames from 'classnames';

 import defaultProjectImage from '../../images/default-project-img.png';
 import newProjectImage from '../../images/new-project.png';
@ -30,50 +36,91 @@ const SORT_TYPES = {
  name: 'name'
 }

-const styles = theme => ({
-  root: {
-    margin: '1.75rem 4.5rem',
-    ...theme.typography.body1
-  },
-  filters: {
-    float: 'right'
-  },
-  search: {
-    height: 36
-  },
-  title: {
-    fontSize: '20px',
-    textAlign: 'center',
-    fontWeight: 500
-  },
-  media: {
-    height: 235,
-    position: 'relative'
-  },
-  avatar: {
-    position: 'absolute',
-    top: 26,
-    left: 26
-  },
-  'card-title': {
-    fontSize: '20px'
-  },
-  'card-content': {
-    fontSize: '16px'
-  },
-  'card-actions': {
-    float: 'right'
-  },
-  progress: {
-    height: 10
-  },
-  'new-project-img': {
-    textAlign: 'center',
-    margin: 0,
-    paddingTop: 115,
-    paddingBottom: 43
-  }
-})
+const cardAbsolutesDistance = 26;
+
+const styles = theme => {
+  return ({
+    root: {
+      margin: '1.75rem 4.5rem',
+      ...theme.typography.body1
+    },
+    filters: {
+      float: 'right'
+    },
+    search: {
+      height: 36
+    },
+    formatBtn: {
+      cursor: 'pointer',
+      '&:hover, &.active': {
+        color: 'black'
+      }
+    },
+    title: {
+      fontSize: '20px',
+      textAlign: 'center',
+      fontWeight: 500
+    },
+    media: {
+      height: 235,
+      position: 'relative'
+    },
+    avatarGrid: {
+      position: 'absolute',
+      top: cardAbsolutesDistance,
+      left: cardAbsolutesDistance
+    },
+    'card-title': {
+      fontSize: '20px'
+    },
+    'card-content': {
+      fontSize: '16px'
+    },
+    'card-actions': {
+      float: 'right'
+    },
+    progress: {
+      height: 10
+    },
+    'new-project-img': {
+      textAlign: 'center',
+      margin: 0,
+      paddingTop: 115,
+      paddingBottom: 43
+    },
+    nameCell: {
+      fontSize: 18
+    },
+    darkRow: {
+      backgroundColor: theme.palette.common.grey
+    },
+    addProjectRow: {
+      borderTop: '0.25px solid ' + theme.palette.text.grey,
+      cursor: 'pointer',
+      '& td': {
+        paddingTop: 35
+      }
+    },
+    favorite: {
+      display: 'inline-block',
+      backgroundImage: 'url("/images/favorite-sprite.png")',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'bottom',
+      width: 30,
+      height: 27,
+      cursor: 'pointer',
+      '&:hover, &.isFavorite': {
+        backgroundPosition: 'top'
+      }
+    },
+    cardFavorite: {
+      position: 'absolute',
+      top: cardAbsolutesDistance,
+      right: cardAbsolutesDistance,
+      zIndex: 9000
+    }
+  })
+}

 function sortByTitle(a, b) {
  if (!a.manifest || !b.manifest) {
@ -90,9 +137,14 @@ function sortByDate(a, b) {
  return 1;
 }

-function ProjectCard({classes, project}) {
+function Favorite({classes, setFavorites, favorites, projectId, className}) {
+  return (<span className={classnames(className, classes.favorite, {isFavorite: favorites[projectId]})}
+    onClick={() => setFavorites({...favorites, [projectId]: !favorites[projectId]})}/>);
+}
+
+function ProjectCard({classes, project, favorites, setFavorites}) {
  return (<Card className={classes.card}>
-    <CardActionArea href={`/#/project/${project.projectId}`}>
+    <CardActionArea href={`/#/project/${project.projectId}`} onClick={e => { if (e.target.className.indexOf(classes.favorite) > -1) { e.preventDefault() } }}>
      <CardMedia
        className={classes.media}
        image={defaultProjectImage}
@ -111,7 +163,8 @@ function ProjectCard({classes, project}) {
        <Typography component="p" className={classes['card-content']} color="textSecondary">
          Delegate: {project.manifest.creator} {/*TODO check if that really is the delegate*/}
        </Typography>
-        {project.manifest.avatar && <img className={classes.avatar} alt="avatar" src={project.manifest.avatar} width={40} height={40}/>}
+        {project.manifest.avatar && <img className={classes.avatarGrid} alt="avatar" src={project.manifest.avatar} width={40} height={40}/>}
+        <Favorite className={classes.cardFavorite} classes={classes} favorites={favorites} projectId={project.projectId} setFavorites={setFavorites}/>
      </CardContent>
    </CardActionArea>
    <CardActions className={classes['card-actions']}>
@ -122,8 +175,98 @@ function ProjectCard({classes, project}) {
  </Card>)
 }

-function Projects({projectAddedEvents, classes}) {
+function GridView({classes, projects, favorites, setFavorites}) {
+  return (<Grid container spacing={40}>
+    {projects.map((project, index) => {
+      if (!project.manifest) {
+        return ''
+      }
+      return (<Grid key={'project-' + index} item xs={12} sm={6} md={4} lg={3} className={classes.card}>
+        <ProjectCard project={project} classes={classes} favorites={favorites} setFavorites={setFavorites}/>
+      </Grid>);
+    })}
+    <Grid item xs={12} sm={6} md={4} lg={3} className="project-list-item">
+      <Card className={classes.card}>
+        <CardActionArea href="/#/create-project/" style={{height: 460}}>
+          <p className={classes['new-project-img']}><img alt="new project" src={newProjectImage}/></p>
+          <Typography align="center" className={classes['card-content']}>Add your own project</Typography>
+        </CardActionArea>
+      </Card>
+    </Grid>
+  </Grid>)
+}
+
+const CustomTableCell = withStyles(theme => ({
+  head: {
+    color: theme.palette.text.grey,
+    fontSize: 15,
+    border: 0
+  },
+  body: {
+    fontSize: 16,
+    border: 0,
+    height: 80
+  }
+}))(TableCell);
+
+function ListView({classes, projects, history, favorites, setFavorites}) {
+  let rowCounter = -1;
+  return (<Table className={classes.table}>
+    <TableHead>
+      <TableRow>
+        <CustomTableCell>&nbsp;</CustomTableCell>
+        <CustomTableCell>Project name</CustomTableCell>
+        <CustomTableCell>Description</CustomTableCell>
+        <CustomTableCell>Funding details</CustomTableCell>
+        <CustomTableCell>Delegate</CustomTableCell>
+        <CustomTableCell>&nbsp;</CustomTableCell>
+        <CustomTableCell>&nbsp;</CustomTableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {projects.map((project, index) => {
+        rowCounter++;
+        if (!project.manifest) {
+          return ''
+        }
+        return (
+          <TableRow className={classnames(classes.row, {[classes.darkRow]: rowCounter%2})} key={'project-' + index}>
+            <CustomTableCell>
+              {project.manifest.avatar &&
+              <img className={classes.avatar} alt="avatar" src={project.manifest.avatar} width={40} height={40}/>}
+            </CustomTableCell>
+            <CustomTableCell className={classes.nameCell}>{project.manifest.title}</CustomTableCell>
+            <CustomTableCell>{project.manifest.description}</CustomTableCell>
+            <CustomTableCell>76% of 2.055 ETH<br/>3 funders</CustomTableCell>
+            <CustomTableCell>{project.manifest.creator}</CustomTableCell>
+            <CustomTableCell>
+              <Favorite classes={classes} favorites={favorites} projectId={project.projectId} setFavorites={setFavorites}/>
+            </CustomTableCell>
+            <CustomTableCell>
+              <Button size="small" color="primary" href={`/#/project/${project.projectId}`}>Read more</Button>
+            </CustomTableCell>
+          </TableRow>
+        )
+      })}
+      <TableRow className={classnames(classes.row, classes.addProjectRow)} hover onClick={() => history.push('/create-project/')}>
+        <CustomTableCell>
+          <img alt="add project" src={newProjectImage} width={40} height={40}/>
+        </CustomTableCell>
+        <CustomTableCell>Add your own project</CustomTableCell>
+        <CustomTableCell/>
+        <CustomTableCell/>
+        <CustomTableCell/>
+        <CustomTableCell/>
+        <CustomTableCell/>
+      </TableRow>
+    </TableBody>
+  </Table>)
+}
+
+function Projects({projectAddedEvents, classes, history}) {
+  const [favorites, setFavorites] = useState({});
  const [sortType, _setSortType] = useState(SORT_TYPES.date);
+  const [isGridView, setIsGridView] = useState(true);

  const projects = projectAddedEvents.map(event => {
    return Object.assign({projectId: event.returnValues.idProject}, useProjectData(event.returnValues.idProject, '', projectAddedEvents));
@ -134,7 +277,9 @@ function Projects({projectAddedEvents, classes}) {

  return (<div className={classes.root}>
    <Typography className={classes.title} component="h2" gutterBottom>All projects</Typography>
+
    {projects.length === 0 && <Loading/>}
+
    {projects.length > 0 &&
    <Fragment>
      <div className={classes.filters}>
@ -148,27 +293,13 @@ function Projects({projectAddedEvents, classes}) {
            }}
          />
        </FormControl>
-        <DashboardIcon color="disabled" fontSize="large"/>
-        <ListIcon color="disabled" fontSize="large"/>
+
+        <DashboardIcon className={classnames(classes.formatBtn, {'active': isGridView})} color="disabled" fontSize="large" onClick={() => setIsGridView(true)}/>
+        <ListIcon className={classnames(classes.formatBtn, {'active': !isGridView})} color="disabled" fontSize="large" onClick={() => setIsGridView(false)}/>
      </div>
-      <Grid container spacing={40}>
-        {projects.map((project, index) => {
-          if (!project.manifest) {
-            return ''
-          }
-          return (<Grid key={'project-' + index} item xs={12} sm={6} md={4} lg={3} className={classes.card}>
-            <ProjectCard project={project} classes={classes}/>
-          </Grid>);
-        })}
-        <Grid item xs={12} sm={6} md={4} lg={3} className="project-list-item">
-          <Card className={classes.card}>
-            <CardActionArea href="/#/create-project/" style={{height: 460}}>
-              <p className={classes['new-project-img']}><img alt="new project" src={newProjectImage}/></p>
-              <Typography align="center" className={classes['card-content']}>Add your own project</Typography>
-            </CardActionArea>
-          </Card>
-        </Grid>
-      </Grid>
+
+      {!isGridView && ListView({classes, projects, history, favorites, setFavorites})}
+      {isGridView && GridView({classes, projects, favorites, setFavorites})}
    </Fragment>
    }
  </div>)
--- a/src/index.js
+++ b/src/index.js
@ -12,6 +12,14 @@ const theme = createMuiTheme({
    useNextVariants: true,
    fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"].join(','),
  },
+  palette: {
+    common: {
+      grey: '#F5F7F8'
+    },
+    text: {
+      grey: '#939BA1'
+    }
+  }
 });

 render(