merged alexicauvin into plugin_research

src/component/Sidebar/WorkspaceListItem.jsx

@@ -29,16 +29,21 @@ const WorkspaceListItem = props => {
       className='sidebar__navigation__workspace__item nav-item dropdown'
       onClick={handleClickTitle}
     >
-      <div className='sidebar__navigation__workspace__item__number'>
-        {pad(props.number)}
-      </div>
 
-      <div className='sidebar__navigation__workspace__item__name' title={props.name}>
-        {props.name}
-      </div>
+      <div className='sidebar__navigation__workspace__item__wrapper'>
+
+        <div className='sidebar__navigation__workspace__item__number'>
+          {pad(props.number)}
+        </div>
+
+        <div className='sidebar__navigation__workspace__item__name' title={props.name}>
+          {props.name}
+        </div>
+
+        <div className='sidebar__navigation__workspace__item__icon'>
+          <i className='fa fa-chevron-down' />
+        </div>
 
-      <div className='sidebar__navigation__workspace__item__icon'>
-        <i className='fa fa-chevron-down' />
       </div>
 
       <ul

src/component/Timeline.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
-import imgProfilOrange from '../img/imgProfil_orange.png'
-import imgProfilReverse from '../img/imgProfil_reverse.png'
+import imgProfil from '../img/imgProfil.png'
+import imgProfilReverse from '../img/imgProfil-reverse.png'
 
 const Timeline = props => {
   return (
@@ -14,7 +14,7 @@ const Timeline = props => {
 
         <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item sended')}>
           <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfilOrange} alt='avatar' />
+            <img src={imgProfil} alt='avatar' />
           </div>
           <div
             className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
@@ -56,7 +56,7 @@ const Timeline = props => {
 
         <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item sended')}>
           <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfilOrange} alt='avatar' />
+            <img src={imgProfil} alt='avatar' />
           </div>
           <div
             className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>

src/component/Workspace/FileContentViewer.jsx

@@ -1,9 +1,62 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import PopinFixed from '../common/PopinFixed/PopinFixed'
+import PopinFixedHeader from '../common/PopinFixed/PopinFixedHeader.jsx'
+import PopinFixedOption from '../common/PopinFixed/PopinFixedOption.jsx'
+import PopinFixedContent from '../common/PopinFixed/PopinFixedContent.jsx'
+import PageHtml from './FileType/PageHtml.jsx'
+import Thread from './FileType/Thread.jsx'
+import Preview from './FileType/File.jsx'
+import Timeline from '../Timeline.jsx'
+import { FILE_TYPE } from '../../helper.js'
 
 const FileContentViewer = props => {
+  const { customClass, icon } = FILE_TYPE.find(f => f.name === props.file.type) || {customClass: '', icon: ''}
+
+  const [leftPart, rightPart] = (() => {
+    switch (props.file.type) {
+      case FILE_TYPE[0].name: // pageHtml
+        return [
+          <PageHtml version={props.file.version} text={props.file.text} />,
+          <Timeline customClass={`${customClass}__contentpage`} />
+        ]
+      case FILE_TYPE[2].name: // file (preview)
+        return [
+          <Preview />,
+          <Timeline customClass={`${customClass}__contentpage`} />
+        ]
+      case FILE_TYPE[3].name: // thread
+        return [
+          <Thread />
+        ]
+    }
+  })()
+
   return (
+    <PopinFixed customClass={`${customClass}`}>
+      <PopinFixedHeader
+        customClass={`${customClass}`}
+        icon={icon}
+        name={props.file.title}
+        onClickCloseBtn={props.onClose}
+      />
+
+      <PopinFixedOption customClass={`${customClass}`} />
 
+      <PopinFixedContent customClass={`${customClass}__contentpage`}>
+        { leftPart }
+        { rightPart }
+      </PopinFixedContent>
+    </PopinFixed>
   )
 }
 
 export default FileContentViewer
+
+FileContentViewer.PropTypes = {
+  file: PropTypes.shape({
+    type: PropTypes.oneOf(FILE_TYPE.map(f => f.name)).isRequired,
+    title: PropTypes.string.isRequired
+  }).isRequired,
+  onClose: PropTypes.func.isRequired
+}

src/component/Workspace/FileType/File.jsx

@@ -0,0 +1,75 @@
+import React, { Component } from 'react'
+import classnames from 'classnames'
+import imgPDF from '../../../img/pdf.jpg'
+// import imgExcel from '../../../img/excel.png'
+
+class File extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      activesidebar: false
+    }
+  }
+
+  handleClickSidebar = () => this.setState(prev => ({activesidebar: !prev.activesidebar}))
+
+  render () {
+    return (
+      <div className={classnames('wsFileFile__contentpage__preview', {'activesidebar': this.state.activesidebar})}>
+        <div className='wsFileFile__contentpage__preview__dloption'>
+          <div className='wsFileFile__contentpage__preview__dloption__icon'>
+            <i className='fa fa-download' />
+          </div>
+          <div className='wsFileFile__contentpage__preview__dloption__icon'>
+            <i className='fa fa-file-pdf-o' />
+          </div>
+          <div className='wsFileFile__contentpage__preview__dloption__icon'>
+            <i className='fa fa-files-o' />
+          </div>
+        </div>
+        <div className='wsFileFile__contentpage__preview__slider'>
+          <div className='wsFileFile__contentpage__preview__slider__icon'>
+            <i className='fa fa-chevron-left' />
+          </div>
+          <div className='wsFileFile__contentpage__preview__slider__fileimg'>
+            <img src={imgPDF} alt='fichier pdf' className='img-thumbnail mx-auto' />
+          </div>
+          <div className='wsFileFile__contentpage__preview__slider__icon'>
+            <i className='fa fa-chevron-right' />
+          </div>
+        </div>
+        <div className='wsFileFile__contentpage__preview__sidebar' onClick={this.handleClickSidebar}>
+          <div className='wsFileFile__contentpage__preview__sidebar__button'>
+            <div className='wsFileFile__contentpage__preview__sidebar__button__icon'>
+              <i className='fa fa-gear' />
+            </div>
+            <div className='wsFileFile__contentpage__preview__sidebar__button__title'>
+              Propriétés
+            </div>
+          </div>
+          <div className='wsFileFile__contentpage__preview__sidebar__property'>
+            <div className='wsFileFile__contentpage__preview__sidebar__property__detail'>
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__size'>
+                Taille : 500Ko
+              </div>
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__description'>
+                <label>
+                  Description :
+                </label>
+                <form className='wsFileFile__contentpage__preview__sidebar__property__detail__description__editiondesc'>
+                  <textarea />
+                  <input type='submit' className='wsFileFile__contentpage__preview__sidebar__property__detail__description__editiondesc__validate form-control' />
+                </form>
+              </div>
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__btndesc btn btn-primary'>
+                Changer la Description
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default File

src/component/common/Input/BtnSwitch.jsx

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+
+class BtnSwitch extends Component {
+  render () {
+    return (
+      <div className='btnswitch'>
+        <label className='switch nomarginlabel'>
+          <input type='checkbox' />
+          <span className='slider round' />
+        </label>
+        <div className='btnswitch__text'>
+          On
+        </div>
+      </div>
+    )
+  }
+}
+
+export default BtnSwitch

src/component/common/PopinFixed/PopinFixedOption.jsx

@@ -6,6 +6,49 @@ const PopinFixedOption = props => {
   return (
     <div className='wsFileGeneric__option'>
       <div className='wsFileGeneric__option__menu'>
+
+        <div className='wsFileFile__option__menu__addversion btn mr-auto'>
+          Nouvelle version
+          <i className='fa fa-plus-circle' />
+        </div>
+
+        <div className='wsFileGeneric__option__menu__status dropdown'>
+          <button className='wsFileGeneric__option__menu__status__dropdownbtn check btn dropdown-toggle' type='button' id='dropdownMenu2' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+            Validé
+            <div className='wsFileGeneric__option__menu__status__dropdownbtn__icon'>
+              <i className='fa fa-check' />
+            </div>
+          </button>
+
+          <div className='wsFileGeneric__option__menu__status__submenu dropdown-menu' aria-labelledby='dropdownMenu2'>
+            <h6 className='dropdown-header'>Statut du fichier</h6>
+            <div className='dropdown-divider' />
+            <button className='wsFileGeneric__option__menu__status__submenu__item current  dropdown-item' type='button'>
+              En cours
+              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+                <i className='fa fa-gears' />
+              </div>
+            </button>
+            <button className='wsFileGeneric__option__menu__status__submenu__item check dropdown-item' type='button'>
+              Validé
+              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+                <i className='fa fa-check' />
+              </div>
+            </button>
+            <button className='wsFileGeneric__option__menu__status__submenu__item invalid dropdown-item' type='button'>
+              Invalidé
+              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+                <i className='fa fa-times' />
+              </div>
+            </button>
+            <button className='wsFileGeneric__option__menu__status__submenu__item ban dropdown-item' type='button'>
+              Obsolète
+              <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+                <i className='fa fa-ban' />
+              </div>
+            </button>
+          </div>
+        </div>
         <div className='wsFileGeneric__option__menu__action'>
           <i className='fa fa-archive' />
         </div>

src/container/AccountPage.jsx

@@ -0,0 +1,327 @@
+import React, { Component } from 'react'
+import imgProfil from '../img/imgProfil.png'
+import BtnSwitch from '../component/common/Input/BtnSwitch.jsx'
+
+class AccountPage extends Component {
+  render () {
+    return (
+      <div className='account'>
+        <div className='container-fluid nopadding'>
+          <div className='pageTitleGeneric'>
+            <div className='pageTitleGeneric__title'>
+              Mon Compte
+            </div>
+          </div>
+
+          <div className='account__userinformation mr-5 ml-5 mb-5'>
+            <div className='account__userinformation__avatar'>
+              <img src={imgProfil} alt='avatar' />
+            </div>
+            <div className='account__userinformation__wrapper'>
+              <div className='account__userinformation__name mb-3'>
+                Alexi Cauvin
+              </div>
+              <a href='mailto:contact@contact.fr' className='account__userinformation__email mb-3'>
+                alexi.cauvin@algoo.fr
+              </a>
+              <div className='account__userinformation__role mb-3'>
+                Utilisateur
+              </div>
+              <div className='account__userinformation__job mb-3'>
+                Integrateur | Webdesigner
+              </div>
+              <a href='www.algoo.fr' className='account__userinformation__company'>
+                Algoo
+              </a>
+            </div>
+          </div>
+
+          <div className='account__delimiter GenericDelimiter' />
+
+          <div className='account__userpreference'>
+
+            <nav className='account__userpreference__menu navbar d-flex align-items-start'>
+
+              <div className='account__userpreference__menu__responsive d-lg-none'>
+                <i className='fa fa-bars' />
+              </div>
+
+              <ul className='account__userpreference__menu__list nav flex-column'>
+
+                <li className='account__userpreference__menu__list__close nav-link'>
+                  <i className='fa fa-times' />
+                </li>
+
+                <li className='account__userpreference__menu__list__disabled'>Menu
+                </li>
+                <li className='account__userpreference__menu__list__item nav-item'>
+                  <div className='account__userpreference__menu__list__item__link nav-link'>Informations Compte</div>
+                </li>
+                <li className='account__userpreference__menu__list__item nav-item'>
+                  <div className='account__userpreference__menu__list__item__link nav-link'>Calendrier</div>
+                </li>
+                <li className='account__userpreference__menu__list__item nav-item'>
+                  <div className='account__userpreference__menu__list__item__link nav-link'>Notifications</div>
+                </li>
+              </ul>
+            </nav>
+
+            <div className='account__userpreference__setting'>
+
+              <div className='account__userpreference__setting__personaldata d-none'>
+                <div className='account__userpreference__setting__personaldata__title subTitle ml-2 ml-sm-0'>
+                  Mes informations personnelles
+                </div>
+
+                <div className='account__userpreference__setting__personaldata__text ml-2 ml-sm-0'>
+                  Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
+                  Ut consectetur dolor et sunt nisi officia ut magna.
+                </div>
+
+                <div className='account__userpreference__setting__personaldata__changeinfo'>
+                  <div className='account__userpreference__setting__personaldata__changeinfo__infotitle'>
+                    Changer le mot de passe :
+                  </div>
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='password' placeholder='Ancien mot de passe' />
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='password' placeholder='Nouveau mot de passe' />
+                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn btn-primary'>
+                    Envoyer
+                  </div>
+                </div>
+
+                <div className='account__userpreference__setting__personaldata__changeinfo'>
+                  <div className='account__userpreference__setting__personaldata__changeinfo__infotitle'>
+                    Changer d'adresse mail :
+                  </div>
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='email' placeholder='Ancienne adresse mail' />
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput form-control' type='email' placeholder='Nouvelle adresse mail' />
+                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn btn-primary'>
+                    Envoyer
+                  </div>
+                </div>
+              </div>
+
+              <div className='account__userpreference__setting__calendar d-none'>
+
+                <div className='account__userpreference__setting__calendar__title subTitle ml-2 ml-sm-0'>
+                  Calendrier
+                </div>
+
+                <div className='account__userpreference__setting__calendar__text ml-2 ml-sm-0'>
+                  Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
+                  Ut consectetur dolor et sunt nisi officia ut magna.
+                </div>
+
+                <div className='account__userpreference__setting__calendar__infotitle'>
+                  Accèder à votre Calendrier personnel
+                </div>
+                <div className='account__userpreference__setting__calendar__link'>
+                  http://algoo.trac.im/caldav/user/262.ics/
+                </div>
+
+                <div className='account__userpreference__setting__calendar__infotitle'>
+                  Changer de Fuseau Horaire :
+                </div>
+
+                <div className='account__userpreference__setting__calendar__timezone dropdown'>
+                  <button className='account__userpreference__setting__calendar__timezone__btn btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                    Fuseau Horaire
+                  </button>
+                  <div className='account__userpreference__setting__calendar__timezone__submenu dropdown-menu'>
+                    <div className='account__userpreference__setting__calendar__timezone__submenu__item dropdown-item'> Paris GMT +1
+                    </div>
+                    <div className='account__userpreference__setting__calendar__timezone__submenu__item dropdown-item dropdown-item'> Londres GMT +0
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className='account__userpreference__setting__notification'>
+
+                <div className='account__userpreference__setting__notification__title subTitle ml-2 ml-sm-0'>
+                  Mes Espaces de Travail
+                </div>
+
+                <div className='account__userpreference__setting__notification__text ml-2 ml-sm-0'>
+                  Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
+                  Ut consectetur dolor et sunt nisi officia ut magna.
+                </div>
+
+                <div className='account__userpreference__setting__notification__tableau'>
+                  <table className='table'>
+                    <thead>
+                      <tr>
+                        <th>Espace de travail</th>
+                        <th>Role</th>
+                        <th>Notification</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Gestionnaire de Contenu
+                            </div>
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                              <i className='fa fa-eye' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Lecteur
+                            </div>
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                              <i className='fa fa-pencil' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Contributeur
+                            </div>
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                              <i className='fa fa-gavel' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Responsable
+                            </div>
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Gestionnaire de Contenu
+                            </div>
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Gestionnaire de Contenu
+                            </div>
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                            Nouvelle ligne directrice du nouveau design de Tracim v2 en date du 10 Octobre 2017
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__role'>
+                            <div className='account__userpreference__setting__notification__tableau__role__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                              Gestionnaire de Contenu
+                            </div>
+                          </div>
+                        </td>
+                        <td>
+                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
+                            <BtnSwitch />
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default AccountPage

src/container/Dashboard.jsx

@@ -0,0 +1,372 @@
+import React, { Component } from 'react'
+import listMemberBtn from '../img/listmemberbtn.png'
+import imgProfil from '../img/imgProfil.png'
+
+class Dashboard extends Component {
+  render () {
+    return (
+      <div className='dashboard'>
+        <div className='container-fluid nopadding'>
+          <div className='pageTitleGeneric'>
+            <div className='pageTitleGeneric__title dashboard__title'>
+              Dashboard
+            </div>
+          </div>
+
+          <div className='dashboard__wkswrapper'>
+            <div className='dashboard__workspace'>
+              <div className='dashboard__workspace__title'>
+                Nouvelle ligne directive sur le nouveau design de Tracim
+              </div>
+
+              <div className='dashboard__workspace__detail'>
+                Ut in et sit adipisicing mollit amet ut exercitation proident laborum duis occaecat eu aute qui ut.
+                Dolore veniam eu consectetur occaecat est elit dolor nulla est ut amet do reprehenderit eiusmod tempor.
+              </div>
+            </div>
+            <div className='dashboard__userstatut'>
+
+              <div className='dashboard__userstatut__role'>
+                <div className='dashboard__userstatut__role__text'>
+                  Hi ! Alexi, vous êtes actuellement
+                </div>
+                <div className='dashboard__userstatut__role__rank'>
+                  <div className='dashboard__userstatut__role__rank__icon'>
+                    <i className='fa fa-graduation-cap' />
+                  </div>
+                  <div className='dashboard__userstatut__role__rank__rolename'>
+                    Gestionnaire de projet
+                  </div>
+                </div>
+              </div>
+
+              <div className='dashboard__userstatut__notification'>
+                <div className='dashboard__userstatut__notification__text'>
+                  Vous êtes abonné(e) aux notifications de ce workspace
+                </div>
+                <div className='dashboard__userstatut__notification__btn btn btn-primary'>
+                  Changer de statut
+                </div>
+
+                <div className='dashboard__userstatut__notification__subscribe dropdown'>
+                  <button className='dashboard__userstatut__notification__subscribe__btn btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                    Abonné(e)
+                  </button>
+                  <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
+                    <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>Abonné(e)
+                    </div>
+                    <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>Non Abonné(e)
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className='dashboard__calltoaction'>
+            <div className='dashboard__calltoaction__button btnaction thread'>
+              <div className='dashboard__calltoaction__button__text'>
+                <div className='dashboard__calltoaction__button__text__icon'>
+                  <i className='fa fa-comments-o' />
+                </div>
+                <div className='dashboard__calltoaction__button__text__title'>
+                  Débuter une nouvelle discussion
+                </div>
+              </div>
+            </div>
+
+            <div className='dashboard__calltoaction__button btnaction writefile'>
+              <div className='dashboard__calltoaction__button__text'>
+                <div className='dashboard__calltoaction__button__text__icon'>
+                  <i className='fa fa-file-text-o' />
+                </div>
+                <div className='dashboard__calltoaction__button__text__title'>
+                  Rédiger un document
+                </div>
+              </div>
+            </div>
+
+            <div className='dashboard__calltoaction__button btnaction importfile'>
+              <div className='dashboard__calltoaction__button__text'>
+                <div className='dashboard__calltoaction__button__text__icon'>
+                  <i className='fa fa-paperclip' />
+                </div>
+                <div className='dashboard__calltoaction__button__text__title'>
+                  Importer un fichier
+                </div>
+              </div>
+            </div>
+
+            <div className='dashboard__calltoaction__button btnaction calendar'>
+              <div className='dashboard__calltoaction__button__text'>
+                <div className='dashboard__calltoaction__button__text__icon'>
+                  <i className='fa fa-calendar' />
+                </div>
+                <div className='dashboard__calltoaction__button__text__title'>
+                  Voir le Calendrier
+                </div>
+              </div>
+            </div>
+
+            <div className='dashboard__calltoaction__button btnaction explore'>
+              <div className='dashboard__calltoaction__button__text'>
+                <div className='dashboard__calltoaction__button__text__icon'>
+                  <i className='fa fa-folder-open-o' />
+                </div>
+                <div className='dashboard__calltoaction__button__text__title'>
+                  Explorer le Workspace
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className='dashboard__wksinfo'>
+            <div className='dashboard__activity'>
+              <div className='dashboard__activity__header'>
+                <div className='dashboard__activity__header__title subTitle'>
+                  Activité récente
+                </div>
+
+                <div className='dashboard__activity__header__allread btn'>
+                  Tout marquer comme lu
+                </div>
+              </div>
+              <div className='dashboard__activity__wrapper'>
+                <div className='dashboard__activity__workspace'>
+                  <div className='dashboard__activity__workspace__icon'>
+                    <i className='fa fa-comments-o' />
+                  </div>
+                  <div className='dashboard__activity__workspace__name'>
+                    <span>Workspace 1</span>
+                  </div>
+                </div>
+
+                <div className='dashboard__activity__workspace'>
+                  <div className='dashboard__activity__workspace__icon'>
+                    <i className='fa fa-list-ul' />
+                  </div>
+                  <div className='dashboard__activity__workspace__name'>
+                    Workspace 2
+                  </div>
+                </div>
+
+                <div className='dashboard__activity__workspace'>
+                  <div className='dashboard__activity__workspace__icon'>
+                    <i className='fa fa-list-ul' />
+                  </div>
+                  <div className='dashboard__activity__workspace__name'>
+                    Workspace 3
+                  </div>
+                </div>
+
+                <div className='dashboard__activity__workspace'>
+                  <div className='dashboard__activity__workspace__icon'>
+                    <i className='fa fa-file-text-o' />
+                  </div>
+                  <div className='dashboard__activity__workspace__name'>
+                    <span>Workspace 4</span>
+                  </div>
+                </div>
+
+                <div className='dashboard__activity__workspace'>
+                  <div className='dashboard__activity__workspace__icon'>
+                    <i className='fa fa-comments-o' />
+                  </div>
+                  <div className='dashboard__activity__workspace__name'>
+                    <span>Workspace 5</span>
+                  </div>
+                </div>
+
+                <div className='dashboard__activity__workspace'>
+                  <div className='dashboard__activity__workspace__icon'>
+                    <i className='fa fa-file-text-o' />
+                  </div>
+                  <div className='dashboard__activity__workspace__name'>
+                    Workspace 6
+                  </div>
+                </div>
+
+                <div className='dashboard__activity__more d-flex flex-row-reverse'>
+                  <div className='dashboard__activity__more__btn btn'>
+                    Voir plus
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className='dashboard__memberlist'>
+
+              <div className='dashboard__memberlist__title subTitle'>
+                Liste des membres
+              </div>
+
+              <div className='dashboard__memberlist__wrapper'>
+                <ul className='dashboard__memberlist__list'>
+                  <li className='dashboard__memberlist__list__item'>
+                    <div className='dashboard__memberlist__list__item__avatar'>
+                      <img src={imgProfil} alt='avatar' />
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info__name'>
+                        Jean Dupont
+                      </div>
+                      <div className='dashboard__memberlist__list__item__info__role'>
+                        Responsable
+                      </div>
+                    </div>
+                  </li>
+
+                  <li className='dashboard__memberlist__list__item'>
+                    <div className='dashboard__memberlist__list__item__avatar'>
+                      <img src={imgProfil} alt='avatar' />
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info__name'>
+                        Aldwin Vinel
+                      </div>
+                      <div className='dashboard__memberlist__list__item__info__role'>
+                        lecteur
+                      </div>
+                    </div>
+                  </li>
+
+                  <li className='dashboard__memberlist__list__item'>
+                    <div className='dashboard__memberlist__list__item__avatar'>
+                      <img src={imgProfil} alt='avatar' />
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info__name'>
+                        William Himme
+                      </div>
+                      <div className='dashboard__memberlist__list__item__info__role'>
+                        contributeur
+                      </div>
+                    </div>
+                  </li>
+
+                  <li className='dashboard__memberlist__list__item'>
+                    <div className='dashboard__memberlist__list__item__avatar'>
+                      <img src={imgProfil} alt='avatar' />
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info__name'>
+                        Yacine Lite
+                      </div>
+                      <div className='dashboard__memberlist__list__item__info__role'>
+                        Gestionnaire de contenu
+                      </div>
+                    </div>
+                  </li>
+
+                  <li className='dashboard__memberlist__list__item'>
+                    <div className='dashboard__memberlist__list__item__avatar'>
+                      <img src={imgProfil} alt='avatar' />
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info__name'>
+                        Yacine Lite
+                      </div>
+                      <div className='dashboard__memberlist__list__item__info__role'>
+                        Gestionnaire de contenu
+                      </div>
+                    </div>
+                  </li>
+
+                  <li className='dashboard__memberlist__list__item'>
+                    <div className='dashboard__memberlist__list__item__avatar'>
+                      <img src={imgProfil} alt='avatar' />
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info'>
+                      <div className='dashboard__memberlist__list__item__info__name'>
+                        Yacine Lite
+                      </div>
+                      <div className='dashboard__memberlist__list__item__info__role'>
+                        Gestionnaire de contenu
+                      </div>
+                    </div>
+                  </li>
+
+                </ul>
+                <div className='dashboard__memberlist__btnadd'>
+                  <div className='dashboard__memberlist__btnadd__button'>
+                    <div className='dashboard__memberlist__btnadd__button__avatar'>
+                      <img src={listMemberBtn} alt='avatar' />
+                    </div>
+                    <div className='dashboard__memberlist__btnadd__button__text'>
+                       Ajouter un membre
+                    </div>
+                  </div>
+                </div>
+
+                <form className='dashboard__memberlist__addmember'>
+                  <input type='text' className='dashboard__memberlist__addmember__name form-control' placeholder='Name' />
+                  <div className='dashboard__memberlist__addmember__role'>
+                    <div className='dashboard__memberlist__addmember__role__dropdown dropdown'>
+                      <button className='dashboard__memberlist__addmember__role__dropdown__button btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                        Rôle du membre
+                      </button>
+                      <div className='dashboard__memberlist__addmember__role__dropdown__submenu dropdown-menu'>
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                            <i className='fa fa-eye' />
+                          </div>
+                          Lecteur
+                        </div>
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                            <i className='fa fa-pencil' />
+                          </div>
+                          contributeur
+                        </div>
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                            <i className='fa fa-graduation-cap' />
+                          </div>
+                          Gestionnaire de contenu
+                        </div>
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                          <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                            <i className='fa fa-gavel' />
+                          </div>
+                          Responsable
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <input type='submit' className='dashboard__memberlist__addmember__submitbtn' />
+                </form>
+
+              </div>
+            </div>
+          </div>
+
+          <div className='dashboard__webdav genericWebdav'>
+
+            <div className='dashboard__webdav__btn genericWebdav__btn'>
+              <div className='dashboard__webdav__btn__icon genericWebdav__btn__icon'>
+                <i className='fa fa-windows' />
+              </div>
+
+              <div className='dashboard__webdav__btn__text genericWebdav__btn__text'>
+                Implémenter Tracim dans votre explorateur
+              </div>
+            </div>
+
+            <div className='dashboard__webdav__information genericWebdav__info'>
+              <div className='dashboard__webdav__information__text genericWebdav__info__text'>
+                Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
+              </div>
+
+              <div className='dashboard__webdav__information__link genericWebdav__info__link'>
+                http://algoo.trac.im/webdav/
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Dashboard

src/container/ProgressBar.jsx

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+
+class ProgressBar extends Component {
+  render () {
+    return (
+      <div className='container-fluid'>
+        <div className='row'>
+          <div className='col-md-3 col-sm-6'>
+            <div className='progress blue'>
+              <span className='progress-left'>
+                <span className='progress-bar' />
+              </span>
+              <span className='progress-right'>
+                <span className='progress-bar' />
+              </span>
+              <div className='progress-value'>
+                90%
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default ProgressBar

src/container/Sidebar.jsx

@@ -32,30 +32,35 @@ class Sidebar extends React.Component {
             />
 
             <li className='sidebar__navigation__workspace__item nav-item dropdown'>
-              <div className='sidebar__navigation__workspace__item__number'>
-                02
-              </div>
-              <div className='sidebar__navigation__workspace__item__name'>
-                Workspace 2
-              </div>
+              <div className='sidebar__navigation__workspace__item__wrapper'>
+                <div className='sidebar__navigation__workspace__item__number'>
+                  02
+                </div>
+                <div className='sidebar__navigation__workspace__item__name'>
+                  Workspace 2
+                </div>
 
-              <div className='sidebar__navigation__workspace__item__icon'>
-                <i className='fa fa-chevron-down' />
+                <div className='sidebar__navigation__workspace__item__icon'>
+                  <i className='fa fa-chevron-down' />
+                </div>
               </div>
             </li>
 
             <li className='sidebar__navigation__workspace__item nav-item dropdown'>
-              <div className='sidebar__navigation__workspace__item__number'>
-                03
-              </div>
-              <div className='sidebar__navigation__workspace__item__name'>
-                Workspace 3
-              </div>
+              <div className='sidebar__navigation__workspace__item__wrapper'>
+                <div className='sidebar__navigation__workspace__item__number'>
+                  03
+                </div>
+                <div className='sidebar__navigation__workspace__item__name'>
+                  Workspace 3
+                </div>
 
-              <div className='sidebar__navigation__workspace__item__icon'>
-                <i className='fa fa-chevron-down' />
+                <div className='sidebar__navigation__workspace__item__icon'>
+                  <i className='fa fa-chevron-down' />
+                </div>
               </div>
             </li>
+
           </ul>
         </nav>
 

src/container/Tracim.jsx

@@ -4,6 +4,8 @@ import Footer from '../component/Footer.jsx'
 import Header from './Header.jsx'
 import Sidebar from './Sidebar.jsx'
 import Login from './Login.jsx'
+import Dashboard from './Dashboard.jsx'
+import AccountPage from './AccountPage.jsx'
 import WorkspaceContent from './WorkspaceContent.jsx'
 import {
   Route,
@@ -44,6 +46,8 @@ class Tracim extends React.Component {
               <SidebarWrapper locationPath={location.pathname}>
 
                 <PrivateRoute exact path='/' component={WorkspaceContent} />
+                <PrivateRoute exact path='/account' component={AccountPage} />
+                <PrivateRoute exact path='/dashboard' component={Dashboard} />
 
               </SidebarWrapper>
 

src/container/UploadPopup.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import ProgressBar from './ProgressBar.jsx'
+
+class UploadPopup extends Component {
+  render () {
+    return (
+      <div className='uploadpopup'>
+        <div className='uploadpopup__wrapper card'>
+          <div className='card-body'>
+
+            <div className='uploadpopup__closepopup'>
+              <i className='fa fa-times' />
+            </div>
+
+            <div className='uploadpopup__progress'>
+              <div className='uploadpopup__progress__bar'>
+                <ProgressBar />
+              </div>
+
+              <div className='uploadpopup__progress__filename'>
+                Nom du Fichier
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default UploadPopup

src/css/AccountPage.styl

@@ -0,0 +1,302 @@
+.nomarginlabel
+  margin-bottom 0
+
+settingText()
+  margin 15px 0
+  font-size 18px
+
+.account
+  &__userinformation
+    display flex
+    justify-content center
+    align-items center
+    flex-wrap wrap
+    border 1px solid grey
+    padding 25px
+    font-size 18px
+    &__wrapper
+      flex-direction column
+    &__avatar
+      margin-right 50px
+      img
+        width 150px
+        height 150px
+    &__name
+      font-size 22px
+    &__email
+      color blue
+    &__company
+      font-size 20px
+      color blue
+  &__delimiter
+    position relative
+    top 3px
+    margin auto
+    z-index 3
+  &__userpreference
+    display flex
+    padding 25px
+    width 100%
+    background-color lightGrey
+    &__menu
+      margin-right 30px
+      border-radius 10px
+      padding 0
+      width 20%
+      background-color off-white
+      &__responsive
+        font-size 20px
+      &__list
+        width 100%
+        margin-bottom 20px
+        &__close
+          display none
+          justify-content flex-end
+          margin 10px 0 15px 0
+          font-size 20px
+          cursor pointer
+        &__disabled
+          padding 25px 20px 20px 20px
+          color grey
+          font-size 18px
+        &__item
+          margin-top 10px
+          padding-left 5px
+          font-weight 500
+          font-size 18px
+          cursor pointer
+          &:hover
+            background-color blue
+            color white
+    &__setting
+      border-radius 10px
+      padding 20px
+      width 80%
+      background-color off-white
+      &__personaldata
+        &__text
+          settingText()
+        &__changeinfo
+          margin 25px 0
+          &__infotitle
+            margin-bottom 15px
+            font-size 18px
+          &__txtinput
+            display inline-flex
+            display ms-inline-flex
+            width auto
+            margin 0 15px 15px 0
+            border 1px solid blue
+            border-radius 10px
+            padding 8px 15px
+          &__button
+            vertical-align top
+            border 1px solid blue
+            border-radius 10px
+            padding 8px 25px
+            background-color transparent
+            color blue
+            cursor pointer
+            &:hover, &:focus
+              background-color blue
+              color white
+      &__calendar
+        &__title
+          settingTitle()
+        &__text
+          settingText()
+        &__infotitle
+          margin 15px 0
+          font-size 18px
+        &__link
+          display inline-block
+          border 1px solid grey
+          border-radius 10px
+          padding 10px 25px
+        &__timezone
+          margin 15px 0 30px 0
+          &__btn
+            border 1px solid blue
+            border-radius 10px
+            padding 10px 35px
+            color blue
+            background-color transparent
+            &::after
+              margin-left 10px
+            &:hover, &:focus
+              background-color blue
+              color white
+          &__submenu
+            width 203px
+            max-height 300px
+            overflow-Y auto
+            &__item
+              &:hover, &:focus
+                background-color blue
+                color white
+      &__notification
+        &__title
+          settingTitle()
+        &__text
+          settingText()
+          margin-bottom 30px
+        &__tableau
+          border 1px solid lightGrey
+          &__role
+            display flex
+            align-items center
+            &__icon
+              margin-right 10px
+
+.account__userpreference__setting__notification__table__line:nth-last-child(1)
+  border-bottom 0
+
+
+/***** MEDIAQUERIES *****/
+
+
+/**** MEDIA 576px & 1199px ****/
+
+// Regroup the common rules
+
+@media (min-width: min-sm) and (max-width: max-md)
+
+  .account
+    &__userpreference
+      display block
+      position relative
+      &__menu
+        justify-content center
+        margin-bottom 25px
+        border-radius 30px
+        width 60px
+        min-height 60px
+        &__responsive
+          align-self center
+        &__list
+          display none
+      &__setting
+        padding 10px
+        width 100%
+
+  .activemenu
+    .account
+      &__userpreference
+        &__menu
+          justify-content start
+          position absolute
+          top 0
+          left 0
+          border-radius 10px
+          width 100%
+          height 100%
+          z-index 2
+          background-color rgbGrey
+          &__responsive
+            display none
+          &__list
+            display block
+            border-radius 10px
+            height 100%
+            background-color off-white
+            width 300px
+            &__close
+              display flex
+            &__disabled
+              padding 0 20px
+
+/***** MEDIA LG *****/
+
+@media (min-width: min-lg) and (max-width: max-lg)
+
+  .account
+    &__userpreference
+      padding 25px 10px
+      &__menu
+        margin-right 15px
+        width 25%
+
+/**** MEDIA SM ****/
+
+@media (min-width: min-sm) and (max-width: max-sm)
+
+  .account
+    &__userpreference
+      padding 25px 0
+      &__menu
+        margin-left 15px
+      &__setting
+        padding 30px 15px
+
+  .activemenu
+    .account__userpreference__menu
+      margin-left 0
+
+/***** MEDIA XS *****/
+
+@media (max-width: max-xs)
+
+  .account
+    &__userinformation
+      &__avatar
+        margin 0 0 20px 0
+      &__wrapper
+        text-align center
+    &__userpreference
+      display block
+      position relative
+      padding 25px 0
+      &__menu
+        justify-content center
+        margin 0 0 25px 15px
+        border-radius 30px
+        width 60px
+        min-height 60px
+        &__responsive
+          align-self center
+        &__list
+          display none
+      &__setting
+        border-radius 0
+        padding 10px 0
+        width 100%
+        &__calendar
+          &__link
+            padding 10px 15px
+        &__notification
+          &__tableau
+            &__wksname
+              text-overflow ellipsis
+              white-space nowrap
+              overflow hidden
+              width 100px
+              &:focus
+                overflow visible
+                width auto
+
+  .activemenu
+    .account
+      &__userpreference
+        &__menu
+          justify-content start
+          position absolute
+          top 0
+          left 0
+          margin-left 0
+          border-radius 10px
+          width 100%
+          height 100%
+          z-index 2
+          background-color rgbGrey
+          &__responsive
+            display none
+          &__list
+            display block
+            border-radius 10px
+            height 100%
+            background-color off-white
+            width 300px
+            &__close
+              display flex
+            &__disabled
+              padding 0 20px

src/css/Dashboard.styl

@@ -0,0 +1,356 @@
+flexwrap()
+  display flex
+  flex-wrap wrap
+
+btnNotification()
+  margin 20px 0
+  border 1px solid blue
+  padding 10px 15px
+
+hoverfocus()
+  background-color blue
+  color white
+
+bgandcolor()
+  background-color transparent
+  color blue
+
+.dashboard
+  margin-left 20px
+  &__title
+    margin 0
+  &__wkswrapper
+    flexwrap()
+  &__workspace
+    margin-right 20px
+    width calc(65% - 20px) //20px => margin-right
+    &__title
+      margin-bottom 20px
+      font-size 40px
+      font-weight 500
+      color darkBlue
+    &__detail
+      margin-bottom 20px
+      font-size 18px
+  &__userstatut
+    width 35%
+    &__role
+      flexwrap()
+      margin 20px 0
+      font-size 18px
+      &__text
+        margin-right 15px
+      &__rank
+        display flex
+        &__icon
+          margin-right 15px
+          color gestionnaire
+    &__notification
+      font-size 18px
+      &__btn
+        btnNotification()
+        bgandcolor()
+        cursor pointer
+        &:hover , focus
+          hoverfocus()
+      &__subscribe
+        display none
+        &__btn
+          btnNotification()
+          bgandcolor()
+          &:hover,&:focus
+            hoverfocus()
+        &__submenu
+          padding 0
+          &__item
+            padding 10px
+            &:hover,&:focus
+              hoverfocus()
+  &__calltoaction
+    flexwrap()
+    margin 50px 0
+    &__button
+      &:active
+        box-shadow inset 0px 0px 5px 2px #656565
+      &__text
+        &__icon
+          font-size 30px
+          .fa-comments-o, .fa-paperclip, .fa-calendar, .fa-file-text-o, .fa-folder-open-o
+              color white
+        &__title
+          font-size 18px
+          color white
+    .thread
+      background-color blue
+    .writefile
+      background-color writefile
+    .importfile
+      background-color importfile
+    .calendar
+      background-color calendar
+    .explore
+      background-color explore
+  &__wksinfo
+    flexwrap()
+  &__activity
+    margin 0 35px 50px 0
+    width 60%
+    &__header
+      display flex
+      justify-content space-between
+      align-items center
+      margin-bottom 20px
+      height 44px
+      &__allread
+        border 1px solid blue
+        padding 10px 25px
+        color blue
+        font-size 18px
+        cursor pointer
+        &:hover, &:focus
+          hoverfocus()
+    &__wrapper
+      border 1px solid grey
+      height 480px
+    &__workspace
+      display flex
+      align-items center
+      border-bottom 1px solid grey
+      padding 15px
+      cursor pointer
+      &:hover
+        background-color folder-hover
+      &__icon
+        margin 0 25px
+        font-size 25px
+      &__name
+        font-size 18px
+        font-weight 500
+        span
+          font-weight 400
+    &__more
+      &__btn
+        margin 15px
+        border 1px solid blue
+        padding 10px 25px
+        color blue
+        cursor pointer
+        &:hover, &:focus
+          hoverfocus()
+  &__memberlist
+    margin 0 0 50px 0
+    width 35%
+    &__title
+      margin-bottom 20px
+      padding 6px
+      height 45px
+    &__wrapper
+      position relative
+      border 1px solid grey
+      height 480px
+    &__list
+      margin 0
+      padding 0
+      list-style none
+      height 400px
+      overflow-Y scroll
+      &__item
+        display flex
+        border-bottom 1px solid grey
+        padding 10px 15px
+        &:nth-last-child(1)
+          border-bottom 0
+        &__avatar
+          margin-right 20px
+          width 50px
+          height 50px
+        &__info
+          &__name
+            font-size 20px
+          &__role
+            font-size 18px
+    &__btnadd
+      border-top 1px solid grey
+      padding 15px
+      &__button
+        display flex
+        align-items center
+        &__avatar
+          margin-right 20px
+          cursor pointer
+          img
+            width 50px
+            height 50px
+        &__text
+          font-size 18px
+          color blue
+          cursor pointer
+    &__addmember
+      position absolute
+      top 0
+      display none
+      flex-direction column
+      justify-content center
+      align-items center
+      height 100%
+      width 100%
+      background-color off-white
+      &__name
+        margin-bottom 20px
+        border 1px solid grey
+        border-radius 10px
+        padding 10px 25px
+        width auto
+      &__role
+        margin-bottom 20px
+        &__dropdown
+          &__button
+            border 1px solid blue
+            border-radius 10px
+            padding 10px 25px
+            bgandcolor()
+            &::after
+              margin 10px 0 0 20px
+            &:hover,&:focus
+              hoverfocus()
+          &__submenu
+            padding 0
+            &__item
+              display flex
+              padding 10px
+              &:hover,&:focus
+                hoverfocus()
+              &__icon
+                margin-right 15px
+      &__submitbtn
+        border 1px solid blue
+        border-radius 5px
+        padding 5px 35px
+        bgandcolor()
+        cursor pointer
+        &:hover, &:focus
+          hoverfocus()
+  &__webdav
+    margin-bottom 100px
+    &__btn
+      width 300px
+    &__information
+      display none
+      width 600px
+
+/****** CLASS ACTIVE *******/
+
+/*** active dropdown subscribe ***/
+
+.activebtnsubs
+  .dashboard__userstatut__notification
+    &__btn
+      display none
+    &__subscribe
+      display flex
+
+/*** active form on list member ***/
+
+.activeform
+  .dashboard__memberlist__addmember
+    display flex
+
+/*** active webdav ***/
+
+.activewebdav
+  .dashboard__webdav__information
+    display block
+
+/**** MEDIAQUERIES *****/
+
+/**** MEDIA 576px & 1199px ****/
+
+// Regroup the common rules
+
+@media (min-width min-sm) and (max-width: max-lg)
+
+  .dashboard
+    &__workspace
+      width auto
+    &__userstatut
+      width auto
+    &__calltoaction
+      justify-content center
+    &__activity
+      width 100%
+    &__memberlist
+      width 50%
+
+/**** MEDIA 992px & 1199px ****/
+
+@media (min-width: min-lg) and (max-width: max-lg)
+
+  .dashboard
+    margin-left 15px
+
+/**** MEDIA 768px & 991px ****/
+
+@media (min-width: min-md) and (max-width: max-md)
+
+  .dashboard
+    &__activity
+      margin 25px 15px 25px 0
+
+/**** MEDIA 576px & 767px ****/
+
+@media (min-width: min-sm) and (max-width: max-sm)
+
+  .dashboard
+    &__activity
+      margin 25px 15px 25px 0
+    &__memberlist
+      margin 50px 0
+      width 90%
+    &__webdav__information
+      width 500px
+
+/**** MEDIA 575px ****/
+
+@media (max-width: max-xs)
+
+  position()
+    margin-left 10px
+    width auto
+
+  .dashboard
+    margin-left 0
+    &__title
+      margin-left 10px
+    &__workspace
+      position()
+    &__userstatut
+     position()
+    &__calltoaction
+      justify-content center
+      &__button
+        margin-right 0
+    &__activity
+      margin 25px 0
+      width 100%
+      &__header
+        display block
+        height auto
+        margin 0 15px 20px 15px
+        &__title
+          margin-bottom 20px
+    &__memberlist
+      margin 50px 0
+      width 100%
+      &__title
+        margin-left 10px
+      &__wrapper
+        height auto
+      &__list
+        height auto
+        overflow-Y visible
+      &__btnadd
+        border-top 0
+    &__webdav
+      margin-left 10px
+      &__information
+        width 350px

src/css/File.styl

@@ -0,0 +1,275 @@
+.wsFileFile
+  width 1200px
+  height calc(100% - 85px)
+  &__header
+    background-color fileColor
+    &__editionmode
+      display none
+    .fa-file-image-o
+      color white
+  &__option
+    &__menu
+      display flex
+      &__addversion
+        padding 8px 15px
+        border 1px solid fileColor
+        border-radius 5px
+        background-color transparent
+        color fileColor
+        cursor pointer
+        & > i
+          margin-left 10px
+        &:hover
+          background-color fileColor
+          border none
+          color white
+  &__contentpage
+    display flex
+    height 100%
+    &__preview
+      position relative
+      margin 10px
+      border-radius 10px
+      width 60%
+      height calc(100% - 150px) // margin + height of header and option
+      background-color off-white
+      &__sidebar
+        display flex
+        position absolute
+        top 0
+        right 0
+        height 100%
+        &__button
+          display flex
+          flex-direction column
+          align-items center
+          width 50px
+          height 100%
+          background-color grey
+          cursor pointer
+          &:hover
+            background-color fileColor
+          &__icon
+            justify-content flex-start
+            font-size 30px
+            color white
+          &__title
+            margin-top 45px
+            color white
+            transform rotate(-90deg)
+        &__property
+          width 0
+          overflow-X hidden
+          background-color off-white
+          transition width 0.5s
+          &__detail
+            padding 20px
+            width 410px
+            &__size
+              margin-bottom 20px
+            &__description
+              &__editiondesc
+                display none
+                margin 20px 0
+                textarea
+                  width 100%
+                  height 250px
+                &__validate
+                  margin 30px auto
+                  width 150px
+            &__btndesc
+              display block
+              margin 15px 0
+              width 200px
+      &__dloption
+        display flex
+        justify-content center
+        padding-top 10px
+        &__icon
+          margin-right 20px
+          font-size 20px
+          cursor pointer
+          &:hover , &:focus
+            color fileColor
+      &__slider
+        display flex
+        align-items center
+        width calc(100% - 50px) // 50px => width of sidebar
+        height calc(100% - 40px) // 40px => height of dloption
+        &__fileimg
+          display flex
+          flex-direction column
+          justify-content center
+          padding 30px
+          width 100%
+          height 100%
+          & > img
+            max-height 100%
+            max-width 100%
+        &__icon
+          margin 0 5px
+          font-size 20px
+          cursor pointer
+    &__wrapper
+      width 40%
+      height calc(100% - 150px) // margin + height of header and option
+      overflow-Y auto
+      .timeline
+        &__messagelist
+          min-height 300px
+          &__version
+            &__btn
+              background-color fileColor
+              &:hover , &:focus
+                background-color lightFileColor
+        &__texteditor
+          &__simpletext
+            &__input
+              &:focus
+                color fileColor
+                border-color fileColor
+          &__submit
+            &__btn
+              border-color fileColor
+              background-color fileColor
+              color white
+              &:hover , &:focus
+                border-color fileColor
+                background-color fileColor
+
+/***** SENDER RECEIVER *****/
+
+.received
+  .wsFileFile__contentpage__messagelist__item__content
+      background-color fileColor
+
+/***** ACTIVE SIDEBAR *****/
+
+.activesidebar
+  .wsFileFile__contentpage__preview
+    &__sidebar
+      border-radius 0 10px 10px 0
+      &__button
+        background-color fileColor
+      &__property
+        width 450px
+        overflow-Y auto
+        color fileColor
+
+.activeEditionTitle
+  .wsFileFile__header
+    &__editionmode
+      display block
+    &__title
+      display none
+
+.activeEditionDesc
+  .wsFileFile__contentpage__preview__sidebar__property__detail
+    &__description
+      &__editiondesc
+        display block
+    &__btndesc
+      display none
+
+/****** MEDIA QUERIES ********/
+
+// Regroup the common css rules mediaqueries into a single media to lighten the code
+
+@media (min-width: max-xs) and (max-width: max-lg)
+
+  .wsFileFile
+    overflow-Y auto
+    &__contentpage
+      display block
+      &__preview
+        display flex
+        flex-direction column
+        width calc(100% - 30px) // 30px => margin
+      &__wrapper
+        width calc(100% - 30px) // 30px => margin
+        .timeline
+          &__texteditor
+            &__simpletext
+              display inline-flex
+              width 60%
+            &__submit
+              display inline-flex
+              margin 10px 0
+              &__btn
+                display flex
+                margin-left 35px
+                &__icon
+                  margin-left 15px
+
+/**** MEDIA 992px & 1199px ****/
+
+@media (min-width: min-lg) and (max-width: max-lg)
+
+  .wsFileFile
+    width 900px
+    overflow-Y auto
+
+/******************************/
+
+/**** MEDIA 768px & 991px ****/
+
+@media (min-width: min-md) and (max-width: max-md)
+
+  .wsFileFile
+    width 100%
+
+/******************************/
+
+/**** MEDIA 576px & 767px ****/
+
+@media (min-width: min-sm) and (max-width: max-sm)
+
+  .wsFileFile
+    top 69px
+    width 100%
+    height calc(100% - 69px) // 69px => top rules
+    overflow-Y scroll
+
+/******************************/
+
+/**** MEDIA 575px ****/
+
+@media (max-width: max-xs)
+
+  .activesidebar
+    .wsFileFile__contentpage__preview
+      &__sidebar
+        &__property
+          width 300px
+
+  .wsFileFile
+    top 69px
+    width 100%
+    height calc(100% - 69px) // 69px => top rules
+    overflow-Y scroll
+    &__option__menu__addversion
+        padding 8px 5px
+        & > i
+          display none
+    &__contentpage
+      display block
+      &__preview
+        display flex
+        flex-direction column
+        width calc(100% - 30px) // 30px => margin
+      &__wrapper
+        width calc(100% - 30px) // 30px => margin
+        .timeline
+          &__texteditor
+            &__simpletext
+              display inline-flex
+              width 60%
+              margin-right 0
+            &__submit
+              display inline-flex
+              margin 10px 0
+              &__btn
+                display flex
+                margin-left 10px
+                &__icon
+                  margin-left 15px

src/css/Generic.styl

@@ -1,8 +1,14 @@
+/*** SIDEBAR ***/
+
 .sidebarpagecontainer
   display flex
   min-height calc(100% - 50px)
   padding-top 85px
 
+/********************/
+
+/*** ELEMENTS ON ALL PAGE ***/
+
 .pageWrapperGeneric
   width 100%
   &__header
@@ -38,6 +44,8 @@
     &__content
       margin 0
 
+.nopadding
+  padding 0
 
 .pageTitleGeneric
   display flex
@@ -54,7 +62,6 @@
 .pageContentGeneric
   margin 10px 10px 120px 10px
 
-
 .dropdownCreateBtn
   &__label
     padding 10px 65px
@@ -73,9 +80,8 @@
     .setting__link
       padding 5px 65px 5px 10px
 
-
-.fa-file-text-o
-  color fileColor
+.fa-file-image-o
+  color previewColor
 
 .fa-comments-o
   color threadColor
@@ -92,6 +98,73 @@
 .fa-ticket
   color issueColor
 
+.fa-graduation-cap
+  color gestionnaire
+
+.fa-pencil
+  color contributeur
+
+.fa-gavel
+  color responsable
+
+.fa-eye
+  color lecteur
+
+.subTitle
+  font-size 20px
+  font-weight 500
+  color blue
+
+.GenericDelimiter
+  border-radius 10px
+  width 50%
+  height 5px
+  background-color blue
+
+.btnaction
+  display flex
+  flex-direction column
+  justify-content center
+  margin 20px 30px 20px 0
+  border-radius 10px
+  padding 15px
+  width 250px
+  height 200px
+  box-shadow shadow-all
+  text-align center
+  cursor pointer
+
+.genericWebdav
+  &__btn
+    display flex
+    margin-bottom 30px
+    border 1px solid blue
+    border-radius 10px
+    padding 15px 25px
+    color blue
+    cursor pointer
+    &:hover, &:focus
+      background-color blue
+      color white
+    &__icon
+      margin-right 20px
+      font-size 30px
+  &__info
+    border 1px solid grey
+    border-radius 10px
+    padding 15px 25px
+    &__text
+      margin-bottom 35px
+    &__link
+      display inline-block
+      margin-bottom 15px
+      border 1px solid grey
+      border-radius 10px
+      padding 15px 25px
+
+/********************/
+
+/*** PAGE FILE, THREAD, HTML, MARKDOWN, ISSUE ***/
 
 .wsFileGeneric
   position fixed
@@ -102,6 +175,7 @@
   background-color lightGrey
   box-shadow shadow-page
   visibility hidden
+  z-index 1
   &.visible
     visibility visible
   &__header
@@ -124,6 +198,10 @@
       color white
       font-size 20px
       cursor pointer
+      &:hover , &:focus
+        border 1px solid off-white
+        padding 0 10px
+        border-radius 5px
     &__close
       border 1px solid white
       border-radius 5px
@@ -134,9 +212,8 @@
         font-size 20px
   &__option
     border-bottom 1px solid grey
-    padding 15px
+    padding 10px
     height 58px
-    text-align right
     background-color off-white
     & > i
       vertical-align middle
@@ -144,14 +221,45 @@
       font-size 25px
       cursor pointer
     &__menu
-      display inline-block
-      vertical-align middle
+      display flex
+      align-items center
+      &__status
+        margin-right 20px
+        .current
+          color blue
+        .check
+          color green
+        .invalid
+          color red
+        .ban
+          color grey
+        &__dropdownbtn
+          border 1px solid grey
+          width 150px
+          background-color transparent
+          cursor pointer
+          &::after
+            color fontColor
+          &:hover
+            background-color transparent
+          &__icon
+            display inline-block
+            margin 0 15px
+        &__submenu
+          &__item
+            display flex
+            justify-content space-between
+            margin 5px 0
+            cursor pointer
+            &:active
+              background-color transparent
       &__action
-        display inline-block
-        margin-right 10px
+        margin 5px 10px 0 0
         font-size 18px
         cursor pointer
+        &:hover , &:focus
+          font-size 22px
+          color blue
   &__wrapper
     display flex
     flex-direction column
-

src/css/Header.styl

@@ -3,7 +3,7 @@
   width 100%
   box-shadow shadow-bottom
   background mainColor
-  z-index 3
+  z-index 4
   &__logo
     &__img
       margin-left 40px

src/css/PagePreview.styl

@@ -0,0 +1,277 @@
+.wsFilePreview
+  width 1200px
+  height calc(100% - 85px)
+  &__header
+    background-color previewColor
+    .fa-file-image-o
+      color white
+  &__option
+    &__menu
+      display flex
+      &__addversion
+        padding 8px 15px
+        border 1px solid previewColor
+        border-radius 5px
+        background-color transparent
+        color previewColor
+        cursor pointer
+        & > i
+          margin-left 10px
+        &:hover
+          background-color previewColor
+          border none
+          color white
+  &__contentpage
+    display flex
+    height 100%
+    &__visualizer
+      position relative
+      margin 10px
+      border-radius 10px
+      width 70%
+      height calc(100% - 150px)
+      background-color off-white
+      &__sidebar
+        position absolute
+        top 0
+        right 0
+        width 50px
+        height 100%
+        transition width 1s ease
+        &__visiblepart
+          display flex
+          flex-direction column
+          align-items center
+          border-top-right-radius 10px
+          border-bottom-right-radius 10px
+          width 50px
+          height 100%
+          background-color grey
+          cursor pointer
+          &:hover
+            background-color previewColor
+          &__icon
+            justify-content flex-start
+            font-size 30px
+            color white
+          &__title
+            margin-top 45px
+            color white
+            transform rotate(-90deg)
+        &__propertydetail
+          display none
+      &__dloption
+        display flex
+        margin-left calc(50% - 50px) // 50px => width/2 of the div
+        padding-top 10px
+        width 100px
+        &__icon
+          margin-right 20px
+          font-size 20px
+          cursor pointer
+      &__slidecontainer
+        display flex
+        align-items center
+        width calc(100% - 50px) // 50px => width of sidebar
+        height calc(100% - 40px) // 40px => height of dloption
+        &__fileimg
+          display flex
+          padding 30px
+          width 100%
+          height 100%
+          & > img
+            max-height 100%
+            max-width 100%
+        &__chevron
+          margin 0 5px
+          font-size 20px
+          cursor pointer
+    .timeline
+      margin 10px
+      border-radius 10px
+      width 45%
+      height calc(100% - 150px)
+      background-color off-white
+      overflow scroll
+      &__header
+        border-top-left-radius 10px
+        border-top-right-radius 10px
+        padding 10px 0
+        text-align center
+        font-size 20px
+        color dark-grey
+        background-color grey-hover
+      &__messagelist
+        min-height 300px
+        &__item
+          &__content
+            color dark-grey
+        &__version
+          margin-top 40px
+          background-color grey-hover
+          &__btn
+            padding 5px 25px
+            border-radius 5px
+            width 145px
+            color white
+            font-size 17px
+            background-color previewColor
+            & > i
+              margin-right 10px
+              color dark-grey
+              font-size 22px
+            &:hover
+              background-color lightPreviewColor
+            &:focus
+              background-color lightPreviewColor
+          &__date
+            color fontColor
+            font-size 17px
+      &__texteditor
+        &__simpletext
+          &__input
+            &:focus
+              color htmlColor
+              border-color htmlColor
+        &__submit
+          &__btn
+            border-color htmlColor
+            background-color htmlColor
+            color white
+            &:hover
+              border-color htmlColor
+              background-color htmlColor
+            &:focus
+              border-color htmlColor
+              background-color htmlColor
+
+/***** SENDER RECEIVER *****/
+
+.received
+  .wsFilePreview__contentpage__messagelist__item__content
+      background-color previewColor
+
+/***** ACTIVE SIDEBAR *****/
+
+.activesidebar
+  .wsFilePreview__contentpage__visualizer
+    &__sidebar
+      display flex
+      border-top-right-radius 10px
+      border-bottom-right-radius 10px
+      width 500px
+      background-color off-white
+      &__visiblepart
+        order 1
+        border-top-left-radius 10px
+        border-bottom-left-radius 10px
+        border-top-right-radius 0
+        border-bottom-right-radius 0
+        background-color previewColor
+      &__propertydetail
+        display flex
+        order 2
+        padding 20px
+        overflow-Y auto
+        color previewColor
+
+/****** MEDIA QUERIES ********/
+
+@media (min-width: max-xs) and (max-width: max-lg)
+
+  .wsFilePreview
+    overflow-Y auto
+    &__contentpage
+      display block
+      &__visualizer
+        display flex
+        flex-direction column
+        width calc(100% - 30px) // 20px => margin
+      .timeline
+        width calc(100% - 30px) // 20px => margin
+        &__texteditor
+          &__simpletext
+            display inline-flex
+            display ms-inline-flex
+            width 60%
+          &__submit
+            display inline-flex
+            display ms-inline-flex
+            margin 10px 0
+            &__btn
+              display flex
+              margin-left 35px
+              &__icon
+                margin-left 15px
+
+/**** MEDIA 992px & 1199px ****/
+
+@media (min-width: min-lg) and (max-width: max-lg)
+
+  .wsFilePreview
+    width 900px
+    overflow-Y auto
+
+/******************************/
+
+/**** MEDIA 768px & 991px ****/
+
+@media (min-width: min-md) and (max-width: max-md)
+
+  .wsFilePreview
+    width 100%
+
+/******************************/
+
+/**** MEDIA 576px & 767px ****/
+
+@media (min-width: min-sm) and (max-width: max-sm)
+
+  .wsFilePreview
+    top 69px
+    width 100%
+    height calc(100% - 69px)
+    overflow-Y scroll
+
+/******************************/
+
+/**** MEDIA 575px ****/
+
+@media (max-width: max-xs)
+
+  .activesidebar
+    .wsFilePreview__contentpage__visualizer
+      &__sidebar
+        width 350px
+
+  .wsFilePreview
+    top 69px
+    width 100%
+    height calc(100% - 69px)
+    overflow-Y scroll
+    &__option__menu__addversion
+        padding 8px 5px
+        & > i
+          display none
+    &__contentpage
+      display block
+      &__visualizer
+        display flex
+        flex-direction column
+        width calc(100% - 30px) // 20px => margin
+      .timeline
+        width calc(100% - 30px) // 20px => margin
+        &__texteditor
+          &__simpletext
+            display inline-flex
+            display ms-inline-flex
+            width 60%
+          &__submit
+            display inline-flex
+            display ms-inline-flex
+            margin 10px 0
+            &__btn
+              display flex
+              margin-left 35px
+              &__icon
+                margin-left 15px

src/css/ProgressBar.styl

@@ -0,0 +1,126 @@
+.progress
+    width 150px
+    height 150px
+    line-height 150px
+    background none
+    margin 0 auto
+    position relative
+
+.progressafter
+    content ""
+    width 100%
+    height 100%
+    border-radius 50%
+    border 12px solid off-white
+    position absolute
+    top 0
+    left 0
+
+.progress > span
+    width 50%
+    height 100%
+    overflow hidden
+    position absolute
+    top 0
+    z-index 1
+
+.progress .progress-left
+    left 0
+
+.progress .progress-bar
+    width 100%
+    height 100%
+    background none
+    border-width 12px
+    border-style solid
+    position absolute
+    top 0
+
+.progress .progress-left .progress-bar
+    left 100%
+    border-top-right-radius 80px
+    border-bottom-right-radius 80px
+    border-left 0
+    -webkit-transform-origin center left
+    transform-origin center left
+
+.progress .progress-right
+    right 0
+
+.progress .progress-right .progress-bar
+    left -100%
+    border-top-left-radius 80px
+    border-bottom-left-radius 80px
+    border-right 0
+    -webkit-transform-origin center right
+    transform-origin center right
+    animation loading-1 1.8s linear forwards
+
+.progress .progress-value
+    display flex
+    justify-content center
+    align-items center
+    width 90%
+    height 90%
+    border 10px solid off-white
+    border-radius 50%
+    background darkBlue
+    font-size 24px
+    color off-white
+    line-height 135px
+    text-align center
+    position absolute
+    top 5%
+    left 5%
+
+
+.progress.blue .progress-bar
+    border-color blue
+
+.progress.blue .progress-left .progress-bar
+    animation loading-2 1.5s linear forwards 1.8s
+
+@keyframes loading-1
+    0%
+        -webkit-transform rotate(0deg)
+        transform rotate(0deg)
+
+    100%
+        -webkit-transform rotate(180deg)
+        transform rotate(180deg)
+
+@keyframes loading-2
+    0%
+        -webkit-transform rotate(0deg)
+        transform rotate(0deg)
+
+    100%
+        -webkit-transform rotate(144deg)
+        transform rotate(144deg)
+
+@keyframes loading-3
+    0%
+        -webkit-transform rotate(0deg)
+        transform rotate(0deg)
+
+    100%
+        -webkit-transform rotate(90deg)
+        transform rotate(90deg)
+
+@keyframes loading-4
+    0%
+        -webkit-transform rotate(0deg)
+        transform rotate(0deg)
+
+    100%
+        -webkit-transform rotate(36deg)
+        transform rotate(36deg)
+
+@keyframes loading-5
+    0%
+        -webkit-transform rotate(0deg)
+        transform rotate(0deg)
+
+    100%
+        -webkit-transform rotate(126deg)
+        transform rotate(126deg)

src/css/Sidebar.styl

@@ -25,6 +25,12 @@ sidebar-width = 300px
   .sidebar-expandbar
     left sidebar-width
 
+leftside()
+  flex-grow 0
+  height 100%
+  font-size 18px
+  background-color rgba(253,253,253,0.3)
+
 .sidebar
   &__btnnewworkspace
     margin-top 40px
@@ -37,82 +43,56 @@ sidebar-width = 300px
   &__navigation
     padding 0
     &__workspace
-      flex-direction column
       &__item
-        position relative
-        margin-top 2px
         width sidebar-width
-        background-color thirdColor
-        cursor pointer
+        &__wrapper
+          display flex
+          align-items center
+          border-bottom 1px solid darkBlue
+          width 100%
+          height 100%
+          background-color blue
+          cursor pointer
         &__number
-          display inline-block
-          padding 10px 0
-          width 50px
-          font-size 20px
+          leftside()
+          padding 12px
+          min-width 50px
           letter-spacing 2px
-          text-align center
-          background-color rgba(253,253,253,0.3)
         &__name
-          display inline-block
-          vertical-align top
-          padding 10px 5px
-          width 220px
+          flex-grow 2
+          padding 10px
           font-size 20px
-          color white
+          color off-white
           white-space nowrap
           overflow hidden
           text-overflow ellipsis
         &__icon
-          display inline-block
+          flex-grow 0
+          padding 10px
           color white
         &__submenu
-          margin-bottom 0
-          padding-left 0
-          height 0 // height is handled is js
-          list-style none
+          margin 0
+          padding 0
+          width 100%
           background-color fourthColor
+          height 0 // height is handled is js
           overflow hidden
           transition height 0.5s
           &__dropdown
+            display flex
+            align-items center
             border-top 1px solid darkBlue
+            &:nth-last-child(1)
+              border-bottom 1px solid darkBlue
             &:hover
               background-color lightBlue
             &__showdropdown
-              display inline-block
-              padding 10px 15px
+              display flex
+              justify-content space-between
+              align-items center
+              padding 0 10px
+              width 100%
             .dropdown__icon
-              display inline-block
               padding 10px 15px
-              width 50px
-              text-align center
-              background-color rgba(253,253,253,0.3)
-              font-size 20px
-            .dropdown__title
-              position relative
-              display inline-block
-              font-size 18px
-              font-weight 400
-              color darkGrey
-              cursor pointer
-              &::after //bootstrap override
-                position absolute
-                top 10px
-                left 100%
-              &__text
-                display inline-block
-                width 200px
-            .dropdown__subdropdown
-              margin 0
-              border-radius 0
-              padding 0
-              .alignname
-                display inline-block
-                font-size 18px
-              &__item
-                cursor pointer
-                border-top 1px solid darkBlue
-                padding 13px 0
-                &__iconfile
-                  padding-left 18px
-                &__textfile
-                  margin-left 38px
+              min-width 50px
+              leftside()

src/css/Timeline.styl

@@ -1,11 +1,20 @@
 .timeline
   display flex
   flex-direction column
+  margin 10px
+  &__header
+    border-radius 10px 10px 0 0
+    padding 15px
+    text-align center
+    font-size 20px
+    color dark-grey
+    background-color grey-hover
   &__messagelist
     flex 1 1 0
     margin-bottom 0
     padding-left 0
     border-bottom 1px solid grey
+    background-color off-white
     overflow-Y auto
     list-style none
     &__item
@@ -30,9 +39,23 @@
     &__version
       display flex
       justify-content space-between
+      margin-top 40px
       padding 10px 15px
       width 100%
+      background-color lightGrey
+      &__btn
+        padding 5px 25px
+        border-radius 5px
+        width 145px
+        color white
+        font-size 17px
+        & > i
+          margin-right 10px
+          color dark-grey
+          font-size 22px
       &__date
+        color fontColor
+        font-size 17px
         margin auto 0
   &__texteditor
     padding 2px
@@ -52,6 +75,8 @@
       &__btn
         display flex
         cursor pointer
+        &:hover , &:focus
+          box-shadow shadow-all-btn
         &__icon
           margin-left 10px
 
@@ -69,3 +94,48 @@
     &__content
       margin-left 25%
       color white
+
+/**** MEDIA 992px & 1199px ****/
+
+@media (min-width: min-lg) and (max-width: max-lg)
+
+  .timeline__messagelist__item
+    margin-right 55px
+
+  .received
+    .timeline__messagelist__item
+      &__avatar
+        left 96%
+
+/**** MEDIA 768px & 991px ****/
+
+@media (min-width: min-md) and (max-width: max-md)
+
+  .timeline__messagelist__item
+    margin-right 55px
+
+  .received
+    .timeline__messagelist__item
+      &__avatar
+        left 96%
+
+/**** MEDIA 576px & 767px ****/
+
+@media (min-width: min-sm) and (max-width: max-sm)
+
+  .timeline__messagelist__item
+    margin-right 35px
+
+  .received
+    .timeline__messagelist__item
+      &__avatar
+        left 94%
+
+/**** MEDIA 575px ****/
+
+@media (max-width: max-xs)
+
+  .received
+    .timeline__messagelist__item
+      &__avatar
+        left 90%

src/css/UploadPopup.styl

@@ -0,0 +1,29 @@
+.uploadpopup
+  position fixed
+  top 0
+  left 0
+  display flex
+  justify-content center
+  width 100%
+  height 100%
+  z-index 3
+  &__wrapper
+    margin-top 120px
+    width 400px
+    height 350px
+    background off-white
+    box-shadow shadow-all
+  &__closepopup
+    display flex
+    justify-content flex-end
+    cursor pointer
+  &__progress
+    display flex
+    flex-direction column
+    align-items center
+    padding 40px 0
+    &__filename
+      margin-top 30px
+      font-size 25px
+
+

src/css/Variable.styl

@@ -9,6 +9,7 @@ fourthColor = #82b2cc // bg filter sidebar
 fontColor = #252525
 
 darkGrey = #252525
+rgbGrey = rgba(25,25,25,0.3)
 grey = #ababab
 lightGrey = #f0f0f0
 grey-hover = #e0e0e0
@@ -22,6 +23,8 @@ darkBlue = #215e8e
 blue = #2571fe
 lightBlue = #569EDE
 
+red = #f63434
+
 // c2a btn color in general context ; meaning every context but specific one related to file type (file, pageHtml, issues, threads ...)
 btnCallAction = #28a745
 btnCallAction-hover = darken(btnCallAction, 15%)
@@ -34,13 +37,24 @@ darkHtmlColor = darken(htmlColor, 15%)
 markdownColor = #e0082b
 
 fileColor = #263462
+lightFileColor = lighten(fileColor, 15%)
 
 taskColor = #2d5a88
 
 issueColor = #a4835e
 
-// calendarColor =
-// dashboard =
+/** Role Color  **/
+gestionnaire = #f2af2d
+lecteur = #15D948
+contributeur = #3145F7
+responsable = #ED0007
+
+/** Btn call to action dashboard **/
+writefile = #a738ed
+importfile = #ff8400
+calendar = red
+explore = #87d04c
+
 
 /*************************/
 /**** BOX SHADOW ****/
@@ -49,6 +63,7 @@ shadow-right = 2px 2px 5px 0px #404040
 shadow-all = 1px 1px 5px 2px #ababab
 shadow-all-side-blue = 0px 0px 1px 1px lightBlue
 shadow-all-side-green = 0 0 1px 2px green
+shadow-all-btn = 0 0 3px 3px lightBlue
 
 /***********************/
 /**** MEDIA QUERIES ****/

src/css/btnSwtich.styl

@@ -0,0 +1,55 @@
+.btnswitch
+  display flex
+  align-items center
+  &__text
+    margin-left 10px
+
+.switch
+  position relative
+  display inline-block
+  width 60px
+  height 34px
+
+.switch input
+  display none
+
+.slider
+  position absolute
+  cursor pointer
+  top 0
+  left 0
+  right 0
+  bottom 0
+  background-color #ccc
+  -webkit-transition .4s
+  transition .4s
+
+.slider:before
+  position absolute
+  content ""
+  height 26px
+  width 26px
+  left 4px
+  bottom 4px
+  background-color white
+  -webkit-transition .4s
+  transition .4s
+
+input:checked + .slider
+  background-color blue
+
+input:focus + .slider
+  box-shadow 0 0 1px blue
+
+input:checked + .slider:before
+  -webkit-transform translateX(26px)
+  -ms-transform translateX(26px)
+  transform translateX(26px)
+
+/* Rounded sliders */
+.slider.round
+  border-radius 34px
+
+.slider.round:before
+  border-radius: 50%
+

src/css/index.styl

@@ -17,6 +17,14 @@ html, body, #content, #content > div
 @import 'FileItemHeader.styl'
 @import 'Folder.styl'
 
-@import 'Timeline.styl'
 @import '../plugin/ContentType/Thread/Thread.styl'
 @import '../plugin/ContentType/PageHtml/PageHtml.styl'
+@import 'Timeline.styl'
+@import 'File.styl'
+
+@import 'Dashboard.styl'
+@import 'AccountPage.styl'
+@import 'btnSwtich.styl'
+
+// @import 'UploadPopup'
+// @import 'ProgressBar'

src/helper.js

@@ -22,7 +22,7 @@ export const FILE_TYPE = [{
   componentLeft: 'File',
   componentRight: 'undefined',
   customClass: 'wsFileFile',
-  icon: 'fa fa-file-text-o'
+  icon: 'fa fa-file-image-o'
 }, {
   name: 'Thread',
   componentLeft: 'Thread',

src/plugin/ContentType/PageHtml/PageHtml.styl

@@ -23,11 +23,9 @@
       &__text
         font-size 14px
     &__wrapper
-      margin 10px
       border-radius 10px
       width 45%
       height 100%
-      background-color off-white
     &__header
       border-top-left-radius 10px
       border-top-right-radius 10px