added integration of timeline and beginning of ppage text

src/component/Timeline.jsx

@@ -0,0 +1,122 @@
+import React from 'react'
+import classnames from 'classnames'
+import imgProfilOrange from '../img/imgProfil_orange.png'
+import imgProfilReverse from '../img/imgProfil_reverse.png'
+
+const Timeline = props => {
+  return (
+    <div className='timeline'>
+      <div className={classnames(`${props.customClass}__header`, 'timeline__header')}>
+        Timeline
+      </div>
+
+      <ul className={classnames(`${props.customClass}__messagelist`, 'timeline__messagelist')}>
+
+        <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item sended')}>
+          <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
+            <img src={imgProfilOrange} alt='avatar'/>
+          </div>
+          <div
+            className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
+            27/11/17 à 11h45
+          </div>
+          <div
+            className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
+            Proident esse laboris in sed officia exercitation ut anim ea.
+          </div>
+        </li>
+
+        <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item received')}>
+          <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
+            <img src={imgProfilReverse} alt='avatar'/>
+          </div>
+          <div
+            className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
+            27/11/17 à 11h47
+          </div>
+          <div
+            className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
+            Proident esse laboris in sed officia exercitation ut anim ea.
+            Proident esse laboris in sed officia exercitation ut anim ea.
+            Proident esse laboris in sed officia exercitation ut anim ea.
+            Proident esse laboris in sed officia exercitation ut anim ea.
+            Proident esse laboris in sed officia exercitation ut anim ea.
+          </div>
+        </li>
+
+        <li className={classnames(`${props.customClass}__messagelist__version`, 'timeline__messagelist__version')}>
+          <div className={classnames(`${props.customClass}__messagelist__version__btn`, 'timeline__messagelist__version__btn btn')}>
+            <i className='fa fa-code-fork'/>
+            version 3
+          </div>
+          <div className={classnames(`${props.customClass}__messagelist__version__date`, 'timeline__messagelist__version__date')}>
+            Créer le 22/11/17
+          </div>
+        </li>
+
+        <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item sended')}>
+          <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
+            <img src={imgProfilOrange} alt='avatar'/>
+          </div>
+          <div
+            className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
+            27/11/17 à 11h45
+          </div>
+          <div
+            className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
+            Proident esse laboris in sed officia exercitation ut anim ea.
+          </div>
+        </li>
+
+        <li className={classnames(`${props.customClass}__messagelist__item`, 'timeline__messagelist__item received')}>
+          <div className={classnames(`${props.customClass}__messagelist__item__avatar`, 'timeline__messagelist__item__avatar')}>
+            <img src={imgProfilReverse} alt='avatar'/>
+          </div>
+          <div
+            className={classnames(`${props.customClass}__messagelist__item__createhour`, 'timeline__messagelist__item__createhour')}>
+            27/11/17 à 11h47
+          </div>
+          <div
+            className={classnames(`${props.customClass}__messagelist__item__content`, 'timeline__messagelist__item__content')}>
+            Proident esse laboris in sed officia exercitation ut anim ea.
+            Proident esse laboris in sed officia exercitation ut anim ea.
+            Proident esse laboris in sed officia exercitation ut anim ea.
+            Proident esse laboris in sed officia exercitation ut anim ea.
+            Proident esse laboris in sed officia exercitation ut anim ea.
+          </div>
+        </li>
+
+      </ul>
+      <form className={classnames(`${props.customClass}__texteditor`, 'timeline__texteditor')}>
+        <div
+          className={classnames(`${props.customClass}__texteditor__simpletext`, 'timeline__texteditor__simpletext input-group')}>
+          <input type='text'
+                 className={classnames(`${props.customClass}__texteditor__simpletext__input`, 'timeline__texteditor__simpletext__input form-control')}
+                 placeholder='...'/>
+          <div
+            className={classnames(`${props.customClass}__texteditor__simpletext__icon`, 'timeline__texteditor__simpletext__icon input-group-addon')}>
+            <i className='fa fa-font'/>
+          </div>
+        </div>
+        <div
+          className={classnames(`${props.customClass}__texteditor__wysiwyg`, 'timeline__texteditor__wysiwyg d-none d-xl-block')}>
+          <textarea/>
+        </div>
+        <div
+          className={classnames(`${props.customClass}__texteditor__submit`, 'timeline__texteditor__submit d-xl-flex justify-content-xl-center')}>
+          <button
+            type='submit'
+            className={classnames(`${props.customClass}__texteditor__submit__btn`, 'timeline__texteditor__submit__btn btn')}
+          >
+            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>
+      </form>
+    </div>
+  )
+}
+
+export default Timeline

