merge alexicauvin into plugin_external

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

             <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'>
+                          <div className='notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </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'>
+                          <div className='notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </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'>
+                          <div className='notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </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'>
+                          <div className='notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </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'>
+                          <div className='notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </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'>
+                          <div className='notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </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'>
+                          <div className='notification__table__btnswitch'>
                             <BtnSwitch />
                           </div>
                         </td>

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
+
+
+/***** EDITION MODE  ******/
+
+.editiontitle
+  width 60%
+
+.editionmode
+  display flex
+  flex-direction column
+  align-items center
+  &__text
+    margin-bottom 25px
+    width 100%
+    height 400px
+  &__submit
+    border 1px solid blue
+    box-shadow none
+    border-radius 10px
+    padding 8px 45px
+    background-color transparent
+    color blue
+    &:hover, &:focus
+      background-color blue
+      color off-white
+

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 darkGrey
-        background-color grey-hover
-      &__messagelist
-        min-height 300px
-        &__item
-          &__content
-            color darkGrey
-        &__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 darkGrey
-              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/index.styl

 @import 'AccountPage.styl'
 @import 'btnSwtich.styl'
 
-// @import 'UploadPopup'
-// @import 'ProgressBar'
+@import 'UploadPopup'
+@import 'ProgressBar'
+

src/plugin/ContentType/PageHtml/PageHtml.styl

   overflow-Y auto
   &__header
     background-color htmlColor
+    &__editionmode
+      display none
     &__icon
       .fa-file-word-o
         color white
         opacity 0.7
       &__text
         font-size 14px
+      &__edition
+        display none
     &__messagelist
       min-height 300px
       &__item
 
 .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

     <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>
   )
 }

src/plugin/ContentType/Thread/Thread.styl

   &__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
       background-color darkBlue
       color white
 
+.activeEditionTitle
+  .wsFileThread
+    &__header
+      &__editionmode
+        display block
+      &__title
+        display none
+
 @media (min-width: max-xs) and (max-width: max-lg)
   .wsContentThread
     &__texteditor