integration of Preview (File) into Tracim architecture

src/component/Workspace/FileContentViewer.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'
 
           <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 />

src/component/Workspace/FileType/File.jsx

+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 {
+  render () {
+    return (
+      <div className='wsFileFile__contentpage__visualizer'>
+        <div className='wsFileFile__contentpage__visualizer__dloption'>
+          <div className='wsFileFile__contentpage__visualizer__dloption__icon'>
+            <i className='fa fa-download' />
+          </div>
+          <div className='wsFileFile__contentpage__visualizer__dloption__icon'>
+            <i className='fa fa-file-pdf-o' />
+          </div>
+          <div className='wsFileFile__contentpage__visualizer__dloption__icon'>
+            <i className='fa fa-files-o' />
+          </div>
+        </div>
+        <div className='wsFileFile__contentpage__visualizer__slidecontainer'>
+          <div className='wsFileFile__contentpage__visualizer__slidecontainer__chevron'>
+            <i className='fa fa-chevron-left' />
+          </div>
+          <div className='wsFileFile__contentpage__visualizer__slidecontainer__fileimg'>
+            <img src={imgPDF} alt='fichier pdf' className='d-block img-thumbnail rounded m-auto' />
+          </div>
+          <div className='wsFileFile__contentpage__visualizer__slidecontainer__chevron'>
+            <i className='fa fa-chevron-right' />
+          </div>
+        </div>
+        <div className='wsFileFile__contentpage__visualizer__sidebar'>
+          <div className='wsFileFile__contentpage__visualizer__sidebar__visiblepart'>
+            <div className='wsFileFile__contentpage__visualizer__sidebar__visiblepart__icon'>
+              <i className='fa fa-gear' />
+            </div>
+            <div className='wsFileFile__contentpage__visualizer__sidebar__visiblepart__title'>
+              Propriétés
+            </div>
+          </div>
+          <div className='wsFileFile__contentpage__visualizer__sidebar__propertydetail'>
+            Fichier : Planning Intégration de Tracim
+            <br />
+            Description : Fichier excel et pdf du planning
+            <br />
+            Taille : 50ko
+            <br />
+            Utilisateurs : Damien, Bastien, Côme, Phillipe
+            <br />
+            Date de Création : 08/07/17
+            <br />
+            Commentaire principale : Ce planning est voué à être modifié régulièrement par l’équipe.
+            <br />
+            Paramètres utilisés (optionnelle) :
+            Aliqua mollit nulla velit magna velit adipisicing culpa ex dolor cupidatat eu commodo.
+            <br />
+            <br />
+            Description : Fichier excel et pdf du planning
+            <br />
+            Taille : 50ko
+            <br />
+            Utilisateurs : Damien, Bastien, Côme, Phillipe
+            <br />
+            Date de Création : 08/07/17
+            <br />
+            Commentaire principale : Ce planning est voué à être modifié régulièrement par l’équipe.
+            <br />
+            Paramètres utilisés (optionnelle) :
+            Aliqua mollit nulla velit magna velit adipisicing culpa ex dolor cupidatat eu commodo.
+            <br />
+            <br />
+            Description : Fichier excel et pdf du planning
+            <br />
+            Taille : 50ko
+            <br />
+            Utilisateurs : Damien, Bastien, Côme, Phillipe
+            <br />
+            Date de Création : 08/07/17
+            <br />
+            Commentaire principale : Ce planning est voué à être modifié régulièrement par l’équipe.
+            <br />
+            Paramètres utilisés (optionnelle) :
+            Aliqua mollit nulla velit magna velit adipisicing culpa ex dolor cupidatat eu commodo.
+            <br />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default File

src/component/common/PopinFixed/PopinFixedOption.jsx

           </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'></div>
+            <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'>

src/container/Preview.jsx

-import React, { Component } from 'react'
-import classnames from 'classnames'
-import Timeline from '../component/Timeline.jsx'
-import imgPDF from '../img/pdf.jpg'
-// import imgExcel from '../img/excel.png'
-
-class Preview extends Component {
-  render () {
-    return (
-      <div className={classnames('wsFilePreview wsFileGeneric', {'visible': this.props.visible})}>
-        <div className='wsFilePreview__header wsFileGeneric__header'>
-          <div className='wsFileGeneric__header__icon'>
-            <i className='fa fa-file-image-o' />
-          </div>
-          <div className='wsFilePreview__header__title wsFileGeneric__header__title mr-auto'>
-            Planning d'intégration de l'application tracim
-          </div>
-          <div className='wsFileGeneric__header__edittitle'>
-            <i className='fa fa-pencil' />
-          </div>
-          <div className='wsFileGeneric__header__close'>
-            <i className='fa fa-times' />
-          </div>
-        </div>
-        <div className='wsFileGeneric__option'>
-          <div className='wsFilePreview__option__menu wsFileGeneric__option__menu'>
-            <div className='wsFilePreview__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>
-            <div className='wsFileGeneric__option__menu__action'>
-              <i className='fa fa-trash' />
-            </div>
-          </div>
-        </div>
-        <div className='wsFilePreview__contentpage wsFileGeneric__contentpage'>
-
-          <div className='wsFilePreview__contentpage__visualizer'>
-            <div className='wsFilePreview__contentpage__visualizer__dloption'>
-              <div className='wsFilePreview__contentpage__visualizer__dloption__icon'>
-                <i className='fa fa-download' />
-              </div>
-              <div className='wsFilePreview__contentpage__visualizer__dloption__icon'>
-                <i className='fa fa-file-pdf-o' />
-              </div>
-              <div className='wsFilePreview__contentpage__visualizer__dloption__icon'>
-                <i className='fa fa-files-o' />
-              </div>
-            </div>
-            <div className='wsFilePreview__contentpage__visualizer__slidecontainer'>
-              <div className='wsFilePreview__contentpage__visualizer__slidecontainer__chevron'>
-                <i className='fa fa-chevron-left' />
-              </div>
-              <div className='wsFilePreview__contentpage__visualizer__slidecontainer__fileimg'>
-                <img src={imgPDF} alt='fichier pdf' className='d-block img-thumbnail rounded m-auto' />
-              </div>
-              <div className='wsFilePreview__contentpage__visualizer__slidecontainer__chevron'>
-                <i className='fa fa-chevron-right' />
-              </div>
-            </div>
-            <div className='wsFilePreview__contentpage__visualizer__sidebar'>
-              <div className='wsFilePreview__contentpage__visualizer__sidebar__visiblepart'>
-                <div className='wsFilePreview__contentpage__visualizer__sidebar__visiblepart__icon'>
-                  <i className='fa fa-gear' />
-                </div>
-                <div className='wsFilePreview__contentpage__visualizer__sidebar__visiblepart__title'>
-                  Propriétés
-                </div>
-              </div>
-              <div className='wsFilePreview__contentpage__visualizer__sidebar__propertydetail'>
-                Fichier : Planning Intégration de Tracim
-                <br />
-                Description : Fichier excel et pdf du planning
-                <br />
-                Taille : 50ko
-                <br />
-                Utilisateurs : Damien, Bastien, Côme, Phillipe
-                <br />
-                Date de Création : 08/07/17
-                <br />
-                Commentaire principale : Ce planning est voué à être modifié régulièrement par l’équipe.
-                <br />
-                Paramètres utilisés (optionnelle) :
-                Aliqua mollit nulla velit magna velit adipisicing culpa ex dolor cupidatat eu commodo.
-                <br />
-                <br />
-                Description : Fichier excel et pdf du planning
-                <br />
-                Taille : 50ko
-                <br />
-                Utilisateurs : Damien, Bastien, Côme, Phillipe
-                <br />
-                Date de Création : 08/07/17
-                <br />
-                Commentaire principale : Ce planning est voué à être modifié régulièrement par l’équipe.
-                <br />
-                Paramètres utilisés (optionnelle) :
-                Aliqua mollit nulla velit magna velit adipisicing culpa ex dolor cupidatat eu commodo.
-                <br />
-                <br />
-                Description : Fichier excel et pdf du planning
-                <br />
-                Taille : 50ko
-                <br />
-                Utilisateurs : Damien, Bastien, Côme, Phillipe
-                <br />
-                Date de Création : 08/07/17
-                <br />
-                Commentaire principale : Ce planning est voué à être modifié régulièrement par l’équipe.
-                <br />
-                Paramètres utilisés (optionnelle) :
-                Aliqua mollit nulla velit magna velit adipisicing culpa ex dolor cupidatat eu commodo.
-                <br />
-              </div>
-            </div>
-          </div>
-
-          <Timeline customClass={'wsFilePreview__contentpage'} />
-
-        </div>
-      </div>
-    )
-  }
-}
-
-export default Preview

src/container/WorkspaceContent.jsx

 import Folder from '../component/Workspace/Folder.jsx'
 import FileItem from '../component/Workspace/FileItem.jsx'
 import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
-import Preview from './Preview.jsx'
 import PageWrapper from '../component/common/layout/PageWrapper.jsx'
 import PageTitle from '../component/common/layout/PageTitle.jsx'
 import PageContent from '../component/common/layout/PageContent.jsx'

src/css/Preview.styl → src/css/File.styl

-.wsFilePreview
+.wsFileFile
   width 1200px
   height calc(100% - 85px)
   &__header
-    background-color previewColor
+    background-color fileColor
     .fa-file-image-o
       color white
   &__option
       display flex
       &__addversion
         padding 8px 15px
-        border 1px solid previewColor
+        border 1px solid fileColor
         border-radius 5px
         background-color transparent
-        color previewColor
+        color fileColor
         cursor pointer
         & > i
           margin-left 10px
         &:hover
-          background-color previewColor
+          background-color fileColor
           border none
           color white
   &__contentpage
           background-color grey
           cursor pointer
           &:hover
-            background-color previewColor
+            background-color fileColor
           &__icon
             justify-content flex-start
             font-size 30px
             width 145px
             color white
             font-size 17px
-            background-color previewColor
+            background-color fileColor
             & > i
               margin-right 10px
               color dark-grey
               font-size 22px
             &:hover
-              background-color lightPreviewColor
+              background-color lightFileColor
             &:focus
-              background-color lightPreviewColor
+              background-color lightFileColor
           &__date
             color fontColor
             font-size 17px
 /***** SENDER RECEIVER *****/
 
 .received
-  .wsFilePreview__contentpage__messagelist__item__content
-      background-color previewColor
+  .wsFileFile__contentpage__messagelist__item__content
+      background-color fileColor
 
 /***** ACTIVE SIDEBAR *****/
 
 .activesidebar
-  .wsFilePreview__contentpage__visualizer
+  .wsFileFile__contentpage__visualizer
     &__sidebar
       display flex
       border-top-right-radius 10px
         border-bottom-left-radius 10px
         border-top-right-radius 0
         border-bottom-right-radius 0
-        background-color previewColor
+        background-color fileColor
       &__propertydetail
         display flex
         order 2
         padding 20px
         overflow-Y auto
-        color previewColor
+        color fileColor
 
 /****** MEDIA QUERIES ********/
 
 @media (min-width: max-xs) and (max-width: max-lg)
 
-  .wsFilePreview
+  .wsFileFile
     overflow-Y auto
     &__contentpage
       display block
         &__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
 
 @media (min-width: min-lg) and (max-width: max-lg)
 
-  .wsFilePreview
+  .wsFileFile
     width 900px
     overflow-Y auto
 
 
 @media (min-width: min-md) and (max-width: max-md)
 
-  .wsFilePreview
+  .wsFileFile
     width 100%
 
 /******************************/
 
 @media (min-width: min-sm) and (max-width: max-sm)
 
-  .wsFilePreview
+  .wsFileFile
     top 69px
     width 100%
     height calc(100% - 69px)
 @media (max-width: max-xs)
 
   .activesidebar
-    .wsFilePreview__contentpage__visualizer
+    .wsFileFile__contentpage__visualizer
       &__sidebar
         width 350px
 
-  .wsFilePreview
+  .wsFileFile
     top 69px
     width 100%
     height calc(100% - 69px)
         &__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

src/css/Variable.styl

 
 markdownColor = #e0082b
 
-previewColor = #263462
-lightPreviewColor = lighten(previewColor, 15%)
+fileColor = #263462
+lightFileColor = lighten(fileColor, 15%)
 
 taskColor = #2d5a88
 

src/css/index.styl

 @import 'Thread'
 @import 'PageHtml'
 @import 'Timeline'
-@import 'Preview'
-
+@import 'File'