change the description in sidebar + add edit mode on this description in the File page

src/component/Workspace/FileType/File.jsx

@@ -49,32 +49,20 @@ class File extends Component {
           </div>
           <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 className='wsFileFile__contentpage__preview__sidebar__property__detail__size'>
+                Taille : 500Ko
               </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'>
+              <div className='wsFileFile__contentpage__preview__sidebar__property__detail__description'>
+                <label>
                   Description :
+                </label>
+                <form className='wsFileFile__contentpage__preview__sidebar__property__detail__description__editiondesc'>
+                  <textarea />
+                  <input type='submit' className='wsFileFile__contentpage__preview__sidebar__property__detail__description__editiondesc__validate form-control' />
+                </form>
               </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 className='wsFileFile__contentpage__preview__sidebar__property__detail__btndesc btn btn-primary'>
+                Changer la Description
               </div>
             </div>
           </div>

src/css/File.styl

@@ -3,6 +3,8 @@
   height calc(100% - 85px)
   &__header
     background-color fileColor
+    &__editionmode
+      display none
     .fa-file-image-o
       color white
   &__option
@@ -63,11 +65,22 @@
           &__detail
             padding 20px
             width 410px
-            &__label
-              font-size 18px
-              text-decoration underline
-            &__info
-              margin 10px 0 25px 0
+            &__size
+              margin-bottom 20px
+            &__description
+              &__editiondesc
+                display none
+                margin 20px 0
+                textarea
+                  width 100%
+                  height 250px
+                &__validate
+                  margin 30px auto
+                  width 150px
+            &__btndesc
+              display block
+              margin 15px 0
+              width 200px
       &__dloption
         display flex
         justify-content center
@@ -77,7 +90,6 @@
           font-size 20px
           cursor pointer
           &:hover , &:focus
-            font-size 25px
             color fileColor
       &__slider
         display flex
@@ -144,6 +156,21 @@
         overflow-Y auto
         color fileColor
 
+.activeEditionTitle
+  .wsFileFile__header
+    &__editionmode
+      display block
+    &__title
+      display none
+
+.activeEditionDesc
+  .wsFileFile__contentpage__preview__sidebar__property__detail
+    &__description
+      &__editiondesc
+        display block
+    &__btndesc
+      display none
+
 /****** MEDIA QUERIES ********/
 
 // Regroup the common css rules mediaqueries into a single media to lighten the code