Initial commit

client/src/components/Projects/Projects.jsx

@@ -0,0 +1,83 @@
+import isUndefined from 'lodash/isUndefined';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { Container, Grid } from 'semantic-ui-react';
+
+import Paths from '../../constants/Paths';
+import ProjectWrapperContainer from '../../containers/ProjectWrapperContainer';
+import { ReactComponent as PlusIcon } from '../../assets/images/plus-icon.svg';
+
+import styles from './Projects.module.css';
+
+const Projects = React.memo(({
+  items, currentId, isEditable, onAdd,
+}) => {
+  const [t] = useTranslation();
+
+  if (isUndefined(currentId)) {
+    return (
+      <Container className={styles.cardsWrapper}>
+        <Grid className={styles.gridFix}>
+          <Grid.Row>
+            {items.map((item) => (
+              <Grid.Column key={item.id} width={4}>
+                <Link
+                  to={
+                    item.firstBoardId
+                      ? Paths.BOARDS.replace(':id', item.firstBoardId)
+                      : Paths.PROJECTS.replace(':id', item.id)
+                  }
+                >
+                  <div className={classNames(styles.card, styles.open)}>
+                    <div className={styles.cardOverlay} />
+                    <div className={styles.openTitle}>{item.name}</div>
+                  </div>
+                </Link>
+              </Grid.Column>
+            ))}
+            {isEditable && (
+              <Grid.Column width={4}>
+                <button
+                  type="button"
+                  className={classNames(styles.card, styles.add)}
+                  onClick={onAdd}
+                >
+                  <div className={styles.addTitleWrapper}>
+                    <div className={styles.addTitle}>
+                      <PlusIcon className={styles.addGridIcon} />
+                      {t('action.createProject')}
+                    </div>
+                  </div>
+                </button>
+              </Grid.Column>
+            )}
+          </Grid.Row>
+        </Grid>
+      </Container>
+    );
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.project}>
+        <ProjectWrapperContainer />
+      </div>
+    </div>
+  );
+});
+
+Projects.propTypes = {
+  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  currentId: PropTypes.number,
+  isEditable: PropTypes.bool.isRequired,
+  onAdd: PropTypes.func.isRequired,
+};
+
+Projects.defaultProps = {
+  currentId: undefined,
+};
+
+export default Projects;

client/src/components/Projects/Projects.module.css

@@ -0,0 +1,99 @@
+.add {
+  background: #fff;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 3px 6px, rgba(0, 0, 0, 0.1) 0 6px 12px;
+  color: #333;
+  cursor: pointer;
+  fill: #333;
+  text-align: center;
+  width: 100%;
+}
+
+.add:hover {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1), 0 32px 64px rgba(0, 0, 0, 0.1);
+  transform: translate(0, -2px);
+}
+
+.addGridIcon {
+  display: block;
+  margin: 0 auto 12px;
+  width: 36px;
+}
+
+.addTitle {
+  display: table-cell;
+  font-size: 17px;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.addTitleWrapper {
+  display: table;
+  height: 100%;
+  padding: 35px 21px;
+  width: 100%;
+}
+
+.card {
+  border-radius: 4px;
+  height: 150px;
+  margin-bottom: 24px;
+  transition: all 200ms ease !important;
+}
+
+.cardOverlay {
+  background: #000000;
+  bottom: 0;
+  left: 0;
+  opacity: 0.3;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cardsWrapper {
+  flex: 1 1 auto;
+  max-height: 100%;
+  overflow: auto;
+}
+
+.gridFix {
+  flex: 1 0 auto;
+  margin: 0 !important;
+}
+
+.open {
+  background: #555;
+  background-size: cover;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.1);
+  color: #fff;
+  position: relative;
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
+    box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.open:hover {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1), 0 32px 64px rgba(0, 0, 0, 0.1);
+  transform: translate(0, -2px);
+}
+
+.openTitle {
+  bottom: 0;
+  font-size: 24px;
+  left: 0;
+  line-height: 1.1;
+  padding: 24px 20px;
+  position: absolute;
+}
+
+.project {
+  background: #22252a;
+  flex: 1 1 auto;
+  height: 100%;
+  width: calc(100% - 200px);
+}
+
+.wrapper {
+  display: flex;
+  flex: 1 1 auto;
+  height: 100%;
+}

client/src/components/Projects/index.js

@@ -0,0 +1,3 @@
+import Projects from './Projects';
+
+export default Projects;