Integration of the new workspace Dashboard page

src/container/Dashboard.jsx

@@ -0,0 +1,372 @@
+import React, { Component } from 'react'
+import listMemberBtn from '../img/listmemberbtn.png'
+import imgProfil from '../img/imgProfil.png'
+
+class Dashboard extends Component {
+  render () {
+    return (
+      <div className='dashboard'>
+
+        <div className='dashboard__title'>
+          Tableau de bord
+        </div>
+
+        <div className='dashboard__wkscontainer'>
+          <div className='dashboard__workspace'>
+            <div className='dashboard__workspace__title'>
+              Nouvelle ligne directive sur le nouveau design de Tracim
+            </div>
+
+            <div className='dashboard__workspace__detail'>
+              Ut in et sit adipisicing mollit amet ut exercitation proident laborum duis occaecat eu aute qui ut.
+              Dolore veniam eu consectetur occaecat est elit dolor nulla est ut amet do reprehenderit eiusmod tempor.
+            </div>
+          </div>
+          <div className='dashboard__userstatut'>
+
+            <div className='dashboard__userstatut__role'>
+              <div className='dashboard__userstatut__role__text'>
+                Hi ! Alexi, vous êtes actuellement
+              </div>
+              <div className='dashboard__userstatut__role__rank'>
+                <div className='dashboard__userstatut__role__rank__icon'>
+                  <i className='fa fa-graduation-cap' />
+                </div>
+                <div className='dashboard__userstatut__role__rank__rolename'>
+                  Gestionnaire de projet
+                </div>
+              </div>
+            </div>
+
+            <div className='dashboard__userstatut__notification'>
+              <div className='dashboard__userstatut__notification__text'>
+                Vous êtes abonné(e) aux notifications de ce workspace
+              </div>
+              <div className='dashboard__userstatut__notification__btn btn'>
+                Changer de statut
+              </div>
+
+              <div className='dashboard__userstatut__notification__subscribe dropdown'>
+                <button className='dashboard__userstatut__notification__subscribe__btn btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                  Abonné(e)
+                </button>
+                <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
+                  <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>Abonné(e)
+                  </div>
+                  <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>Non Abonné(e)
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className='dashboard__calltoaction'>
+          <div className='dashboard__calltoaction__button thread'>
+            <div className='dashboard__calltoaction__button__text'>
+              <div className='dashboard__calltoaction__button__text__icon'>
+                <i className='fa fa-comments-o' />
+              </div>
+              <div className='dashboard__calltoaction__button__text__title'>
+                Débuter une nouvelle discussion
+              </div>
+            </div>
+          </div>
+
+          <div className='dashboard__calltoaction__button writefile'>
+            <div className='dashboard__calltoaction__button__text'>
+              <div className='dashboard__calltoaction__button__text__icon'>
+                <i className='fa fa-file-text-o' />
+              </div>
+              <div className='dashboard__calltoaction__button__text__title'>
+                Rédiger un document
+              </div>
+            </div>
+          </div>
+
+          <div className='dashboard__calltoaction__button importfile'>
+            <div className='dashboard__calltoaction__button__text'>
+              <div className='dashboard__calltoaction__button__text__icon'>
+                <i className='fa fa-paperclip' />
+              </div>
+              <div className='dashboard__calltoaction__button__text__title'>
+                Importer un fichier
+              </div>
+            </div>
+          </div>
+
+          <div className='dashboard__calltoaction__button calendar'>
+            <div className='dashboard__calltoaction__button__text'>
+              <div className='dashboard__calltoaction__button__text__icon'>
+                <i className='fa fa-calendar' />
+              </div>
+              <div className='dashboard__calltoaction__button__text__title'>
+                Voir le Calendrier
+              </div>
+            </div>
+          </div>
+
+          <div className='dashboard__calltoaction__button explore'>
+            <div className='dashboard__calltoaction__button__text'>
+              <div className='dashboard__calltoaction__button__text__icon'>
+                <i className='fa fa-folder-open-o' />
+              </div>
+              <div className='dashboard__calltoaction__button__text__title'>
+                Explorer le Workspace
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className='dashboard__wksinfo'>
+          <div className='dashboard__activity'>
+            <div className='dashboard__activity__header'>
+              <div className='dashboard__activity__header__title mr-auto'>
+                Activité récente
+                <div className='dashboard__activity__header__title__underline' />
+              </div>
+
+              <div className='dashboard__activity__header__allread btn'>
+                Tout marquer comme lu
+              </div>
+            </div>
+            <div className='dashboard__activity__wrapper'>
+              <div className='dashboard__activity__workspace'>
+                <div className='dashboard__activity__workspace__icon'>
+                  <i className='fa fa-comments-o' />
+                </div>
+                <div className='dashboard__activity__workspace__name'>
+                  <span>Workspace 1</span>
+                </div>
+              </div>
+
+              <div className='dashboard__activity__workspace'>
+                <div className='dashboard__activity__workspace__icon'>
+                  <i className='fa fa-list-ul' />
+                </div>
+                <div className='dashboard__activity__workspace__name'>
+                  Workspace 2
+                </div>
+              </div>
+
+              <div className='dashboard__activity__workspace'>
+                <div className='dashboard__activity__workspace__icon'>
+                  <i className='fa fa-list-ul' />
+                </div>
+                <div className='dashboard__activity__workspace__name'>
+                  Workspace 3
+                </div>
+              </div>
+
+              <div className='dashboard__activity__workspace'>
+                <div className='dashboard__activity__workspace__icon'>
+                  <i className='fa fa-file-text-o' />
+                </div>
+                <div className='dashboard__activity__workspace__name'>
+                  <span>Workspace 4</span>
+                </div>
+              </div>
+
+              <div className='dashboard__activity__workspace'>
+                <div className='dashboard__activity__workspace__icon'>
+                  <i className='fa fa-comments-o' />
+                </div>
+                <div className='dashboard__activity__workspace__name'>
+                  <span>Workspace 5</span>
+                </div>
+              </div>
+
+              <div className='dashboard__activity__workspace'>
+                <div className='dashboard__activity__workspace__icon'>
+                  <i className='fa fa-file-text-o' />
+                </div>
+                <div className='dashboard__activity__workspace__name'>
+                  Workspace 6
+                </div>
+              </div>
+
+              <div className='dashboard__activity__more d-flex flex-row-reverse'>
+                <div className='dashboard__activity__more__btn btn'>
+                  Voir plus
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className='dashboard__memberlist'>
+
+            <div className='dashboard__memberlist__title'>
+              Liste des membres
+              <div className='dashboard__memberlist__title__underline' />
+            </div>
+
+            <div className='dashboard__memberlist__wrapper'>
+              <ul className='dashboard__memberlist__list'>
+                <li className='dashboard__memberlist__list__item'>
+                  <div className='dashboard__memberlist__list__item__avatar'>
+                    <img src={imgProfil} alt='avatar' />
+                  </div>
+                  <div className='dashboard__memberlist__list__item__info'>
+                    <div className='dashboard__memberlist__list__item__info__name'>
+                      Jean Dupont
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info__role'>
+                      Responsable
+                    </div>
+                  </div>
+                </li>
+
+                <li className='dashboard__memberlist__list__item'>
+                  <div className='dashboard__memberlist__list__item__avatar'>
+                    <img src={imgProfil} alt='avatar' />
+                  </div>
+                  <div className='dashboard__memberlist__list__item__info'>
+                    <div className='dashboard__memberlist__list__item__info__name'>
+                      Aldwin Vinel
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info__role'>
+                      lecteur
+                    </div>
+                  </div>
+                </li>
+
+                <li className='dashboard__memberlist__list__item'>
+                  <div className='dashboard__memberlist__list__item__avatar'>
+                    <img src={imgProfil} alt='avatar' />
+                  </div>
+                  <div className='dashboard__memberlist__list__item__info'>
+                    <div className='dashboard__memberlist__list__item__info__name'>
+                      William Himme
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info__role'>
+                      contributeur
+                    </div>
+                  </div>
+                </li>
+
+                <li className='dashboard__memberlist__list__item'>
+                  <div className='dashboard__memberlist__list__item__avatar'>
+                    <img src={imgProfil} alt='avatar' />
+                  </div>
+                  <div className='dashboard__memberlist__list__item__info'>
+                    <div className='dashboard__memberlist__list__item__info__name'>
+                      Yacine Lite
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info__role'>
+                      Gestionnaire de contenu
+                    </div>
+                  </div>
+                </li>
+
+                <li className='dashboard__memberlist__list__item'>
+                  <div className='dashboard__memberlist__list__item__avatar'>
+                    <img src={imgProfil} alt='avatar' />
+                  </div>
+                  <div className='dashboard__memberlist__list__item__info'>
+                    <div className='dashboard__memberlist__list__item__info__name'>
+                      Yacine Lite
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info__role'>
+                      Gestionnaire de contenu
+                    </div>
+                  </div>
+                </li>
+
+                <li className='dashboard__memberlist__list__item'>
+                  <div className='dashboard__memberlist__list__item__avatar'>
+                    <img src={imgProfil} alt='avatar' />
+                  </div>
+                  <div className='dashboard__memberlist__list__item__info'>
+                    <div className='dashboard__memberlist__list__item__info__name'>
+                      Yacine Lite
+                    </div>
+                    <div className='dashboard__memberlist__list__item__info__role'>
+                      Gestionnaire de contenu
+                    </div>
+                  </div>
+                </li>
+
+              </ul>
+              <div className='dashboard__memberlist__btnadd'>
+                <div className='dashboard__memberlist__btnadd__button'>
+                  <div className='dashboard__memberlist__btnadd__button__avatar'>
+                    <img src={listMemberBtn} alt='avatar' />
+                  </div>
+                  <div className='dashboard__memberlist__btnadd__button__text'>
+                     Ajouter un membre
+                  </div>
+                </div>
+              </div>
+
+              <form className='dashboard__memberlist__addmember'>
+                <input type='text' className='dashboard__memberlist__addmember__name' placeholder='Name' />
+                <div className='dashboard__memberlist__addmember__role'>
+                  <div className='dashboard__memberlist__addmember__role__dropdown dropdown'>
+                    <button className='dashboard__memberlist__addmember__role__dropdown__button btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                      Rôle du membre
+                    </button>
+                    <div className='dashboard__memberlist__addmember__role__dropdown__submenu dropdown-menu'>
+                      <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                          <i className='fa fa-eye' />
+                        </div>
+                        Lecteur
+                      </div>
+                      <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                          <i className='fa fa-pencil' />
+                        </div>
+                        contributeur
+                      </div>
+                      <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                          <i className='fa fa-graduation-cap' />
+                        </div>
+                        Gestionnaire de contenu
+                      </div>
+                      <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item dropdown-item'>
+                        <div className='dashboard__memberlist__addmember__role__dropdown__submenu__item__icon'>
+                          <i className='fa fa-legal' />
+                        </div>
+                        Responsable
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <input type='submit' className='dashboard__memberlist__addmember__submitbtn' />
+              </form>
+
+            </div>
+          </div>
+        </div>
+
+        <div className='dashboard__webdav'>
+
+          <div className='dashboard__webdav__btn'>
+            <div className='dashboard__webdav__btn__icon'>
+              <i className='fa fa-windows' />
+            </div>
+
+            <div className='dashboard__webdav__btn__text'>
+              Implémenter Tracim dans votre explorateur
+            </div>
+          </div>
+
+          <div className='dashboard__webdav__information'>
+            <div className='dashboard__webdav__information__text'>
+              Lorem ipsum dolore dolore laborum exercitation et deserunt ad ullamco nostrud dolore magna in proident elit amet do eu ut officia anim magna dolore adipisicing aliqua qui reprehenderit laborum labore tempor consectetur ut pariatur deserunt nostrud.
+            </div>
+
+            <div className='dashboard__webdav__information__link'>
+              http://algoo.trac.im/webdav/
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    )
+  }
+}
+
+export default Dashboard

