diff --git a/src/api/keymap/db.js b/src/api/keymap/db.js index afeb99b26..fa9ffd5ed 100644 --- a/src/api/keymap/db.js +++ b/src/api/keymap/db.js @@ -178,7 +178,7 @@ class KeymapDB { // Modify our baseKeyCodeTable, depending on the language selected by the static methods and by inside function newLanguageLayout baseKeyCodeTable = KeymapDB.updateBaseKeyCode(); const keyCodeTableWithModifiers = - this.language !== "english" && supportModifiedTables[this.language] + this.language !== "english" && this.language !== "british" && supportModifiedTables[this.language] ? defaultKeyCodeTable.concat(supportModifiedTables[this.language]) : defaultKeyCodeTable; // Modify our baseKeyCodeTable, depending on the language selected through function newLanguageLayout diff --git a/src/api/keymap/languages/newLanguageLayout.js b/src/api/keymap/languages/newLanguageLayout.js index 2991f3f25..a9949e236 100644 --- a/src/api/keymap/languages/newLanguageLayout.js +++ b/src/api/keymap/languages/newLanguageLayout.js @@ -22,7 +22,7 @@ * @param {newKeyCodeTable} newKeyCodeTable Key codes for new language */ function newLanguageLayout(baseKeyCodeTable, language = "english", newKeyCodeTable) { - if (language === "english") { + if (language === "english" || language === "british") { return baseKeyCodeTable; } return baseKeyCodeTable.map(group => { diff --git a/src/renderer/modules/KeyPickerKeyboard/KeyPicker.js b/src/renderer/modules/KeyPickerKeyboard/KeyPicker.js index 5794c6580..a77064fcd 100644 --- a/src/renderer/modules/KeyPickerKeyboard/KeyPicker.js +++ b/src/renderer/modules/KeyPickerKeyboard/KeyPicker.js @@ -399,6 +399,7 @@ class KeyPicker extends Component { const liso = { english: ENi, + british: ENi, spanish: ES, german: GR, french: FR, diff --git a/src/renderer/modules/Settings/GeneralSettings.js b/src/renderer/modules/Settings/GeneralSettings.js index 905289d93..4ec3e4360 100644 --- a/src/renderer/modules/Settings/GeneralSettings.js +++ b/src/renderer/modules/Settings/GeneralSettings.js @@ -1,5 +1,6 @@ import PropTypes from "prop-types"; import React, { Component } from "react"; +import Styled from "styled-components"; // React Bootstrap Components import Card from "react-bootstrap/Card"; @@ -17,7 +18,8 @@ import germanF from "@Assets/flags/germany.png"; import japaneseF from "@Assets/flags/japan.png"; import koreanF from "@Assets/flags/korean.png"; import spanishF from "@Assets/flags/spain.png"; -import englishUSUKF from "@Assets/flags/english.png"; +import englishUSF from "@Assets/flags/englishUS.png"; +import englishUKF from "@Assets/flags/englishUK.png"; import danishF from "@Assets/flags/denmark.png"; import swedishF from "@Assets/flags/sweden.png"; import finnishF from "@Assets/flags/finland.png"; @@ -35,6 +37,12 @@ import i18n from "../../i18n"; import Store from "../../utils/Store"; +const GeneraslSettihngsWrapper = Styled.div` +.dropdown-menu { + min-width: 13rem; +} +`; + const store = Store.getStore(); export default class GeneralSettings extends Component { @@ -67,8 +75,9 @@ export default class GeneralSettings extends Component { const { selectDarkMode, darkMode, neurons, selectedNeuron, connected, defaultLayer, selectDefaultLayer } = this.props; const { selectedLanguage } = this.state; let layersNames = neurons[selectedNeuron] ? neurons[selectedNeuron].layers : []; - let flags = [ - englishUSUKF, + const flags = [ + englishUSF, + englishUKF, spanishF, germanF, frenchF, @@ -84,6 +93,7 @@ export default class GeneralSettings extends Component { ]; let language = [ "english", + "british", "spanish", "german", "french", @@ -97,8 +107,9 @@ export default class GeneralSettings extends Component { "swissGerman", "eurkey", ]; - let languageNames = [ - "English", + const languageNames = [ + "English US", + "English UK", "Spanish", "German", "French", @@ -116,7 +127,7 @@ export default class GeneralSettings extends Component { text: languageNames[index], value: item, icon: flags[index], - index + index, })); layersNames = layersNames.map((item, index) => ({ @@ -148,43 +159,45 @@ export default class GeneralSettings extends Component { ]; return ( - - - } /> - </Card.Title> - <Card.Body> - <Form> - <Row> - <Col lg={6} md={12}> - <Form.Group controlId="selectLanguage" className="mb-3"> - <Form.Label>{i18n.preferences.language}</Form.Label> - <Select onSelect={this.changeLanguage} value={selectedLanguage} listElements={language} /> - </Form.Group> - </Col> - <Col lg={6} md={12}> - <Form.Group controlId="defaultLayer" className="mb-3"> - <Form.Label>{i18n.keyboardSettings.keymap.defaultLayer}</Form.Label> - <Select onSelect={selectDefaultLayer} value={defaultLayer} listElements={layersNames} disabled={!connected} /> - </Form.Group> - </Col> - </Row> - <Row> - <Col md={12}> - <Form.Group controlId="DarkMode" className="m-0"> - <Form.Label>{i18n.preferences.darkMode.label}</Form.Label> - <ToggleButtons - selectDarkMode={selectDarkMode} - value={darkMode} - listElements={layoutsModes} - style="flex" - size="sm" - /> - </Form.Group> - </Col> - </Row> - </Form> - </Card.Body> - </Card> + <GeneraslSettihngsWrapper> + <Card className="overflowFix card-preferences mt-4"> + <Card.Title> + <Title text={i18n.keyboardSettings.keymap.title} headingLevel={3} svgICO={<IconWrench />} /> + </Card.Title> + <Card.Body> + <Form> + <Row> + <Col lg={6} md={12}> + <Form.Group controlId="selectLanguage" className="mb-3"> + <Form.Label>{i18n.preferences.language}</Form.Label> + <Select onSelect={this.changeLanguage} value={selectedLanguage} listElements={language} /> + </Form.Group> + </Col> + <Col lg={6} md={12}> + <Form.Group controlId="defaultLayer" className="mb-3"> + <Form.Label>{i18n.keyboardSettings.keymap.defaultLayer}</Form.Label> + <Select onSelect={selectDefaultLayer} value={defaultLayer} listElements={layersNames} disabled={!connected} /> + </Form.Group> + </Col> + </Row> + <Row> + <Col md={12}> + <Form.Group controlId="DarkMode" className="m-0"> + <Form.Label>{i18n.preferences.darkMode.label}</Form.Label> + <ToggleButtons + selectDarkMode={selectDarkMode} + value={darkMode} + listElements={layoutsModes} + style="flex" + size="sm" + /> + </Form.Group> + </Col> + </Row> + </Form> + </Card.Body> + </Card> + </GeneraslSettihngsWrapper> ); } } diff --git a/src/static/flags/englishUK.png b/src/static/flags/englishUK.png new file mode 100644 index 000000000..8c53fc7b7 Binary files /dev/null and b/src/static/flags/englishUK.png differ diff --git a/src/static/flags/englishUS.png b/src/static/flags/englishUS.png new file mode 100644 index 000000000..bfe630a84 Binary files /dev/null and b/src/static/flags/englishUS.png differ