Browse Source

add notification of flash message button in header

AlexiCauvin 6 years ago
parent
commit
7059bf6dd2

+ 30 - 0
src/component/Header/MenuActionListItem/Notification.jsx View File

1
+import React from 'react'
2
+import PropTypes from 'prop-types'
3
+
4
+const Notification = props => {
5
+  return (
6
+    <li className='header__menu__rightside__itemnotification'>
7
+      <div className='header__menu__rightside__itemnotification__timeline dropdown'>
8
+        <button
9
+          type='button'
10
+          className='timeline__btnnotif btnnavbar btn btn-secondary dropdown-toggle'
11
+          id='headerNotificationBtn'
12
+          data-toggle='dropdown'
13
+          aria-haspopup='true'
14
+          aria-expanded='false'
15
+        >
16
+          Notification
17
+        </button>
18
+        <div className='timeline__subdropdown dropdown-menu' aria-labelledby='headerDropdownMenuButton'>
19
+          <div className='timeline__subdropdown__text dropdown-item' >
20
+            Conversation archivé
21
+          </div>
22
+          <div className='timeline__subdropdown__text dropdown-item' >
23
+            Fichier supprimé
24
+          </div>
25
+        </div>
26
+      </div>
27
+    </li>
28
+  )
29
+}
30
+export default Notification

+ 3 - 0
src/container/Header.jsx View File

10
 import MenuActionListItemDropdownLang from '../component/Header/MenuActionListItem/DropdownLang.jsx'
10
 import MenuActionListItemDropdownLang from '../component/Header/MenuActionListItem/DropdownLang.jsx'
11
 import MenuActionListItemHelp from '../component/Header/MenuActionListItem/Help.jsx'
11
 import MenuActionListItemHelp from '../component/Header/MenuActionListItem/Help.jsx'
12
 import MenuActionListItemMenuProfil from '../component/Header/MenuActionListItem/MenuProfil.jsx'
12
 import MenuActionListItemMenuProfil from '../component/Header/MenuActionListItem/MenuProfil.jsx'
13
+import MenuActionListItemNotification from '../component/Header/MenuActionListItem/Notification.jsx'
13
 import logoHeader from '../img/logo-tracim.png'
14
 import logoHeader from '../img/logo-tracim.png'
14
 import {
15
 import {
15
   newFlashMessage,
16
   newFlashMessage,
83
                 user={user}
84
                 user={user}
84
                 onClickLogout={this.handleClickLogout}
85
                 onClickLogout={this.handleClickLogout}
85
               />
86
               />
87
+
88
+              <MenuActionListItemNotification />
86
             </ul>
89
             </ul>
87
 
90
 
88
           </div>
91
           </div>

+ 18 - 1
src/css/Header.styl View File

1
 .header
1
 .header
2
   position fixed
2
   position fixed
3
   width 100%
3
   width 100%
4
-  box-shadow shadow-bottom
4
+  border-bottom 1px solid grey
5
   z-index 5
5
   z-index 5
6
   &__logo
6
   &__logo
7
     &__img
7
     &__img
69
             color darkGrey
69
             color darkGrey
70
       &__itemprofil
70
       &__itemprofil
71
         .profilgroup
71
         .profilgroup
72
+          margin-right 30px
72
           &__name
73
           &__name
73
             border 0
74
             border 0
74
             padding 0 5px
75
             padding 0 5px
105
             .setting__link
106
             .setting__link
106
               padding 10px
107
               padding 10px
107
               color fontColor
108
               color fontColor
109
+      &__itemnotification
110
+        &__timeline
111
+          margin-right 30px
112
+          .timeline
113
+            &__btnnotif
114
+              color darkGrey
115
+              &::after
116
+                margin-left 15px
117
+            &__subdropdown
118
+              padding 0
119
+              left inherit
120
+              right 0
121
+              cursor pointer
122
+              &__text
123
+                padding 10px;
124
+
108
 
125
 
109
 @media (min-width: min-lg) and (max-width: max-lg)
126
 @media (min-width: min-lg) and (max-width: max-lg)
110
   .header
127
   .header