Merge branch 'app_external' of github.com:tracim/design_v2

dist/index.html

     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
     -->
+
+    <script src='./plugin/pageHtml.plugin.js'></script>
+
     <script src="./dev/jquery-3.2.1.js"></script>
     <script src="./dev/popper-1.12.3.js"></script>
     <script src="./dev/bootstrap-4.0.0-beta.2.js"></script>
 
-    <script type="text/javascript">
+    <script type='text/javascript'>
+      GLOBAL_renderPlugin = data => {
+        if (data.file.type === 'PageHtml') {
+          pluginPageHtml.renderPlugin('pluginContainer', data)
+        }
+      }
+
+      GLOBAL_dispatchEvent = (data) => {
+        var event = new CustomEvent('pluginCustomEvent', {detail: data})
+        document.dispatchEvent(event)
+      }
+
+      GLOBAL_unmountPlugin = () => {
+        console.log('btn close clicked')
+        pluginPageHtml.hidePlugin('pluginContainer')
+      }
+
+      // only usefull if plugin doesn't handle fileContent himself
+      GLOBAL_handleRequireRedraw = () => {
+        var rez = pluginA.destroyPlugin('plugin')
+        if (rez) GLOBAL_drawPlugin('redraw')
+        else console.log('Erreur, failed at destroying plugin')
+      }
+    </script>
+
+    <script type='text/javascript'>
       if (window.matchMedia("(min-width:1200px)").matches) {
 
         var jsScript = document.createElement("script");

jsonserver/server.js

   else return res.jsonp('error')
 })
 
+server.get('/plugin/file_content', (req, res) => res.jsonp(jsonDb.file_content))
+
 server.get('/user/is_logged_in', (req, res) => res.jsonp(jsonDb.user_logged))
 
 server.get('/workspace/:id', (req, res) => res.jsonp(jsonDb.workspace_detail))

jsonserver/static_db.json

       "email": "osef@algoo.fr"
     }
   },
