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

frontend/src/component/Header/MenuActionListItem/DropdownLang.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+require('./DropdownLang.styl')
+
 const DropdownLang = props => {
   return (
     <li className='header__menu__rightside__itemlanguage'>
@@ -16,9 +18,10 @@ const DropdownLang = props => {
           <img className='languagedropdown__btnlanguage__imgselected' src={props.langList.find(l => l.id === props.idLangActive).icon} />
         </button>
         <div className='languagedropdown__subdropdown dropdown-menu' aria-labelledby='headerDropdownMenuButton'>
-          { props.langList.filter(l => l.id !== props.idLangActive).map((l, i) =>
-            <div className='subdropdown__link dropdown-item' onClick={() => props.onChangeLang(l.id)} key={i}>
+          { props.langList.filter(l => l.id !== props.idLangActive).map(l =>
+            <div className='subdropdown__link dropdown-item' onClick={() => props.onChangeLang(l.id)} key={l.id}>
               <img className='subdropdown__flag' src={l.icon} />
+              { l.label }
             </div>
           )}
         </div>

frontend/src/component/Header/MenuActionListItem/DropdownLang.styl

@@ -0,0 +1,25 @@
+@import "../../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
+.languagedropdown
+  &__btnlanguage
+    margin-right 25px
+    color darkGrey
+    &:focus
+      box-shadow shadow-all-side-blue
+      border-radius 5px
+      background-color transparent
+    &__imgselected
+      margin-right 10px
+      width 20px
+      height 15px
+  &__subdropdown
+    padding 0
+    min-width 0
+    .subdropdown
+      &__link
+        cursor pointer
+      &__flag
+        width 25px
+        height 18px
+        vertical-align text-top
+        margin-right 5px

frontend/src/css/Header.styl

@@ -50,29 +50,6 @@
         border 1px solid grey
         background-color transparent
         cursor pointer
-      &__itemlanguage
-        &__languagedropdown
-          .languagedropdown
-            &__btnlanguage
-              margin-right 25px
-              color darkGrey
-              &:focus
-                box-shadow shadow-all-side-blue
-                border-radius 5px
-                background-color transparent
-              &__imgselected
-                margin-right 10px
-                width 20px
-                height 15px
-            &__subdropdown
-              padding 0
-              min-width 0
-              .subdropdown
-                &__link
-                  cursor pointer
-                &__flag
-                  width 25px
-                  height 18px
       &__itemquestion
         display none
         &__btnquestion

frontend/src/reducer/lang.js

@@ -4,9 +4,11 @@ import flagFr from '../img/flag_fr.png'
 
 const defaultLang = [{
   id: 'en',
+  label: 'English',
   icon: flagEn
 }, {
   id: 'fr',
+  label: 'Français',
   icon: flagFr
 }]