added Delimiter + renamed .wsFileGeneric to .wsContentGeneric

src/component/Delimiter/Delimiter.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import classnames from 'classnames'
+
+require('./Delimiter.styl')
+
+export const Delimiter = props => <div className={classnames(props.customClass, 'delimiter')} />
+
+export default Delimiter

src/component/Delimiter/Delimiter.styl

@@ -0,0 +1,7 @@
+@import '../../css/Variable.styl'
+
+.delimiter
+  border-radius 10px
+  width 50%
+  height 5px
+  background-color blue

src/component/Input/BtnSwitch/BtnSwitch.jsx

@@ -5,11 +5,11 @@ require('./BtnSwitch.styl')
 export const BtnSwitch = props =>
   <div className='btnswitch'>
     <label className='switch nomarginlabel'>
-      <input type='checkbox' />
+      <input type='checkbox' checked={props.checked} onChange={props.onChange} />
       <span className='slider round' />
     </label>
     <div className='btnswitch__text'>
-      On
+      { props.checked ? 'On' : 'Off'}
     </div>
   </div>
 

src/component/Input/SelectStatus/SelectStatus.jsx

@@ -6,9 +6,9 @@ export const SelectStatus = props => {
   translate.setI18n(props.i18n ? props.i18n : i18n) // mandatory to allow Apps to overrides trad
 
   return (
-    <div className='wsFileGeneric__option__menu__status dropdown'>
+    <div className='wsContentGeneric__option__menu__status dropdown'>
       <button
-        className='wsFileGeneric__option__menu__status__dropdownbtn check btn dropdown-toggle'
+        className='wsContentGeneric__option__menu__status__dropdownbtn check btn dropdown-toggle'
         type='button'
         id='dropdownMenu2'
         data-toggle='dropdown'
@@ -16,40 +16,40 @@ export const SelectStatus = props => {
         aria-expanded='false'
       >
         {props.t('Input.SelectStatus.validated')}
-        <div className='wsFileGeneric__option__menu__status__dropdownbtn__icon'>
+        <div className='wsContentGeneric__option__menu__status__dropdownbtn__icon'>
           <i className='fa fa-check' />
         </div>
       </button>
 
-      <div className='wsFileGeneric__option__menu__status__submenu dropdown-menu' aria-labelledby='dropdownMenu2'>
+      <div className='wsContentGeneric__option__menu__status__submenu dropdown-menu' aria-labelledby='dropdownMenu2'>
         <h6 className='dropdown-header'>{props.t('Input.SelectStatus.file_status')}</h6>
 
         <div className='dropdown-divider' />
 
-        <button className='wsFileGeneric__option__menu__status__submenu__item current  dropdown-item' type='button'>
+        <button className='wsContentGeneric__option__menu__status__submenu__item current  dropdown-item' type='button'>
           {props.t('Input.SelectStatus.ongoing')}
-          <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+          <div className='wsContentGeneric__option__menu__status__submenu__item__icon'>
             <i className='fa fa-gears' />
           </div>
         </button>
 
-        <button className='wsFileGeneric__option__menu__status__submenu__item check dropdown-item' type='button'>
+        <button className='wsContentGeneric__option__menu__status__submenu__item check dropdown-item' type='button'>
           {props.t('Input.SelectStatus.validated')}
-          <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+          <div className='wsContentGeneric__option__menu__status__submenu__item__icon'>
             <i className='fa fa-check' />
           </div>
         </button>
 
-        <button className='wsFileGeneric__option__menu__status__submenu__item invalid dropdown-item' type='button'>
+        <button className='wsContentGeneric__option__menu__status__submenu__item invalid dropdown-item' type='button'>
           {props.t('Input.SelectStatus.unvalidated')}
-          <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+          <div className='wsContentGeneric__option__menu__status__submenu__item__icon'>
             <i className='fa fa-times' />
           </div>
         </button>
 
-        <button className='wsFileGeneric__option__menu__status__submenu__item ban dropdown-item' type='button'>
+        <button className='wsContentGeneric__option__menu__status__submenu__item ban dropdown-item' type='button'>
           {props.t('Input.SelectStatus.obsolete')}
-          <div className='wsFileGeneric__option__menu__status__submenu__item__icon'>
+          <div className='wsContentGeneric__option__menu__status__submenu__item__icon'>
             <i className='fa fa-ban' />
           </div>
         </button>

src/component/Input/SelectStatus/SelectStatus.styl

@@ -0,0 +1,32 @@
+@import '../../../css/Variable.styl'
+
+&__status
+  margin-right 20px
+  .current
+    color blue
+  .check
+    color green
+  .invalid
+    color red
+  .ban
+    color grey
+  &__dropdownbtn
+    border 1px solid grey
+    width 150px
+    background-color transparent
+    cursor pointer
+    &::after
+      color fontColor
+    &:hover
+      background-color transparent
+    &__icon
+      display inline-block
+      margin 0 15px
+  &__submenu
+    &__item
+      display flex
+      justify-content space-between
+      margin 5px 0
+      cursor pointer
+      &:active
+        background-color transparent

src/component/PopinFixed/PopinFixed.jsx

@@ -9,7 +9,7 @@ require('./PopinFixed.styl')
 
 const PopinFixed = props => {
   return (
-    <div className={classnames('wsFileGeneric', props.customClass, {'visible': props.visible})}>
+    <div className={classnames('wsContentGeneric', props.customClass, {'visible': props.visible})}>
       {props.children}
     </div>
   )

src/component/PopinFixed/PopinFixed.styl

@@ -1,6 +1,6 @@
 @import '../../css/Variable.styl'
 
-.wsFileGeneric
+.wsContentGeneric
   position fixed
   top 85px
   right 0
@@ -56,36 +56,6 @@
     &__menu
       display flex
       align-items center
-      &__status
-        margin-right 20px
-        .current
-          color blue
-        .check
-          color green
-        .invalid
-          color red
-        .ban
-          color grey
-        &__dropdownbtn
-          border 1px solid grey
-          width 150px
-          background-color transparent
-          cursor pointer
-          &::after
-            color fontColor
-          &:hover
-            background-color transparent
-          &__icon
-            display inline-block
-            margin 0 15px
-        &__submenu
-          &__item
-            display flex
-            justify-content space-between
-            margin 5px 0
-            cursor pointer
-            &:active
-              background-color transparent
       &__action
         margin 5px 10px 0 0
         font-size 18px

src/component/PopinFixed/PopinFixedContent.jsx

@@ -5,18 +5,18 @@ import PropTypes from 'prop-types'
 const PopinFixedContent = props => {
   return props.children.length === 2
     ? (
-      <div className={classnames('wsFileGeneric__content', `${props.customClass}__content`)}>
-        <div className={classnames('wsFileGeneric__content__left', `${props.customClass}__content__left`)}>
+      <div className={classnames('wsContentGeneric__content', `${props.customClass}__content`)}>
+        <div className={classnames('wsContentGeneric__content__left', `${props.customClass}__content__left`)}>
           {props.children[0]}
         </div>
 
-        <div className={classnames('wsFileGeneric__content__right', `${props.customClass}__content__right`)}>
+        <div className={classnames('wsContentGeneric__content__right', `${props.customClass}__content__right`)}>
           {props.children[1]}
         </div>
       </div>
     )
     : (
-      <div className={classnames('wsFileGeneric__content', `${props.customClass}__content`)}>
+      <div className={classnames('wsContentGeneric__content', `${props.customClass}__content`)}>
         { props.children }
       </div>
     )

src/component/PopinFixed/PopinFixedHeader.jsx

@@ -4,21 +4,21 @@ 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`)}>
+    <div className={classnames('wsContentGeneric__header', `${props.customClass}__header`)}>
+      <div className={classnames('wsContentGeneric__header__icon', `${props.customClass}__header__icon`)}>
         <i className={props.icon} />
       </div>
 
-      <div className={classnames('wsFileGeneric__header__title mr-auto', `${props.customClass}__header__title`)}>
+      <div className={classnames('wsContentGeneric__header__title mr-auto', `${props.customClass}__header__title`)}>
         {props.name}
       </div>
 
-      <div className={classnames('wsFileGeneric__header__edittitle', `${props.customClass}__header__changetitle`)}>
+      <div className={classnames('wsContentGeneric__header__edittitle', `${props.customClass}__header__changetitle`)}>
         <i className='fa fa-pencil' />
       </div>
 
       <div
-        className={classnames('wsFileGeneric__header__close', `${props.customClass}__header__close`)}
+        className={classnames('wsContentGeneric__header__close', `${props.customClass}__header__close`)}
         onClick={props.onClickCloseBtn}
       >
         <i className='fa fa-times' />

src/component/PopinFixed/PopinFixedOption.jsx

@@ -9,8 +9,8 @@ const PopinFixedOption = props => {
   translate.setI18n(props.i18n ? props.i18n : i18n) // mandatory to allow Apps to overrides trad
 
   return (
-    <div className='wsFileGeneric__option'>
-      <div className='wsFileGeneric__option__menu'>
+    <div className='wsContentGeneric__option'>
+      <div className='wsContentGeneric__option__menu'>
 
         <div className='wsFileFile__option__menu__addversion btn mr-auto'>
           {props.t('PopinFixedOption.new_version')}
@@ -19,10 +19,10 @@ const PopinFixedOption = props => {
 
         <SelectStatus />
 
-        <div className='wsFileGeneric__option__menu__action'>
+        <div className='wsContentGeneric__option__menu__action'>
           <i className='fa fa-archive' />
         </div>
-        <div className='wsFileGeneric__option__menu__action'>
+        <div className='wsContentGeneric__option__menu__action'>
           <i className='fa fa-trash' />
         </div>
       </div>

src/component/Timeline/Timeline.styl

@@ -27,8 +27,10 @@
         position relative
         top 43px
         left -25px
-        width 45px
-        height 45px
+        & > img
+          width 45px
+          height 45px
+          border-radius 25px
       &__createhour
         margin-left 30px
         opacity 0.7

src/index.dev.js

@@ -12,6 +12,8 @@ import BtnSwitch from './component/Input/BtnSwitch/BtnSwitch.jsx'
 import Timeline from './component/Timeline/Timeline.jsx'
 import TimelineDebugData from './component/Timeline/debugData.js'
 
+import Delimiter from './component/Delimiter/Delimiter.jsx'
+
 ReactDOM.render(
   <PopinFixed customClass={`${'randomClass'}`}>
     <PopinFixedHeader
@@ -25,6 +27,7 @@ ReactDOM.render(
 
     <PopinFixedContent customClass={`${'randomClass'}__contentpage`}>
       <div>
+        <Delimiter />
         <span>Here will be the app content. Style is handled by the app (obviously)</span>
         <BtnSwitch />
         <TextAreaApp customClass={'randomClass'} />

src/index.js

@@ -12,6 +12,8 @@ import libTimeline from './component/Timeline/Timeline.jsx'
 import libTextAreaApp from './component/Input/TextAreaApp/TextAreaApp.jsx'
 import libBtnSwitch from './component/Input/BtnSwitch/BtnSwitch.jsx'
 
+import libDelimiter from './component/Delimiter/Delimiter.jsx'
+
 export const langFr = fr
 export const langEn = en
 
@@ -26,3 +28,5 @@ export const Timeline = libTimeline
 
 export const TextAreaApp = libTextAreaApp
 export const BtnSwitch = libBtnSwitch
+
+export const Delimiter = libDelimiter