add an advanced button on the file and folder

src/component/BtnExtandedAction/ExtandedAction.jsx

@@ -0,0 +1,70 @@
+import React, { Component } from 'react'
+
+class ExtandedAction extends Component {
+  render () {
+    return (
+      <div className='extandedaction dropdown'>
+        <button
+          className='extandedaction__button btn btn-outline-primary dropdown-toggle'
+          onClick={this.props.onClickStopEvent}
+          type='button'
+          id='dropdownMenuButton'
+          data-toggle='dropdown'
+          aria-haspopup='true'
+          aria-expanded='false'
+        >
+          <i className='fa fa-fw fa-ellipsis-h' />
+        </button>
+        <div className='extandedaction__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
+          <div className='subdropdown__item dropdown-item d-flex align-items-center'>
+            <div className='subdropdown__item__icon mr-3'>
+              <i className='fa fa-fw fa-pencil' />
+            </div>
+            <div className='subdropdown__item__text'>
+              Modifier
+            </div>
+          </div>
+
+          <div className='subdropdown__item dropdown-item d-flex align-items-center'>
+            <div className='subdropdown__item__icon mr-3'>
+              <i className='fa fa-fw fa-arrows-alt' />
+            </div>
+            <div className='subdropdown__item__text'>
+              Déplacer
+            </div>
+          </div>
+
+          <div className='subdropdown__item dropdown-item d-flex align-items-center'>
+            <div className='subdropdown__item__icon mr-3'>
+              <i className='fa fa-fw fa-download' />
+            </div>
+            <div className='subdropdown__item__text'>
+              Télécharger
+            </div>
+          </div>
+
+          <div className='subdropdown__item dropdown-item d-flex align-items-center'>
+            <div className='subdropdown__item__icon mr-3'>
+              <i className='fa fa-fw fa-archive' />
+            </div>
+            <div className='subdropdown__item__text'>
+              Archiver
+            </div>
+          </div>
+
+          <div className='subdropdown__item dropdown-item d-flex align-items-center'>
+            <div className='subdropdown__item__icon mr-3'>
+              <i className='fa fa-fw fa-trash-o' />
+            </div>
+            <div className='subdropdown__item__text'>
+              Supprimer
+            </div>
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+}
+
+export default ExtandedAction

src/component/ExtandedActionComponent/BtnEditFolder.jsx

@@ -1,15 +0,0 @@
-import React, { Component } from 'react'
-
-class BtnEditFolder extends Component {
-  render () {
-    return (
-      <div className='btneditfolder'>
-        <div className='btneditfolder__button btn btn-outline-primary'>
-          Modifier le Dossier
-        </div>
-      </div>
-    )
-  }
-}
-
-export default BtnEditFolder

src/component/ExtandedActionComponent/ContentTypeList.jsx

@@ -1,62 +0,0 @@
-import React, { Component } from 'react'
-
-class ContentTypeList extends Component {
-  render () {
-    return (
-      <div className='contenttype'>
-        <ul className='contenttype__list'>
-          <li className='contenttype__list__item'>
-            <div className='contenttype__list__item__icon'>
-              <i className='fa fa-fw fa-file-text-o' />
-            </div>
-            <div className='contenttype__list__item__text'>
-              Page Html
-            </div>
-          </li>
-          <li className='contenttype__list__item'>
-            <div className='contenttype__list__item__icon'>
-              <i className='fa fa-fw fa-file-code-o' />
-            </div>
-            <div className='contenttype__list__item__text'>
-              Page markdown
-            </div>
-          </li>
-          <li className='contenttype__list__item'>
-            <div className='contenttype__list__item__icon'>
-              <i className='fa fa-fw fa-file-image-o' />
-            </div>
-            <div className='contenttype__list__item__text'>
-              Fichier
-            </div>
-          </li>
-          <li className='contenttype__list__item'>
-            <div className='contenttype__list__item__icon'>
-              <i className='fa fa-fw fa-comments-o' />
-            </div>
-            <div className='contenttype__list__item__text'>
-              Discussion
-            </div>
-          </li>
-          <li className='contenttype__list__item'>
-            <div className='contenttype__list__item__icon'>
-              <i className='fa fa-fw fa-list-ul' />
-            </div>
-            <div className='contenttype__list__item__text'>
-              Tâches
-            </div>
-          </li>
-          <li className='contenttype__list__item'>
-            <div className='contenttype__list__item__icon'>
-              <i className='fa fa-fw fa-ticket' />
-            </div>
-            <div className='contenttype__list__item__text'>
-              Ticket
-            </div>
-          </li>
-        </ul>
-      </div>
-    )
-  }
-}
-
-export default ContentTypeList

src/container/PopupExtandedAction.jsx

@@ -1,31 +0,0 @@
-import React, { Component } from 'react'
-import ContentTypeList from '../component/ExtandedActionComponent/ContentTypeList.jsx'
-import BtnEditFolder from '../component/ExtandedActionComponent/BtnEditFolder.jsx'
-
-class PopupExtandedAction extends Component {
-  render () {
-    return (
-      <div className='card extandedaction d-none d-md-block' style={{display: this.props.openExtandedAction ? 'block' : 'none'}}>
-        <div className='card-body extandedaction__content'>
-          <div className='extandedaction__content__close d-flex justify-content-end' onClick={this.props.onClickCloseBtn}>
-            <i className='fa fa-fw- fa-times' />
-          </div>
-          <div className='extandedaction__content__type'>
-            <div className='extandedaction__content__type__title'>
-              Type de contenu du dossier :
-            </div>
-            <ContentTypeList />
-          </div>
-          <div className='extandedaction__content__advancedfolder'>
-            <div className='extandedaction__content__advancedfolder__title'>
-              Activer l'édition du Dossier :
-            </div>
-            <BtnEditFolder />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default PopupExtandedAction

src/css/BtnEditFolder.styl

@@ -1,4 +0,0 @@
-.btneditfolder
-  margin 0 0 10px 10px
-  &__button
-    cursor pointer

src/css/ContentTypeList.styl

@@ -1,13 +0,0 @@
-.contenttype
-  margin-bottom 30px
-  &__list
-    display flex
-    flex-wrap wrap
-    margin 0
-    padding 0
-    list-style none
-    &__item
-      display flex
-      align-items center
-      padding 10px
-

src/css/ExtandedAction.styl

@@ -0,0 +1,8 @@
+.extandedaction
+  &__subdropdown
+    margin 0
+    padding 0
+    z-index 2
+    .subdropdown
+      &__item
+        padding 10px

src/css/PopupExtandedAction.styl

@@ -1,20 +0,0 @@
-titlerules()
-  margin 0 0 20px 10px
-  border-bottom 1px solid blue
-  padding-bottom 2px
-
-.extandedaction
-  position absolute
-  right 170px
-  z-index 1
-  &__content
-    &__close
-      cursor pointer
-    &__type
-      &__title
-        titlerules()
-        width 215px
-    &__advancedfolder
-      &__title
-        titlerules()
-        width 205px