src/component/common/PopinFixed/PopinFixed.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+const PopinFixed = props => {
+  return (
+    <div className={classnames('wsFileGeneric', props.customClass, {'visible': props.visible})}>
+      {props.children}
+    </div>
+  )
+}
+
+export default PopinFixed
+
+PopinFixed.propTypes = {
+  customClass: PropTypes.string,
+  visible: PropTypes.bool
+}
+
+PopinFixed.defaultProps = {
+  customClass: '',
+  visible: true
+}

src/component/common/PopinFixed/PopinFixedContent.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+const PopinFixedContent = props => {
+  return (
+    <div className={classnames('wsFileGeneric__contentpage', `${props.customClass}`)}>
+      <div className={classnames('wsFileGeneric__textnote', `${props.customClass}__textnote`)}>
+      </div>
+
+      <div className={classnames('wsFileGeneric__wrapper', `${props.customClass}__wrapper`)}>
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+export default PopinFixedContent
+
+PopinFixedContent.propTypes = {
+
+}

src/component/common/PopinFixed/PopinFixedHeader.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+const PopinFixedHeader = props => {
+  return (
+    <div className={classnames('wsFileGeneric__header', `${props.customClass}__header`)}>
+      <div className={classnames('wsFileGeneric__header__icon', `${props.customClass}__header__icon`)}>
+        <i className={props.icon} />
+      </div>
+
+      <div className={classnames('wsFileGeneric__header__title mr-auto', `${props.customClass}__header__title`)}>
+        {props.name}
+      </div>
+
+      <div className={classnames('wsFileGeneric__header__close', `${props.customClass}__header__close`)}>
+        <i className='fa fa-times' />
+      </div>
+    </div>
+  )
+}
+
+export default PopinFixedHeader
+
+PopinFixedHeader.propTypes = {
+  icon: PropTypes.string.isRequired,
+  customClass: PropTypes.string,
+  name: PropTypes.string
+}
+
+PopinFixedHeader.defaultProps = {
+  customClass: '',
+  name: ''
+}

src/component/common/PopinFixed/PopinFixedOption.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+const PopinFixedOption = props => {
+  return (
+    <div className='wsFileGeneric__option'>
+      <div className='wsFileGeneric__option__menu'>
+        <div className='wsFileGeneric__option__menu__action'>
+          <i className='fa fa-pencil' />
+        </div>
+        <div className='wsFileGeneric__option__menu__action'>
+          <i className='fa fa-archive' />
+        </div>
+        <div className='wsFileGeneric__option__menu__action'>
+          <i className='fa fa-trash' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PopinFixedOption
+
+PopinFixedOption.propTypes = {
+
+}

src/component/old_ConnectionForm.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-export const ConnectionForm = props => {
-  return (
-    <div>
-      { props.user.isLoggedIn
-        ? 'You are already logged in.'
-        : (
-          <div>
-            Login:
-            <input type='text' onChange={props.onChangeLogin} placeholder='Login' />
-            <input type='text' onChange={props.onChangePassword} placeholder='Password' />
-            <button type='button' onClick={props.onClickSubmit}>Connect</button>
-          </div>
-        )
-      }
-    </div>
-  )
-}
-
-ConnectionForm.PropTypes = {
-  user: PropTypes.shape({
-    isLoggedIn: PropTypes.bool.isRequired
-  }),
-  onChangeLogin: PropTypes.func,
-  onChangePassword: PropTypes.func,
-  onClickSubmit: PropTypes.func
-}

src/component/old_HeaderTpl.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Link } from 'react-router-dom'
-
-const HeaderTpl = props => {
-  return (
-    <div>
-      { props.user.isLoggedIn
-        ? `'Soir ${props.user.firstname} ${props.user.lastname}.`
-        : 'Why dont you connect yourself ?'
-      }
-      <ul>
-        <li><Link to={'/'}>Home</Link></li>
-        <li><Link to={'/login'}>Login</Link></li>
-        <li><Link to={'/page'}>Page</Link></li>
-      </ul>
-      <button onClick={e => props.onChangeLang('fr')}>Click Me</button>
-    </div>
-  )
-}
-export default HeaderTpl
-
-HeaderTpl.PropTypes = {
-  user: PropTypes.shape({
-    isLoggedIn: PropTypes.bool.isRequired
-  }),
-  onChangeLang: PropTypes.func,
-  onSubmitSearch: PropTypes.func
-}

src/container/PageText.jsx

@@ -1,36 +1,35 @@
 import React, { Component } from 'react'
-import classnames from 'classnames'
-import imgProfilOrange from '../img/imgProfil_orange.png'
-import imgProfilReverse from '../img/imgProfil_reverse.png'
+import PopinFixed from '../component/common/PopinFixed/PopinFixed'
+import PopinFixedHeader from '../component/common/PopinFixed/PopinFixedHeader.jsx'
+import PopinFixedOption from '../component/common/PopinFixed/PopinFixedOption.jsx'
+import PopinFixedContent from '../component/common/PopinFixed/PopinFixedContent.jsx'
+import Timeline from '../component/Timeline.jsx'
 
 class PageText extends Component {
   render () {
     return (
+      <PopinFixed customClass={'wsFileText'}>
+        <PopinFixedHeader
+          customClass='wsFileText'
+          icon='fa fa-file-text-o'
+          name='Facture 57840 - Jean-michel Chevalier - 04/09/2017'
+        />
+
+        <PopinFixedOption customClass={'wsFileText'} />
+
+        <PopinFixedContent customClass={'wsFileText__contentpage'}>
+          <Timeline customClass={'wsFileText__contentpage'} />
+        </PopinFixedContent>
+      </PopinFixed>
+    )
+  }
+}
+
+export default PageText
+
+/*
       <div className={classnames('wsFileText wsFileGeneric', {'visible': this.props.visible})}>
-        <div className='wsFileText__header wsFileGeneric__header'>
-          <div className='wsFileGeneric__header__icon'>
-            <i className='fa fa-file-text-o' />
-          </div>
-          <div className='wsFileText__header__title wsFileGeneric__header__title mr-auto'>
-            Facture 57840 - Jean-michel Chevalier - 04/09/2017
-          </div>
-          <div className='wsFileGeneric__header__close'>
-            <i className='fa fa-times' />
-          </div>
-        </div>
-        <div className='wsFileGeneric__option'>
-          <div className='wsFileGeneric__option__menu'>
-            <div className='wsFileGeneric__option__menu__action'>
-              <i className='fa fa-pencil' />
-            </div>
-            <div className='wsFileGeneric__option__menu__action'>
-              <i className='fa fa-archive' />
-            </div>
-            <div className='wsFileGeneric__option__menu__action'>
-              <i className='fa fa-trash' />
-            </div>
-          </div>
-        </div>
+
         <div className='wsFileText__contentpage wsFileGeneric__contentpage'>
           <div className='wsFileText__contentpage__textnote'>
             <div className='wsFileText__contentpage__textnote__latestversion'>
@@ -62,97 +61,7 @@ class PageText extends Component {
             </div>
           </div>
           <div className='wsFileText__contentpage__wrapper wsFileGeneric__wrapper'>
-            <div className='wsFileText__contentpage__header'>
-              Timeline
-            </div>
-
-            <ul className='wsFileText__contentpage__messagelist wsFileGeneric__messagelist'>
-
-              <li className='wsFileText__contentpage__messagelist__item wsFileGeneric__messagelist__item sended'>
-                <div className='wsFileText__contentpage__messagelist__item__avatar wsFileGeneric__messagelist__item__avatar'>
-                  <img src={imgProfilOrange} alt='avatar' />
-                </div>
-                <div className='wsFileText__contentpage__messagelist__item__createhour wsFileGeneric__messagelist__item__createhour'>
-                  27/11/17 à 11h45
-                </div>
-                <div className='wsFileText__contentpage__messagelist__item__content wsFileGeneric__messagelist__item__content'>
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                </div>
-              </li>
-
-              <li className='wsFileText__contentpage__messagelist__item wsFileGeneric__messagelist__item received'>
-                <div className='wsFileText__contentpage__messagelist__item__avatar wsFileGeneric__messagelist__item__avatar'>
-                  <img src={imgProfilReverse} alt='avatar' />
-                </div>
-                <div className='wsFileText__contentpage__messagelist__item__createhour wsFileGeneric__messagelist__item__createhour'>
-                  27/11/17 à 11h47
-                </div>
-                <div className='wsFileText__contentpage__messagelist__item__content wsFileGeneric__messagelist__item__content'>
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                </div>
-              </li>
-
-              <div className='wsFileText__contentpage__messagelist__version wsFileGeneric__messagelist__version'>
-                <div className='wsFileText__contentpage__messagelist__version__btn btn-primary'>
-                  <i className='fa fa-code-fork' />
-                  version 3
-                </div>
-                <div className='wsFileText__contentpage__messagelist__version__dateversion'>
-                  Créer le 22/11/17
-                </div>
-              </div>
-
-              <li className='wsFileText__contentpage__messagelist__item wsFileGeneric__messagelist__item sended'>
-                <div className='wsFileText__contentpage__messagelist__item__avatar wsFileGeneric__messagelist__item__avatar'>
-                  <img src={imgProfilOrange} alt='avatar' />
-                </div>
-                <div className='wsFileText__contentpage__messagelist__item__createhour wsFileGeneric__messagelist__item__createhour'>
-                  27/11/17 à 11h45
-                </div>
-                <div className='wsFileText__contentpage__messagelist__item__content wsFileGeneric__messagelist__item__content'>
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                </div>
-              </li>
-
-              <li className='wsFileText__contentpage__messagelist__item wsFileGeneric__messagelist__item received'>
-                <div className='wsFileText__contentpage__messagelist__item__avatar wsFileGeneric__messagelist__item__avatar'>
-                  <img src={imgProfilReverse} alt='avatar' />
-                </div>
-                <div className='wsFileText__contentpage__messagelist__item__createhour wsFileGeneric__messagelist__item__createhour'>
-                  27/11/17 à 11h47
-                </div>
-                <div className='wsFileText__contentpage__messagelist__item__content wsFileGeneric__messagelist__item__content'>
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                  Proident esse laboris in sed officia exercitation ut anim ea.
-                </div>
-              </li>
 
-            </ul>
-            <form className='wsFileText__contentpage__texteditor wsFileGeneric__texteditor'>
-              <div className='wsFileText__contentpage__texteditor__simpletext wsFileGeneric__texteditor__simpletext input-group'>
-                <input type='text' className='wsFileText__contentpage__texteditor__simpletext__input wsFileGeneric__texteditor__simpletext__input form-control' placeholder='...' />
-                <div className='wsFileText__contentpage__texteditor__simpletext__icon wsFileGeneric__texteditor__simpletext__icon input-group-addon'>
-                  <i className='fa fa-font' />
-                </div>
-              </div>
-              <div className='wsFileText__contentpage__texteditor__wysiwyg wsFileGeneric__texteditor__wysiwyg d-none d-xl-block'>
-                <textarea />
-              </div>
-              <div className='wsFileText__contentpage__texteditor__submit wsFileGeneric__texteditor__submit d-xl-flex justify-content-xl-center'>
-                <button type='submit' className='wsFileText__contentpage__texteditor__submit__btn wsFileGeneric__texteditor__submit__btn btn btn-primary'>Envoyer
-                  <div className='wsFileText__contentpage__texteditor__submit__btn__icon wsFileGeneric__texteditor__submit__btn__icon'>
-                    <i className='fa fa-paper-plane-o' />
-                  </div>
-                </button>
-              </div>
-            </form>
           </div>
         </div>
       </div>
@@ -161,3 +70,4 @@ class PageText extends Component {
 }
 
 export default PageText
+*/

src/container/Thread.jsx

@@ -43,9 +43,11 @@ class Thread extends Component {
               <div className='wsFileGeneric__messagelist__item__avatar'>
                 <img src={imgProfil} alt='avatar' />
               </div>
+
               <div className='wsFileGeneric__messagelist__item__createhour'>
                 27/11/17 à 11h45
               </div>
+
               <div className='wsFileThread__messagelist__item__content wsFileGeneric__messagelist__item__content'>
                 Proident esse laboris in sed officia exercitation ut anim ea.
               </div>

src/container/Tracim.jsx

@@ -22,11 +22,13 @@ class Tracim extends React.Component {
         <Route path='/login' component={Login} />
 
         <div className='sidebarpagecontainer'>
+
           { location.pathname !== '/login' && // cant find "except" in <Route path />
             <Sidebar />
           }
           <Route exact path='/' component={Workspace} />
           <PrivateRoute path='/page' component={Page} />
+
         </div>
 
         <Footer />

src/container/Workspace.jsx

@@ -4,7 +4,7 @@ import Folder from '../component/Workspace/Folder.jsx'
 import FileItem from '../component/Workspace/FileItem.jsx'
 import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
 import Thread from './Thread.jsx'
-// import PageText from './PageText.jsx'
+import PageText from './PageText.jsx'
 import PageWrapper from '../component/common/layout/PageWrapper.jsx'
 import PageTitle from '../component/common/layout/PageTitle.jsx'
 import PageContent from '../component/common/layout/PageContent.jsx'
@@ -76,9 +76,9 @@ class Workspace extends React.Component {
 
           <DropdownCreateButton customClass='workspace__content__button mb-5' />
 
-          <Thread visible={this.state.activeFileType === 'chat'} />
-          {/*
           <PageText visible={this.state.activeFileType === 'file'} />
+          {/*
+          <Thread visible={this.state.activeFileType === 'chat'} />
           */}
         </PageContent>
 

src/css/Generic.styl

@@ -129,62 +129,3 @@
   &__wrapper
     display flex
     flex-direction column
-  &__messagelist
-    margin-bottom 0
-    flex-grow 1
-    border-bottom 1px solid grey
-    overflow-Y auto
-    list-style none
-    &__item
-      &__avatar
-        position relative
-        top 43px
-        left -25px
-        width 45px
-        height 45px
-      &__createhour
-        margin-left 30px
-        opacity 0.7
-        font-size 14px
-      &__content
-        border 1px solid grey
-        border-radius 5px
-        padding 15px
-        background-color off-white
-        font-size 15px
-        z-index -1
-  &__texteditor
-    padding 2px
-    &__simpletext
-      display none
-      width 70%
-      margin-right 35px
-      &__icon
-        cursor pointer
-    &__wysiwyg
-      display block
-      & > textarea
-        width 100%
-        height 130px
-    &__submit
-      margin 10px 0
-      &__btn
-        display flex
-        background-color transparent
-        &__icon
-          margin-left 10px
-
-.sended
-  .wsFileGeneric__messagelist__item__content
-    margin-right 25%
-
-.received
-  .wsFileGeneric__messagelist__item
-    &__avatar
-      left 93%
-    &__createhour
-      text-align right
-      margin-right 50px
-    &__content
-      margin-left 25%
-      color white

src/css/PageText.styl

@@ -0,0 +1,211 @@
+.wsFileText
+  width 1200px
+  height calc(100% - 85px)
+  overflow-Y auto
+  &__header
+    background-color orange
+  &__contentpage
+    display flex
+    overflow-Y auto
+    &__textnote
+      margin 10px
+      border-radius 10px
+      padding 25px
+      width 55%
+      height 100%
+      background-color off-white
+      &__latestversion
+        text-align right
+        opacity 0.7
+      &__title
+        margin 10px 0
+        font-size 30px
+        color orange
+      &__data
+        flex-grow 1
+        flex-shrink 1
+        flex-basis 0
+    &__wrapper
+      margin 10px
+      border-radius 10px
+      width 45%
+      height 100%
+      background-color off-white
+    &__header
+      border-top-left-radius 10px
+      border-top-right-radius 10px
+      padding 10px 0
+      text-align center
+      font-size 20px
+      color dark-grey
+      background-color hover-grey
+    &__messagelist
+      min-height 300px
+      &__item
+        padding 0 25px 20px 35px
+        &__content
+          color dark-grey
+      &__version
+        margin-top 40px
+        background-color hover-grey
+        &__btn
+          margin-left 15px
+          padding 5px 25px
+          border-radius 5px
+          width 145px
+          color white
+          font-size 17px
+          background-color orange
+          & > i
+            margin-right 10px
+            color dark-grey
+            font-size 22px
+          &:hover
+            background-color dark-orange
+          &:focus
+            background-color dark-orange
+        &__date
+          color orange
+          font-size 17px
+    &__texteditor
+      &__simpletext
+        &__input
+          &:focus
+            color orange
+            border-color orange
+      &__submit
+        &__btn
+          border-color orange
+          background-color orange
+          color white
+          &:hover
+            border-color orange
+            background-color orange
+          &:focus
+            border-color orange
+            background-color orange
+
+/***** CLASS MESSAGELISTSIZE *****/
+
+.messagelistOpen
+  .wsFileText__contentpage__messagelist
+    flex 0
+    min-height 0
+
+/*********************************/
+
+/***** SENDER RECEIVER *****/
+
+.received
+  .wsFileText__contentpage__messagelist__item__content
+      background-color orange
+
+/*****************************/
+
+/**** MEDIA QUERIES ****/
+
+@media (min-width: max-xs) and (max-width: max-lg)
+
+  .wsFileText
+    &__contentpage
+      display block
+      overflow-Y scroll
+      &__textnote
+        margin-right 10px
+        padding 10px 20px
+        width auto
+        overflow-Y hidden
+        &__latestversion
+          padding-top 10px
+      &__wrapper
+        width auto
+      &__texteditor
+        &__simpletext
+          display inline-flex
+          display ms-inline-flex
+          width 60%
+        &__submit
+          display inline-flex
+          display ms-inline-flex
+          margin 10px 0
+          &__btn
+            display flex
+            margin-left 35px
+            &__icon
+              margin-left 15px
+
+/**** MEDIA 992px & 1199px ****/
+
+@media (min-width: min-lg) and (max-width: max-lg)
+
+  .wsFileText
+    width 692px
+    &__contentpage__texteditor__simpletext
+      margin-left 15px
+
+/******************************/
+
+/**** MEDIA 768px & 991px ****/
+
+@media (min-width: min-md) and (max-width: max-md)
+
+  .wsFileText
+    width 768px
+    &__contentpage__texteditor__simpletext
+      margin-left 25px
+
+/******************************/
+
+/**** MEDIA 576px & 767px ****/
+
+@media (min-width: min-sm) and (max-width: max-sm)
+
+  .wsFileText
+      top 69px
+      width 576px
+      height calc(100% - 69px)
+      &__contentpage__texteditor__simpletext
+        margin-left 10px
+
+/******************************/
+
+/**** MEDIA 575px ****/
+
+@media (max-width: max-xs)
+
+  .wsFileText
+    top 70px
+    height calc(100% - 70px)
+    width 100%
+    box-shadow none
+    &__contentpage
+      display block
+      overflow-Y scroll
+      &__textnote
+        margin-right 10px
+        width auto
+        overflow-Y hidden
+        font-size 15px
+      &__wrapper
+        width auto
+      &__messagelist
+        &__item
+          padding 0 35px 20px 30px
+        &__version
+          &__btn
+            font-size 17px
+            vertical-align middle
+          &__dateversion
+            font-size 15px
+      &__texteditor
+        &__simpletext
+          margin 10px 0
+          display flex
+          width 95%
+          margin-left 10px
+        &__submit
+          &__btn
+            display flex
+            margin 0 auto
+            &__icon
+              margin-left 10px

src/css/Timeline.styl

@@ -0,0 +1,68 @@
+.timeline
+  &__messagelist
+    flex 1 1 0
+    margin-bottom 0
+    padding-left 0
+    border-bottom 1px solid grey
+    overflow-Y auto
+    list-style none
+    &__item
+      &__avatar
+        position relative
+        top 43px
+        left -25px
+        width 45px
+        height 45px
+      &__createhour
+        margin-left 30px
+        opacity 0.7
+        font-size 14px
+      &__content
+        border 1px solid grey
+        border-radius 5px
+        padding 15px
+        background-color off-white
+        font-size 15px
+        z-index -1
+    &__version
+      display flex
+      justify-content space-between
+      padding 10px 0
+      width 100%
+      &__date
+        margin auto 25px
+  &__texteditor
+    padding 2px
+    &__simpletext
+      display none
+      width 70%
+      margin-right 35px
+      &__icon
+        cursor pointer
+    &__wysiwyg
+      display block
+      & > textarea
+        width 100%
+        height 130px
+    &__submit
+      margin 10px 0
+      &__btn
+        display flex
+        cursor pointer
+        &__icon
+          margin-left 10px
+
+.sended
+  .timeline__messagelist__item__content
+    margin-right 25%
+
+.received
+  .timeline__messagelist__item
+    &__avatar
+      left 93%
+    &__createhour
+      text-align right
+      margin-right 50px
+    &__content
+      margin-left 25%
+      color white

src/css/index.styl

@@ -18,3 +18,5 @@ html, body, #content, #content > div
 @import 'Folder'
 
 @import 'Thread'
+@import 'PageText'
+@import 'Timeline'