POC of basic UI for Keymap configuration

luc-github · Dec 30, 2022 · 35f1377 · 35f1377
1 parent afc13aa
commit 35f1377
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 16 deletions.
diff --git a/src/components/Controls/Fields/ItemsList.js b/src/components/Controls/Fields/ItemsList.js
@@ -56,6 +56,8 @@ const ItemControl = ({
     setValue,
     validationfn,
     fixed,
+    nodelete,
+    editable,
     sorted,
 }) => {
     const iconsList = { ...iconsTarget, ...iconsFeather }
@@ -65,7 +67,10 @@ const ItemControl = ({
     const icon = value ? value[indexIcon != -1 ? indexIcon : 0].value : null
     const name = value ? value[indexName != -1 ? indexName : 0].value : null
     const controlIcon = iconsList[icon] ? iconsList[icon] : ""
-
+    if (idList == "keymap") {
+        console.log(itemData)
+        console.log(completeList)
+    }
     const onEdit = (state) => {
         completeList[index].editionMode = state
         setValue([...completeList])
@@ -139,13 +144,13 @@ const ItemControl = ({
                         )}
 
                     <div class="item-list-name">
-                        {!fixed && (
+                        {(!fixed || editable) && (
                             <ButtonImg
                                 m2
                                 tooltip
                                 data-tooltip={T("S94")}
                                 style={colorStyle}
-                                label={name}
+                                label={`${T(name)}: ${value[1].value}`}
                                 icon={controlIcon}
                                 width="100px"
                                 onClick={(e) => {
@@ -155,10 +160,12 @@ const ItemControl = ({
                                 }}
                             />
                         )}
-                        {fixed && <label class="m-1">{T(name)}</label>}
+                        {fixed && !editable && (
+                            <label class="m-1">{T(name)}</label>
+                        )}
                     </div>
 
-                    {!fixed && (
+                    {!(fixed || nodelete) && (
                         <ButtonImg
                             m2
                             tooltip
@@ -206,13 +213,15 @@ const ItemControl = ({
                                     />
                                 )}
 
-                            <ButtonImg
-                                m2
-                                tooltip
-                                data-tooltip={T("S37")}
-                                icon={<Trash2 />}
-                                onClick={removeItem}
-                            />
+                            {!nodelete && (
+                                <ButtonImg
+                                    m2
+                                    tooltip
+                                    data-tooltip={T("S37")}
+                                    icon={<Trash2 />}
+                                    onClick={removeItem}
+                                />
+                            )}
                         </div>
                     </div>
                     <div class="m-1">
@@ -280,6 +289,8 @@ const ItemsList = ({
     fixed,
     sorted,
     depend,
+    nodelete,
+    editable,
     ...rest
 }) => {
     const { interfaceSettings, connectionSettings } = useSettingsContext()
@@ -288,7 +299,7 @@ const ItemsList = ({
         interfaceSettings.current.settings
     )
     const canshow = connectionDepend(depend, connectionSettings.current)
-
+    console.log(id)
     const addItem = (e) => {
         useUiContextFn.haptic()
         e.target.blur()
@@ -357,7 +368,7 @@ const ItemsList = ({
                         onClick={addItem}
                     />
                 )}
-                {fixed && <label class="m-1">{T(label)}</label>}
+                {fixed && <label class="m-2">{T(label)}</label>}
             </legend>
 
             <div class="items-group-content">
@@ -373,6 +384,8 @@ const ItemsList = ({
                                 setValue={setValue}
                                 fixed={fixed}
                                 sorted={sorted}
+                                nodelete={nodelete}
+                                editable={editable}
                             />
                         )
                     })}

diff --git a/src/tabs/interface/importHelper.js b/src/tabs/interface/importHelper.js
@@ -40,8 +40,13 @@ function formatItem(itemData, index = -1, origineId = "extrapanels") {
                     newItem.help = "S97"
                     break
                 case "name":
-                    newItem.type = "text"
-                    newItem.label = "S129"
+                    if (origineId == "keymap") {
+                        newItem.type = "label"
+                        newItem.label = itemData[key]
+                    } else {
+                        newItem.type = "text"
+                        newItem.label = "S129"
+                    }
                     break
                 case "icon":
                     newItem.type = "icon"

diff --git a/src/targets/preferences.json b/src/targets/preferences.json
@@ -136,6 +136,27 @@
                 "type": "boolean",
                 "label": "S93",
                 "value": true
+            },
+            {
+                "id": "keymap",
+                "sorted": false,
+                "fixed": true,
+                "nodelete": true,
+                "editable": true,
+                "label": "S212",
+                "type": "list",
+                "value": [
+                    {
+                        "id": "btn+X",
+                        "name": "btn+X",
+                        "key": "ArrowUp"
+                    },
+                    {
+                        "id": "btn-X",
+                        "name": "btn-X",
+                        "key": "ArrowDown"
+                    }
+                ]
             }
         ],
         "notification": [

diff --git a/src/targets/translations/en.json b/src/targets/translations/en.json
@@ -216,6 +216,10 @@
     "S209": "Invert X",
     "S210": "Invert Y",
     "S211": "Swap X and Y",
+    "S212": "Key mapping",
+    "btn+X": "Button X+",
+    "btn-X": "Button X-",
+    "key": "Key",
     "panels": "Panels",
     "processing": "Processing",
     "no stream": "No stream",