src/container/Tracim.jsx

@@ -4,6 +4,7 @@ import Footer from '../component/Footer.jsx'
 import Header from './Header.jsx'
 import Sidebar from './Sidebar.jsx'
 import Login from './Login.jsx'
+import Dashboard from './Dashboard.jsx'
 import WorkspaceContent from './WorkspaceContent.jsx'
 import {
   Route,
@@ -43,7 +44,7 @@ class Tracim extends React.Component {
 
               <SidebarWrapper locationPath={location.pathname}>
 
-                <PrivateRoute exact path='/' component={WorkspaceContent} />
+                <PrivateRoute exact path='/' component={Dashboard} />
 
               </SidebarWrapper>
 

src/css/Dashboard.styl

@@ -0,0 +1,427 @@
+.dashboard
+  margin-left 50px
+  &__title
+    margin 20px 0
+    font-size 35px
+  &__wkscontainer
+    display flex
+    flex-wrap wrap
+  &__workspace
+    margin-right 20px
+    width calc(65% - 20px) //20px => margin-right
+    &__title
+      margin-bottom 20px
+      font-size 40px
+      font-weight 500
+      color darkBlue
+    &__detail
+      margin-bottom 20px
+      font-size 18px
+  &__userstatut
+    width 35%
+    &__role
+      display flex
+      flex-wrap wrap
+      margin 20px 0
+      font-size 18px
+      &__text
+        margin-right 15px
+      &__rank
+        display flex
+        &__icon
+          margin-right 15px
+          color gestionnaire
+    &__notification
+      font-size 18px
+      &__btn
+        margin 20px 0
+        border 1px solid blue
+        padding 10px 15px
+        color blue
+        cursor pointer
+        &:hover , focus
+          background-color blue
+          color white
+      &__subscribe
+        display none
+        &__btn
+          margin 20px 0
+          border 1px solid blue
+          padding 10px 25px
+          background-color transparent
+          color blue
+          &:hover,&:focus
+            background-color blue
+            color white
+        &__submenu
+          padding 0
+          &__item
+            padding 10px
+            &:hover,&:focus
+              background-color blue
+              color white
+  &__calltoaction
+    display flex
+    flex-wrap wrap
+    margin 50px 0
+    &__button
+      display flex
+      flex-direction column
+      justify-content center
+      margin 20px 30px 20px 0
+      border-radius 10px
+      padding 15px
+      width 250px
+      height 200px
+      box-shadow shadow-all
+      text-align center
+      cursor pointer
+      &:active
+        box-shadow inset 0px 0px 5px 2px #656565
+      &__text
+        &__icon
+          font-size 30px
+          .fa-comments-o, .fa-paperclip, .fa-calendar, .fa-file-text-o, .fa-folder-open-o
+              color white
+        &__title
+          font-size 18px
+          color white
+    .thread
+      background-color blue
+    .writefile
+      background-color writefile
+    .importfile
+      background-color importfile
+    .calendar
+      background-color calendar
+    .explore
+      background-color explore
+  &__wksinfo
+    display flex
+    flex-wrap wrap
+  &__activity
+    margin 0 35px 50px 0
+    width 60%
+    &__header
+      display flex
+      margin-bottom 20px
+      &__title
+        font-size 20px
+        &__underline
+          border-radius 10px
+          width 150px
+          height 3px
+          background-color blue
+      &__allread
+        border 1px solid blue
+        padding 10px 25px
+        color blue
+        font-size 18px
+        cursor pointer
+        &:hover, &:focus
+          background-color blue
+          color white
+    &__wrapper
+      border 1px solid grey
+      height 480px
+    &__workspace
+      display flex
+      align-items center
+      border-bottom 1px solid grey
+      padding 15px
+      cursor pointer
+      &:hover
+        background-color folder-hover
+      &__icon
+        margin 0 25px
+        font-size 25px
+      &__name
+        font-size 18px
+        font-weight 500
+        span
+          font-weight 400
+    &__more
+      &__btn
+        margin 15px
+        border 1px solid blue
+        padding 10px 25px
+        color blue
+        cursor pointer
+        &:hover, &:focus
+          background-color blue
+          color white
+  &__memberlist
+    margin 0 0 50px 0
+    width 35%
+    &__title
+      margin-bottom 31px
+      font-size 20px
+      &__underline
+        border-radius 10px
+        width 150px
+        height 3px
+        background-color blue
+    &__wrapper
+      position relative
+      border 1px solid grey
+      height 480px
+    &__list
+      margin 0
+      padding 0
+      list-style none
+      height 400px
+      overflow-Y scroll
+      &__item
+        display flex
+        border-bottom 1px solid grey
+        padding 10px 15px
+        &__avatar
+          margin-right 20px
+          width 50px
+          height 50px
+        &__info
+          &__name
+            font-size 20px
+          &__role
+            font-size 18px
+    &__btnadd
+      border-top 1px solid grey
+      padding 15px
+      &__button
+        display flex
+        align-items center
+        &__avatar
+          margin-right 20px
+          cursor pointer
+          img
+            width 50px
+            height 50px
+        &__text
+          font-size 18px
+          color blue
+          cursor pointer
+    &__addmember
+      position absolute
+      top 0
+      display none
+      flex-direction column
+      justify-content center
+      align-items center
+      height 100%
+      width 100%
+      background-color #FDFDFD
+      &__name
+        margin-bottom 20px
+        border 1px solid grey
+        border-radius 10px
+        padding 10px 25px
+      &__role
+        margin-bottom 20px
+        &__dropdown
+          &__button
+            border 1px solid blue
+            border-radius 10px
+            padding 10px 25px
+            background-color transparent
+            color blue
+            &:hover,&:focus
+              background-color blue
+              color white
+          &__submenu
+            padding 0
+            &__item
+              display flex
+              padding 10px
+              &:hover,&:focus
+                background-color blue
+                color white
+              &__icon
+                margin-right 15px
+      &__submitbtn
+        border 1px solid blue
+        border-radius 5px
+        padding 5px 35px
+        background-color transparent
+        color blue
+        cursor pointer
+        &:hover, &:focus
+          background-color blue
+          color white
+  &__webdav
+    margin-bottom 100px
+    &__btn
+      display flex
+      margin-bottom 30px
+      border 1px solid blue
+      border-radius 10px
+      padding 15px 25px
+      width 350px
+      color blue
+      cursor pointer
+      &:hover, &:focus
+        background-color blue
+        color white
+      &__icon
+        margin-right 20px
+        font-size 30px
+    &__information
+      display none
+      border 1px solid grey
+      border-radius 10px
+      padding 15px 25px
+      width 600px
+      &__text
+        margin-bottom 35px
+      &__link
+        margin-bottom 15px
+        border 1px solid grey
+        border-radius 10px
+        padding 15px 25px
+        width 300px
+
+/****** CLASS ACTIVE *******/
+
+/*** active dropdown subscribe ***/
+
+.activebtnsubs
+  .dashboard__wksinfo__notification
+    &__btn
+      display none
+    &__subscribe
+      display flex
+
+/*** active form on list member ***/
+
+.activeform
+  .dashboard__memberlist__addmember
+    display flex
+
+/*** active webdav ***/
+
+.activewebdav
+  .dashboard__webdav__information
+    display block
+
+/******************************/
+
+/**** MEDIAQUERIES *****/
+
+/**** MEDIA 576px & 1199px ****/
+
+// Regroup the common rules
+
+@media (min-width min-sm) and (max-width: max-lg)
+
+  .dashboard
+    &__workspace
+      width auto
+    &__userstatut
+      width auto
+    &__calltoaction
+      justify-content center
+    &__activity
+      width 100%
+    &__memberlist
+      width 50%
+
+/**** MEDIA 992px & 1199px ****/
+
+@media (min-width: min-lg) and (max-width: max-lg)
+
+  .dashboard
+    margin-left 15px
+
+/******************************/
+
+/**** MEDIA 768px & 991px ****/
+
+@media (min-width: min-md) and (max-width: max-md)
+
+  .dashboard
+    margin-left 0
+    &__title
+      margin-left 15px
+    &__workspace
+      margin-left 15px
+    &__userstatut
+      margin-left 15px
+    &__activity
+      margin 25px 0
+      &__header
+        margin 0 15px 20px 15px
+    &__memberlist
+      margin-left 15px
+    &__webdav
+      margin-left 15px
+
+/******************************/
+
+/**** MEDIA 576px & 767px ****/
+
+@media (min-width: min-sm) and (max-width: max-sm)
+
+  .dashboard
+    margin-left 0
+    &__title
+      margin-left 15px
+    &__workspace
+      margin-left 15px
+    &__userstatut
+      margin-left 15px
+    &__activity
+      margin 25px 0
+      &__header
+        margin 0 15px 20px 15px
+    &__memberlist
+      margin 50px 0
+      width 90%
+      &__title
+        margin-left 15px
+    &__webdav
+      margin-left 15px
+      &__information
+        width 525px
+
+/******************************/
+
+/**** MEDIA 575px ****/
+
+@media (max-width: max-xs)
+
+  .dashboard
+    margin-left 0
+    &__title
+      margin-left 10px
+    &__workspace
+      margin-left 10px
+      width auto
+    &__userstatut
+      margin-left 15px
+      width auto
+    &__calltoaction
+      justify-content center
+    &__activity
+      width 100%
+      margin 25px 0
+      &__header
+        display block
+        height auto
+        margin 0 15px 20px 15px
+        &__title
+          margin-bottom 20px
+    &__memberlist
+      margin 50px 0
+      width 100%
+      &__title
+        margin-left 10px
+      &__wrapper
+        height auto
+      &__list
+        height auto
+        overflow-Y visible
+      &__btnadd
+        border-top 0
+    &__webdav
+      margin-left 10px
+      &__information
+        width 350px

src/css/Variable.styl

@@ -40,8 +40,18 @@ taskColor = #2d5a88
 
 issueColor = #a4835e
 
-// calendarColor =
-// dashboard =
+/** Role Color  **/
+gestionnaire = #f2af2d
+lecteur = #15D948
+contributeur = #3145F7
+responsable = #ED0007
+
+/** Btn call to action dashboard **/
+writefile = #a738ed
+importfile = #ff8400
+calendar = #f63434
+explore = #87d04c
+
 
 /*************************/
 /**** BOX SHADOW ****/

src/css/index.styl

@@ -21,3 +21,5 @@ html, body, #content, #content > div
 @import 'PageHtml'
 @import 'Timeline'
 @import 'File'
+
+@import 'Dashboard'