+  "file_content": [{
+    "name": "PageHtml",
+    "componentLeft": "PageHtml",
+    "componentRight": "Timeline",
+    "customClass": "wsFilePageHtml",
+    "icon": "fa fa-file-word-o"
+  }, {
+    "name": "PageMarkdown",
+    "componentLeft": "PageMarkdown",
+    "componentRight": "undefined",
+    "customClass": "wsFilePageMarkdown",
+    "icon": "fa fa-file-code-o"
+  }, {
+    "name": "File",
+    "componentLeft": "File",
+    "componentRight": "undefined",
+    "customClass": "wsFileFile",
+    "icon": "fa fa-file-text-o"
+  }, {
+    "name": "Thread",
+    "componentLeft": "Thread",
+    "componentRight": "undefined",
+    "customClass": "wsFileThread",
+    "icon": "fa fa-comments-o"
+  }, {
+    "name": "Task",
+    "componentLeft": "Task",
+    "componentRight": "undefined",
+    "customClass": "wsFileTask",
+    "icon": "fa fa-list-ul"
+  }, {
+    "name": "Issue",
+    "componentLeft": "Issue",
+    "componentRight": "undefined",
+    "customClass": "wsFileIssue",
+    "icon": "fa fa-ticket"
+  }],
   "workspace_detail": {
     "id": 1,
     "title": "Mission interne - développement",
       {
         "id": 1,
         "title": "La programmation fonctionnelle",
-        "type": "pageHtml",
+        "type": "PageHtml",
         "status": "validated",
+        "version": "3",
         "text": "<h1>Mon titre nul</h1>Je suis le contenu de cette fameuse <b>page HTML</b><br /> sur la programmation fonctionnelle"
       },
       {
         "id": 2,
         "title": "La prommation fonctionnelle est-elle vraiment utile ?",
-        "type": "thread",
+        "type": "Thread",
         "status": "current"
       },
       {
         "id": 6,
         "title": "Une photo moche",
-        "type": "file",
+        "type": "File",
         "status": "current"
       },
       {
         "id": 10,
         "title": "le README.md d'un random repo github",
-        "type": "pageMarkdown",
+        "type": "PageMarkdown",
         "status": "current"
       },
       {
         "id": 7,
         "title": "Une liste de truc à faire que je ferai jamais",
-        "type": "task",
+        "type": "Task",
         "status": "current"
       },
       {
         "id": 8,
         "title": "Ça, ça marche pas. Merci de le fix",
-        "type": "issue",
+        "type": "Issue",
         "status": "current"
       },
       {
           {
             "id": 4,
             "title": "des trucs de backend",
-            "type": "file",
+            "type": "File",
             "status": "outdated"
           },
           {
             "id": 5,
             "title": "on s'emmerde",
-            "type": "pageHtml",
+            "type": "PageHtml",
             "status": "outdated"
           }
         ]

package.json

   "license": "ISC",
   "dependencies": {
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.1",
+    "babel-eslint": "^8.2.1",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-assign": "^6.22.0",
     "redux": "^3.7.2",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.2.0",
-    "standard": "^10.0.3",
+    "standard": "^11.0.0",
     "standard-loader": "^6.0.1",
     "style-loader": "^0.19.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
+    "tracim_lib": "git://github.com/tracim/tracim_lib.git",
     "url-loader": "^0.6.2",
     "webpack": "^3.8.1",
     "whatwg-fetch": "^2.0.3"

src/action-creator.async.js

   updateUserConnected,
   updateUserData,
   WORKSPACE,
-  updateWorkspaceData
+  updateWorkspaceData,
+  PLUGIN_LIST,
+  setPluginList
 } from './action-creator.sync.js'
 
 /*
   })
   if (fetchGetWorkspaceContent.status === 200) dispatch(updateWorkspaceData(fetchGetWorkspaceContent.json))
 }
+
+export const getPluginList = () => async dispatch => {
+  const fetchGetPluginList = await fetchWrapper({
+    url: `http://localhost:3001/plugin/file_content`,
+    param: {...FETCH_CONFIG, method: 'GET'},
+    actionName: PLUGIN_LIST,
+    dispatch
+  })
+  if (fetchGetPluginList.status === 200) dispatch(setPluginList(fetchGetPluginList.json))
+}

src/action-creator.sync.js

 export const FILE_CONTENT = 'FileContent'
 export const setActiveFileContent = file => ({ type: `Set/${FILE_CONTENT}/Active`, file })
 export const hideActiveFileContent = () => ({ type: `Set/${FILE_CONTENT}/Hide` })
+
+export const PLUGIN_LIST = 'Plugin/List'
+export const setPluginList = pluginList => ({ type: `Set/${PLUGIN_LIST}`, pluginList })

src/component/Header/Logo.jsx

 }
 export default Logo
 
-Logo.PropTypes = {
+Logo.propTypes = {
   logoSrc: PropTypes.string.isRequired,
   onClickImg: PropTypes.func.isRequired
 }

src/component/Header/MenuActionListItem/DropdownLang.jsx

 }
 export default DropdownLang
 
-DropdownLang.PropTypes = {
+DropdownLang.propTypes = {
   langList: PropTypes.array.isRequired,
   onChangeLang: PropTypes.func.isRequired
 }

src/component/Header/MenuActionListItem/Help.jsx

 }
 export default Help
 
-Help.PropTypes = {
+Help.propTypes = {
   onClickHelp: PropTypes.func.isRequired
 }

src/component/Header/MenuActionListItem/MenuProfil.jsx

 }
 export default MenuProfil
 
-MenuProfil.PropTypes = {
+MenuProfil.propTypes = {
   user: PropTypes.object.isRequired,
   onClickMyProfil: PropTypes.func.isRequired,
   onClickLogout: PropTypes.func.isRequired

src/component/Header/MenuActionListItem/Search.jsx

 }
 export default Search
 
-Search.PropTypes = {
+Search.propTypes = {
   onChangeInput: PropTypes.func.isRequired,
   onClickSubmit: PropTypes.func.isRequired
 }

src/component/Header/MenuLinkList.jsx

 }
 export default MenuLinkList
 
-MenuLinkList.PropTypes = {
+MenuLinkList.propTypes = {
   onClickFeature: PropTypes.func.isRequired,
   onClickExplore: PropTypes.func.isRequired,
   onClickAbout: PropTypes.func.isRequired

src/component/Timeline.jsx

 import React from 'react'
 import classnames from 'classnames'
 import imgProfil from '../img/imgProfil.png'
-import imgProfilReverse from '../img/imgProfil-reverse.png'
 
 const Timeline = props => {
   return (
 
         <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item received')}>
           <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfilReverse} alt='avatar' />
+            <img src={imgProfil} alt='avatar' />
           </div>
           <div
             className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
 
         <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item received')}>
           <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
-            <img src={imgProfilReverse} 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

-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/FileItem.jsx

 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { FILE_TYPE } from '../../helper.js'
 
 const FileItem = props => {
-  const iconType = (FILE_TYPE.find(f => f.name === props.type) || {icon: ''}).icon
-
   const iconStatus = (() => {
     switch (props.status) {
       case 'current':
     <div className={classnames('file', 'align-items-center', props.customClass)} onClick={props.onClickItem}>
       <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
         <div className='file__type'>
-          <i className={iconType} />
+          <i className={props.icon} />
         </div>
       </div>
       <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-10'>

src/component/Workspace/FileType/PageHtml.jsx

-import React from 'react'
-
-const PageHtml = props => {
-  return (
-    <div className='wsFilePageHtml__contentpage__textnote'>
-      <div className='wsFilePageHtml__contentpage__textnote__latestversion'>
-        { props.version }
-      </div>
-      <div className='wsFilePageHtml__contentpage__textnote__text'>
-        { props.text }
-      </div>
-    </div>
-  )
-}
-
-export default PageHtml

src/component/Workspace/Folder.jsx

   }
 
   render () {
-    const { title, content } = this.props.folderData
+    const { plugin, folderData: { title, content } } = this.props
     return (
       <div className={classnames('folder', {'active': this.state.open})}>
         <div className='folder__header' onClick={this.handleClickToggleFolder}>
           { content.map(c => c.type === 'folder'
             ? <Folder folderData={c} key={c.id} />
             : <FileItem
+              icon={(plugin[c.type] || {icon: ''}).icon}
               name={c.title}
               type={c.type}
               status={c.status}
   folderData: PropTypes.shape({
     title: PropTypes.string.isRequired,
     content: PropTypes.array
-  })
+  }),
+  plugin: PropTypes.object
 }

src/component/common/Card/Card.jsx

       children[1].type !== CardBody
       // children.some(p => p.type !== CardHeader && p.type !== CardBody)
     ) {
-      return new Error(`PropType Error: childrens of ${componentName} must be: 1 CardHeader and 1 CardBody.`)
+      return new Error(`PropType Error: children of ${componentName} must be: 1 CardHeader and 1 CardBody.`)
     }
   }).isRequired,
   customClass: PropTypes.string

src/component/common/Card/CardBody.jsx

 
 export default CardBody
 
-CardBody.PropTypes = {
+CardBody.propTypes = {
   children: PropTypes.element.isRequired,
   formClass: PropTypes.string
 }

src/component/common/Card/CardHeader.jsx

 
 export default CardHeader
 
-CardHeader.PropTypes = {
+CardHeader.propTypes = {
   children: PropTypes.element.isRequired,
   customClass: PropTypes.string
 }

src/component/common/Input/Button.jsx

 
 export default Button
 
-Button.PropTypes = {
+Button.propTypes = {
   htmlType: PropTypes.oneOf(['button', 'submit', 'reset']).isRequired,
   bootstrapType: PropTypes.oneOf(
     ['primary', 'default', 'default', 'success', 'danger', 'warning', 'info', 'light', 'dark']

src/component/common/Input/InputCheckbox.jsx

 
 export default InputGroupText
 
-InputGroupText.PropTypes = {
+InputGroupText.propTypes = {
   parentClassName: PropTypes.string.isRequired,
   checked: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,

src/component/common/Input/InputGroupText.jsx

 
 export default InputGroupText
 
-InputGroupText.PropTypes = {
+InputGroupText.propTypes = {
   parentClassName: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   type: PropTypes.oneOf(['text', 'email', 'password', 'tel']).isRequired,

src/component/common/PopinFixed/PopinFixedContent.jsx

 import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
-import PageHtml from '../../Workspace/FileType/PageHtml.jsx'
-import Thread from '../../Workspace/FileType/Thread.jsx'
-import Timeline from '../../Timeline.jsx'
 
 const PopinFixedContent = props => {
   return props.children.length === 2
     ? (
-      <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
-        {props.children[0]}
+      <div className={classnames('wsFileGeneric__content', `${props.customClass}__content`)}>
+        <div className={classnames('wsFileGeneric__content__left', `${props.customClass}__content__left`)}>
+          {props.children[0]}
+        </div>
 
-        <div className={classnames('wsFileGeneric__wrapper', `${props.customClass}__wrapper`)}>
+        <div className={classnames('wsFileGeneric__content__right', `${props.customClass}__content__right`)}>
           {props.children[1]}
         </div>
       </div>
     )
     : (
-      <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
+      <div className={classnames('wsFileGeneric__content', `${props.customClass}__content`)}>
         { props.children }
       </div>
     )
 
 PopinFixedContent.propTypes = {
   customClass: PropTypes.string,
-  // from http://www.mattzabriskie.com/blog/react-validating-children
-  children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) => {
-    if (
-      (Array.isArray(children.length) && (
-        children.length > 2 ||
-        (children.length === 2 && children.some(c => ![PageHtml, Thread, Timeline].includes(c.type)))
-      )) ||
-      (children.type === Timeline)
-    ) {
-      return new Error(`PropType Error: childrens of ${componentName} must be one of [PageHtml, Thread, Timeline, undefined].`)
-    }
-  }).isRequired
+  children: PropTypes.arrayOf((children, key, componentName /* , location, propFullName */) =>
+    children.length !== 2 && new Error(`PropType Error: ${componentName} must have 2 children.`)
+  ).isRequired
 }

