Changing the display of files and folders in the workspace content page

jsonserver/static_db.json

@@ -105,7 +105,7 @@
         "id": 1,
         "parent_id": null,
         "workspace_id": 1,
-        "title": "Design v2",
+        "title": "Modification Design v2",
         "type": "PageHtml",
         "status": "validated"
       },
@@ -113,7 +113,7 @@
         "id": 2,
         "parent_id": null,
         "workspace_id": 1,
-        "title": "La programmation fonctionnelle est-elle vraiment utile ?",
+        "title": "Doit-on intégrer la nouvelle fonctionnalité de tracim maintenant ?",
         "type": "Thread",
         "status": "current"
       },
@@ -121,7 +121,7 @@
         "id": 6,
         "parent_id": null,
         "workspace_id": 1,
-        "title": "Une photo",
+        "title": "Maquette.png Tracim v3",
         "type": "File",
         "status": "outdated"
       },
@@ -145,7 +145,7 @@
         "id": 8,
         "parent_id": null,
         "workspace_id": 1,
-        "title": "Fixe du fichier css",
+        "title": "Correction du fichier css",
         "type": "Issue",
         "status": "current"
       },
@@ -153,7 +153,7 @@
         "id": 3,
         "parent_id": null,
         "workspace_id": 1,
-        "title": "Programmation objet",
+        "title": "Correction bug tracim",
         "type": "folder",
         "allowed_app": ["PageHtml", "Thread", "File", "PageMarkdown", "Task", "Issue"],
         "content": []
@@ -165,7 +165,7 @@
       "id": 4,
       "parent_id": 3,
       "workspace_id": 1,
-      "title": "Backend appli n°578",
+      "title": "Schema Backend tracim v2",
       "type": "File",
       "status": "outdated"
     },
@@ -173,7 +173,7 @@
       "id": 5,
       "parent_id": 3,
       "workspace_id": 1,
-      "title": "La programmation fonctionnelle",
+      "title": "Modification design v2",
       "type": "PageHtml",
       "status": "outdated"
     },
@@ -181,7 +181,7 @@
       "id": 11,
       "parent_id": 3,
       "workspace_id": 1,
-      "title": "ticket à fixe",
+      "title": "Correction à effectuer sur le frontend de Tracim v2",
       "type": "folder",
       "allowed_app": ["PageHtml", "Thread", "File", "PageMarkdown", "Task", "Issue"],
       "content": []
@@ -192,7 +192,7 @@
       "id": 12,
       "parent_id": 11,
       "workspace_id": 1,
-      "title": "ticket à fixe",
+      "title": "Liste des correction à effectuer",
       "type": "PageHtml",
       "status": "current"
     },
@@ -200,7 +200,7 @@
       "id": 13,
       "parent_id": 11,
       "workspace_id": 1,
-      "title": "issue n°555",
+      "title": "Ticket Prioritaire",
       "type": "Issue",
       "status": "current"
     }
