Fixe the page file without the fixe of the sidebar's transition

src/component/Workspace/FileType/File.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import classnames from 'classnames'
 import imgPDF from '../../../img/pdf.jpg'
-// import imgExcel from '../img/excel.png'
+// import imgExcel from '../../../img/excel.png'
 
 class File extends Component {
   constructor (props) {
@@ -15,82 +15,68 @@ class File extends Component {
 
   render () {
     return (
-      <div className={classnames('wsFileFile__contentpage__visualizer', {'activesidebar': this.state.activesidebar})}>
-        <div className='wsFileFile__contentpage__visualizer__dloption'>
-          <div className='wsFileFile__contentpage__visualizer__dloption__icon'>
+      <div className={classnames('wsFileFile__contentpage__preview', {'activesidebar': this.state.activesidebar})}>
+        <div className='wsFileFile__contentpage__preview__dloption'>
+          <div className='wsFileFile__contentpage__preview__dloption__icon'>
             <i className='fa fa-download' />
           </div>
-          <div className='wsFileFile__contentpage__visualizer__dloption__icon'>
+          <div className='wsFileFile__contentpage__preview__dloption__icon'>
             <i className='fa fa-file-pdf-o' />
           </div>
-          <div className='wsFileFile__contentpage__visualizer__dloption__icon'>
+          <div className='wsFileFile__contentpage__preview__dloption__icon'>
             <i className='fa fa-files-o' />
           </div>
         </div>
-        <div className='wsFileFile__contentpage__visualizer__slidecontainer'>
-          <div className='wsFileFile__contentpage__visualizer__slidecontainer__chevron'>
+        <div className='wsFileFile__contentpage__preview__slider'>
+          <div className='wsFileFile__contentpage__preview__slider__icon'>
             <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 className='wsFileFile__contentpage__preview__slider__fileimg'>
+            <img src={imgPDF} alt='fichier pdf' className='img-thumbnail mx-auto' />
           </div>
-          <div className='wsFileFile__contentpage__visualizer__slidecontainer__chevron'>
+          <div className='wsFileFile__contentpage__preview__slider__icon'>
             <i className='fa fa-chevron-right' />
           </div>
         </div>
-        <div className='wsFileFile__contentpage__visualizer__sidebar' onClick={this.handleClickSidebar}>
-          <div className='wsFileFile__contentpage__visualizer__sidebar__visiblepart'>
-            <div className='wsFileFile__contentpage__visualizer__sidebar__visiblepart__icon'>
+        <div className='wsFileFile__contentpage__preview__sidebar' onClick={this.handleClickSidebar}>
+          <div className='wsFileFile__contentpage__preview__sidebar__button'>
+            <div className='wsFileFile__contentpage__preview__sidebar__button__icon'>
               <i className='fa fa-gear' />
             </div>
-            <div className='wsFileFile__contentpage__visualizer__sidebar__visiblepart__title'>
+            <div className='wsFileFile__contentpage__preview__sidebar__button__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 className='wsFileFile__contentpage__preview__sidebar__property'>
+            <div className='wsFileFile__contentpage__preview__sidebar__property__detail'>
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__label'>
+                  Fichier :
+              </div>
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__info'>
+                  Planning Intégration de Tracim
+              </div>
+
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__label'>
+                  Description :
+              </div>
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__info'>
+                  Fichier excel et pdf du planning
+              </div>
+
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__label'>
+                  Taille :
+              </div>
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__info'>
+                  500ko
+              </div>
+
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__label'>
+                  Equipe :
+              </div>
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__info'>
+                  Bastien, Côme, Damien, Philippe.
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/css/File.styl

@@ -24,12 +24,12 @@
   &__contentpage
     display flex
     height 100%
-    &__visualizer
+    &__preview
       position relative
       margin 10px
       border-radius 10px
-      width 70%
-      height calc(100% - 150px)
+      width 60%
+      height calc(100% - 150px) // margin + height of header and option
       background-color off-white
       &__sidebar
         position absolute
@@ -37,13 +37,14 @@
         right 0
         width 50px
         height 100%
-        transition width 1s ease
-        &__visiblepart
+        background-color off-white
+        transition width 0.5s
+        &__button
           display flex
           flex-direction column
           align-items center
-          border-top-right-radius 10px
-          border-bottom-right-radius 10px
+          // border-top-right-radius 10px
+          // border-bottom-right-radius 10px
           width 50px
           height 100%
           background-color grey
@@ -58,93 +59,70 @@
             margin-top 45px
             color white
             transform rotate(-90deg)
-        &__propertydetail
+        &__property
           display none
+          &__detail
+            &__label
+              font-size 18px
+              text-decoration underline
+            &__info
+              margin 10px 0 25px 0
       &__dloption
         display flex
-        margin-left calc(50% - 50px) // 50px => width/2 of the div
+        justify-content center
         padding-top 10px
-        width 100px
         &__icon
           margin-right 20px
           font-size 20px
           cursor pointer
-      &__slidecontainer
+          &:hover , &:focus
+            font-size 25px
+            color fileColor
+      &__slider
         display flex
         align-items center
         width calc(100% - 50px) // 50px => width of sidebar
         height calc(100% - 40px) // 40px => height of dloption
         &__fileimg
           display flex
+          flex-direction column
+          justify-content center
           padding 30px
           width 100%
           height 100%
           & > img
             max-height 100%
             max-width 100%
-        &__chevron
+        &__icon
           margin 0 5px
           font-size 20px
           cursor pointer
     &__wrapper
-      margin 10px
-      border-radius 10px
-      width 45%
-      height calc(100% - 150px)
-      background-color off-white
+      width 40%
+      height calc(100% - 150px) // margin + height of header and option
       overflow-Y auto
       .timeline
-        &__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 fileColor
-              & > i
-                margin-right 10px
-                color dark-grey
-                font-size 22px
-              &:hover
-                background-color lightFileColor
-              &:focus
+              &:hover , &:focus
                 background-color lightFileColor
-            &__date
-              color fontColor
-              font-size 17px
         &__texteditor
           &__simpletext
             &__input
               &:focus
-                color htmlColor
-                border-color htmlColor
+                color fileColor
+                border-color fileColor
           &__submit
             &__btn
-              border-color htmlColor
-              background-color htmlColor
+              border-color fileColor
+              background-color fileColor
               color white
-              &:hover
-                border-color htmlColor
-                background-color htmlColor
-              &:focus
-                border-color htmlColor
-                background-color htmlColor
+              &:hover , &:focus
+                border-color fileColor
+                background-color fileColor
 
 /***** SENDER RECEIVER *****/
 
@@ -155,53 +133,50 @@
 /***** ACTIVE SIDEBAR *****/
 
 .activesidebar
-  .wsFileFile__contentpage__visualizer
+  .wsFileFile__contentpage__preview
     &__sidebar
       display flex
-      border-top-right-radius 10px
-      border-bottom-right-radius 10px
+      border-radius 0 10px 10px 0
       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
+      &__button
+        // border-radius 10px 0 0 10px
         background-color fileColor
-      &__propertydetail
+      &__property
         display flex
-        order 2
         padding 20px
         overflow-Y auto
         color fileColor
 
 /****** MEDIA QUERIES ********/
 
+// Regroup the common css rules mediaqueries into a single media to lighten the code
+
 @media (min-width: max-xs) and (max-width: max-lg)
 
   .wsFileFile
     overflow-Y auto
     &__contentpage
       display block
-      &__visualizer
+      &__preview
         display flex
         flex-direction column
-        width calc(100% - 30px) // 20px => margin
-      .timeline
-        width calc(100% - 30px) // 20px => margin
-        &__texteditor
-          &__simpletext
-            display inline-flex
-            width 60%
-          &__submit
-            display inline-flex
-            margin 10px 0
-            &__btn
-              display flex
-              margin-left 35px
-              &__icon
-                margin-left 15px
+        width calc(100% - 30px) // 30px => margin
+      &__wrapper
+        width calc(100% - 30px) // 30px => margin
+        .timeline
+          &__texteditor
+            &__simpletext
+              display inline-flex
+              width 60%
+            &__submit
+              display inline-flex
+              margin 10px 0
+              &__btn
+                display flex
+                margin-left 35px
+                &__icon
+                  margin-left 15px
 
 /**** MEDIA 992px & 1199px ****/
 
@@ -229,7 +204,7 @@
   .wsFileFile
     top 69px
     width 100%
-    height calc(100% - 69px)
+    height calc(100% - 69px) // 69px => top rules
     overflow-Y scroll
 
 /******************************/
@@ -239,14 +214,14 @@
 @media (max-width: max-xs)
 
   .activesidebar
-    .wsFileFile__contentpage__visualizer
+    .wsFileFile__contentpage__preview
       &__sidebar
         width 350px
 
   .wsFileFile
     top 69px
     width 100%
-    height calc(100% - 69px)
+    height calc(100% - 69px) // 69px => top rules
     overflow-Y scroll
     &__option__menu__addversion
         padding 8px 5px
@@ -254,21 +229,22 @@
           display none
     &__contentpage
       display block
-      &__visualizer
+      &__preview
         display flex
         flex-direction column
-        width calc(100% - 30px) // 20px => margin
-      .timeline
-        width calc(100% - 30px) // 20px => margin
-        &__texteditor
-          &__simpletext
-            display inline-flex
-            width 60%
-          &__submit
-            display inline-flex
-            margin 10px 0
-            &__btn
-              display flex
-              margin-left 35px
-              &__icon
-                margin-left 15px
+        width calc(100% - 30px) // 30px => margin
+      &__wrapper
+        width calc(100% - 30px) // 30px => margin
+        .timeline
+          &__texteditor
+            &__simpletext
+              display inline-flex
+              width 60%
+            &__submit
+              display inline-flex
+              margin 10px 0
+              &__btn
+                display flex
+                margin-left 35px
+                &__icon
+                  margin-left 15px

src/css/Generic.styl

@@ -125,6 +125,10 @@
       color white
       font-size 20px
       cursor pointer
+      &:hover , &:focus
+        border 1px solid off-white
+        padding 0 10px
+        border-radius 5px
     &__close
       border 1px solid white
       border-radius 5px
@@ -137,7 +141,6 @@
     border-bottom 1px solid grey
     padding 10px
     height 58px
-    text-align right
     background-color off-white
     & > i
       vertical-align middle
@@ -145,10 +148,9 @@
       font-size 25px
       cursor pointer
     &__menu
-      display inline-block
-      vertical-align middle
+      display flex
+      align-items center
       &__status
-        display inline-block
         margin-right 20px
         .current
           color blue
@@ -162,6 +164,7 @@
           border 1px solid grey
           width 150px
           background-color transparent
+          cursor pointer
           &::after
             color fontColor
           &:hover
@@ -174,13 +177,16 @@
             display flex
             justify-content space-between
             margin 5px 0
+            cursor pointer
             &:active
               background-color transparent
       &__action
-        display inline-block
         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/PagePreview.styl

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

src/css/Timeline.styl

@@ -1,9 +1,18 @@
 .timeline
+  margin 10px
+  &__header
+    border-radius 10px 10px 0 0
+    padding 15px
+    text-align center
+    font-size 20px
+    color dark-grey
+    background-color grey-hover
   &__messagelist
     flex 1 1 0
     margin-bottom 0
     padding-left 0
     border-bottom 1px solid grey
+    background-color off-white
     overflow-Y auto
     list-style none
     &__item
@@ -28,9 +37,23 @@
     &__version
       display flex
       justify-content space-between
+      margin-top 40px
       padding 10px 15px
       width 100%
+      background-color lightGrey
+      &__btn
+        padding 5px 25px
+        border-radius 5px
+        width 145px
+        color white
+        font-size 17px
+        & > i
+          margin-right 10px
+          color dark-grey
+          font-size 22px
       &__date
+        color fontColor
+        font-size 17px
         margin auto 0
   &__texteditor
     padding 2px
@@ -50,6 +73,8 @@
       &__btn
         display flex
         cursor pointer
+        &:hover , &:focus
+          box-shadow shadow-all-btn
         &__icon
           margin-left 10px
 

src/css/Variable.styl

@@ -50,6 +50,7 @@ shadow-right = 2px 2px 5px 0px #404040
 shadow-all = 1px 1px 5px 2px #ababab
 shadow-all-side-blue = 0px 0px 1px 1px lightBlue
 shadow-all-side-green = 0 0 1px 2px green
+shadow-all-btn = 0 0 3px 3px lightBlue
 
 /***********************/
 /**** MEDIA QUERIES ****/