about to refactor wrokspace .fileitem__rowfile border bottom

src/component/Login/LoginBtnForgotPw.jsx

@@ -12,7 +12,7 @@ const LoginBtnForgotPw = props => {
 
 export default LoginBtnForgotPw
 
-LoginBtnForgotPw.PropTypes = {
+LoginBtnForgotPw.propTypes = {
   customClass: PropTypes.string,
   label: PropTypes.string
 }

src/component/Login/LoginLogo.jsx

@@ -10,7 +10,7 @@ const Logo = props => {
 }
 export default Logo
 
-Logo.PropTypes = {
+Logo.propTypes = {
   logoSrc: PropTypes.string.isRequired,
   customClass: PropTypes.string
 }

src/component/Workspace/FileItem.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const FileItem = props => {
+  const iconType = (() => {
+    switch (props.type) {
+      case 'file':
+        return 'fa fa-file-text-o docandfile-color'
+      case 'chat':
+        return 'fa fa-comments talk-color'
+      case 'task':
+        return 'fa fa-list-ul task-color'
+    }
+  })()
+
+  const iconStatus = (() => {
+    switch (props.status) {
+      case 'current':
+        return 'fa fa-cogs current-color'
+      case 'validated':
+        return 'fa fa-check validated-color'
+      case 'canceled':
+        return 'fa fa-ban canceled-color'
+      case 'outdated':
+        return '' // @TODO
+    }
+  })()
+
+  return (
+    <div className={classnames('fileitem__rowfile', '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'>
+          <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'>
+            { props.name }
+          </div>
+          <div className='fileitem__rowfile__name__icons d-none d-md-flex'>
+            <div className='fileitem__rowfile__name__icons__download'>
+              <i className='fa fa-download' />
+            </div>
+            <div className='fileitem__rowfile__name__icons__archive'>
+              <i className='fa fa-archive' />
+            </div>
+            <div className='fileitem__rowfile__name__icons__delete'>
+              <i className='fa fa-trash-o' />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
+        <div className='fileitem__rowfile__status'>
+          <i className={iconStatus} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FileItem
+
+FileItem.propTypes = {
+  type: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  customClass: PropTypes.string,
+  name: PropTypes.string,
+  onClickItem: PropTypes.func
+}
+
+FileItem.defaultProps = {
+  name: '',
+  customClass: '',
+  onClickItem: () => {}
+}

src/component/Workspace/FileItemHeader.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+const FileItemHeader = props => {
+  return (
+    <div className='fileitem__header'>
+      <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
+        <div className='fileitem__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'>
+          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'>
+          Statut
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FileItemHeader

src/container/Folder.jsx → src/component/Workspace/Folder.jsx

@@ -1,4 +1,8 @@
 import React, { Component } from 'react'
+// import PropTypes from 'prop-types'
+// import classnames from 'classnames'
+
+// @TODO set Folder as a component, state open will come from parent container (which will come from redux)
 
 class Folder extends Component {
   constructor (props) {
@@ -10,6 +14,10 @@ class Folder extends Component {
   }
 
   handleClickToggleFolder = () => this.setState({open: !this.state.open})
+  handleClickNewFile = e => {
+    e.stopPropagation() // because we have a link inside a link (togler and newFile)
+    console.log('new file') // @TODO
+  }
 
   render () {
     return (
@@ -25,7 +33,7 @@ class Folder extends Component {
             <div className='folder__header__name__text'>
               Dossier Facture
             </div>
-            <div className='folder__header__name__addbtn'>
+            <div className='folder__header__name__addbtn' onClick={this.handleClickNewFile}>
               <div className='folder__header__name__addbtn__text btn btn-primary'>
                 créer ...
               </div>

src/container/FileItem.jsx

@@ -1,55 +0,0 @@
-import React, { Component } from 'react'
-
-class FileItem extends Component {
-  render () {
-    const { type, status, customClass } = this.props
-
-    let faClass = ''
-    if (type === 'file') faClass = 'fa fa-file-text-o docandfile-color'
-    else if (type === 'chat') faClass = 'fa fa-comments talk-color'
-    else if (type === 'task') faClass = 'fa fa-list-ul task-color'
-
-    let iconStatus = ''
-    if (status === 'current') iconStatus = 'fa fa-cogs current-color'
-    else if (status === 'nouse') iconStatus = 'fa fa-ban nouse-color'
-    else if (status === 'check') iconStatus = 'fa fa-check check-color'
-
-    let classInFolder = ''
-    if (customClass === 'inFolder') classInFolder = 'inFolder'
-
-    return (
-      <div className={'fileitem__rowfile align-items-center ' + (classInFolder)} onClick={this.props.onClickElement}>
-        <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
-          <div className='fileitem__rowfile__type'>
-            <i className={faClass} />
-          </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'>
-              { this.props.name }
-            </div>
-            <div className='fileitem__rowfile__name__icons d-none d-md-flex'>
-              <div className='fileitem__rowfile__name__icons__download'>
-                <i className='fa fa-download' />
-              </div>
-              <div className='fileitem__rowfile__name__icons__archive'>
-                <i className='fa fa-archive' />
-              </div>
-              <div className='fileitem__rowfile__name__icons__delete'>
-                <i className='fa fa-trash-o' />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
-          <div className='fileitem__rowfile__status'>
-            <i className={iconStatus} />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default FileItem

src/container/FileItemHeader.jsx

@@ -1,27 +0,0 @@
-import React, { Component } from 'react'
-
-class FileItemHeader extends Component {
-  render () {
-    return (
-      <div className='fileitemheader'>
-        <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
-          <div className='fileitemheader__type'>
-            Type
-          </div>
-        </div>
-        <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-10'>
-          <div className='fileitemheader__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='fileitemheader__status'>
-            Statut
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default FileItemHeader

src/container/Workspace.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import classnames from 'classnames'
-import Folder from './Folder.jsx'
-import FileItem from './FileItem.jsx'
-import FileItemHeader from './FileItemHeader.jsx'
+import Folder from '../component/Workspace/Folder.jsx'
+import FileItem from '../component/Workspace/FileItem.jsx'
+import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
 // import Chat from './Chat.jsx'
 // import PageText from './PageText.jsx'
 import PageWrapper from '../component/common/layout/PageWrapper.jsx'
@@ -35,19 +34,23 @@ class Workspace extends React.Component {
           <div className='workspace__content__fileandfolder'>
             <FileItemHeader />
 
-            <FileItem name='Facture 57841 - Pierre Maurice - 06/06/2017' type='file' status='current' />
             <FileItem
+              name='Facture 57841 - Pierre Maurice - 06/06/2017'
               type='file'
+              status='current'
+              onClickItem={() => this.setState({activeFileType: 'file'})}
+            />
+            <FileItem
               name='Facture 57840 - Jean-michel Chevalier - 04/09/2017'
-              status='check'
-              onClickElement={() => this.setState({activeFileType: 'file'})}
+              type='file'
+              status='validated'
+              onClickItem={() => this.setState({activeFileType: 'file'})}
             />
             <FileItem
-              type='chat'
               name='Discussions à propos du nouveau système de facturation'
-              status='nouse'
-              customClass='inFolder'
-              onClickElement={() => this.setState({activeFileType: 'chat'})}
+              type='chat'
+              status='canceled'
+              onClickItem={() => this.setState({activeFileType: 'chat'})}
             />
 
             <Folder>
@@ -66,7 +69,6 @@ class Workspace extends React.Component {
                 <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' />
               </Folder>
-              <FileItem type='file' name='Facture 57840 - Jean-michel Chevalier - 04/09/2017' status='check' customClass='inFolder' />
             </Folder>
           </div>
 

src/css/FileItemHeader.styl

@@ -1,15 +1,13 @@
-.fileitemheader
+.fileitem__header
   display flex
+  font-size 17px
   &__type
     padding 15px 0
     text-align center
-    font-size 17px
   &__name
     padding 15px 5px
     width 100%
-    font-size 17px
   &__status
     padding 15px 0
     width 100%
     text-align center
-    font-size 17px

src/css/Folder.styl

@@ -1,31 +1,21 @@
-/****** FOLDER CLOSE *******/
-
 folderclose()
   height 0
   visibility hidden
   opacity 0
   border 0
 
-/*****************************/
-
-/****** FOLDER OPEN *******/
-
 folderopen()
   height 100%
   opacity 1
   visibility visible
   transition opacity 1s
 
-/*****************************/
-
 .folder
   padding-left 30px
   &:last-child
     border-bottom 1px solid dark-blue
   & > .inFolder
     folderclose()
-    &:last-child
-      border-bottom 0
   & > .folder
     folderclose()
   &.active
@@ -40,6 +30,7 @@ folderopen()
         display block
         &__triangle
           display block
+
   &__header
     position relative
     display flex
@@ -50,9 +41,9 @@ folderopen()
     background-color light-grey
     cursor pointer
     &:hover
-      background-color hover
+      background-color hover-folder
       .folder__header__triangleborder__triangle
-        border-color hover transparent transparent transparent
+        border-color hover-folder transparent transparent transparent
     &__triangleborder
       display none
       position absolute
@@ -104,12 +95,7 @@ folderopen()
         & > i
           margin-right 15px
 
-/*****************************/
-
-/**** MEDIA 575px ****/
-
 @media (max-width: max-xs)
-
   .folder
     &__header
       &__triangleborder

src/css/Sidebar.styl

@@ -32,7 +32,7 @@ sidebar-width = 300px
     vertical-align top
 
 .sidebar
-  padding-top 87px
+  padding-top 85px
   &__btnnewworkspace
     margin-top 40px
     padding 10px

src/css/Variable.styl

@@ -7,7 +7,7 @@ light-blue = #569EDE // #569EDE light-blue
 opacity-blue = #82B2CC // #82B2CC  blue with light opacity
 off-white = #FDFDFD // #FDFDFD off-white
 dark-grey = #252525 // #252525 dark-grey
-hover = #9BC1EB // #9BC1EB hover on folder
+hover-folder = #9BC1EB // #9BC1EB hover on folder
 hover-files = rgba(155,193,235,0.2) // hover on files
 grey = #ABABAB // #ABABAB grey
 light-grey = #f0f0f0 // #f0f0f0 light grey
@@ -55,7 +55,7 @@ min-xl = 1200px
   color red
 .current-color
   color blue
-.nouse-color
+.canceled-color
   color dark-grey
-.check-color
+.validated-color
   color green