src/component/common/PopinFixed/PopinFixedHeader.jsx

         {props.name}
       </div>
 
+      <div className={classnames('editiontitle mr-auto', `${props.customClass}__header__editionmode`)}>
+        <input className='editiontitle__input form-control' placeholder='Titre du fichier' />
+      </div>
+
       <div className={classnames('wsFileGeneric__header__edittitle', `${props.customClass}__header__changetitle`)}>
         <i className='fa fa-pencil' />
       </div>

src/container/AccountPage.jsx

 import React, { Component } from 'react'
 import imgProfil from '../img/imgProfil.png'
-import BtnSwitch from '../component/common/Input/BtnSwitch.jsx'
+import { BtnSwitch } from 'tracim_lib'
 
 class AccountPage extends Component {
   render () {
             <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'>
+                <div className='personaldata__title subTitle ml-2 ml-sm-0'>
                   Mes informations personnelles
                 </div>
 
-                <div className='account__userpreference__setting__personaldata__text ml-2 ml-sm-0'>
+                <div className='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'>
+                <div className='personaldata__form'>
+                  <div className='personaldata__form__title'>
                     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'>
+                  <input className='personaldata__form__txtinput form-control' type='password' placeholder='Ancien mot de passe' />
+                  <input className='personaldata__form__txtinput form-control' type='password' placeholder='Nouveau mot de passe' />
+                  <div className='personaldata__form__button btn btn-primary'>
                     Envoyer
                   </div>
                 </div>
 
-                <div className='account__userpreference__setting__personaldata__changeinfo'>
-                  <div className='account__userpreference__setting__personaldata__changeinfo__infotitle'>
+                <div className='personaldata__form'>
+                  <div className='personaldata__form__title'>
                     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'>
+                  <input className='personaldata__form__txtinput form-control' type='email' placeholder='Ancienne adresse mail' />
+                  <input className='personaldata__form__txtinput form-control' type='email' placeholder='Nouvelle adresse mail' />
+                  <div className='personaldata__form__button btn btn-primary'>
                     Envoyer
                   </div>
                 </div>
 
               <div className='account__userpreference__setting__calendar d-none'>
 
-                <div className='account__userpreference__setting__calendar__title subTitle ml-2 ml-sm-0'>
+                <div className='calendar__title subTitle ml-2 ml-sm-0'>
                   Calendrier
                 </div>
 
-                <div className='account__userpreference__setting__calendar__text ml-2 ml-sm-0'>
+                <div className='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'>
+                <div className='calendar__title ml-2 ml-sm-0'>
                   Accèder à votre Calendrier personnel
                 </div>
-                <div className='account__userpreference__setting__calendar__link'>
+                <div className='calendar__link ml-2 ml-sm-0'>
                   http://algoo.trac.im/caldav/user/262.ics/
                 </div>
 
-                <div className='account__userpreference__setting__calendar__infotitle'>
+                <div className='calendar__title ml-2 ml-sm-0'>
                   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'>
+                <div className='calendar__timezone ml-2 ml-sm-0 dropdown'>
+                  <button className='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 className='calendar__timezone__submenu dropdown-menu'>
+                    <div className='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 className='calendar__timezone__submenu__item dropdown-item dropdown-item'> Londres GMT +0
                     </div>
                   </div>
                 </div>
 
               <div className='account__userpreference__setting__notification'>
 
-                <div className='account__userpreference__setting__notification__title subTitle ml-2 ml-sm-0'>
+                <div className='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'>
+                <div className='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'>
+                <div className='notification__table'>
                   <table className='table'>
                     <thead>
                       <tr>
                     <tbody>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='notification__table__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'>
+                          <div className='notification__table__role'>
+                            <div className='notification__table__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='notification__table__role__text d-none d-sm-flex'>
                               Gestionnaire de Contenu
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
-                            <BtnSwitch />
-                          </div>
+                          <BtnSwitch />
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='notification__table__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'>
+                          <div className='notification__table__role'>
+                            <div className='notification__table__role__icon'>
                               <i className='fa fa-eye' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='notification__table__role__text d-none d-sm-flex'>
                               Lecteur
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
-                            <BtnSwitch />
-                          </div>
+                          <BtnSwitch />
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='notification__table__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'>
+                          <div className='notification__table__role'>
+                            <div className='notification__table__role__icon'>
                               <i className='fa fa-pencil' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='notification__table__role__text d-none d-sm-flex'>
                               Contributeur
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
-                            <BtnSwitch />
-                          </div>
+                          <BtnSwitch />
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='notification__table__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'>
+                          <div className='notification__table__role'>
+                            <div className='notification__table__role__icon'>
                               <i className='fa fa-gavel' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='notification__table__role__text d-none d-sm-flex'>
                               Responsable
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
-                            <BtnSwitch />
-                          </div>
+                          <BtnSwitch />
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='notification__table__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'>
+                          <div className='notification__table__role'>
+                            <div className='notification__table__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='notification__table__role__text d-none d-sm-flex'>
                               Gestionnaire de Contenu
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
-                            <BtnSwitch />
-                          </div>
+                          <BtnSwitch />
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='notification__table__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'>
+                          <div className='notification__table__role'>
+                            <div className='notification__table__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='notification__table__role__text d-none d-sm-flex'>
                               Gestionnaire de Contenu
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
-                            <BtnSwitch />
-                          </div>
+                          <BtnSwitch />
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__wksname'>
+                          <div className='notification__table__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'>
+                          <div className='notification__table__role'>
+                            <div className='notification__table__role__icon'>
                               <i className='fa fa-graduation-cap' />
                             </div>
-                            <div className='account__userpreference__setting__notification__tableau__role__text'>
+                            <div className='notification__table__role__text d-none d-sm-flex'>
                               Gestionnaire de Contenu
                             </div>
                           </div>
                         </td>
                         <td>
-                          <div className='account__userpreference__setting__notification__tableau__btnswitch'>
-                            <BtnSwitch />
-                          </div>
+                          <BtnSwitch />
                         </td>
                       </tr>
                     </tbody>

src/container/PrivateRoute.jsx

 const mapStateToProps = ({ user }) => ({ user })
 export default withRouter(connect(mapStateToProps)(PrivateRoute))
 
-PrivateRoute.PropTypes = {
-  component: PropTypes.shape({
-    Component: PropTypes.object.isRequired
-  }),
+PrivateRoute.propTypes = {
+  component: PropTypes.func.isRequired,
   user: PropTypes.shape({ // user is get with redux connect
     isLoggedIn: PropTypes.bool.isRequired
   })

src/container/ProgressBar.jsx

+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/Tracim.jsx

 
               <SidebarWrapper locationPath={location.pathname}>
 
-                <PrivateRoute exact path='/' component={AccountPage} />
+                <PrivateRoute exact path='/' component={WorkspaceContent} />
+                <PrivateRoute exact path='/account' component={AccountPage} />
+                <PrivateRoute exact path='/dashboard' component={Dashboard} />
 
               </SidebarWrapper>
 

src/container/UploadPopup.jsx

+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/container/WorkspaceContent.jsx

 import PageTitle from '../component/common/layout/PageTitle.jsx'
 import PageContent from '../component/common/layout/PageContent.jsx'
 import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
-import FileContentViewer from '../component/Workspace/FileContentViewer.jsx'
-import { getWorkspaceContent } from '../action-creator.async.js'
-import { setActiveFileContent, hideActiveFileContent } from '../action-creator.sync.js'
+import {
+  getPluginList,
+  getWorkspaceContent
+} from '../action-creator.async.js'
+// import pluginDatabase from '../plugin/index.js'
 
 class WorkspaceContent extends React.Component {
   constructor (props) {
 
   componentDidMount () {
     this.props.dispatch(getWorkspaceContent(/* this.props.workspace.id */1))
+    this.props.dispatch(getPluginList())
   }
 
   handleClickFileItem = file => {
-    this.props.dispatch(setActiveFileContent(file))
-  }
-
-  handleClickCloseBtn = () => {
-    this.props.dispatch(hideActiveFileContent())
+    GLOBAL_renderPlugin({
+      file,
+      pluginData: this.props.plugin[file.type]
+    })
   }
 
   render () {
-    const { workspace, activeFileContent } = this.props
+    const { workspace, plugin } = this.props
+
+    // const PluginContainer = (pluginDatabase.find(p => p.name === activeFileContent.type) || {container: '<div>unknow</div>'}).container
 
     return (
       <PageWrapper customeClass='workspace'>
         </PageTitle>
 
         <PageContent parentClass='workspace__content'>
-
           <div className='workspace__content__fileandfolder folder__content active'>
             <FileItemHeader />
 
             { workspace.content.map(c => c.type === 'folder'
-              ? <Folder folderData={c} key={c.id} />
+              ? <Folder plugin={plugin} folderData={c} key={c.id} />
               : (
                 <FileItem
                   name={c.title}
                   type={c.type}
+                  icon={(plugin[c.type] || {icon: ''}).icon}
                   status={c.status}
                   onClickItem={() => this.handleClickFileItem(c)}
                   key={c.id}
 
           <DropdownCreateButton customClass='workspace__content__button mb-5' />
 
-          { activeFileContent.display &&
-            <FileContentViewer
-              file={activeFileContent}
-              onClose={this.handleClickCloseBtn}
-            />
-          }
+          <div id='pluginContainer'>
+            {/* activeFileContent.display && <PluginContainer /> */}
+          </div>
         </PageContent>
 
       </PageWrapper>
   }
 }
 
-const mapStateToProps = ({ workspace, activeFileContent }) => ({ workspace, activeFileContent })
+const mapStateToProps = ({ workspace, activeFileContent, plugin }) => ({ workspace, activeFileContent, plugin })
 export default connect(mapStateToProps)(WorkspaceContent)

src/css/AccountPage.styl

   margin 15px 0
   font-size 18px
 
+.table td
+  vertical-align middle
+
+.table tr:nth-child(even)
+  background-color grey-hover
+
 .account
+  width 100%
   &__userinformation
     display flex
     justify-content center
           font-size 20px
           cursor pointer
         &__disabled
-          padding 25px 20px 20px 20px
+          padding 25px 20px 20px 16px
           color grey
           font-size 18px
         &__item
           margin-top 10px
-          padding-left 5px
           font-weight 500
           font-size 18px
           cursor pointer
       padding 20px
       width 80%
       background-color off-white
-      &__personaldata
+      .personaldata
         &__text
           settingText()
-        &__changeinfo
+        &__form
           margin 25px 0
-          &__infotitle
+          &__title
             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
+            border-radius 5px
             padding 8px 15px
           &__button
             vertical-align top
             border 1px solid blue
-            border-radius 10px
+            border-radius 5px
             padding 8px 25px
-            background-color transparent
-            color blue
             cursor pointer
-            &:hover, &:focus
-              background-color blue
-              color white
-      &__calendar
-        &__title
-          settingTitle()
+      .calendar
         &__text
           settingText()
-        &__infotitle
+        &__title
           margin 15px 0
           font-size 18px
         &__link
           display inline-block
           border 1px solid grey
-          border-radius 10px
+          border-radius 5px
           padding 10px 25px
         &__timezone
           margin 15px 0 30px 0
           &__btn
             border 1px solid blue
-            border-radius 10px
+            border-radius 5px
             padding 10px 35px
             color blue
             background-color transparent
               &:hover, &:focus
                 background-color blue
                 color white
-      &__notification
-        &__title
-          settingTitle()
+      .notification
         &__text
           settingText()
           margin-bottom 30px
-        &__tableau
+        &__table
           border 1px solid lightGrey
           &__role
             display flex
             &__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
         border-radius 0
         padding 10px 0
         width 100%
-        &__calendar
+        .personaldata
+          &__form
+            margin-left 10px
+        .calendar
           &__link
             padding 10px 15px
-        &__notification
-          &__tableau
+        .notification
+          &__table
             &__wksname
               text-overflow ellipsis
               white-space nowrap
               overflow hidden
-              width 100px
+              width 310px
               &:focus
                 overflow visible
                 width auto

src/css/Folder.styl

     &:hover
       background-color folder-hover
       .folder__header__triangleborder__triangle
-        border-color hover-folder transparent transparent transparent
+        border-color folder-hover transparent transparent transparent
     &__triangleborder
       display none
       position absolute
-      top 62px
+      top 61px
       left -1px
       border-style solid
       border-width 25px 30px 0 30px

src/css/Generic.styl

       border 1px solid grey
       border-radius 10px
       padding 15px 25px
-
-/********************/
-
-/*** PAGE FILE, THREAD, HTML, MARKDOWN, ISSUE ***/
-
-.wsFileGeneric
-  position fixed
-  top 85px
-  right 0
-  border 1px solid grey
-  height 100%
-  background-color lightGrey
-  box-shadow shadow-page
-  visibility hidden
-  z-index 1
-  &.visible
-    visibility visible
-  &__header
-    display flex
-    align-items center
-    padding 15px
-    height 64px
-    &__icon
-      margin-right 15px
-      font-size 22px
-      color white
-    &__title
-      margin-right 15px
-      color white
-      text-overflow ellipsis
-      overflow hidden
-      white-space nowrap
-    &__edittitle
-      margin 0 15px
-      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
-      padding 2px 5px
-      cursor pointer
-      & > i
-        color white
-        font-size 20px
-  &__option
-    border-bottom 1px solid grey
-    padding 10px
-    height 58px
-    background-color off-white
-    & > i
-      vertical-align middle
-      margin-right 15px
-      font-size 25px
-      cursor pointer
-    &__menu
-      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
-        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

               margin-right 10px
               color darkGrey
           .profilgroup__sub
-            color dark-grey
+            color darkGrey
             cursor pointer
             &:focus
               box-shadow none

src/css/PagePreview.styl

-.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

+.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/Timeline.styl

   display flex
   flex-direction column
   margin 10px
+  border-radius 10px
+  height 100%
   &__header
     border-radius 10px 10px 0 0
     padding 15px
     text-align center
     font-size 20px
-    color dark-grey
+    color darkGrey
     background-color grey-hover
   &__messagelist
     flex 1 1 0
         font-size 17px
         & > i
           margin-right 10px
-          color dark-grey
+          color darkGrey
           font-size 22px
       &__date
         color fontColor

src/css/UploadPopup.styl

+.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

+// Côme - 2018/02/27 - DEPRECATED : now using Variable.styl from tracim_lib
+
 /**** VARIABLES ****/
 /*** COULEURS ****/
 

src/css/index.styl

 html, body, #content, #content > div
   height 100%
 
-@import 'Variable'
-@import 'Generic'
+@import 'Variable.styl' // Côme - this comes from node_modules/tracim_lib
 
-@import 'Sidebar'
-@import 'Header'
-@import 'Footer'
+@import 'Generic.styl'
 
-@import 'Login'
-@import 'Workspace'
+@import 'Sidebar.styl'
+@import 'Header.styl'
+@import 'Footer.styl'
 
-@import 'FileItem'
-@import 'FileItemHeader'
-@import 'Folder'
+@import 'Login.styl'
+@import 'Workspace.styl'
 
-@import 'Thread'
-@import 'PageHtml'
-@import 'Timeline'
-@import 'File'
+@import 'FileItem.styl'
+@import 'FileItemHeader.styl'
+@import 'Folder.styl'
 
-@import 'Dashboard'
-@import 'AccountPage'
-@import 'btnSwtich'
+@import 'Timeline.styl'
+@import 'File.styl'
+
+@import 'Dashboard.styl'
+@import 'AccountPage.styl'
+@import 'btnSwtich.styl'
+
+@import 'UploadPopup'
+@import 'ProgressBar'
 
-// @import 'UploadPopup'
-// @import 'ProgressBar'

src/helper.js

     'Content-Type': 'application/json'
   }
 }
-
-export const FILE_TYPE = [{
-  name: 'pageHtml',
-  customClass: 'wsFilePageHtml',
-  icon: 'fa fa-file-word-o'
-}, {
-  name: 'pageMarkdown',
-  customClass: 'wsFilePageMarkdown',
-  icon: 'fa fa-file-code-o'
-}, {
-  name: 'file',
-  customClass: 'wsFileFile',
-  icon: 'fa fa-file-image-o'
-}, {
-  name: 'thread',
-  customClass: 'wsFileThread',
-  icon: 'fa fa-comments-o'
-}, {
-  name: 'task',
-  customClass: 'wsFileTask',
-  icon: 'fa fa-list-ul'
-}, {
-  name: 'issue',
-  customClass: 'wsFileIssue',
-  icon: 'fa fa-ticket'
-}]

src/css/PageHtml.styl → src/plugin/ContentType/PageHtml/PageHtml.styl

+@import '../../../css/Variable.styl'
+
 .wsFilePageHtml
   width 1200px
   height calc(100% - 85px)
   overflow-Y auto
   &__header
     background-color htmlColor
+    &__editionmode
+      display none
     &__icon
       .fa-file-word-o
         color white
   &__contentpage
-    display flex
-    overflow-Y auto
     &__textnote
       margin 10px
       border-radius 10px
       padding 25px
-      width 55%
       height 100%
       background-color off-white
       &__latestversion
         opacity 0.7
       &__text
         font-size 14px
-    &__wrapper
-      border-radius 10px
-      width 45%
-      height 100%
-    &__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
+      &__edition
+        display none
     &__messagelist
       min-height 300px
       &__item
         &__content
-          color dark-grey
+          color darkGrey
       &__version
         margin-top 40px
         background-color grey-hover
           background-color htmlColor
           & > i
             margin-right 10px
-            color dark-grey
+            color darkGrey
             font-size 22px
           &:hover
             background-color darkHtmlColor
 
 .received
   .wsFilePageHtml__contentpage__messagelist__item__content
-      background-color htmlColor
+    background-color htmlColor
+
+.activeEditionTitle
+  .wsFilePageHtml
+    &__header
+      &__editionmode
+        display block
+      &__title
+        display none
+
+.activeEditionText
+  .wsFilePageHtml__contentpage__textnote
+    &__edition
+      display flex
+    &__text
+      display none
 
 @media (min-width: max-xs) and (max-width: max-lg)
   .wsFilePageHtml

src/plugin/ContentType/PageHtml/PageHtmlComponent.jsx

+import React from 'react'
+
+const PageHtml = props => {
+  return (
+    <div className='wsFilePageHtml__contentpage__textnote'>
+      <div className='wsFilePageHtml__contentpage__textnote__latestversion' dangerouslySetInnerHTML={{__html: props.version}} />
+      <div className='wsFilePageHtml__contentpage__textnote__text' dangerouslySetInnerHTML={{__html: props.text}} />
+
+      <form className='wsFilePageHtml__contentpage__textnote__edition editionmode'>
+        <textarea className='wsFilePageHtml__contentpage__textnote__edition__text editionmode__text' />
+        <input type='submit' className='wsFilePageHtml__contentpage__textnote__edition__submit editionmode__submit' value='Valider' />
+      </form>
+    </div>
+  )
+}
+
+export default PageHtml

src/plugin/ContentType/PageHtml/PageHtmlContainer.jsx

+import React from 'react'
+import { connect } from 'react-redux'
+// import PopinFixed from '../../../component/common/PopinFixed/PopinFixed.jsx'
+// import PopinFixedHeader from '../../../component/common/PopinFixed/PopinFixedHeader.jsx'
+// import PopinFixedOption from '../../../component/common/PopinFixed/PopinFixedOption.jsx'
+// import PopinFixedContent from '../../../component/common/PopinFixed/PopinFixedContent.jsx'
+import {
+  PopinFixed,
+  PopinFixedHeader,
+  PopinFixedOption,
+  PopinFixedContent
+} from 'tracim_lib'
+import PageHtmlComponent from './PageHtmlComponent.jsx'
+import Timeline from '../../../component/Timeline.jsx'
+import { hideActiveFileContent } from '../../../action-creator.sync.js'
+
+require('./PageHtml.styl')
+
+class PageHtmlContainer extends React.Component {
+  handleClickBtnClose = () => this.props.dispatch(hideActiveFileContent())
+
+  render () {
+    const { activeFileContent, plugin: { PageHtml } } = this.props
+
+    return (
+      <PopinFixed customClass={`${PageHtml.customClass}`}>
+        <PopinFixedHeader
+          customClass={`${PageHtml.customClass}`}
+          icon={PageHtml.icon}
+          name={activeFileContent.title}
+          onClickCloseBtn={this.handleClickBtnClose}
+        />
+
+        <PopinFixedOption customClass={`${PageHtml.customClass}`} />
+
+        <PopinFixedContent customClass={`${PageHtml.customClass}__contentpage`}>
+          <PageHtmlComponent
+            version={activeFileContent.version}
+            text={activeFileContent.text}
+            key={'PageHtml'}
+          />
+
+          <Timeline
+            customClass={`${PageHtml.customClass}__contentpage`}
+            key={'pageHtml__timeline'}
+          />
+        </PopinFixedContent>
+      </PopinFixed>
+    )
+  }
+}
+
+const mapStateToProps = ({ activeFileContent, plugin }) => ({ activeFileContent, plugin })
+export default connect(mapStateToProps)(PageHtmlContainer)

src/plugin/ContentType/PageHtml/index.js

+import reducer from './pageHtml.js'
+// import container from './PageHtmlContainer.jsx'
+// import component from './PageHtmlComponent.jsx'
+
+const PageHtml = {
+  name: 'PageHtml',
+  // container,
+  // component,
+  reducer
+}
+
+export default PageHtml

src/plugin/ContentType/PageHtml/pageHtml.js

+import { PLUGIN_LIST } from '../../../action-creator.sync.js'
+
+export default function pageHtml (state = {
+  title: '',
+  version: 0,
+  icon: ''
+}, action) {
+  switch (action.type) {
+    case `Set/${PLUGIN_LIST}`:
+      return action.pluginList.find(p => p.name === 'PageHtml')
+
+    default:
+      return state
+  }
+}

src/css/Thread.styl → src/plugin/ContentType/Thread/Thread.styl

-.wsFileThread
+.wsContentThread
   width 550px
   &__header
     color white
     background-color threadColor
+    &__editionmode
+      display none
+    &__icon
+      .fa-comments-o
+        color white
   &__wrapper
     height calc(100% - 209px) /* height of chat__header + height of option + top of chat */
   &__messagelist
         color darkBlue
 
 .received
-  .wsFileThread__messagelist__item__content
+  .wsContentThread__messagelist__item__content
       background-color darkBlue
       color white
 
-@media (min-width: max-xs) and (max-width: max-lg)
+.activeEditionTitle
   .wsFileThread
+    &__header
+      &__editionmode
+        display block
+      &__title
+        display none
+
+@media (min-width: max-xs) and (max-width: max-lg)
+  .wsContentThread
     &__texteditor
       padding 7px
       &__simpletext
         width 80px
 
 @media (min-width: min-sm) and (max-width: max-sm)
-  .wsFileThread
+  .wsContentThread
     top 69px
 
 @media (max-width: max-xs)
-  .wsFileThread
+  .wsContentThread
     top 69px
     width 100%
     box-shadow none

src/plugin/ContentType/Thread/index.js

+import reducer from './thread.js'
+// import container from './ThreadContainer.jsx'
+// import component from './ThreadComponent.jsx'
+
+const Thread = {
+  name: 'Thread',
+  // container,
+  // component,
+  reducer
+}
+
+export default Thread

src/plugin/ContentType/Thread/thread.js

+import { PLUGIN_LIST } from '../../../action-creator.sync.js'
+
+export default function thread (state = {
+  title: '',
+  version: 0,
+  icon: ''
+}, action) {
+  switch (action.type) {
+    case `Set/${PLUGIN_LIST}`:
+      return action.pluginList.find(p => p.name === 'Thread')
+
+    default:
+      return state
+  }
+}

src/plugin/index.js

+import pageHtml from '../plugin/ContentType/PageHtml/index.js'
+import thread from '../plugin/ContentType/Thread/index.js'
+
+const pluginDatabase = [pageHtml, thread]
+
+export default pluginDatabase

src/reducer/fileType/index.js

-import { combineReducers } from 'redux'
-
-// import color from './color.js'
-// import size from './size.js'
-// import price from './price.js'
-// import multicolor from './multicolor.js'
-
-export default combineReducers({
-
-})

src/reducer/fileType/pageHtml.js

-export default function pageHtml (state = {
-  title: '',
-  version: 0,
-  text: ''
-}, action) {
-  switch (action.type) {
-    default:
-      return state
-  }
-}

src/reducer/plugin.js

+import { combineReducers } from 'redux'
+import pluginDatabase from '../plugin/index.js'
+
+const reducerList = {}
+pluginDatabase.forEach(p => (reducerList[p.name] = p.reducer))
+
+export default combineReducers({
+  ...reducerList
+})

src/reducer/root.js

 import user from './user.js'
 import workspace from './workspace.js'
 import activeFileContent from './activeFileContent.js'
+import plugin from './plugin.js'
 
-const rootReducer = combineReducers({ user, workspace, activeFileContent })
+const rootReducer = combineReducers({ user, workspace, activeFileContent, plugin })
 
 export default rootReducer

webpack.config.js

     }]
   },
   resolve: {
-    extensions: ['.js', '.jsx']
+    extensions: ['.js', '.jsx', '.styl']
   },
   plugins:[
     ...[ // generic plugins always present