intregation of an extandedAction button and its popup on folder

src/component/ExtandedActionComponent/BtnEditFolder.jsx

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,62 @@
+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/component/Workspace/Folder.jsx

@@ -3,12 +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'
 
 class Folder extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      open: false
+      open: false,
+      openExtandedAction: false
     }
   }
 
@@ -22,6 +24,19 @@ 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 => {
+    e.stopPropagation()
+
+    this.setState(prevState => ({
+      openExtandedAction: !prevState.openExtandedAction
+    }))
+  }
+
   render () {
     const { app, folderData, onClickItem, onClickFolder, isLast, t } = this.props
 
@@ -38,22 +53,115 @@ class Folder extends React.Component {
             </div>
           </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='col-10 col-sm-10 col-md-10 col-lg-10 col-xl-11'>
+            <div className='folder__header__name align-items-center justify-content-between'>
+
               <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 className='folder__header__name__button d-flex align-items-center '>
+
+                {this.state.openExtandedAction === false &&
+                  <div>
+                    <div className='folder__header__name__button__advancedbtn btn btn-outline-primary d-none d-md-block' onClick={this.handleClickToggleExtandedAction}>
+                      <i className='fa fa-fw fa-ellipsis-h' />
+                    </div>
+                  </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>
+                  <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
+                    <div className='subdropdown__link dropdown-item'>
+                      <div className='subdropdown__link__folder d-flex align-items-center'>
+                        <div className='subdropdown__link__folder__icon mr-3'>
+                          <i className='fa fa-fw fa-folder-o' />
+                        </div>
+                        <div className='subdropdown__link__folder__text'>
+                          Créer un Dossier
+                        </div>
+                      </div>
+                    </div>
+                    <div className='subdropdown__link dropdown-item'>
+                      <div className='subdropdown__link__apphtml d-flex align-items-center'>
+                        <div className='subdropdown__link__apphtml__icon mr-3'>
+                          <i className='fa fa-fw fa-file-text-o' />
+                        </div>
+                        <div className='subdropdown__link__apphtml__text'>
+                          Créer une page Html
+                        </div>
+                      </div>
+                    </div>
+                    <div className='subdropdown__link dropdown-item'>
+                      <div className='subdropdown__link__appfile d-flex align-items-center'>
+                        <div className='subdropdown__link__appfile__icon mr-3'>
+                          <i className='fa fa-fw fa-file-image-o' />
+                        </div>
+                        <div className='subdropdown__link__appfile__text'>
+                          Importer un fichier
+                        </div>
+                      </div>
+                    </div>
+                    <div className='subdropdown__link dropdown-item'>
+                      <div className='subdropdown__link__appmarkdown d-flex align-items-center'>
+                        <div className='subdropdown__link__appmarkdown__icon mr-3'>
+                          <i className='fa fa-fw fa-file-code-o' />
+                        </div>
+                        <div className='subdropdown__link__appmarkdown__text'>
+                          Créer une page markdown
+                        </div>
+                      </div>
+                    </div>
+                    <div className='subdropdown__link dropdown-item'>
+                      <div className='subdropdown__link__appthread d-flex align-items-center'>
+                        <div className='subdropdown__link__appthread__icon mr-3'>
+                          <i className='fa fa-fw fa-comments-o' />
+                        </div>
+                        <div className='subdropdown__link__appthread__text'>
+                          Créer une discussion
+                        </div>
+                      </div>
+                    </div>
+                    <div className='subdropdown__link dropdown-item'>
+                      <div className='subdropdown__link__apptask d-flex align-items-center'>
+                        <div className='subdropdown__link__apptask__icon mr-3'>
+                          <i className='fa fa-fw fa-list-ul' />
+                        </div>
+                        <div className='subdropdown__link__apptask__text'>
+                          Créer une tâche
+                        </div>
+                      </div>
+                    </div>
+                    <div className='subdropdown__link dropdown-item'>
+                      <div className='subdropdown__link__appissue d-flex align-items-center'>
+                        <div className='subdropdown__link__appissue__icon mr-3'>
+                          <i className='fa fa-fw fa-ticket' />
+                        </div>
+                        <div className='subdropdown__link__appissue__text'>
+                          Créer un ticket
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
+
               </div>
             </div>
           </div>
 
-          <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'>
+          <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'>
                 {t('Folder.content_type')} :
               </div>
               <div className='folder__header__contenttype__icon'>

src/container/PopupExtandedAction.jsx

@@ -0,0 +1,31 @@
+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

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

src/css/ContentTypeList.styl

@@ -0,0 +1,13 @@
+.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/Folder.styl

@@ -83,15 +83,29 @@ folderopen()
         text-align center
       &__text
         margin 0 15px 0 0
+        white-space nowrap
+        text-overflow ellipsis
+        overflow hidden
+        width 400px
         font-size 17px
         color darkBlue
-      &__addbtn
-        margin auto 0
-        cursor pointer
-        &:hover > .folder__header__name__addbtn__text
-          color white
-        &__text
-          font-size 17px
+      &__button
+        &__advancedbtn
+          position relative
+        &__addbtn
+          margin auto 0
+          cursor pointer
+          &:hover > .folder__header__name__addbtn__text
+            color white
+          .addbtn
+            &__text
+              font-size 17px
+              &::after
+                margin-left 20px
+            &__subdropdown
+              padding 0
+              .subdropdown__link
+                padding 10px
     &__contenttype
       display flex
       justify-content flex-end
@@ -104,11 +118,6 @@ folderopen()
         & > i
           margin-right 3px
 
-@media (min-width: min-sm) and (max-width: max-sm)
-  .folder
-      &__contenttype
-        display none
-
 @media (max-width: max-xs)
   .folder
     &__header
@@ -118,5 +127,4 @@ folderopen()
           font-size 20px
         &__text
           font-size 15px
-      &__contenttype
-        display none
+

src/css/PopupExtandedAction.styl

@@ -0,0 +1,20 @@
+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

src/css/index.styl

@@ -34,3 +34,7 @@ html, body, #content
 
 @import 'Homepage'
 @import 'HomepageCard'
+
+@import 'PopupExtandedAction'
+@import 'ContentTypeList'
+@import 'BtnEditFolder'