@@ -260,7 +260,7 @@
   "content_data_pageHtml": {
     "id": "1",
     "type": "pageHtml",
-    "title": "La programmation fonctionnelle",
+    "title": "Modification Design v2",
     "status": "validated",
     "icon": "fa fa-fw fa-code-fork",
     "version": "version n°5",
@@ -274,7 +274,7 @@
   "content_data_thread": {
     "id": 2,
     "type": "thread",
-    "title": "La programmation fonctionnelle est-elle vraiment utile ?",
+    "title": "Doit-on intégrer la nouvelle fonctionnalité de tracim maintenant ?",
     "status": "validated",
     "message_list": [{
       "id": 0,
@@ -340,7 +340,7 @@
   },
   "workspace_list": [{
     "id": 0,
-    "title": "Ressources humaine"
+    "title": "Dev Tracim"
   }, {
     "id": 1,
     "title": "Marketing"

src/component/Workspace/FileItem.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import BtnExtandedAction from '../BtnExtandedAction/ExtandedAction.jsx'
 
 const FileItem = props => {
   const iconStatus = (() => {
@@ -50,33 +51,40 @@ const FileItem = props => {
         </div>
       </div>
 
-      <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-10'>
+      <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-9'>
         <div className='file__name'>
           <div className='file__name__text'>
             { props.name }
           </div>
-          <div className='file__name__icons d-none d-md-flex'>
-            <div className='file__name__icons__download'>
-              <i className='fa fa-download' />
-            </div>
-            <div className='file__name__icons__archive'>
-              <i className='fa fa-archive' />
-            </div>
-            <div className='file__name__icons__delete'>
-              <i className='fa fa-trash-o' />
-            </div>
+
+          <div className='d-none d-md-flex'>
+            <BtnExtandedAction />
           </div>
+
+          {/*
+            <div className='file__name__icons d-none d-md-flex'>
+              <div className='file__name__icons__download'>
+                <i className='fa fa-download' />
+              </div>
+              <div className='file__name__icons__archive'>
+                <i className='fa fa-archive' />
+              </div>
+              <div className='file__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={classnames('file__status') + colorStatus}>
-          <div className='file__status__text d-none d-lg-block text-center'>
-            {textStatus}
-          </div>
-          <div className='file__status__icon d-block d-lg-none text-center'>
+      <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2'>
+        <div className={classnames('file__status d-flex align-items-center justify-content-center') + colorStatus}>
+          <div className='file__status__icon d-block mr-3'>
             <i className={iconStatus} />
           </div>
+          <div className='file__status__text d-none d-xl-block'>
+            {textStatus}
+          </div>
         </div>
       </div>
     </div>

src/component/Workspace/FileItemHeader.jsx

@@ -9,12 +9,12 @@ const FileItemHeader = props => {
           {props.t('FileItemHeader.type')}
         </div>
       </div>
-      <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-10'>
+      <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-9'>
         <div className='file__header__name'>
           {props.t('FileItemHeader.document_name')}
         </div>
       </div>
-      <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
+      <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2'>
         <div className='file__header__status'>
           {props.t('FileItemHeader.status')}
         </div>

src/component/Workspace/Folder.jsx

@@ -3,14 +3,14 @@ import { translate } from 'react-i18next'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import FileItem from './FileItem.jsx'
-import PopupExtandedAction from '../../container/PopupExtandedAction.jsx'
+// import PopupExtandedAction from '../../container/PopupExtandedAction.jsx'
+import BtnExtandedAction from '../BtnExtandedAction/ExtandedAction.jsx'
 
 class Folder extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      open: false,
-      openExtandedAction: false
+      open: false
     }
   }
 
@@ -24,17 +24,9 @@ class Folder extends React.Component {
     console.log('new file') // @TODO
   }
 
-  handleClickModify = e => {
-    e.stopPropagation() // because we have a link inside a link (togler and newFile)
-    console.log('modifier') // @TODO
-  }
-
-  handleClickToggleExtandedAction = e => {
+  handleClickStopEvent = e => {
     e.stopPropagation()
-
-    this.setState(prevState => ({
-      openExtandedAction: !prevState.openExtandedAction
-    }))
+    console.log('stop')
   }
 
   render () {
@@ -60,7 +52,7 @@ class Folder extends React.Component {
             </div>
           </div>
 
-          <div className='col-10 col-sm-10 col-md-10 col-lg-10 col-xl-11'>
+          <div className='col-10 col-sm-10 col-md-8 col-lg-8 col-xl-9'>
             <div className='folder__header__name align-items-center justify-content-between'>
 
               <div className='folder__header__name__text'>
@@ -70,20 +62,9 @@ class Folder extends React.Component {
               <div className='folder__header__name__button d-flex align-items-center '>
 
                 <div
-                  className='folder__header__name__button__advancedbtn btn btn-outline-primary d-none d-md-block'
-                  onClick={this.handleClickToggleExtandedAction}
+                  className='folder__header__name__button__addbtn mx-4'
+                  onClick={this.handleClickNewFile}
                 >
-                  <i className='fa fa-fw fa-ellipsis-h' />
-                </div>
-
-                {this.state.openExtandedAction === true &&
-                  <PopupExtandedAction
-                    openExtandedAction={this.state.openExtandedAction}
-                    onClickCloseBtn={this.handleClickToggleExtandedAction}
-                  />
-                }
-
-                <div className='folder__header__name__button__addbtn mx-4' onClick={this.handleClickNewFile}>
                   <button className='addbtn__text btn btn-outline-primary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                     {t('Folder.create')} ...
                   </button>
@@ -95,7 +76,7 @@ class Folder extends React.Component {
                           <i className='fa fa-fw fa-folder-o' />
                         </div>
                         <div className='subdropdown__link__folder__text'>
-                          Créer un Dossier
+                          Créer un dossier
                         </div>
                       </div>
                     </div>
@@ -105,7 +86,7 @@ class Folder extends React.Component {
                           <i className='fa fa-fw fa-file-text-o' />
                         </div>
                         <div className='subdropdown__link__apphtml__text'>
-                          Créer une page Html
+                          Rédiger un document
                         </div>
                       </div>
                     </div>
@@ -125,7 +106,7 @@ class Folder extends React.Component {
                           <i className='fa fa-fw fa-file-code-o' />
                         </div>
                         <div className='subdropdown__link__appmarkdown__text'>
-                          Créer une page markdown
+                          Rédiger un document markdown
                         </div>
                       </div>
                     </div>
@@ -135,7 +116,7 @@ class Folder extends React.Component {
                           <i className='fa fa-fw fa-comments-o' />
                         </div>
                         <div className='subdropdown__link__appthread__text'>
-                          Créer une discussion
+                          Lancer une discussion
                         </div>
                       </div>
                     </div>
@@ -155,19 +136,26 @@ class Folder extends React.Component {
                           <i className='fa fa-fw fa-ticket' />
                         </div>
                         <div className='subdropdown__link__appissue__text'>
-                          Créer un ticket
+                          Ouvrir un ticket
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
 
+                <div className='d-none d-md-flex'>
+                  <BtnExtandedAction onClickStopEvent={this.handleClickStopEvent} />
+                </div>
+
               </div>
             </div>
           </div>
+
+          <div className='col-0 col-sm-0 col-md-2 col-lg-2 col-xl-2' />
+
         </div>
 
-          {/*
+        {/*
           <div className='col-5 col-sm-5 col-md-5 col-lg-4 col-xl-3 d-none'>
             <div className='folder__header__contenttype d-none d-sm-flex'>
               <div className='folder__header__contenttype__text d-none d-lg-flex'>