PopinFixedContent now have its right part hidable + Timeline handles hidable

package.json

     "mockapi": "node jsonserver/server.js",
     "servdev": "NODE_ENV=development webpack-dev-server --watch --colors --inline --hot --progress",
     "servdevwindoz": "set NODE_ENV=development&& webpack-dev-server --watch --colors --inline --hot --progress",
-    "servdev-dashboard": "NODE_ENV=development webpack-dashboard -m -p 9871 -- webpack-dev-server --watch --colors --inline --hot --progress",
+    "servdev-dashboard": "NODE_ENV=development webpack-dashboard -m -p 9870 -- webpack-dev-server --watch --colors --inline --hot --progress",
     "buildwindoz": "set NODE_ENV=production&& webpack -p",
     "build": "NODE_ENV=production webpack -p",
     "buildtracimlib": "NODE_ENV=production webpack -p && echo '/* eslint-disable */' | cat - dist/tracim_lib.js > temp && mv temp dist/tracim_lib.js && printf '\n/* eslint-enable */\n' >> dist/tracim_lib.js",

src/component/Input/SelectStatus/SelectStatus.jsx

         style={{color: props.selectedStatus ? props.selectedStatus.hexcolor : 'transparent'}}
         disabled={props.disabled}
       >
+        <span className='selectStatus__dropdownbtn__label'>Status :</span>
         {props.selectedStatus ? props.selectedStatus.label : ''}
         <div className='selectStatus__dropdownbtn__icon'>
           <i className={`fa fa-${props.selectedStatus ? props.selectedStatus.faIcon : ''}`} />

src/component/Input/SelectStatus/SelectStatus.styl

       color fontColor
     &:hover
       background-color transparent
+    &__label
+      margin-right 10px
+      color #333
     &__icon
       display inline-block
       margin 0 15px

src/component/PopinFixed/PopinFixed.styl

     display flex
     flex-wrap wrap
     // 209 = wsContentGeneric:top wsContentGeneric__header:height - wsContentGeneric__option:height
+    width 200% // to allow transform translateX of right part
     height calc(100% - 209px)
     &__left
-      width 55%
-      height calc(100% - 20px) // 20px => margin of timeline
+      transition width 0.4s ease
+      width 25%
+      height calc(100% - 10px) // 10px => margin of timeline
     &__right
-      width 45%
+      transition width 0.4s ease
+      width calc(25% - 10px)
       height calc(100% - 10px) // 10px => margin of timeline
 
+.rightPartClose
+  .wsContentGeneric__content__left
+    width calc(50% - 50px)
+  //.wsContentGeneric__content__right
+  //  width 50px // 50px is the width of the rightPart header (eg. timeline__header)
+
 @media (min-width: min-sm) and (max-width: max-lg)
 
   .wsContentGeneric__content

src/component/PopinFixed/PopinFixedContent.jsx

 import classnames from 'classnames'
 import PropTypes from 'prop-types'
 
-const PopinFixedContent = props => {
-  return props.children.length === 2
-    ? (
-      <div className={classnames('wsContentGeneric__content', `${props.customClass}__content`)}>
-        <div className={classnames('wsContentGeneric__content__left', `${props.customClass}__content__left`)}>
-          {props.children[0]}
-        </div>
+class PopinFixedContent extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      rightPartOpen: false
+    }
+  }
+
+  componentDidMount () {
+    if (this.props.showRightPartOnLoad) this.setState({rightPartOpen: true})
+  }
 
-        <div className={classnames('wsContentGeneric__content__right', `${props.customClass}__content__right`)}>
-          {props.children[1]}
+  handleToggleRightPart = () => {
+    this.setState(prev => ({rightPartOpen: !prev.rightPartOpen}))
+  }
+
+  render () {
+    return this.props.children.length === 2
+      ? (
+        <div className={classnames(
+          'wsContentGeneric__content',
+          `${this.props.customClass}__content`,
+          {'rightPartOpen': this.state.rightPartOpen, 'rightPartClose': !this.state.rightPartOpen}
+        )}>
+          <div className={classnames('wsContentGeneric__content__left', `${this.props.customClass}__content__left`)}>
+            {this.props.children[0]}
+          </div>
+
+          <div className={classnames('wsContentGeneric__content__right', `${this.props.customClass}__content__right`)}>
+            {React.cloneElement(this.props.children[1], {
+              toggleRightPart: this.handleToggleRightPart,
+              rightPartOpen: this.state.rightPartOpen
+            })}
+          </div>
         </div>
-      </div>
-    )
-    : (
-      <div className={classnames('wsContentGeneric__content', `${props.customClass}__content`)}>
-        { props.children }
-      </div>
-    )
+      )
+      : (
+        <div className={classnames('wsContentGeneric__content', `${this.props.customClass}__content`)}>
+          {this.props.children}
+        </div>
+      )
+  }
 }
 
 export default PopinFixedContent

