intégration of preview's page

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

@@ -11,11 +11,11 @@ const FileItem = props => {
       case FILE_TYPE.PAGE_MARKDOWN:
         return 'fa fa-file-code-o'
       case FILE_TYPE.FILE:
-        return 'fa fa-file-text-o docandfile-color'
+        return 'fa fa-file-image-o'
       case FILE_TYPE.THREAD:
-        return 'fa fa-comments-o talk-color'
+        return 'fa fa-comments-o'
       case FILE_TYPE.TASK:
-        return 'fa fa-list-ul task-color'
+        return 'fa fa-list-ul'
       case FILE_TYPE.ISSUE:
         return 'fa fa-ticket'
     }

src/component/common/PopinFixed/PopinFixedOption.jsx

@@ -6,6 +6,42 @@ const PopinFixedOption = props => {
   return (
     <div className='wsFileGeneric__option'>
       <div className='wsFileGeneric__option__menu'>
+        <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'></div>
+            <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/Preview.jsx

@@ -0,0 +1,165 @@
+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

@@ -3,8 +3,9 @@ import { connect } from 'react-redux'
 import Folder from '../component/Workspace/Folder.jsx'
 import FileItem from '../component/Workspace/FileItem.jsx'
 import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
-import Thread from './Thread.jsx'
+// import Thread from './Thread.jsx'
 // import PageText from './PageText.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'
@@ -47,7 +48,7 @@ class WorkspaceContent extends React.Component {
                 name={c.title}
                 type={c.type}
                 status={c.status}
-                onClickItem={() => this.setState({activeFileType: 'thread'})}
+                onClickItem={() => this.setState({activeFileType: 'file'})}
                 key={c.id}
               />
             )}
@@ -55,9 +56,11 @@ class WorkspaceContent extends React.Component {
 
           <DropdownCreateButton customClass='workspace__content__button mb-5' />
 
-          <Thread visible={this.state.activeFileType === 'thread'} />
+          <Preview visible={this.state.activeFileType === 'file'} />
+
           {/*
           <PageText visible={this.state.activeFileType === 'file'} />
+          <Thread visible={this.state.activeFileType === 'thread'} />
           */}
         </PageContent>
 

src/css/Generic.styl

@@ -74,8 +74,8 @@
       padding 5px 65px 5px 10px
 
 
-.fa-file-text-o
-  color fileColor
+.fa-file-image-o
+  color previewColor
 
 .fa-comments-o
   color threadColor
@@ -102,6 +102,7 @@
   background-color lightGrey
   box-shadow shadow-page
   visibility hidden
+  z-index 1
   &.visible
     visibility visible
   &__header
@@ -134,7 +135,7 @@
         font-size 20px
   &__option
     border-bottom 1px solid grey
-    padding 15px
+    padding 10px
     height 58px
     text-align right
     background-color off-white
@@ -146,12 +147,40 @@
     &__menu
       display inline-block
       vertical-align middle
+      &__status
+        display inline-block
+        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
+          &::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
+            &:active
+              background-color transparent
       &__action
         display inline-block
-        margin-right 10px
+        margin 5px 10px 0 0
         font-size 18px
         cursor pointer
   &__wrapper
     display flex
     flex-direction column
-

src/css/Preview.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/Timeline.styl

@@ -67,3 +67,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/Variable.styl

@@ -32,7 +32,8 @@ darkHtmlColor = darken(htmlColor, 15%)
 
 markdownColor = #e0082b
 
-fileColor = #263462
+previewColor = #263462
+lightPreviewColor = lighten(previewColor, 15%)
 
 taskColor = #2d5a88
 

src/css/index.styl

@@ -20,3 +20,5 @@ html, body, #content, #content > div
 @import 'Thread'
 @import 'PageText'
 @import 'Timeline'
+@import 'Preview'
+