update of account page

jsonserver/static_db.json

@@ -14,14 +14,12 @@
     "logged": true,
     "user": {
       "id": 5,
-      "username": "Smoi",
-      "firstname": "Côme",
-      "lastname": "Stoilenom",
-      "email": "osef@algoo.fr",
-      "avatar": "https://avatars3.githubusercontent.com/u/11177014?s=460&v=4",
+      "username": "franclecompte",
+      "firstname": "François",
+      "lastname": "Lecompte",
+      "email": "francois.lecompte@algoo.fr",
+      "avatar": "https://rawgit.com/tracim/tracim_front/develop/src/img/imgProfil.png",
       "role": "Utilisateur",
-      "job": "Integrateur | Webdesigner",
-      "company": "Algoo",
       "caldav_url": "http://algoo.trac.im/caldav/user/5.ics/"
     }
   },

src/component/Account/Notification.jsx

@@ -8,8 +8,8 @@ export const Notification = props => {
 
   return (
     <div className='account__userpreference__setting__notification'>
-      <div className='notification__title subTitle ml-2 ml-sm-0'>
-        Mes Espaces de Travail
+      <div className='notification__sectiontitle subTitle ml-2 ml-sm-0'>
+        Espace de Travail et Notification
       </div>
 
       <div className='notification__text ml-2 ml-sm-0'>

src/component/Account/PersonalData.jsx

@@ -3,32 +3,110 @@ import React from 'react'
 export const PersonalData = props => {
   return (
     <div className='account__userpreference__setting__personaldata'>
-      <div className='personaldata__title subTitle ml-2 ml-sm-0'>
-        Mes informations personnelles
+      <div className='personaldata__sectiontitle subTitle ml-2 ml-sm-0'>
+        Information du compte et personnelles
       </div>
 
       <div className='personaldata__text ml-2 ml-sm-0'>
         NYI
       </div>
 
-      <div className='personaldata__form'>
-        <div className='personaldata__form__title'>
-          Mot de passe :
-        </div>
-        <input className='personaldata__form__txtinput form-control' type='password' placeholder='Ancien mot de passe' />
-        <input className='personaldata__form__txtinput form-control' type='password' placeholder='Nouveau mot de passe' />
+      <div className='personaldata__dataconnexion d-flex align-items-center justify-content-between flex-wrap'>
+        <form className='personaldata__form mr-5'>
+          <div className='personaldata__form__title'>
+            Mot de passe :
+          </div>
+          <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
+            <input className='personaldata__form__txtinput form-control mr-3' type='password' placeholder='Ancien mot de passe' />
+            <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='password' placeholder='Nouveau mot de passe' />
+          </div>
+          <div className='d-flex justify-content-sm-end'>
+            <button type='submit' className='personaldata__form__button btn btn-outline-primary d-flex justify-content-end'>
+              Envoyer
+            </button>
+          </div>
+        </form>
+
+        <form className='personaldata__form'>
+          <div className='personaldata__form__title'>
+            Adresse mail :
+          </div>
+          <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
+            <input className='personaldata__form__txtinput form-control mr-3' type='email' placeholder='Ancienne adresse mail' />
+            <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='email' placeholder='Nouvelle adresse mail' />
+          </div>
+          <div className='d-flex justify-content-sm-end'>
+            <button type='submit' className='personaldata__form__button btn btn-outline-primary d-flex justify-content-end'>
+              Envoyer
+            </button>
+          </div>
+        </form>
       </div>
 
-      <div className='personaldata__form'>
-        <div className='personaldata__form__title'>
-          Adresse mail :
-        </div>
-        <input className='personaldata__form__txtinput form-control' type='email' placeholder='Ancienne adresse mail' />
-        <input className='personaldata__form__txtinput form-control' type='email' placeholder='Nouvelle adresse mail' />
+      <div className='personaldata__dataheader d-flex align-items-center justify-content-between flex-wrap'>
+
+        <form className='personaldata__form mr-5'>
+          <div className='personaldata__form__title'>
+            Nom de Famille :
+          </div>
+          <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
+            <input className='personaldata__form__txtinput form-control mr-3' type='password' placeholder='Ancien nom de famille' />
+            <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='password' placeholder='Nouveau nom de famille' />
+          </div>
+          <div className='d-flex justify-content-sm-end'>
+            <button type='submit' className='personaldata__form__button btn btn-outline-primary'>
+              Envoyer
+            </button>
+          </div>
+        </form>
+
+        <form className='personaldata__form'>
+          <div className='personaldata__form__title'>
+            Prénom :
+          </div>
+          <div className='d-flex align-items-center justify-content-between flex-wrap mb-4'>
+            <input className='personaldata__form__txtinput form-control mr-3' type='password' placeholder='Ancien prénom' />
+            <input className='personaldata__form__txtinput form-control mt-3 mt-sm-0' type='password' placeholder='Nouveau prénom' />
+          </div>
+          <div className='d-flex justify-content-sm-end'>
+            <button type='submit' className='personaldata__form__button btn btn-outline-primary'>
+              Envoyer
+            </button>
+          </div>
+        </form>
       </div>
-      <div className='personaldata__form__button btn btn-primary'>
-        Envoyer
+
+      <div className='account__userpreference__setting__calendar mt-4 '>
+
+        <div className='calendar__sectiontitle subTitle ml-2 ml-sm-0'>
+          Calendrier
+        </div>
+
+        <div className='calendar__text ml-2 ml-sm-0'>
+          NYI
+        </div>
+
+        <div className='calendar__title ml-2 ml-sm-0'>
+          Accèder à votre Calendrier personnel
+        </div>
+        <div className='calendar__link ml-2 ml-sm-0'>
+          { /* {props.user.caldavUrl} */ }
+        </div>
+
+        <div className='calendar__title ml-2 ml-sm-0'>
+          Changer de Fuseau Horaire :
+        </div>
+
+        <div className='calendar__timezone ml-2 ml-sm-0 dropdown'>
+          <button className='calendar__timezone__btn btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+            Fuseau Horaire
+          </button>
+          <div className='calendar__timezone__submenu dropdown-menu'>
+            { /* {props.timezone.map((t, i) => <div className='calendar__timezone__submenu__item dropdown-item' key={i}>{t.place} {t.gmt}</div>)} */ }
+          </div>
+        </div>
       </div>
+
     </div>
   )
 }

src/component/Account/UserInfo.jsx

@@ -10,18 +10,18 @@ export const UserInfo = props => {
         <div className='account__userinformation__name mb-3'>
           {`${props.user.firstname} ${props.user.lastname}`}
         </div>
-        <a href={`mailto:${props.user.email}`} className='account__userinformation__email mb-3'>
+        <a href={`mailto:${props.user.email}`} className='account__userinformation__email d-block mb-3'>
           {props.user.email}
         </a>
         <div className='account__userinformation__role mb-3'>
           {props.user.role}
         </div>
-        <div className='account__userinformation__job mb-3'>
+        { /* <div className='account__userinformation__job mb-3'>
           {props.user.job}
         </div>
         <a href='http://www.algoo.fr' className='account__userinformation__company'>
           {props.user.company}
-        </a>
+        </a> */ }
       </div>
     </div>
   )

src/container/Account.jsx

@@ -25,11 +25,13 @@ class Account extends React.Component {
         name: 'personalData',
         menuLabel: 'Informations Compte',
         active: true
-      }, {
-        name: 'calendar',
-        menuLabel: 'Calendrier',
-        active: false
-      }, {
+      },
+      // {
+      //   name: 'calendar',
+      //   menuLabel: 'Calendrier',
+      //   active: false
+      // },
+      {
         name: 'notification',
         menuLabel: 'Notifications',
         active: false

src/css/AccountPage.styl

@@ -11,6 +11,36 @@ settingText()
 .table tr:nth-child(even)
   background-color grey-hover
 
+
+/**** MENU HAMBURGER ON EXPAND BAR *****/
+
+.hamburger--spring .hamburger-inner
+  margin 4px 8px
+
+.hamburger--spring .hamburger-inner::before
+  top 7px
+
+.hamburger--spring .hamburger-inner::after
+  top 14px
+
+/***************************************/
+
+.hamburger--spring
+  .hamburger-inner
+    transition-delay 0.22s
+    background-color transparent
+    &::before
+      top -3px
+      transition top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)
+      transform translate3d(0, 10px, 0) rotate(45deg)
+    &::after
+      top -3px
+      transition top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1)
+      transform translate3d(0, 10px, 0) rotate(-45deg)
+
+.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before
+  width 30px
+
 .account
   &__userinformation
     display flex
@@ -91,12 +121,10 @@ settingText()
             margin-bottom 15px
             font-size 18px
           &__txtinput
-            display inline-flex
+            display block
             width auto
-            margin 0 15px 15px 0
             border 1px solid blue
             border-radius 5px
-            padding 8px 15px
           &__button
             vertical-align top
             border 1px solid blue
@@ -170,7 +198,7 @@ settingText()
             &:focus
               outline none
             &__box
-              margin-top 15px
+              margin 15px 5px 0 0
               &__icon, &__icon::before, &__icon::after
                 width 30px
         &__list
@@ -236,6 +264,10 @@ settingText()
 
 @media (max-width: max-xs)
 
+  .hamburger-box
+    width 45px
+    height 22px
+
   .account
     &__userinformation
       &__avatar