src/component/Timeline/Comment.jsx

 const Comment = props => (
   <li className={classnames(
     `${props.customClass}__messagelist__item`,
-    'timeline__messagelist__item', {
+    'timeline__body__messagelist__item', {
       'received': props.fromMe, // @FIXME : invert names of class (received should be !fromMe)
       'sended': !props.fromMe
     }
   )}>
-    <div className={classnames(`${props.customClass}__messagelist__item__wrapper`, 'timeline__messagelist__item__wrapper')}>
-      <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
+    <div className={classnames(`${props.customClass}__messagelist__item__wrapper`, 'timeline__body__messagelist__item__wrapper')}>
+      <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__body__messagelist__item__avatar')}>
         {props.avatar ? <img src={props.avatar} /> : ''}
       </div>
     </div>
     <div
-      className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
+      className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__body__messagelist__item__createhour')}>
       {props.createdAt}
     </div>
     <div
-      className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}
+      className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__body__messagelist__item__content')}
       dangerouslySetInnerHTML={{__html: props.text}}
     />
   </li>

src/component/Timeline/Revision.jsx

 import classnames from 'classnames'
 
 const Revision = props => (
-  <li className={classnames(`${props.customClass}__messagelist__version`, 'timeline__messagelist__version')} >
+  <li className={classnames(`${props.customClass}__messagelist__version`, 'timeline__body__messagelist__version')} >
     <button
       type='button'
-      className={classnames(`${props.customClass}__messagelist__version__btn`, 'timeline__messagelist__version__btn btn')}
+      className={classnames(`${props.customClass}__messagelist__version__btn`, 'timeline__body__messagelist__version__btn btn')}
       onClick={props.onClickRevision}
     >
       <i className='fa fa-code-fork' />
       version {props.number}
     </button>
 
-    <div className={classnames(`${props.customClass}__messagelist__version__date`, 'timeline__messagelist__version__date')}>
+    <div className={classnames(`${props.customClass}__messagelist__version__date`, 'timeline__body__messagelist__version__date')}>
       Créé le {props.createdAt}
     </div>
   </li>

src/component/Timeline/Timeline.jsx

     }
 
     return (
-      <div className='timeline'>
+      <div className={classnames('timeline')}>
         {props.showHeader &&
-          <div className={classnames(`${props.customClass}__header`, 'timeline__header')}>
-            Timeline
+          <div
+            className={classnames(`${props.customClass}__header`, 'timeline__header')}
+            onClick={props.toggleRightPart}
+          >
+            <span className='timeline__header__text'>Timeline</span>
           </div>
         }
 
-        <ul className={classnames(`${props.customClass}__messagelist`, 'timeline__messagelist')}>
-          {props.timelineData.map(content => {
-            switch (content.timelineType) {
-              case 'comment':
-                return <Comment
-                  customClass={props.customClass}
-                  avatar={content.author.avatar_url}
-                  createdAt={content.created}
-                  text={content.raw_content}
-                  fromMe={props.loggedUser.user_id === content.author.user_id}
-                  key={`comment_${content.content_id}`}
-                />
+        <div className='timeline__body'>
+          <ul className={classnames(`${props.customClass}__messagelist`, 'timeline__body__messagelist')}>
+            {props.timelineData.map(content => {
+              switch (content.timelineType) {
+                case 'comment':
+                  return <Comment
+                    customClass={props.customClass}
+                    avatar={content.author.avatar_url}
+                    createdAt={content.created}
+                    text={content.raw_content}
+                    fromMe={props.loggedUser.user_id === content.author.user_id}
+                    key={`comment_${content.content_id}`}
+                  />
 
-              case 'revision':
-                return <Revision
-                  customClass={props.customClass}
-                  createdAt={content.created}
-                  number={content.number}
-                  key={`revision_${content.revision_id}`}
-                  onClickRevision={() => props.onClickRevisionBtn(content)}
-                />
-            }
-          })}
-          <li style={{visibility: 'hidden'}} ref={el => { this.timelineBottom = el }} />
-        </ul>
+                case 'revision':
+                  return <Revision
+                    customClass={props.customClass}
+                    createdAt={content.created}
+                    number={content.number}
+                    key={`revision_${content.revision_id}`}
+                    onClickRevision={() => props.onClickRevisionBtn(content)}
+                  />
+              }
+            })}
+            <li style={{visibility: 'hidden'}} ref={el => { this.timelineBottom = el }} />
+          </ul>
 
-        <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor')}>
-          <div className={classnames(`${props.customClass}__texteditor__textinput`, 'timeline__texteditor__textinput')}>
-            <textarea
-              id='wysiwygTimelineComment'
-              placeholder='Taper votre message ici'
-              value={props.newComment}
-              onChange={props.onChangeNewComment}
-              disabled={props.disableComment}
-            />
-          </div>
-
-          <div className={classnames(`${props.customClass}__texteditor__wrapper`, 'timeline__texteditor__wrapper')}>
-            <div className={classnames(`${props.customClass}__texteditor__advancedtext`, 'timeline__texteditor__advancedtext')}>
-              <button
-                type='button'
-                className={classnames(
-                  `${props.customClass}__texteditor__advancedtext__btn timeline__texteditor__advancedtext__btn btn btn-outline-primary`
-                )}
-                onClick={props.onClickWysiwygBtn}
+          <form className={classnames(`${props.customClass}__texteditor`, 'timeline__body__texteditor')}>
+            <div className={classnames(`${props.customClass}__texteditor__textinput`, 'timeline__body__texteditor__textinput')}>
+              <textarea
+                id='wysiwygTimelineComment'
+                placeholder='Taper votre message ici'
+                value={props.newComment}
+                onChange={props.onChangeNewComment}
                 disabled={props.disableComment}
-              >
-                {props.wysiwyg ? 'Texte Simple' : 'Texte Avancé'}
-              </button>
+              />
             </div>
 
-            <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit')}>
-              <button
-                type='button'
-                className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}
-                onClick={props.onClickValidateNewCommentBtn}
-                disabled={props.disableComment}
-              >
-                Envoyer
-                <div
-                  className={classnames(`${props.customClass}__texteditor__submit__btn__icon`, 'timeline__texteditor__submit__btn__icon')}>
-                  <i className='fa fa-paper-plane-o' />
-                </div>
-              </button>
+            <div className={classnames(`${props.customClass}__texteditor__wrapper`, 'timeline__body__texteditor__wrapper')}>
+              <div className={classnames(`${props.customClass}__texteditor__advancedtext`, 'timeline__body__texteditor__advancedtext')}>
+                <button
+                  type='button'
+                  className={classnames(
+                    `${props.customClass}__texteditor__advancedtext__btn timeline__body__texteditor__advancedtext__btn btn btn-outline-primary`
+                  )}
+                  onClick={props.onClickWysiwygBtn}
+                  disabled={props.disableComment}
+                >
+                  {props.wysiwyg ? 'Texte Simple' : 'Texte Avancé'}
+                </button>
+              </div>
+
+              <div className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__body__texteditor__submit')}>
+                <button
+                  type='button'
+                  className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__body__texteditor__submit__btn btn')}
+                  onClick={props.onClickValidateNewCommentBtn}
+                  disabled={props.disableComment}
+                >
+                  Envoyer
+                  <div
+                    className={classnames(`${props.customClass}__texteditor__submit__btn__icon`, 'timeline__body__texteditor__submit__btn__icon')}>
+                    <i className='fa fa-paper-plane-o' />
+                  </div>
+                </button>
+              </div>
             </div>
-          </div>
-        </form>
+          </form>
+        </div>
       </div>
     )
   }

