test border 1px; border-top 0

src/component/Workspace/FileItem.jsx

@@ -28,25 +28,25 @@ const FileItem = props => {
   })()
 
   return (
-    <div className={classnames('fileitem__rowfile', 'align-items-center', props.customClass)} onClick={props.onClickItem}>
+    <div className={classnames('file', 'align-items-center', props.customClass)} onClick={props.onClickItem}>
       <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
-        <div className='fileitem__rowfile__type'>
+        <div className='file__type'>
           <i className={iconType} />
         </div>
       </div>
       <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-10'>
-        <div className='fileitem__rowfile__name'>
-          <div className='fileitem__rowfile__name__text'>
+        <div className='file__name'>
+          <div className='file__name__text'>
             { props.name }
           </div>
-          <div className='fileitem__rowfile__name__icons d-none d-md-flex'>
-            <div className='fileitem__rowfile__name__icons__download'>
+          <div className='file__name__icons d-none d-md-flex'>
+            <div className='file__name__icons__download'>
               <i className='fa fa-download' />
             </div>
-            <div className='fileitem__rowfile__name__icons__archive'>
+            <div className='file__name__icons__archive'>
               <i className='fa fa-archive' />
             </div>
-            <div className='fileitem__rowfile__name__icons__delete'>
+            <div className='file__name__icons__delete'>
               <i className='fa fa-trash-o' />
             </div>
           </div>

src/component/Workspace/FileItemHeader.jsx

@@ -2,19 +2,19 @@ import React from 'react'
 
 const FileItemHeader = props => {
   return (
-    <div className='fileitem__header'>
+    <div className='file__header'>
       <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
-        <div className='fileitem__header__type'>
+        <div className='file__header__type'>
           Type
         </div>
       </div>
       <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-10'>
-        <div className='fileitem__header__name'>
+        <div className='file__header__name'>
           Nom du document ou fichier
         </div>
       </div>
       <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
-        <div className='fileitem__header__status'>
+        <div className='file__header__status'>
           Statut
         </div>
       </div>

src/component/Workspace/Folder.jsx

@@ -50,7 +50,10 @@ class Folder extends Component {
             </div>
           </div>
         </div>
-        { this.props.children }
+
+        <div className='folder__content'>
+          { this.props.children }
+        </div>
       </div>
     )
   }

src/container/Chat.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import classnames from 'classnames'
-import imgProfil from '../img/img_profil.png'
+import imgProfil from '../img/imgProfil.png'
 
 class Chat extends Component {
   render () {

src/container/Workspace.jsx

@@ -31,7 +31,7 @@ class Workspace extends React.Component {
 
         <PageContent parentClass='workspace__content'>
 
-          <div className='workspace__content__fileandfolder'>
+          <div className='workspace__content__fileandfolder folder active'>
             <FileItemHeader />
 
             <FileItem
@@ -54,20 +54,22 @@ class Workspace extends React.Component {
             />
 
             <Folder>
-              <FileItem type='file' name='Facture 57839 - Société ABC - 01/09/2017' status='current' customClass='inFolder' />
-              <FileItem type='file' name='Facture 57839 - Société ABC - 01/09/2017' status='current' customClass='inFolder' />
-              <FileItem type='task' name='Editer la facture pour Phillipe GIRARD' status='check' customClass='inFolder' />
+              <FileItem type='file' name='Facture 57839 - Société ABC - 01/09/2017' status='current' />
+              <FileItem type='file' name='Facture 57839 - Société ABC - 01/09/2017' status='current' />
+              <FileItem type='task' name='Editer la facture pour Phillipe GIRARD' status='check' />
 
               <Folder>
-                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='nouse' customClass='inFolder' />
-                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='check' customClass='inFolder' />
+                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='nouse' />
+                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='check' />
               </Folder>
-              <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' customClass='inFolder' />
-              <FileItem type='file' name='Facture 57840 - Jean-michel Chevalier - 04/09/2017' status='check' customClass='inFolder' />
-              <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' customClass='inFolder' />
+
+              <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' />
+              <FileItem type='file' name='Facture 57840 - Jean-michel Chevalier - 04/09/2017' status='check' />
+              <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' />
+
               <Folder>
-                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='nouse' customClass='inFolder' />
-                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='check' customClass='inFolder' />
+                <FileItem type='chat' name='Discussions à propos du nouveau système de facturation' status='nouse' />
+                <FileItem type='file' name='Facture 57537 - Claudia Martin - 14/08/2017' status='check' />
               </Folder>
             </Folder>
           </div>

src/css/FileItem.styl

@@ -1,11 +1,8 @@
-.fileitem__rowfile
+.file
   display flex
-  border 1px solid dark-blue
   border-bottom 0
   &:hover
     background-color hover-files
-  &:last-child
-    border-bottom 1px solid dark-blue
   &__type
     font-size 30px
     text-align center
@@ -31,7 +28,7 @@
     text-align center
 
 @media (min-width: max-xs) and (max-width: max-lg)
-  .fileitem__rowfile
+  .file
     border-right 1px solid grey
     &__name__icons
         margin-top 5px

src/css/FileItemHeader.styl

@@ -1,4 +1,4 @@
-.fileitem__header
+.file__header
   display flex
   font-size 17px
   &__type

src/css/Folder.styl

@@ -10,33 +10,43 @@ folderopen()
   visibility visible
   transition opacity 1s
 
+border-style = 1px solid dark-blue
+.folder__header
+  border border-style
+  border-top 0
+.file
+  border border-style
+  border-top 0
+.folder + .file
+  border-top border-style
+.folder:last-child > .folder__header
+  border-bottom border-style
+.folder:not(:last-child) > .folder__header
+  border-bottom border-style
+
 .folder
   padding-left 30px
-  &:last-child
-    border-bottom 1px solid dark-blue
-  & > .inFolder
-    folderclose()
-  & > .folder
+  & > .folder__header
+    folderopen()
+  & > .folder__content
     folderclose()
+    //& > .fileitem__rowfile, > .folder__header
+    //  folderclose()
   &.active
-    & > .inFolder
-      border 1px solid dark-blue
-      border-bottom 0
-      folderopen()
-    & > .folder
-      folderopen()
     & > .folder__header
       .folder__header__triangleborder
         display block
         &__triangle
           display block
+    & > .folder__content
+      folderopen()
+
 
   &__header
     position relative
     display flex
     justify-content space-between
     margin-left -30px
-    border 1px solid dark-blue
     border-bottom 0
     background-color light-grey
     cursor pointer
@@ -47,7 +57,7 @@ folderopen()
     &__triangleborder
       display none
       position absolute
-      top 61px
+      top 62px
       left -1px
       border-style solid
       border-width 25px 30px 0 30px