Browse Source

[https://github.com/tracim/tracim/issues/809] added lang label on dropdown + moved specific css of dropdownlang into specific file

Skylsmoi 5 years ago
parent
commit
95121a805a

+ 5 - 2
frontend/src/component/Header/MenuActionListItem/DropdownLang.jsx View File

1
 import React from 'react'
1
 import React from 'react'
2
 import PropTypes from 'prop-types'
2
 import PropTypes from 'prop-types'
3
 
3
 
4
+require('./DropdownLang.styl')
5
+
4
 const DropdownLang = props => {
6
 const DropdownLang = props => {
5
   return (
7
   return (
6
     <li className='header__menu__rightside__itemlanguage'>
8
     <li className='header__menu__rightside__itemlanguage'>
16
           <img className='languagedropdown__btnlanguage__imgselected' src={props.langList.find(l => l.id === props.idLangActive).icon} />
18
           <img className='languagedropdown__btnlanguage__imgselected' src={props.langList.find(l => l.id === props.idLangActive).icon} />
17
         </button>
19
         </button>
18
         <div className='languagedropdown__subdropdown dropdown-menu' aria-labelledby='headerDropdownMenuButton'>
20
         <div className='languagedropdown__subdropdown dropdown-menu' aria-labelledby='headerDropdownMenuButton'>
19
-          { props.langList.filter(l => l.id !== props.idLangActive).map((l, i) =>
20
-            <div className='subdropdown__link dropdown-item' onClick={() => props.onChangeLang(l.id)} key={i}>
21
+          { props.langList.filter(l => l.id !== props.idLangActive).map(l =>
22
+            <div className='subdropdown__link dropdown-item' onClick={() => props.onChangeLang(l.id)} key={l.id}>
21
               <img className='subdropdown__flag' src={l.icon} />
23
               <img className='subdropdown__flag' src={l.icon} />
24
+              { l.label }
22
             </div>
25
             </div>
23
           )}
26
           )}
24
         </div>
27
         </div>

+ 25 - 0
frontend/src/component/Header/MenuActionListItem/DropdownLang.styl View File

1
+@import "../../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
2
+
3
+.languagedropdown
4
+  &__btnlanguage
5
+    margin-right 25px
6
+    color darkGrey
7
+    &:focus
8
+      box-shadow shadow-all-side-blue
9
+      border-radius 5px
10
+      background-color transparent
11
+    &__imgselected
12
+      margin-right 10px
13
+      width 20px
14
+      height 15px
15
+  &__subdropdown
16
+    padding 0
17
+    min-width 0
18
+    .subdropdown
19
+      &__link
20
+        cursor pointer
21
+      &__flag
22
+        width 25px
23
+        height 18px
24
+        vertical-align text-top
25
+        margin-right 5px

+ 0 - 23
frontend/src/css/Header.styl View File

50
         border 1px solid grey
50
         border 1px solid grey
51
         background-color transparent
51
         background-color transparent
52
         cursor pointer
52
         cursor pointer
53
-      &__itemlanguage
54
-        &__languagedropdown
55
-          .languagedropdown
56
-            &__btnlanguage
57
-              margin-right 25px
58
-              color darkGrey
59
-              &:focus
60
-                box-shadow shadow-all-side-blue
61
-                border-radius 5px
62
-                background-color transparent
63
-              &__imgselected
64
-                margin-right 10px
65
-                width 20px
66
-                height 15px
67
-            &__subdropdown
68
-              padding 0
69
-              min-width 0
70
-              .subdropdown
71
-                &__link
72
-                  cursor pointer
73
-                &__flag
74
-                  width 25px
75
-                  height 18px
76
       &__itemquestion
53
       &__itemquestion
77
         display none
54
         display none
78
         &__btnquestion
55
         &__btnquestion

+ 2 - 0
frontend/src/reducer/lang.js View File

4
 
4
 
5
 const defaultLang = [{
5
 const defaultLang = [{
6
   id: 'en',
6
   id: 'en',
7
+  label: 'English',
7
   icon: flagEn
8
   icon: flagEn
8
 }, {
9
 }, {
9
   id: 'fr',
10
   id: 'fr',
11
+  label: 'Français',
10
   icon: flagFr
12
   icon: flagFr
11
 }]
13
 }]
12
 
14