src/component/Timeline/Timeline.styl

 
 .timeline
   display flex
-  flex-direction column
+  flex-direction row
   margin 10px 10px 10px 5px
   border-radius 10px
   width 100%
   height 100%
   &__header
-    flex 0 1 auto
-    border-radius 10px 10px 0 0
+    display flex
+    width 50px
+    border-radius 10px 0 0 10px
     padding 15px
+    background-color grey-hover
     text-align center
     font-size 20px
     color darkGrey
-    background-color grey-hover
-  &__messagelist
-    flex 1 1 auto
-    margin-bottom 0
-    padding-left 0
-    border-bottom 1px solid grey
-    background-color off-white
-    overflow-y auto
-    list-style none
-    &__item
-      padding 0 25px 0 35px
-      &__avatar
-        position relative
-        top 40px
-        left -20px
-        border-radius 50%
-        width 45px
-        height 45px
-        & > img
+    cursor pointer
+    &__text
+      margin auto 0 auto -25px
+      transform rotate(-90deg)
+  &__body
+    display flex
+    flex-direction column
+    width 100%
+    &__messagelist
+      flex 1 1 auto
+      margin-bottom 0
+      padding-left 0
+      border-bottom 1px solid grey
+      background-color off-white
+      overflow-y auto
+      list-style none
+      &__item
+        padding 0 25px 0 35px
+        &__avatar
+          position relative
+          top 40px
+          left -20px
+          border-radius 50%
           width 45px
           height 45px
