fixed folder display

jsonserver/static_db.json

@@ -157,6 +157,7 @@
         "workspace_id": 1,
         "title": "Programmation objet",
         "type": "folder",
+        "allowed_app": ["PageHtml", "Thread", "File", "PageMarkdown", "Task", "Issue"],
         "content": []
       }
     ]
@@ -184,6 +185,7 @@
       "workspace_id": 1,
       "title": "ticket à fixe",
       "type": "folder",
+      "allowed_app": ["PageHtml", "Thread", "File", "PageMarkdown", "Task", "Issue"],
       "content": []
     }
   ],

src/component/Workspace/FileItem.jsx

@@ -23,6 +23,7 @@ const FileItem = props => {
           <i className={props.icon} />
         </div>
       </div>
+
       <div className='col-8 col-sm-8 col-md-8 col-lg-8 col-xl-10'>
         <div className='file__name'>
           <div className='file__name__text'>
@@ -41,6 +42,7 @@ const FileItem = props => {
           </div>
         </div>
       </div>
+
       <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
         <div className='file__status'>
           <i className={iconStatus} />

src/component/Workspace/Folder.jsx

@@ -23,41 +23,48 @@ class Folder extends React.Component {
   }
 
   render () {
-    const { app, folderData: { title, content }, onClickItem, onClickFolder, isLast, t } = this.props
+    const { app, folderData, onClickItem, onClickFolder, isLast, t } = this.props
 
     return (
       <div className={classnames('folder', {'active': this.state.open, 'item-last': isLast})}>
-        <div className='folder__header' onClick={this.handleClickToggleFolder}>
+        <div className='folder__header align-items-center' onClick={this.handleClickToggleFolder}>
           <div className='folder__header__triangleborder'>
             <div className='folder__header__triangleborder__triangle' />
           </div>
-          <div className='folder__header__name'>
+
+          <div className='col-2 col-sm-2 col-md-2 col-lg-2 col-xl-1'>
             <div className='folder__header__name__icon'>
               <i className={classnames('fa', {'fa-folder-open-o': this.state.open, 'fa-folder-o': !this.state.open})} />
             </div>
-            <div className='folder__header__name__text'>
-              { title }
-            </div>
-            <div className='folder__header__name__addbtn' onClick={this.handleClickNewFile}>
-              <div className='folder__header__name__addbtn__text btn btn-primary'>
-                {t('Folder.create')} ...
+          </div>
+
+          <div className='col-5 col-sm-5 col-md-5 col-lg-6 col-xl-8'>
+            <div className='folder__header__name align-items-center'>
+              <div className='folder__header__name__text'>
+                { folderData.title }
+              </div>
+              <div className='folder__header__name__addbtn' onClick={this.handleClickNewFile}>
+                <div className='folder__header__name__addbtn__text btn btn-primary'>
+                  {t('Folder.create')} ...
+                </div>
               </div>
             </div>
           </div>
-          <div className='folder__header__contenttype'>
-            <div className='folder__header__contenttype__text'>
-              {t('Folder.content_type')} :
-            </div>
-            <div className='folder__header__contenttype__icon'>
-              <i className='fa fa-list-ul' />
-              <i className='fa fa-file-text-o' />
-              <i className='fa fa-comments' />
+
+          <div className='col-5 col-sm-5 col-md-5 col-lg-4 col-xl-3'>
+            <div className='folder__header__contenttype'>
+              <div className='folder__header__contenttype__text'>
+                {t('Folder.content_type')} :
+              </div>
+              <div className='folder__header__contenttype__icon'>
+                { folderData.allowed_app.map(a => <i className={app[a].icon} key={`${folderData.id}_${a}`} />)}
+              </div>
             </div>
           </div>
         </div>
 
         <div className='folder__content'>
-          { content.map((c, i) => c.type === 'folder'
+          { folderData.content.map((c, i) => c.type === 'folder'
             ? <Folder
               app={app}
               folderData={c}

src/css/FileItem.styl

@@ -5,6 +5,7 @@ iconrules()
 
 .file
   display flex
+  padding 10px 0
   border-bottom 0
   cursor pointer
   &:hover
@@ -15,7 +16,6 @@ iconrules()
   &__name
     display flex
     justify-content space-between
-    padding 15px 5px
     &__text
       margin-right 10px
       font-size 17px

src/css/Folder.styl

@@ -51,6 +51,7 @@ folderopen()
     justify-content space-between
     margin-left -30px
     border-bottom 0
+    padding 10px 0
     background-color lightGrey
     cursor pointer
     &:hover
@@ -60,7 +61,7 @@ folderopen()
     &__triangleborder
       display none
       position absolute
-      top 61px
+      bottom -25px
       left -1px
       border-style solid
       border-width 25px 30px 0 30px
@@ -76,13 +77,12 @@ folderopen()
         border-color lightGrey transparent transparent transparent
     &__name
       display flex
-      padding-left 5px
       &__icon
-        margin auto 15px
         font-size 25px
         color darkBlue
+        text-align center
       &__text
-        margin auto 15px auto 5px
+        margin 0 15px 0 0
         font-size 17px
         color darkBlue
       &__addbtn
@@ -94,32 +94,24 @@ folderopen()
           font-size 17px
     &__contenttype
       display flex
+      justify-content flex-end
       &__text
-        padding 18px 15px
         font-size 17px
         color darkBlue
       &__icon
-        padding 18px 5px
         font-size 17px
         color darkBlue
         & > i
-          margin-right 15px
+          margin-right 3px
 
 @media (min-width: min-sm) and (max-width: max-sm)
-
   .folder
-    &__header
-      padding 10px
-      &__triangleborder
-        top 59px
       &__contenttype
         display none
 
 @media (max-width: max-xs)
   .folder
     &__header
-      &__triangleborder
-        top 59px
       &__name
         &__icon
           padding 14px 15px