Sfoglia il codice sorgente

added switch lang btn in header

Skylsmoi 5 anni fa
parent
commit
264a41226e

+ 2 - 1
frontend/src/action-creator.sync.js Vedi File

15
 export const USER_ROLE = 'User/Role'
15
 export const USER_ROLE = 'User/Role'
16
 export const USER_CONNECTED = 'User/Connected'
16
 export const USER_CONNECTED = 'User/Connected'
17
 export const USER_DISCONNECTED = 'User/Disconnected'
17
 export const USER_DISCONNECTED = 'User/Disconnected'
18
+export const USER_LANG = 'User/Lang'
18
 export const setUserConnected = user => ({ type: `Set/${USER_CONNECTED}`, user })
19
 export const setUserConnected = user => ({ type: `Set/${USER_CONNECTED}`, user })
19
 export const setUserDisconnected = () => ({ type: `Set/${USER_DISCONNECTED}` })
20
 export const setUserDisconnected = () => ({ type: `Set/${USER_DISCONNECTED}` })
20
 export const updateUserData = userData => ({ type: `Update/${USER_DATA}`, data: userData })
21
 export const updateUserData = userData => ({ type: `Update/${USER_DATA}`, data: userData })
21
 export const setUserRole = userRole => ({ type: `Set/${USER_ROLE}`, userRole }) // this actually update workspaceList state
22
 export const setUserRole = userRole => ({ type: `Set/${USER_ROLE}`, userRole }) // this actually update workspaceList state
23
+export const setUserLang = lang => ({ type: `Set/${USER_LANG}`, lang })
22
 export const updateUserWorkspaceSubscriptionNotif = (workspaceId, subscriptionNotif) =>
24
 export const updateUserWorkspaceSubscriptionNotif = (workspaceId, subscriptionNotif) =>
23
   ({ type: `Update/${USER_ROLE}/SubscriptionNotif`, workspaceId, subscriptionNotif })
25
   ({ type: `Update/${USER_ROLE}/SubscriptionNotif`, workspaceId, subscriptionNotif })
24
 
26
 
41
 
43
 
42
 export const LANG = 'Lang'
44
 export const LANG = 'Lang'
43
 export const updateLangList = langList => ({ type: `Update/${LANG}`, langList })
45
 export const updateLangList = langList => ({ type: `Update/${LANG}`, langList })
44
-export const setLangActive = langId => ({ type: `Set/${LANG}/Active`, langId })

+ 0 - 2
frontend/src/appFactory.js Vedi File

2
 import { FETCH_CONFIG } from './helper.js'
2
 import { FETCH_CONFIG } from './helper.js'
3
 import i18n from './i18n.js'
3
 import i18n from './i18n.js'
4
 
4
 