-          border-radius 25px
-      &__createhour
-        margin-left 35px
-        opacity 0.7
-        font-size 14px
-      &__content
-        display inline-block
-        border 1px solid grey
-        border-radius 5px
-        padding 15px
-        background-color off-white
-        font-size 15px
-    &__version
-      display flex
-      justify-content space-between
-      margin 20px 0 20px 0
-      padding 10px 15px
-      width 100%
-      background-color lightGrey
-      &__btn
+          & > img
+            width 45px
+            height 45px
+            border-radius 25px
+        &__createhour
+          margin-left 35px
+          opacity 0.7
+          font-size 14px
+        &__content
+          display inline-block
+          border 1px solid grey
+          border-radius 5px
+          padding 15px
+          background-color off-white
+          font-size 15px
+      &__version
         display flex
-        justify-content center
-        padding 5px 20px
-        border-radius 5px
-        width 145px
-        color white
-        font-size 17px
-        cursor pointer
-        & > i
-          margin-right 10px
-          color off-white
-          font-size 22px
-      &__date
-        color fontColor
-        font-size 17px
-        margin auto 0
-  &__texteditor
-    flex 1 0 auto
-    margin 20px
-    &__textinput
-      width 100%
-      & > textarea
-        border-radius 5px
-        border 1.5px solid grey
-        padding 5px
-        height 80px
+        justify-content space-between
+        margin 20px 0 20px 0
+        padding 10px 15px
         width 100%
-    &__wrapper
-      display flex
-      align-items center
-      justify-content flex-end
-      margin-top 10px
-    &__advancedtext
-      margin-right 15px
-      cursor pointer
-    &__submit
-      &__btn
-        display inline-block
+        background-color lightGrey
+        &__btn
+          display flex
+          justify-content center
+          padding 5px 20px
+          border-radius 5px
+          width 145px
+          color white
+          font-size 17px
+          cursor pointer
+          & > i
+            margin-right 10px
+            color off-white
+            font-size 22px
+        &__date
+          color fontColor
+          font-size 17px
+          margin auto 0
+    &__texteditor
+      flex 1 0 auto
+      margin 20px
+      &__textinput
+        width 100%
+        & > textarea
+          border-radius 5px
+          border 1.5px solid grey
+          padding 5px
+          height 80px
+          width 100%
+      &__wrapper
+        display flex
+        align-items center
+        justify-content flex-end
+        margin-top 10px
+      &__advancedtext
+        margin-right 15px
         cursor pointer
-        &__icon
+      &__submit
+        &__btn
           display inline-block
-          margin-left 20px
+          cursor pointer
+          &__icon
+            display inline-block
+            margin-left 20px
 
 .received
   text-align right
-  .timeline__messagelist__item
+  .timeline__body__messagelist__item
     &__wrapper
       display flex
       flex-direction row-reverse
 
 @media (min-width: min-sm) and (max-width: max-lg)
 
-  .timeline
+  .timeline__body
     &__messagelist
       min-height 350px
       max-height 700px
 
 @media (min-width: min-sm) and (max-width: max-sm)
 
-  .timeline
+  .timeline__body
     &__messagelist__item
       margin-right 35px
     &__texteditor
 
 @media (max-width: max-xs)
 
-  .timeline
+  .timeline__body
     &__texteditor
       display flex
       align-items center

src/index.dev.js

 import CardPopupCreateContent from './component/CardPopup/CardPopupCreateContent.jsx'
 
 ReactDOM.render(
-  <div>
+  <div style={{width: '1200px'}}>
     <PopinFixed customClass={`${'randomClass'}`}>
       <PopinFixedHeader
         customClass={`${'randomClass'}`}
           {/* <TextAreaApp customClass={'randomClass'} text={'woot'} /> */}
         </div>
 
-        {/*
         <Timeline
           customClass={`${'randomClass'}__contentpage`}
           loggedUser={{
-            id: 1,
-            name: 'smoi',
-            avatar: 'https://www.algoo.fr/static/images/algoo_images/algoo-logo.jpg'
+            user_id: 5,
+            username: 'Smoi',
+            firstname: 'Côme',
+            lastname: 'Stoilenom',
+            email: 'osef@algoo.fr',
+            avatar_url: 'https://avatars3.githubusercontent.com/u/11177014?s=460&v=4'
           }}
           timelineData={TimelineDebugData}
+          newComment={''}
+          disableComment={false}
+          wysiwyg={false}
+          onChangeNewComment={() => {}}
+          onClickValidateNewCommentBtn={() => {}}
+          onClickWysiwygBtn={() => {}}
+          onClickRevisionBtn={() => {}}
+          shouldScrollToBottom={true}
         />
-        */}
       </PopinFixedContent>
     </PopinFixed>
   </div>