static integration of workspace file list

src/component/common/Input/Button.jsx

@@ -7,6 +7,7 @@ const Button = props => {
     <button
       type={props.htmlType}
       className={classnames(props.customClass, 'btn', `btn-${props.bootstrapType}`)}
+      onClick={props.onClick}
     >
       {props.label}
     </button>

src/component/common/Input/DropdownCreateButton.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const DropdownCreateButton = props => {
+  return (
+    <div className={classnames(props.parentClass, props.customClass, 'dropdownCreateBtn')}>
+      <button
+        className={classnames(`${props.parentClass}__label`, 'dropdownCreateBtn__label btn btn-succes dropdown-toggle')}
+        type='button'
+        id='dropdownCreateBtn'
+        data-toggle='dropdown'
+        aria-haspopup='true'
+        aria-expanded='false'
+      >
+        <div className={classnames(`${props.parentClass}__label__text`, 'dropdownCreateBtn__label__text')}>
+          Créer ...
+        </div>
+      </button>
+
+      <div
+        className={classnames(`${props.parentClass}__setting`, 'dropdownCreateBtn__setting dropdown-menu')}
+        aria-labelledby='dropdownCreateBtn'
+      >
+        <div className='setting__link dropdown-item'>
+          Créer un workspace
+        </div>
+        <div className='setting__link dropdown-item'>
+          Créer un fichiers
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DropdownCreateButton
+
+DropdownCreateButton.propTypes = {
+  parentClass: PropTypes.string,
+  customClass: PropTypes.string
+}
+
+DropdownCreateButton.defaultProps = {
+  parentClass: '',
+  customClass: ''
+}

src/component/common/layout/PageContent.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const PageContent = props => {
+  return (
+    <div className={classnames(props.parentClass, props.customClass, 'pageContentGeneric')}>
+      {props.children}
+    </div>
+  )
+}
+
+PageContent.propTypes = {
+  parentClass: PropTypes.string,
+  customClass: PropTypes.string
+}
+
+PageContent.defaultProps = {
+  parentClass: '',
+  customClass: ''
+}
+
+export default PageContent

src/component/common/layout/PageTitle.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const PageTitle = props => {
+  return (
+    <div className={classnames(props.parentClass, props.customClass, 'pageTitleGeneric')}>
+      <div className={classnames(`${props.parentClass}__title`, 'pageTitleGeneric__title')}>
+        {props.title}
+      </div>
+      {props.children}
+    </div>
+  )
+}
+
+PageTitle.propTypes = {
+  title: PropTypes.string.isRequired,
+  parentClass: PropTypes.string,
+  customClass: PropTypes.string
+}
+
+PageTitle.defaultProps = {
+  parentClass: '',
+  customClass: ''
+}
+
+export default PageTitle

src/component/common/layout/PageWrapper.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import PageTitle from './PageTitle.jsx'
+import PageContent from './PageContent.jsx'
+
+const PageWrapper = props => {
+  return (
+    <div className={classnames(props.customeClass, 'pageWrapperGeneric')}>
+      <div className='container-fluid'>
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+export default PageWrapper
+
+PageWrapper.propTypes = {
+  customClass: PropTypes.string,
+  children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) => {
+    if (
+      children.length > 2 ||
+      children[0].type !== PageTitle ||
+      children[1].type !== PageContent
+      // children.some(p => p.type !== CardHeader && p.type !== CardBody)
+    ) {
+      return new Error(`PropType Error: childrens of ${componentName} must be: 1 PageTitle and 1 PageContent.`)
+    }
+  }).isRequired
+}
+
+PageWrapper.defaultProps = {
+  customClass: ''
+}

src/container/Chat.jsx

@@ -0,0 +1,185 @@
+import React, { Component } from 'react'
+import classnames from 'classnames'
+import imgProfil from '../img/img_profil.png'
+
+class Chat extends Component {
+  render () {
+    return (
+      <div className={classnames('wsFileChat wsFileGeneric', {'visible': this.props.visible})}>
+        <div className='wsFileChat__header wsFileGeneric__header'>
+          <div className='wsFileGeneric__header__icon'>
+            <i className='fa fa-comments' />
+          </div>
+          <div className='wsFileGeneric__header__text mr-auto'>
+            Discussions à propos du nouveau système de facturation
+          </div>
+          <div className='wsFileGeneric__header__close'>
+            <i className='fa fa-times' />
+          </div>
+        </div>
+        <div className='wsFileGeneric__option'>
+          <div className='wsFileGeneric__option__menu'>
+            <div className='wsFileGeneric__option__menu__action'>
+              <i className='fa fa-pencil' />
+            </div>
+            <div className='wsFileGeneric__option__menu__action'>
+              <i className='fa fa-archive' />
+            </div>
+            <div className='wsFileGeneric__option__menu__action'>
+              <i className='fa fa-trash' />
+            </div>
+          </div>
+        </div>
+        <div className='wsFileChat__wrapper wsFileGeneric__wrapper'>
+          <ul className='wsFileChat__messagelist wsFileGeneric__messagelist'>
+
+            <li className='wsFileChat__messagelist__item wsFileGeneric__messagelist__item sended'>
+              <div className='wsFileGeneric__messagelist__item__avatar'>
+                <img src={imgProfil} alt='avatar' />
+              </div>
+              <div className='wsFileGeneric__messagelist__item__createhour'>
+                27/11/17 à 11h45
+              </div>
+              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                Proident esse laboris in sed officia exercitation ut anim ea.
+              </div>
+            </li>
+
+            <li className='wsFileGeneric__messagelist__item received'>
+              <div className='wsFileGeneric__messagelist__item__avatar'>
+                <img src={imgProfil} alt='avatar' />
+              </div>
+              <div className='wsFileGeneric__messagelist__item__createhour'>
+                27/11/17 à 11h47
+              </div>
+              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+              </div>
+            </li>
+
+            <li className='wsFileGeneric__messagelist__item sended'>
+              <div className='wsFileGeneric__messagelist__item__avatar'>
+                <img src={imgProfil} alt='avatar' />
+              </div>
+              <div className='wsFileGeneric__messagelist__item__createhour'>
+                27/11/17 à 11h45
+              </div>
+              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                Proident esse laboris in sed officia exercitation ut anim ea.
+              </div>
+            </li>
+
+            <li className='wsFileGeneric__messagelist__item sended'>
+              <div className='wsFileGeneric__messagelist__item__avatar'>
+                <img src={imgProfil} alt='avatar' />
+              </div>
+              <div className='wsFileGeneric__messagelist__item__createhour'>
+                27/11/17 à 11h45
+              </div>
+              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                Proident esse laboris in sed officia exercitation ut anim ea.
+              </div>
+            </li>
+
+            <li className='wsFileGeneric__messagelist__item received'>
+              <div className='wsFileGeneric__messagelist__item__avatar'>
+                <img src={imgProfil} alt='avatar' />
+              </div>
+              <div className='wsFileGeneric__messagelist__item__createhour'>
+                27/11/17 à 11h47
+              </div>
+              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+              </div>
+            </li>
+
+            <li className='wsFileGeneric__messagelist__item received'>
+              <div className='wsFileGeneric__messagelist__item__avatar'>
+                <img src={imgProfil} alt='avatar' />
+              </div>
+              <div className='wsFileGeneric__messagelist__item__createhour'>
+                27/11/17 à 11h47
+              </div>
+              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+              </div>
+            </li>
+
+            <li className='wsFileGeneric__messagelist__item sended'>
+              <div className='wsFileGeneric__messagelist__item__avatar'>
+                <img src={imgProfil} alt='avatar' />
+              </div>
+              <div className='wsFileGeneric__messagelist__item__createhour'>
+                27/11/17 à 11h45
+              </div>
+              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                Proident esse laboris in sed officia exercitation ut anim ea.
+              </div>
+            </li>
+
+            <li className='wsFileGeneric__messagelist__item received'>
+              <div className='wsFileGeneric__messagelist__item__avatar'>
+                <img src={imgProfil} alt='avatar' />
+              </div>
+              <div className='wsFileGeneric__messagelist__item__createhour'>
+                27/11/17 à 11h47
+              </div>
+              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+                Proident esse laboris in sed officia exercitation ut anim ea.
+              </div>
+            </li>
+
+            <li className='wsFileGeneric__messagelist__item sended'>
+              <div className='wsFileGeneric__messagelist__item__avatar'>
+                <img src={imgProfil} alt='avatar' />
+              </div>
+              <div className='wsFileGeneric__messagelist__item__createhour'>
+                27/11/17 à 11h45
+              </div>
+              <div className='wsFileChat__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                Proident esse laboris in sed officia exercitation ut anim ea.
+              </div>
+            </li>
+
+          </ul>
+          <form className='wsFileChat__texteditor wsFileGeneric__texteditor'>
+            <div className='wsFileChat__texteditor__simpletext wsFileGeneric__texteditor__simpletext input-group'>
+              <input type='text' className='wsFileChat__texteditor__simpletext__input wsFileGeneric__texteditor__simpletext__input form-control' placeholder='...' />
+              <div className='wsFileChat__texteditor__simpletext__icon wsFileGeneric__texteditor__simpletext__icon input-group-addon'>
+                <i className='fa fa-font' />
+              </div>
+            </div>
+            <div className='wsFileGeneric__texteditor__wysiwyg d-none d-xl-block'>
+              <textarea />
+            </div>
+            <div className='wsFileChat__texteditor__submit wsFileGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
+              <button type='submit' className='wsFileChat__texteditor__submit__btn wsFileGeneric__texteditor__submit__btn btn btn-primary'>Envoyer
+                <div className='wsFileChat__texteditor__submit__btn__icon wsFileGeneric__texteditor__submit__btn__icon'>
+                  <i className='fa fa-paper-plane-o' />
+                </div>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Chat

src/container/FileItem.jsx

@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+
+class FileItem extends Component {
+  render () {
+    const { type, status, customClass } = this.props
+
+    let faClass = ''
+    if (type === 'file') faClass = 'fa fa-file-text-o docandfile-color'
+    else if (type === 'chat') faClass = 'fa fa-comments talk-color'
+    else if (type === 'task') faClass = 'fa fa-list-ul task-color'
+
+    let iconStatus = ''
+    if (status === 'current') iconStatus = 'fa fa-cogs current-color'
+    else if (status === 'nouse') iconStatus = 'fa fa-ban nouse-color'
+    else if (status === 'check') iconStatus = 'fa fa-check check-color'
+
+    let classInFolder = ''
+    if (customClass === 'inFolder') classInFolder = 'inFolder'
+
+    return (
+      <div className={'fileitem__rowfile align-items-center ' + (classInFolder)} onClick={this.props.onClickElement}>
+        <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
+          <div className='fileitem__rowfile__type'>
+            <i className={faClass} />
+          </div>
+        </div>
+        <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-10'>
+          <div className='fileitem__rowfile__name'>
+            <div className='fileitem__rowfile__name__text'>
+              { this.props.name }
+            </div>
+            <div className='fileitem__rowfile__name__icons d-none d-md-flex'>
+              <div className='fileitem__rowfile__name__icons__download'>
+                <i className='fa fa-download' />
+              </div>
+              <div className='fileitem__rowfile__name__icons__archive'>
+                <i className='fa fa-archive' />
+              </div>
+              <div className='fileitem__rowfile__name__icons__delete'>
+                <i className='fa fa-trash-o' />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
+          <div className='fileitem__rowfile__status'>
+            <i className={iconStatus} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default FileItem

src/container/FileItemHeader.jsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+
+class FileItemHeader extends Component {
+  render () {
+    return (
+      <div className='fileitemheader'>
+        <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
+          <div className='fileitemheader__type'>
+            Type
+          </div>
+        </div>
+        <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-10'>
+          <div className='fileitemheader__name'>
+            Nom du document ou fichier
+          </div>
+        </div>
+        <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
+          <div className='fileitemheader__status'>
+            Statut
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default FileItemHeader

src/container/Folder.jsx

@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+
+class Folder extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      open: false
+    }
+    this.handleClickToggleFolder = this.handleClickToggleFolder.bind(this)
+  }
+
+  handleClickToggleFolder = () => this.setState({open: !this.state.open})
+
+  render () {
+    return (
+      <div className={'folder' + (this.state.open ? ' active' : '')}>
+        <div className='folder__header' onClick={this.handleClickToggleFolder}>
+          <div className='folder__header__triangleborder'>
+            <div className='folder__header__triangleborder__triangle' />
+          </div>
+          <div className='folder__header__name'>
+            <div className='folder__header__name__icon'>
+              <i className='fa fa-folder-open-o' />
+            </div>
+            <div className='folder__header__name__text'>
+              Dossier Facture
+            </div>
+            <div className='folder__header__name__addbtn'>
+              <div className='folder__header__name__addbtn__text btn btn-primary'>
+                créer ...
+              </div>
+            </div>
+          </div>
+          <div className='folder__header__contenttype'>
+            <div className='folder__header__contenttype__text'>
+              Type de Contenu :
+            </div>
+            <div className='folder__header__contenttype__icon'>
+              <i className='fa fa-list-ul' />
+              <i className='fa fa-file-text-o' />
+              <i className='fa fa-comments' />
+            </div>
+          </div>
+        </div>
+        { this.props.children }
+      </div>
+    )
+  }
+}
+
+export default Folder

src/container/Login.jsx

@@ -25,7 +25,13 @@ class Login extends React.Component {
   handleChangePassword = e => this.setState({inputPassword: e.target.value})
   handleChangeRememberMe = () => this.setState(prev => ({inputRememberMe: !prev.inputRememberMe}))
 
-  handleClickSubmit = () => this.props.dispatch(userLogin(this.state.inputLogin, this.state.inputPassword))
+  handleClickSubmit = () => {
+    const { history, dispatch } = this.props
+    const { inputLogin, inputPassword } = this.state
+
+    dispatch(userLogin(inputLogin, inputPassword))
+    .then(() => history.push('/'))
+  }
 
   render () {
     return (

src/container/PageText.jsx

@@ -0,0 +1,163 @@
+import React, { Component } from 'react'
+import classnames from 'classnames'
+import imgProfilOrange from '../img/imgProfil_orange.png'
+import imgProfilReverse from '../img/imgProfil_reverse.png'
+
+class PageText extends Component {
+  render () {
+    return (
+      <div className={classnames('wsFileText wsFileGeneric', {'visible': this.props.visible})}>
+        <div className='wsFileText__header wsFileGeneric__header'>
+          <div className='wsFileGeneric__header__icon'>
+            <i className='fa fa-file-text-o' />
+          </div>
+          <div className='wsFileText__header__title wsFileGeneric__header__title mr-auto'>
+            Facture 57840 - Jean-michel Chevalier - 04/09/2017
+          </div>
+          <div className='wsFileGeneric__header__close'>
+            <i className='fa fa-times' />
+          </div>
+        </div>
+        <div className='wsFileGeneric__option'>
+          <div className='wsFileGeneric__option__menu'>
+            <div className='wsFileGeneric__option__menu__action'>
+              <i className='fa fa-pencil' />
+            </div>
+            <div className='wsFileGeneric__option__menu__action'>
+              <i className='fa fa-archive' />
+            </div>
+            <div className='wsFileGeneric__option__menu__action'>
+              <i className='fa fa-trash' />
+            </div>
+          </div>
+        </div>
+        <div className='wsFileText__contentpage wsFileGeneric__contentpage'>
+          <div className='wsFileText__contentpage__textnote'>
+            <div className='wsFileText__contentpage__textnote__latestversion'>
+              Dernière version : v3
+            </div>
+            <div className='wsFileText__contentpage__textnote__title'>
+              Titre de 30px de font size
+            </div>
+            <div className='wsFileText__contentpage__textnote__data'>
+              Labore tempor sunt id quis quis velit ut officia amet ut
+              adipisicing in in commodo exercitation cupidatat culpa
+              eiusmo dolor consectetur dolor ut proident proident culpamet
+              denim consequat in sit ex ullamco duis.
+              <br />
+              Labore tempor sunt id quis quis velit ut officia amet ut
+              adipisicing in in commodo exercitation cupidatat culpa
+              eiusmo dolor consectetur dolor ut proident proident culpamet
+              denim consequat in sit ex ullamco duis.
+              <br />
+              Labore tempor sunt id quis quis velit ut officia amet ut
+              adipisicing in in commodo exercitation cupidatat culpa
+              eiusmo dolor consectetur dolor ut proident proident culpamet
+              denim consequat in sit ex ullamco duis.
+              <br />
+              Labore tempor sunt id quis quis velit ut officia amet ut
+              adipisicing in in commodo exercitation cupidatat culpa
+              eiusmo dolor consectetur dolor ut proident proident culpamet
+              denim consequat in sit ex ullamco duis.
+            </div>
+          </div>
+          <div className='wsFileText__contentpage__wrapper wsFileGeneric__wrapper'>
+            <div className='wsFileText__contentpage__header'>
+              Timeline
+            </div>
+
+            <ul className='wsFileText__contentpage__messagelist wsFileGeneric__messagelist'>
+
+              <li className='wsFileText__contentpage__messagelist__item wsFileGeneric__messagelist__item sended'>
+                <div className='wsFileText__contentpage__messagelist__item__avatar wsFileGeneric__messagelist__item__avatar'>
+                  <img src={imgProfilOrange} alt='avatar' />
+                </div>
+                <div className='wsFileText__contentpage__messagelist__item__createhour wsFileGeneric__messagelist__item__createhour'>
+                  27/11/17 à 11h45
+                </div>
+                <div className='wsFileText__contentpage__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                </div>
+              </li>
+
+              <li className='wsFileText__contentpage__messagelist__item wsFileGeneric__messagelist__item received'>
+                <div className='wsFileText__contentpage__messagelist__item__avatar wsFileGeneric__messagelist__item__avatar'>
+                  <img src={imgProfilReverse} alt='avatar' />
+                </div>
+                <div className='wsFileText__contentpage__messagelist__item__createhour wsFileGeneric__messagelist__item__createhour'>
+                  27/11/17 à 11h47
+                </div>
+                <div className='wsFileText__contentpage__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                </div>
+              </li>
+
+              <div className='wsFileText__contentpage__messagelist__version wsFileGeneric__messagelist__version'>
+                <div className='wsFileText__contentpage__messagelist__version__btn btn-primary'>
+                  <i className='fa fa-code-fork' />
+                  version 3
+                </div>
+                <div className='wsFileText__contentpage__messagelist__version__dateversion'>
+                  Créer le 22/11/17
+                </div>
+              </div>
+
+              <li className='wsFileText__contentpage__messagelist__item wsFileGeneric__messagelist__item sended'>
+                <div className='wsFileText__contentpage__messagelist__item__avatar wsFileGeneric__messagelist__item__avatar'>
+                  <img src={imgProfilOrange} alt='avatar' />
+                </div>
+                <div className='wsFileText__contentpage__messagelist__item__createhour wsFileGeneric__messagelist__item__createhour'>
+                  27/11/17 à 11h45
+                </div>
+                <div className='wsFileText__contentpage__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                </div>
+              </li>
+
+              <li className='wsFileText__contentpage__messagelist__item wsFileGeneric__messagelist__item received'>
+                <div className='wsFileText__contentpage__messagelist__item__avatar wsFileGeneric__messagelist__item__avatar'>
+                  <img src={imgProfilReverse} alt='avatar' />
+                </div>
+                <div className='wsFileText__contentpage__messagelist__item__createhour wsFileGeneric__messagelist__item__createhour'>
+                  27/11/17 à 11h47
+                </div>
+                <div className='wsFileText__contentpage__messagelist__item__content wsFileGeneric__messagelist__item__content'>
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                  Proident esse laboris in sed officia exercitation ut anim ea.
+                </div>
+              </li>
+
+            </ul>
+            <form className='wsFileText__contentpage__texteditor wsFileGeneric__texteditor'>
+              <div className='wsFileText__contentpage__texteditor__simpletext wsFileGeneric__texteditor__simpletext input-group'>
+                <input type='text' className='wsFileText__contentpage__texteditor__simpletext__input wsFileGeneric__texteditor__simpletext__input form-control' placeholder='...' />
+                <div className='wsFileText__contentpage__texteditor__simpletext__icon wsFileGeneric__texteditor__simpletext__icon input-group-addon'>
+                  <i className='fa fa-font' />
+                </div>
+              </div>
+              <div className='wsFileText__contentpage__texteditor__wysiwyg wsFileGeneric__texteditor__wysiwyg d-none d-xl-block'>
+                <textarea />
+              </div>
+              <div className='wsFileText__contentpage__texteditor__submit wsFileGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
+                <button type='submit' className='wsFileText__contentpage__texteditor__submit__btn wsFileGeneric__texteditor__submit__btn btn btn-primary'>Envoyer
+                  <div className='wsFileText__contentpage__texteditor__submit__btn__icon wsFileGeneric__texteditor__submit__btn__icon'>
+                    <i className='fa fa-paper-plane-o' />
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default PageText

src/container/Sidebar.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { connect } from 'react-redux'
-import { userLogin } from '../action-creator.async.js'
+import {connect} from 'react-redux'
 
 class Sidebar extends React.Component {
   // constructor (props) {
@@ -11,250 +10,267 @@ class Sidebar extends React.Component {
   //   }
   // }
 
-
   // <div className='sidebar-expandbar'>
   //   <i className='fa fa-minus-square-o sidebar-expandbar__icon' />
   // </div>
 
-render () {
+  render () {
     return (
       <div className='sidebar d-none d-lg-table-cell'>
         <nav className='sidebar__navigation navbar navbar-light'>
-        <div className='sidebar__navigation__menu'>
-        <ul className='sidebar__navigation__menu__workspace navbar-nav collapse navbar-collapse'>
-        <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
-        <div className='sidebar__navigation__menu__workspace__item__number'>
-        01
-        </div>
-      <div className='sidebar__navigation__menu__workspace__item__name'>
-        Workspace 1
-      </div>
+          <div className='sidebar__navigation__menu'>
+            <ul className='sidebar__navigation__menu__workspace navbar-nav collapse navbar-collapse'>
+              <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
+                <div className='sidebar__navigation__menu__workspace__item__number'>
+                  01
+                </div>
 
-      <div className='sidebar__navigation__menu__workspace__item__icon'>
-        <i className='fa fa-chevron-down' />
-        </div>
-      <ul className='sidebar__navigation__menu__workspace__item__submenu'>
-        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-            <div className='dropdown__icon'>
-              <i className='fa fa-th' />
-            </div>
-            <div className='dropdown__title' id='navbarDropdown'>
-              <div className='dropdown__title__text'>
-                Tous les fichiers
-              </div>
-            </div>
-          </div>
-          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Archivés
-              </div>
-            </div>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Supprimés
-              </div>
-            </div>
-          </div>
-        </li>
-        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-            <div className='dropdown__icon'>
-              <i className='fa fa-signal dashboard-color' />
-            </div>
-            <div className='dropdown__title' id='navbarDropdown'>
-              <div className='dropdown__title__text'>
-                Tableau de bord
-              </div>
-            </div>
-          </div>
-          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Archivés
-              </div>
-            </div>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Supprimés
-              </div>
-            </div>
-          </div>
-        </li>
-        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-            <div className='dropdown__icon'>
-              <i className='fa fa-list-ul task-color' />
-            </div>
-            <div className='dropdown__title'>
-              <div className='dropdown__title__text'>
-                Liste des tâches
-              </div>
-            </div>
-          </div>
-          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Archivés
-              </div>
-            </div>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Supprimés
-              </div>
-            </div>
-          </div>
-        </li>
-        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-            <div className='dropdown__icon'>
-              <i className='fa fa-folder-o docandfile-color' />
-            </div>
-            <div className='dropdown__title'>
-              <div className='dropdown__title__text'>
-                Documents & fichiers
-              </div>
-            </div>
-          </div>
-          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Archivés
-              </div>
-            </div>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Supprimés
-              </div>
-            </div>
-          </div>
-        </li>
-        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-            <div className='dropdown__icon'>
-              <i className='fa fa-comments talk-color' />
-            </div>
-            <div className='dropdown__title'>
-              <div className='dropdown__title__text'>
-                Discussions
-              </div>
-            </div>
-          </div>
-          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Archivés
-              </div>
-            </div>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Supprimés
-              </div>
-            </div>
-          </div>
-        </li>
-        <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
-          <div className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
-            <div className='dropdown__icon'>
-              <i className='fa fa-calendar calendar-color' />
-            </div>
-            <div className='dropdown__title'>
-              <div className='dropdown__title__text'>
-                Calendrier
-              </div>
-            </div>
-          </div>
-          <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Archivés
-              </div>
-            </div>
-            <div className='dropdown__subdropdown__item dropdown-item'>
-              <div className='dropdown__subdropdown__item__iconfile alignname'>
-                <i className='fa fa-file-text-o' />
-              </div>
-              <div className='dropdown__subdropdown__item__textfile alignname'>
-                Documents Supprimés
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-      </li>
+                <div className='sidebar__navigation__menu__workspace__item__name'>
+                  Workspace 1
+                </div>
 
-      <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
-        <div className='sidebar__navigation__menu__workspace__item__number'>
-          02
-        </div>
-        <div className='sidebar__navigation__menu__workspace__item__name'>
-          Workspace 2
-        </div>
+                <div className='sidebar__navigation__menu__workspace__item__icon'>
+                  <i className='fa fa-chevron-down' />
+                </div>
+                <ul className='sidebar__navigation__menu__workspace__item__submenu'>
+                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+                    <div
+                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                      <div className='dropdown__icon'>
+                        <i className='fa fa-th' />
+                      </div>
+                      <div className='dropdown__title' id='navbarDropdown'>
+                        <div className='dropdown__title__text'>
+                          Tous les fichiers
+                        </div>
+                      </div>
+                    </div>
+                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Archivés
+                        </div>
+                      </div>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Supprimés
+                        </div>
+                      </div>
+                    </div>
+                  </li>
 
-        <div className='sidebar__navigation__menu__workspace__item__icon'>
-          <i className='fa fa-chevron-down' />
-        </div>
-      </li>
+                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+                    <div
+                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                      <div className='dropdown__icon'>
+                        <i className='fa fa-signal dashboard-color' />
+                      </div>
+                      <div className='dropdown__title' id='navbarDropdown'>
+                        <div className='dropdown__title__text'>
+                          Tableau de bord
+                        </div>
+                      </div>
+                    </div>
+                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Archivés
+                        </div>
+                      </div>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Supprimés
+                        </div>
+                      </div>
+                    </div>
+                  </li>
 
-      <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
-        <div className='sidebar__navigation__menu__workspace__item__number'>
-        03
-        </div>
-      <div className='sidebar__navigation__menu__workspace__item__name'>
-        Workspace 3
-      </div>
+                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+                    <div
+                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                      <div className='dropdown__icon'>
+                        <i className='fa fa-list-ul task-color' />
+                      </div>
+                      <div className='dropdown__title'>
+                        <div className='dropdown__title__text'>
+                          Liste des tâches
+                        </div>
+                      </div>
+                    </div>
+                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Archivés
+                        </div>
+                      </div>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Supprimés
+                        </div>
+                      </div>
+                    </div>
+                  </li>
 
-      <div className='sidebar__navigation__menu__workspace__item__icon'>
-        <i className='fa fa-chevron-down' />
-        </div>
-    </li>
-    </ul>
-    </div>
+                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+                    <div
+                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                      <div className='dropdown__icon'>
+                        <i className='fa fa-folder-o docandfile-color' />
+                      </div>
+                      <div className='dropdown__title'>
+                        <div className='dropdown__title__text'>
+                          Documents & fichiers
+                        </div>
+                      </div>
+                    </div>
+                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Archivés
+                        </div>
+                      </div>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Supprimés
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+
+                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+                    <div
+                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                      <div className='dropdown__icon'>
+                        <i className='fa fa-comments talk-color' />
+                      </div>
+                      <div className='dropdown__title'>
+                        <div className='dropdown__title__text'>
+                          Discussions
+                        </div>
+                      </div>
+                    </div>
+                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Archivés
+                        </div>
+                      </div>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Supprimés
+                        </div>
+                      </div>
+                    </div>
+                  </li>
 
-    </nav>
-      <div className='sidebar__btnnewworkspace'>
-        <button className='sidebar__btnnewworkspace__btn btn btn-success'>
-          Créer un workspace
-        </button>
+                  <li className='sidebar__navigation__menu__workspace__item__submenu__dropdown'>
+                    <div
+                      className='sidebar__navigation__menu__workspace__item__submenu__dropdown__showdropdown dropdown-toggle'
+                      role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                      <div className='dropdown__icon'>
+                        <i className='fa fa-calendar calendar-color' />
+                      </div>
+                      <div className='dropdown__title'>
+                        <div className='dropdown__title__text'>
+                          Calendrier
+                        </div>
+                      </div>
+                    </div>
+                    <div className='dropdown__subdropdown dropdown-menu' aria-labelledby='navbarDropdown'>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Archivés
+                        </div>
+                      </div>
+                      <div className='dropdown__subdropdown__item dropdown-item'>
+                        <div className='dropdown__subdropdown__item__iconfile alignname'>
+                          <i className='fa fa-file-text-o' />
+                        </div>
+                        <div className='dropdown__subdropdown__item__textfile alignname'>
+                          Documents Supprimés
+                        </div>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+
+              <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
+                <div className='sidebar__navigation__menu__workspace__item__number'>
+                  02
+                </div>
+                <div className='sidebar__navigation__menu__workspace__item__name'>
+                  Workspace 2
+                </div>
+
+                <div className='sidebar__navigation__menu__workspace__item__icon'>
+                  <i className='fa fa-chevron-down' />
+                </div>
+              </li>
+
+              <li className='sidebar__navigation__menu__workspace__item nav-item dropdown'>
+                <div className='sidebar__navigation__menu__workspace__item__number'>
+                  03
+                </div>
+                <div className='sidebar__navigation__menu__workspace__item__name'>
+                  Workspace 3
+                </div>
+
+                <div className='sidebar__navigation__menu__workspace__item__icon'>
+                  <i className='fa fa-chevron-down' />
+                </div>
+              </li>
+            </ul>
+          </div>
+        </nav>
+
+        <div className='sidebar__btnnewworkspace'>
+          <button className='sidebar__btnnewworkspace__btn btn btn-success'>
+            Créer un workspace
+          </button>
+        </div>
       </div>
-    </div>
     )
   }
 }
 
-const mapStateToProps = ({ user }) => ({ user })
+const mapStateToProps = ({user}) => ({user})
 export default connect(mapStateToProps)(Sidebar)

src/container/Tracim.jsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { connect } from 'react-redux'
 import Footer from '../component/Footer.jsx'
 import Header from './Header.jsx'
-// import Sidebar from './Sidebar.jsx'
+import Sidebar from './Sidebar.jsx'
 import Login from './Login.jsx'
 import Page from './Page.jsx'
-import Home from './Home.jsx'
+import Workspace from './Workspace.jsx'
 import {
   Route,
   withRouter
@@ -14,13 +14,17 @@ import PrivateRoute from './PrivateRoute.jsx'
 
 class Tracim extends React.Component {
   render () {
+    const { location } = this.props
     return (
       <div>
         <Header />
 
-        {/* <Sidebar /> */}
-        <PrivateRoute exact path='/' component={Home} />
         <Route path='/login' component={Login} />
+
+        { location.pathname !== '/login' && // cant find "except" in <Route path />
+          <Sidebar />
+        }
+        <Route exact path='/' component={Workspace} />
         <PrivateRoute path='/page' component={Page} />
 
         <Footer />
@@ -29,5 +33,5 @@ class Tracim extends React.Component {
   }
 }
 
-const mapStateToProps = ({ user }) => ({ user })
+const mapStateToProps = () => ({})
 export default withRouter(connect(mapStateToProps)(Tracim))

src/container/Workspace.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import classnames from 'classnames'
+import Folder from './Folder.jsx'
+import FileItem from './FileItem.jsx'
+import FileItemHeader from './FileItemHeader.jsx'
+// import Chat from './Chat.jsx'
+// import PageText from './PageText.jsx'
+import PageWrapper from '../component/common/layout/PageWrapper.jsx'
+import PageTitle from '../component/common/layout/PageTitle.jsx'
+import PageContent from '../component/common/layout/PageContent.jsx'
+import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
+
+class Workspace extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      activeFileType: ''
+    }
+  }
+
+  render () {
+    return (
+      <PageWrapper customeClass='workspace'>
+        <PageTitle
+          parentClass='workspace__header'
+          customClass='justify-content-between'
+          title='Documents & Fichiers'
+        >
+          <DropdownCreateButton parentClass='workspace__header__btnaddworkspace' />
+        </PageTitle>
+
+        <PageContent parentClass='workspace__content'>
+
+          <div className='workspace__content__fileandfolder'>
+            <FileItemHeader />
+
+            <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' />
+            <FileItem
+              type='file'
+              name='Facture 57840 - Jean-michel Chevalier - 04/09/2017'
+              status='check'
+              onClickElement={() => this.setState({activeFileType: 'file'})}
+            />
+            <FileItem
+              type='chat'
+              name='Discussions à propos du nouveau système de facturation'
+              status='nouse'
+              customClass='inFolder'
+              onClickElement={() => this.setState({activeFileType: 'chat'})}
+            />
+
+            <Folder>
+              <FileItem type='file' name='Facture 57839 - Société ABC - 01/09/2017' status='current' customClass='inFolder' />
+              <FileItem type='file' name='Facture 57839 - Société ABC - 01/09/2017' status='current' customClass='inFolder' />
+              <FileItem type='task' name='Editer la facture pour Phillipe GIRARD' status='check' customClass='inFolder' />
+
+              <Folder>
+                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='nouse' customClass='inFolder' />
+                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='check' customClass='inFolder' />
+              </Folder>
+              <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' customClass='inFolder' />
+              <FileItem type='file' name='Facture 57840 - Jean-michel Chevalier - 04/09/2017' status='check' customClass='inFolder' />
+              <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' customClass='inFolder' />
+              <Folder>
+                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='nouse' customClass='inFolder' />
+                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='check' customClass='inFolder' />
+              </Folder>
+              <FileItem type='file' name='Facture 57840 - Jean-michel Chevalier - 04/09/2017' status='check' customClass='inFolder' />
+            </Folder>
+          </div>
+
+          <DropdownCreateButton customClass='workspace__content__button mb-5' />
+
+          {/*
+          <Chat visible={this.state.activeFileType === 'chat'} />
+          <PageText visible={this.state.activeFileType === 'file'} />
+          */}
+        </PageContent>
+
+      </PageWrapper>
+    )
+  }
+}
+
+const mapStateToProps = ({ user }) => ({ user })
+export default connect(mapStateToProps)(Workspace)

src/css/FileItem.styl

@@ -0,0 +1,37 @@
+.fileitem__rowfile
+  display flex
+  border 1px solid dark-blue
+  border-bottom 0
+  &:hover
+    background-color hover-files
+  &:last-child
+    border-bottom 1px solid dark-blue
+  &__type
+    font-size 30px
+    text-align center
+  &__name
+    display flex
+    justify-content space-between
+    padding 15px 5px
+    cursor pointer
+    &__text
+      font-size 17px
+    &__icons
+      &__download
+        display inline-block
+        margin-right 10px
+      &__archive
+        display inline-block
+        margin-right 10px
+      &__delete
+        display inline-block
+        margin-right 10px
+  &__status
+    font-size 30px
+    text-align center
+
+@media (min-width: max-xs) and (max-width: max-lg)
+  .fileitem__rowfile
+    border-right 1px solid grey
+    &__name__icons
+        margin-top 5px

src/css/FileItemHeader.styl

@@ -0,0 +1,15 @@
+.fileitemheader
+  display flex
+  &__type
+    padding 15px 0
+    text-align center
+    font-size 17px
+  &__name
+    padding 15px 5px
+    width 100%
+    font-size 17px
+  &__status
+    padding 15px 0
+    width 100%
+    text-align center
+    font-size 17px

src/css/Folder.styl

@@ -0,0 +1,124 @@
+/****** FOLDER CLOSE *******/
+
+folderclose()
+  height 0
+  visibility hidden
+  opacity 0
+  border 0
+
+/*****************************/
+
+/****** FOLDER OPEN *******/
+
+folderopen()
+  height 100%
+  opacity 1
+  visibility visible
+  transition opacity 1s
+
+/*****************************/
+
+.folder
+  padding-left 30px
+  &:last-child
+    border-bottom 1px solid dark-blue
+  & > .inFolder
+    folderclose()
+    &:last-child
+      border-bottom 0
+  & > .folder
+    folderclose()
+  &.active
+    & > .inFolder
+      border 1px solid dark-blue
+      border-bottom 0
+      folderopen()
+    & > .folder
+      folderopen()
+    & > .folder__header
+      .folder__header__triangleborder
+        display block
+        &__triangle
+          display block
+  &__header
+    position relative
+    display flex
+    justify-content space-between
+    margin-left -30px
+    border 1px solid dark-blue
+    border-bottom 0
+    background-color light-grey
+    cursor pointer
+    &:hover
+      background-color hover
+      .folder__header__triangleborder__triangle
+        border-color hover transparent transparent transparent
+    &__triangleborder
+      display none
+      position absolute
+      top 61px
+      left -1px
+      border-style solid
+      border-width 25px 30px 0 30px
+      border-color dark-blue transparent transparent transparent
+      z-index 1
+      &__triangle
+        display none
+        position absolute
+        top -26px
+        left -30px
+        border-style solid
+        border-width 25px 30px 0 30px
+        border-color light-grey transparent transparent transparent
+    &__name
+      display flex
+      padding-left 5px
+      &__icon
+        margin auto 15px
+        font-size 25px
+        color dark-blue
+      &__text
+        margin auto 15px
+        font-size 17px
+        color dark-blue
+      &__addbtn
+        margin auto 0
+        cursor pointer
+        &:hover > .folder__header__name__addbtn__text
+          color white
+        &__text
+          border 1px solid dark-blue
+          background-color transparent
+          color dark-blue
+          font-size 17px
+    &__contenttype
+      display flex
+      &__text
+        padding 18px 15px
+        font-size 17px
+        color dark-blue
+      &__icon
+        padding 18px 5px
+        font-size 17px
+        color dark-blue
+        & > i
+          margin-right 15px
+
+/*****************************/
+
+/**** MEDIA 575px ****/
+
+@media (max-width: max-xs)
+
+  .folder
+    &__header
+      &__triangleborder
+        top 59px
+      &__name
+        &__icon
+          padding 14px 15px
+          font-size 20px
+        &__text
+          font-size 15px
+      &__contenttype
+        display none

src/css/Generic.styl

@@ -0,0 +1,72 @@
+.pageWrapperGeneric
+  display table-cell
+  vertical-align top
+  padding-top 87px
+  width 100%
+  &__header
+    display flex
+  &__content
+    margin 10px 10px 120px 10px
+@media (min-width: min-md) and (max-width: max-md)
+  .pageWrapperGeneric
+    display block
+    padding-top 87px
+    &__header
+      margin 95px 0 5px 30px
+    &__content
+      margin 0
+@media (min-width: min-sm) and (max-width: max-sm)
+  .pageWrapperGeneric
+    display block
+    padding-top 87px
+    &__header
+      margin 95px 0 35px 0
+      &__title
+        display inline-block
+        margin-left 0
+    &__content
+      margin 0
+@media (max-width: max-xs)
+  .pageWrapperGeneric
+    display block
+    padding-top 87px
+    &__header
+      display block
+      margin-top 60px
+    &__content
+      margin 0
+
+
+.pageTitleGeneric
+  display flex
+  margin 45px 0
+  &__title
+    margin-left 10px
+    font-size 30px
+    color dark-grey
+@media (max-width: max-xs)
+  .pageTitleGeneric
+    display block
+
+
+.pageContentGeneric
+  margin 10px 10px 120px 10px
+
+
+.dropdownCreateBtn
+  &__label
+    padding 10px 65px
+    background-color green
+    cursor pointer
+    &__text
+      display inline-block
+      color white
+    &::after //bootstrap override
+      display inline-block
+      margin-left 30px
+      color white
+  &__setting
+    padding 0
+    cursor pointer
+    .setting__link
+      padding 5px 65px 5px 10px

src/css/Variable.styl

@@ -42,3 +42,20 @@ max-lg = 1199px
 
 min-xl = 1200px
 /***********************/
+
+.dashboard-color
+  color purple
+.task-color
+  color green
+.docandfile-color
+  color orange
+.talk-color
+  color blue
+.calendar-color
+  color red
+.current-color
+  color blue
+.nouse-color
+  color dark-grey
+.check-color
+  color green

src/css/Workspace.styl

@@ -0,0 +1,21 @@
+.workspace
+  &__content
+    &__button
+      display flex
+      justify-content flex-end
+      margin 50px 10px 0 10px
+      &__btnaddworkspace
+        margin-bottom 50px
+        padding 10px 55px
+@media (min-width: min-sm) and (max-width: max-sm)
+  .workspace
+    &__header
+      &__btnaddworkspace
+        display inline-block
+        margin-right 0
+
+@media (max-width: max-xs)
+  .workspace
+    &__header
+      &__title
+        margin 0 0 20px 0

src/css/index.styl

@@ -4,9 +4,15 @@ html, body, #content, #content > div
   height 100%
 
 @import 'Variable'
+@import 'Generic'
 
 @import 'Sidebar'
 @import 'Header'
 @import 'Footer'
 
 @import 'Login'
+@import 'Workspace'
+
+@import 'FileItem'
+@import 'FileItemHeader'
+@import 'Folder'