5
-console.log('appFactory', i18n)
6
-
7
 export function appFactory (WrappedComponent) {
5
 export function appFactory (WrappedComponent) {
8
   return class AppFactory extends React.Component {
6
   return class AppFactory extends React.Component {
9
     renderAppFull = (appConfig, user, content) => GLOBAL_renderAppFull({
7
     renderAppFull = (appConfig, user, content) => GLOBAL_renderAppFull({

+ 4 - 4
frontend/src/component/Header/MenuActionListItem/DropdownLang.jsx Vedi File

2
 import PropTypes from 'prop-types'
2
 import PropTypes from 'prop-types'
3
 
3
 
4
 const DropdownLang = props => {
4
 const DropdownLang = props => {
5
-  const activeLang = props.langList.find(l => l.active) || {id: 'fr', name: 'Français', src: '', active: true}
6
   return (
5
   return (
7
     <li className='header__menu__rightside__itemlanguage'>
6
     <li className='header__menu__rightside__itemlanguage'>
8
       <div className='header__menu__rightside__itemlanguage__languagedropdown dropdown'>
7
       <div className='header__menu__rightside__itemlanguage__languagedropdown dropdown'>
14
           aria-haspopup='true'
13
           aria-haspopup='true'
15
           aria-expanded='false'
14
           aria-expanded='false'
16
         >
15
         >
17
-          <img className='languagedropdown__btnlanguage__imgselected' src={activeLang.src} />
16
+          <img className='languagedropdown__btnlanguage__imgselected' src={props.langList.find(l => l.id === props.idLangActive).icon} />
18
         </button>
17
         </button>
19
         <div className='languagedropdown__subdropdown dropdown-menu' aria-labelledby='headerDropdownMenuButton'>
18
         <div className='languagedropdown__subdropdown dropdown-menu' aria-labelledby='headerDropdownMenuButton'>
20
-          { props.langList.map((l, i) => l.active === false &&
19
+          { props.langList.filter(l => l.id !== props.idLangActive).map((l, i) =>
21
             <div className='subdropdown__link dropdown-item' onClick={() => props.onChangeLang(l.id)} key={i}>
20
             <div className='subdropdown__link dropdown-item' onClick={() => props.onChangeLang(l.id)} key={i}>
22
-              <img className='subdropdown__flag' src={l.src} />
21
+              <img className='subdropdown__flag' src={l.icon} />
23
             </div>
22
             </div>
24
           )}
23
           )}
25
         </div>
24
         </div>
31
 
30
 
32
 DropdownLang.propTypes = {
31
 DropdownLang.propTypes = {
33
   langList: PropTypes.array.isRequired,
32
   langList: PropTypes.array.isRequired,
33
+  idLangActive: PropTypes.string.isRequired,
34
   onChangeLang: PropTypes.func.isRequired
34
   onChangeLang: PropTypes.func.isRequired
35
 }
35
 }

+ 3 - 2
frontend/src/container/Header.jsx Vedi File

14
 import logoHeader from '../img/logo-tracim.png'
14
 import logoHeader from '../img/logo-tracim.png'
15
 import {
15
 import {
16
   newFlashMessage,
16
   newFlashMessage,
17
-  setLangActive,
17
+  setUserLang,
18
   setUserDisconnected
18
   setUserDisconnected
19
 } from '../action-creator.sync.js'
19
 } from '../action-creator.sync.js'
20
 import {
20
 import {
33
   handleClickSubmit = () => {}
33
   handleClickSubmit = () => {}
34
 
34
 
35
   handleChangeLang = langId => {
35
   handleChangeLang = langId => {
36
-    this.props.dispatch(setLangActive(langId))
36
+    this.props.dispatch(setUserLang(langId))
37
     i18n.changeLanguage(langId)
37
     i18n.changeLanguage(langId)
38
   }
38
   }
39
 
39
 
82
 
82
 
83
               <MenuActionListItemDropdownLang
83
               <MenuActionListItemDropdownLang
84
                 langList={lang}
84
                 langList={lang}
85
+                idLangActive={user.lang}
85
                 onChangeLang={this.handleChangeLang}
86
                 onChangeLang={this.handleChangeLang}
86
               />
87
               />
87
 
88
 

+ 0 - 1
frontend/src/css/Header.styl Vedi File

40
         background-color transparent
40
         background-color transparent
41
         cursor pointer
41
         cursor pointer
42
       &__itemlanguage
42
       &__itemlanguage
43
-        display none
44
         &__languagedropdown
43
         &__languagedropdown
45
           .languagedropdown
44
           .languagedropdown
46
             &__btnlanguage
45
             &__btnlanguage

frontend/src/img/drapeau-en.png → frontend/src/img/flag_en.png Vedi File


frontend/src/img/drapeau-fr.png → frontend/src/img/flag_fr.png Vedi File


+ 14 - 3
frontend/src/reducer/lang.js Vedi File

1
 import { LANG } from '../action-creator.sync.js'
1
 import { LANG } from '../action-creator.sync.js'
2
+import flagEn from '../img/flag_en.png'
3
+import flagFr from '../img/flag_fr.png'
2
 
4
 
3
-export function lang (state = [], action) {
5
+const defaultLang = [{
6
+  id: 'en',
7
+  icon: flagEn
8
+}, {
9
+  id: 'fr',
10
+  icon: flagFr
11
+}]
12
+
13
+export function lang (state = defaultLang, action) {
4
   switch (action.type) {
14
   switch (action.type) {
5
     case `Update/${LANG}`:
15
     case `Update/${LANG}`:
6
       return action.langList
16
       return action.langList
7
 
17
 
8
-    case `Set/${LANG}/Active`:
9
-      return state.map(l => ({...l, active: l.id === action.langId}))
18
+    // Côme - 2018/07/30 - deprecated, lang active is saved in user reducer
19
+    // case `Set/${LANG}/Active`:
20
+    //   return state.map(l => ({...l, active: l.id === action.langId}))
10
 
21
 
11
     default:
22
     default:
12
       return state
23
       return state

+ 9 - 2
frontend/src/reducer/user.js Vedi File

1
 import {
1
 import {
2
   USER_CONNECTED,
2
   USER_CONNECTED,
3
   USER_DISCONNECTED,
3
   USER_DISCONNECTED,
4
-  USER_DATA
4
+  USER_DATA,
5
+  USER_LANG
5
 } from '../action-creator.sync.js'
6
 } from '../action-creator.sync.js'
6
 
7
 
7
 const defaultUser = {
8
 const defaultUser = {
8
   user_id: -1,
9
   user_id: -1,
9
   logged: null, // null avoid to be redirected to /login while whoami ep has not responded yet
10
   logged: null, // null avoid to be redirected to /login while whoami ep has not responded yet
11
+  auth: '',
10
   timezone: '',
12
   timezone: '',
11
   profile: {
13
   profile: {
12
     id: 1,
14
     id: 1,
17
   caldav_url: null,
19
   caldav_url: null,
18
   avatar_url: null,
20
   avatar_url: null,
19
   created: '',
21
   created: '',
20
-  display_name: ''
22
+  public_name: '',
23
+  lang: 'en' // @FIXME Côme - 2018/07/30 - remove this line when api returns the lang (https://github.com/tracim/tracim/issues/734)
21
 }
24
 }
22
 
25
 
23
 export default function user (state = defaultUser, action) {
26
 export default function user (state = defaultUser, action) {
24
   switch (action.type) {
27
   switch (action.type) {
25
     case `Set/${USER_CONNECTED}`:
28
     case `Set/${USER_CONNECTED}`:
26
       return {
29
       return {
30
+        ...state,
27
         ...action.user,
31
         ...action.user,
28
         avatar_url: 'https://www.algoo.fr/static/images/people_images/PERSO_SEUL.png' // @FIXME use avatar from api when db handles it
32
         avatar_url: 'https://www.algoo.fr/static/images/people_images/PERSO_SEUL.png' // @FIXME use avatar from api when db handles it
29
       }
33
       }
34
     case `Update/${USER_DATA}`:
38
     case `Update/${USER_DATA}`:
35
       return {...state, ...action.data}
39
       return {...state, ...action.data}
36
 
40
 
41
+    case `Set/${USER_LANG}`:
42
+      return {...state, lang: action.lang}
43
+
37
     default:
44
     default:
38
       return state
45
       return state
39
   }
46
   }