feat: add British layout, so Defy shows ISO English (#491)

* feat: add British layout, so Defy shows ISO English * chore: added new flags images to the library
Dygmalab · Aug 28, 2023 · dd4fee9 · dd4fee9
1 parent a7d6d2e
commit dd4fee9
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 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>
+        <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
diff --git a/src/static/flags/englishUS.png b/src/static/flags/englishUS.png