From 80b91f281c3d0ca76d71e331cc57171a1293cc95 Mon Sep 17 00:00:00 2001 From: AlexDygma <70891884+AlexDygma@users.noreply.github.com> Date: Thu, 29 Jun 2023 15:49:45 +0200 Subject: [PATCH] Fix bugs120 (#455) * Fixed colors on wireless settings view in light mode * Change the max-height to trigger the collpased main menu * Refactoring Navigation menu in order to reduce CSS complexity * fix: battery status reads did not stop when flashing Signed-off-by: Alejandro Parcet * chore: clean aftermarth of FWUpdate and fix functional components Signed-off-by: Alejandro Parcet * Added differents color indicator in the battery indicator * fix: Fixed keyboardSelect enumerator only showing first element Signed-off-by: Alejandro Parcet * Create unique id on the svg that renders a battery level on DefyBatteryIndicator * Fixing BatteryStatus component missing semicolumn * fix: Solved connectivity issues when revisiting keyboard select view Signed-off-by: Alejandro Parcet * Added new component to show the saving mode status * fix: Added 2s timeout to help slow computers to cope with disconnect Signed-off-by: Alejandro Parcet * Fixed the fonts and paddings in tooltips * fix: Added check to avoid error when reading bootloader property Signed-off-by: Alejandro Parcet * fix: Added flash sides check to avoid reflashing when there is no need Signed-off-by: Alejandro Parcet * Added styles to represent the battery charging * Fix: Text for transparent button description was wrong Signed-off-by: Alejandro Parcet * Fix: replaced regular button element from div to button and fixed it with transp-bg Signed-off-by: Alejandro Parcet --------- Signed-off-by: Alejandro Parcet Co-authored-by: Thiago Hernandez --- src/api/flash/defyFlasher/sideFlasher.js | 99 +-- src/api/focus/index.js | 2 +- src/api/hardware-dygma-defy-wired/index.js | 19 +- src/api/hardware-dygma-defy-wireless/index.js | 19 +- src/api/hardware-dygma-raise-ansi/index.js | 1 + src/api/hardware-dygma-raise-iso/index.js | 1 + src/renderer/App.js | 4 +- .../component/Battery/BatteryStatusSide.js | 63 +- .../component/Battery/DefyBatteryIndicator.js | 75 +- .../component/Battery/PileIndicator.js | 3 +- .../component/Battery/SavingModeIndicator.js | 49 ++ src/renderer/component/Battery/index.js | 3 +- .../component/Button/NavigationButton.js | 150 ++-- .../component/Button/regularButton.js | 8 +- src/renderer/component/ConfirmationDialog.js | 2 +- .../ConnectionStatus/ConnectionType.js | 7 + src/renderer/component/CopyFromDialog.js | 2 +- .../component/Icon/IconKeyboard2Stroke.js | 2 +- .../component/Icon/IconKeyboardSelector.js | 2 +- src/renderer/component/Icon/IconLeaf.js | 29 + .../component/Icon/IconMemory2Stroke.js | 2 +- .../component/Icon/IconPreferences2Stroke.js | 2 +- .../component/Icon/IconRobot2Stroke.js | 2 +- .../component/Icon/IconThunder2Stroke.js | 2 +- src/renderer/component/Icon/index.js | 2 + .../component/Loader/FirmwareLoader.js | 4 +- src/renderer/component/Modal/NameModal.js | 2 +- .../component/Modal/PreviewMacroModal.js | 2 +- src/renderer/i18n/en.js | 4 +- .../modules/BatteryStatus/BatteryStatus.js | 51 +- .../Firmware/FirmwareCheckProcessPanel.js | 6 +- .../modules/Firmware/FirmwareErrorPanel.js | 6 +- .../modules/Firmware/FirmwareUpdatePanel.js | 9 +- .../modules/Firmware/FirmwareUpdateProcess.js | 12 +- .../modules/Firmware/FirmwareVersionStatus.js | 2 +- .../modules/NavigationMenu/NavigationMenu.js | 48 +- .../NeuronConnection/NeuronConnection.js | 2 +- src/renderer/modules/Saving/Saving.js | 4 +- .../modules/Settings/BatterySettings.js | 16 +- src/renderer/modules/Settings/RFSettings.js | 4 +- src/renderer/modules/Settings/index.js | 3 +- .../modules/StandardView/StandardView.js | 2 +- src/renderer/theme/DarkTheme.js | 14 +- src/renderer/theme/GlobalStyles.js | 28 +- src/renderer/theme/LightTheme.js | 14 +- src/renderer/theme/Tokens.js | 5 + src/renderer/views/AltFirmwareUpdate.js | 104 --- src/renderer/views/FirmwareUpdate.js | 770 ++---------------- src/renderer/views/LayoutEditor.js | 4 +- src/renderer/views/MacroEditor.js | 2 +- src/renderer/views/SelectKeyboard.js | 118 +-- src/renderer/views/SuperkeysEditor.js | 2 +- src/renderer/views/Welcome.js | 2 +- src/renderer/views/Wireless.js | 7 +- 54 files changed, 645 insertions(+), 1152 deletions(-) create mode 100644 src/renderer/component/Battery/SavingModeIndicator.js create mode 100644 src/renderer/component/Icon/IconLeaf.js delete mode 100644 src/renderer/views/AltFirmwareUpdate.js diff --git a/src/api/flash/defyFlasher/sideFlasher.js b/src/api/flash/defyFlasher/sideFlasher.js index 0a171a3d9..67c7e661e 100644 --- a/src/api/flash/defyFlasher/sideFlasher.js +++ b/src/api/flash/defyFlasher/sideFlasher.js @@ -91,7 +91,7 @@ export default class sideFlaser { } // Update process - console.log(this.firmwareSides); + // console.log(this.firmwareSides); const seal = recoverSeal(this.firmwareSides.slice(0, 28)); console.log("This is the seal", seal); // console.dir(seal); @@ -109,14 +109,14 @@ export default class sideFlaser { // Begin upgrade process for selected side let ans; const sideId = side === "right" ? 0 : 1; - console.log(`flashing ${side} side keyboard`); serialport.write(`upgrade.keyscanner.isConnected ${sideId}\n`); await readLine(); let isConnected = await readLine(); + isConnected = isConnected.includes("true"); serialport.write(`upgrade.keyscanner.isBootloader ${sideId}\n`); await readLine(); let isItBootloader = await readLine(); - if (!isConnected || !isItBootloader) return; + isItBootloader = isItBootloader.includes("true"); serialport.write(`upgrade.keyscanner.begin ${sideId}\n`); await readLine(); ans = await readLine(); @@ -125,7 +125,7 @@ export default class sideFlaser { serialport.write("upgrade.keyscanner.getInfo\n"); await readLine(); ans = await readLine(); - console.log("Received data from Side: ", ans); + console.log("Received Info from Side: ", ans); ans = ans.split(" "); let info = { hardwareVersion: parseInt(ans[0]), @@ -139,54 +139,54 @@ export default class sideFlaser { let step = 0; let totalsteps = this.firmwareSides.length / 256; console.log("CRC check is ", info.programCrc !== seal.programCrc, ", info:", info.programCrc, "seal:", seal.programCrc); - // if (info.programCrc != seal.programCrc) { - let validate = "false", - retry = 0; - // while (validate !== "true" && retry < 3) { - // console.log("retry count: ", retry); - for (let i = 0; i < this.firmwareSides.length; i = i + 256) { - // console.log(`Addres ${i} of ${this.firmwareSides.length}`); - serialport.write("upgrade.keyscanner.sendWrite "); - if (wiredOrWireless == "wireless") await sleep(4); - const writeAction = new Uint8Array(new Uint32Array([info.flashStart + i, 256]).buffer); - const data = this.firmwareSides.slice(i, i + 256); - const crc = new Uint8Array(new Uint32Array([crc32("CRC-32", data)]).buffer); - const blob = new Uint8Array(writeAction.length + data.length + crc.length); - blob.set(writeAction); - blob.set(data, writeAction.length); - blob.set(crc, data.length + writeAction.length); - const buffer = new Buffer.from(blob); - // console.log("write sent: ", buffer); - // console.log("write sent, %", (step / totalsteps) * 100); - serialport.write(buffer); - if (wiredOrWireless == "wireless") await sleep(4); - let ack = await readLine(); - ack = ack + (await readLine()); - // console.log("ack received: ", ack); - if (!ack.includes("true") || ack.includes("false")) { - let retries = 3; - if (wiredOrWireless == "wireless") await sleep(100); - while (retries > 0 && (!ack.includes("true") || ack.includes("false"))) { - serialport.write("upgrade.keyscanner.sendWrite "); - if (wiredOrWireless == "wireless") await sleep(10); - serialport.write(buffer); - if (wiredOrWireless == "wireless") await sleep(10); - ack = await readLine(); - ack = ack + (await readLine()); - console.log(`received ${ack} after ${3 - retries} retires`); - retries--; + if (info.programCrc !== seal.programCrc || isItBootloader === true) { + let validate = "false", + retry = 0; + // while (validate !== "true" && retry < 3) { + // console.log("retry count: ", retry); + for (let i = 0; i < this.firmwareSides.length; i = i + 256) { + // console.log(`Addres ${i} of ${this.firmwareSides.length}`); + serialport.write("upgrade.keyscanner.sendWrite "); + if (wiredOrWireless == "wireless") await sleep(4); + const writeAction = new Uint8Array(new Uint32Array([info.flashStart + i, 256]).buffer); + const data = this.firmwareSides.slice(i, i + 256); + const crc = new Uint8Array(new Uint32Array([crc32("CRC-32", data)]).buffer); + const blob = new Uint8Array(writeAction.length + data.length + crc.length); + blob.set(writeAction); + blob.set(data, writeAction.length); + blob.set(crc, data.length + writeAction.length); + const buffer = new Buffer.from(blob); + // console.log("write sent: ", buffer); + // console.log("write sent, %", (step / totalsteps) * 100); + serialport.write(buffer); + if (wiredOrWireless == "wireless") await sleep(4); + let ack = await readLine(); + ack = ack + (await readLine()); + // console.log("ack received: ", ack); + if (!ack.includes("true") || ack.includes("false")) { + let retries = 3; + if (wiredOrWireless == "wireless") await sleep(100); + while (retries > 0 && (!ack.includes("true") || ack.includes("false"))) { + serialport.write("upgrade.keyscanner.sendWrite "); + if (wiredOrWireless == "wireless") await sleep(10); + serialport.write(buffer); + if (wiredOrWireless == "wireless") await sleep(10); + ack = await readLine(); + ack = ack + (await readLine()); + console.log(`received ${ack} after ${3 - retries} retires`); + retries--; + } } + stateUpd(side, (step / totalsteps) * 100); + step++; + // } } - stateUpd(side, (step / totalsteps) * 100); - step++; - // } + serialport.write("upgrade.keyscanner.validate\n"); + validate = await readLine(); + validate = validate + (await readLine()); + console.log("result of validation", validate); + // retry++; } - serialport.write("upgrade.keyscanner.validate\n"); - validate = await readLine(); - validate = validate + (await readLine()); - console.log("result of validation", validate); - // retry++; - // } serialport.write("upgrade.keyscanner.finish\n"); await readLine(); @@ -197,6 +197,7 @@ export default class sideFlaser { } await serialport.close(); + if (side.includes("left")) await sleep(2000); console.log("after serialport close"); return { error: false, message: "" }; diff --git a/src/api/focus/index.js b/src/api/focus/index.js index 8b054576e..1c5f918d1 100644 --- a/src/api/focus/index.js +++ b/src/api/focus/index.js @@ -157,7 +157,7 @@ class Focus { this.result = ""; if (resolve) { - resolve(result); + resolve(result.trim()); } } else { if (this.result.length == 0) { diff --git a/src/api/hardware-dygma-defy-wired/index.js b/src/api/hardware-dygma-defy-wired/index.js index fbb093a42..b348d2e1a 100644 --- a/src/api/hardware-dygma-defy-wired/index.js +++ b/src/api/hardware-dygma-defy-wired/index.js @@ -66,18 +66,13 @@ const Defy_wired = { }, isDeviceSupported: async port => { - // let focus = new Focus(); - // let layout = localStorage.getItem(port.serialNumber); - // if (!layout) { - // focus._port && focus._port.path === port.path - // ? await focus.open(focus._port, port.device, null) - // : await focus.open(port.path, port.device, null); - // layout = await focus.command("hardware.layout"); - // focus.close(); - // localStorage.setItem(port.serialNumber, layout); - // } - // return layout.trim() === "ANSI"; - return 1; + let focus = new Focus(); + focus._port && focus._port.path === port.path + ? await focus.open(focus._port, port.device, null) + : await focus.open(port.path, port.device, null); + port.serialNumber = await focus.command("hardware.chip_id"); + focus.close(); + return true; } }; diff --git a/src/api/hardware-dygma-defy-wireless/index.js b/src/api/hardware-dygma-defy-wireless/index.js index a901bf251..9adc78ad8 100644 --- a/src/api/hardware-dygma-defy-wireless/index.js +++ b/src/api/hardware-dygma-defy-wireless/index.js @@ -67,18 +67,13 @@ const Defy_wireless = { }, isDeviceSupported: async port => { - // let focus = new Focus(); - // let layout = localStorage.getItem(port.serialNumber); - // if (!layout) { - // focus._port && focus._port.path === port.path - // ? await focus.open(focus._port, port.device, null) - // : await focus.open(port.path, port.device, null); - // layout = await focus.command("hardware.layout"); - // focus.close(); - // localStorage.setItem(port.serialNumber, layout); - // } - // return layout.trim() === "ANSI"; - return 1; + let focus = new Focus(); + focus._port && focus._port.path === port.path + ? await focus.open(focus._port, port.device, null) + : await focus.open(port.path, port.device, null); + port.serialNumber = await focus.command("hardware.chip_id"); + focus.close(); + return true; } }; diff --git a/src/api/hardware-dygma-raise-ansi/index.js b/src/api/hardware-dygma-raise-ansi/index.js index 5ec94ad08..bfcf7bc47 100644 --- a/src/api/hardware-dygma-raise-ansi/index.js +++ b/src/api/hardware-dygma-raise-ansi/index.js @@ -72,6 +72,7 @@ const Raise_ANSI = { focus._port && focus._port.path === port.path ? await focus.open(focus._port, port.device, null) : await focus.open(port.path, port.device, null); + port.serialNumber = await focus.command("hardware.chip_id"); layout = await focus.command("hardware.layout"); focus.close(); localStorage.setItem(port.serialNumber, layout); diff --git a/src/api/hardware-dygma-raise-iso/index.js b/src/api/hardware-dygma-raise-iso/index.js index 138abac47..310c50ed3 100644 --- a/src/api/hardware-dygma-raise-iso/index.js +++ b/src/api/hardware-dygma-raise-iso/index.js @@ -72,6 +72,7 @@ const Raise_ISO = { focus._port && focus._port.path === port.path ? await focus.open(focus._port, port.device, null) : await focus.open(port.path, port.device, null); + port.serialNumber = await focus.command("hardware.chip_id"); layout = await focus.command("hardware.layout"); focus.close(); localStorage.setItem(port.serialNumber, layout); diff --git a/src/renderer/App.js b/src/renderer/App.js index 23b52f9cf..65b1b841a 100644 --- a/src/renderer/App.js +++ b/src/renderer/App.js @@ -35,7 +35,6 @@ import Dark from "./theme/DarkTheme"; import SelectKeyboard from "./views/SelectKeyboard"; import FirmwareUpdate from "./views/FirmwareUpdate"; -import AltFirmwareUpdate from "./views/AltFirmwareUpdate"; import LayoutEditor from "./views/LayoutEditor"; import MacroEditor from "./views/MacroEditor"; import SuperkeysEditor from "./views/SuperkeysEditor"; @@ -359,6 +358,7 @@ class App extends React.Component { document.querySelector("#page-title")} @@ -390,7 +390,7 @@ class App extends React.Component { inContext={contextBar} titleElement={() => document.querySelector("#page-title")} /> - theme.colors.brandPrimary}; } .status--charging { - --color-status: ${({ theme }) => theme.colors.purple200}; + --color-status: ${({ theme }) => theme.styles.batteryIndicator.fillShapeColor}; } .size--sm { padding: 4px; @@ -37,10 +37,67 @@ const Style = Styled.div` &.status--saving { background-color: ${({ theme }) => theme.styles.batteryIndicator.pileBackgroundSavingMode}; } + .pileIndicator { + max-width: 100%; + } +} +.size--lg { + --color-stroke: ${({ theme }) => theme.styles.batteryIndicator.strokeShapeColor}; + .shapeIndicator { + opacity: 0.1; + } + &.status--default { + --color-status: ${({ theme }) => theme.styles.batteryIndicator.fillShapeColor}; + .shapeIndicator { + opacity: 0; + } + } + &.status--saving { + --color-status: ${({ theme }) => theme.colors.brandWarning}; + --color-stroke: ${({ theme }) => theme.colors.brandWarning}; + .shapeIndicator { + opacity: 0.25; + } + } + &.status--critical:not(.status--saving) { + .shapeIndicator { + opacity: 0.2; + } + } + &.status--charging, + &.status--charging.status--saving { + --color-status: ${({ theme }) => theme.styles.batteryIndicator.fillShapeColor}; + --color-stroke: ${({ theme }) => theme.styles.batteryIndicator.strokeShapeColor}; + .lightningbattery { + color: ${({ theme }) => theme.styles.batteryIndicator.fillShapeColor}; + } + .shapeIndicator { + opacity: 0.1; + } + } } +@media screen and (max-width: 999px) { + .size--sm { + .battery-item--container { + .battery-indicator--side { + display: none; + } + } + } +} +@media screen and (max-height: 870px) { + .size--sm { + .battery-item--container { + .battery-indicator--side { + display: none; + } + } + } +} + `; -const BatteryStatusSide = ({ side, batteryLevel, size, isSavingMode, isCharging }) => { +const BatteryStatusSide = ({ side, batteryLevel, isSavingMode, isCharging, size }) => { const [loading, setLoading] = useState(true); const [sideFirstLetter, setSideFirstLetter] = useState(""); const [sideStatus, setSideStatus] = useState("default"); @@ -59,7 +116,7 @@ const BatteryStatusSide = ({ side, batteryLevel, size, isSavingMode, isCharging if (batteryLevel < 10 && !isCharging && !isSavingMode) { setSideStatus("critical"); } - }, [batteryLevel]); + }, [size, batteryLevel, isCharging, isSavingMode]); if (loading) return
; return ( diff --git a/src/renderer/component/Battery/DefyBatteryIndicator.js b/src/renderer/component/Battery/DefyBatteryIndicator.js index 40f4aa96b..b345999b8 100644 --- a/src/renderer/component/Battery/DefyBatteryIndicator.js +++ b/src/renderer/component/Battery/DefyBatteryIndicator.js @@ -4,6 +4,7 @@ const Style = Styled.div` .levelIndicator { transform-origin: bottom left; transform: rotate(180deg); + fill: var(--color-status); } .batterySide { position: relative; @@ -18,18 +19,30 @@ const Style = Styled.div` letter-spacing: -0.025em; text-align: center; font-size: 1.25rem; - color: ${({ theme }) => theme.colors.gray25}; + color: ${({ theme }) => theme.styles.batteryIndicator.largeIndicatorPercentageColor}; text-align: center; } +.shapeStroke { + stroke: var(--color-stroke); +} +.shapeFill { + fill: ${({ theme }) => theme.styles.batteryIndicator.largeIndicatorFillColor}; +} +.shapeIndicator { + fill: var(--color-status); +} `; const DefyBatteryIndicator = ({ side, batteryLevel, isCharging }) => { const [batteryHeight, setBatteryHeight] = useState(0); + const maskHash = `${(Math.random() + 1).toString(36).substring(7)}-${side}`; useEffect(() => { - if (!isCharging) { - if (batteryLevel < 5) { - setBatteryHeight(1); + if (isCharging) { + console.log("Is charging"); + } else { + if (batteryLevel > 0 && batteryLevel < 5) { + setBatteryHeight(2); } else { setBatteryHeight((115 * batteryLevel) / 100); } @@ -50,7 +63,7 @@ const DefyBatteryIndicator = ({ side, batteryLevel, isCharging }) => { > { + { fill="#57617E" /> - - - + {isCharging ? ( + + ) : ( + + + + )} ) : ( "" @@ -92,7 +119,7 @@ const DefyBatteryIndicator = ({ side, batteryLevel, isCharging }) => { > { + { fill="#25273B" /> - - - + {isCharging ? ( + + ) : ( + + + + )} ) : ( "" )} -
{batteryLevel}%
+ {!isCharging ?
{batteryLevel}%
: ""} ); diff --git a/src/renderer/component/Battery/PileIndicator.js b/src/renderer/component/Battery/PileIndicator.js index aff09e846..672f58791 100644 --- a/src/renderer/component/Battery/PileIndicator.js +++ b/src/renderer/component/Battery/PileIndicator.js @@ -47,7 +47,6 @@ const Style = Styled.div` } } - `; const PileIndicator = ({ batteryLevel, isCharging }) => { @@ -64,7 +63,7 @@ const PileIndicator = ({ batteryLevel, isCharging }) => { }, [batteryLevel]); return ( - + {isCharging ? ( <> diff --git a/src/renderer/component/Battery/SavingModeIndicator.js b/src/renderer/component/Battery/SavingModeIndicator.js new file mode 100644 index 000000000..5749d2a8c --- /dev/null +++ b/src/renderer/component/Battery/SavingModeIndicator.js @@ -0,0 +1,49 @@ +import React from "react"; +import OverlayTrigger from "react-bootstrap/OverlayTrigger"; +import Tooltip from "react-bootstrap/Tooltip"; +import { IconLeaf } from "../Icon"; + +import Styled from "styled-components"; +const Style = Styled.div` +&.status--default { + --color-status: ${({ theme }) => theme.styles.batteryIndicator.strokeShapeColor}; +} +&.status--saving{ + --color-status: ${({ theme }) => theme.colors.brandWarning}; +} +&.status--charging.status--saving{ + --color-status: ${({ theme }) => theme.styles.batteryIndicator.fillShapeColor}; +} +&.batterySavingMode { + position: absolute; + bottom: 0; + color: var(--color-status); + left: 50%; + transform: translate3d(-50%, -4px, 0); + transition: 300ms color ease-in-out; +} +`; + +function SavingModeIndicator({ isSavingMode, isCharging }) { + return ( + {isSavingMode ? "enabled" : "disabled"} + + } + > + + + + ); +} + +export default SavingModeIndicator; diff --git a/src/renderer/component/Battery/index.js b/src/renderer/component/Battery/index.js index 5108c468e..9e7d03c1e 100644 --- a/src/renderer/component/Battery/index.js +++ b/src/renderer/component/Battery/index.js @@ -1,5 +1,6 @@ import BatteryStatusSide from "./BatteryStatusSide"; import DefyBatteryIndicator from "./DefyBatteryIndicator"; import PileIndicator from "./PileIndicator"; +import SavingModeIndicator from "./SavingModeIndicator"; -export { BatteryStatusSide, DefyBatteryIndicator, PileIndicator }; +export { BatteryStatusSide, DefyBatteryIndicator, PileIndicator, SavingModeIndicator }; diff --git a/src/renderer/component/Button/NavigationButton.js b/src/renderer/component/Button/NavigationButton.js index 60b166d89..0743092dc 100644 --- a/src/renderer/component/Button/NavigationButton.js +++ b/src/renderer/component/Button/NavigationButton.js @@ -23,16 +23,17 @@ import Tooltip from "react-bootstrap/Tooltip"; import LightAccent from "../../../../static/dark/light-accent--lg.png"; const Style = Styled.div` +width: 100%; .disabled{ opacity: 0.5; - } .disabled.menuLink svg { color: ${({ theme }) => theme.styles.navbar.menuLink.color}; } .menuLink { - width: 96px; - height: 96px; + width: 100%; + aspect-ratio: 1; + display: flex; flex-wrap: wrap; justify-content: center; @@ -100,7 +101,7 @@ const Style = Styled.div` background-image: url(${LightAccent}); opacity: 0; transition: 250ms opacity ease-in-out; - z-index: 2; + z-index: 1; } .menuLink:hover { text-decoration: none; @@ -123,8 +124,8 @@ const Style = Styled.div` .menuLinkInner { position: relative; padding: 8px 6px; - width: 96px; - height: 96px; + width: 100%; + aspect-ratio: 1; display: flex; justify-content: center; align-items: center; @@ -146,8 +147,8 @@ const Style = Styled.div` opacity: 0; transition: 250ms opacity ease-in-out; border-radius: 6px; - width: 96px; - height: 96px; + width: 100%; + aspect-ratio: 1; left: 0; top 0; content: ''; @@ -155,63 +156,86 @@ const Style = Styled.div` background: ${({ theme }) => theme.styles.navbar.menuLink.gradient}; } @media screen and (max-width: 999px) { - .menuLink, - .menuLinkInner, - .menuLinkInner:before { - width: 64px; - height: 64px; - } - .menuLinkText { - display: none; - } - .menuLink:after { - right: -14px; - } - .menuLink:before { - right: -17px; - height: 36px; - } - .menuLinkInner { - align-items: center; - display: flex; - justify-content: center; - } - .menuLinkInner svg { - transform: scale(0.85); - } - .menuLink .badge { - right: -18px; - } + .menuLinkText { + display: none; } - @media screen and (max-height: 719px) { - .menuLink, - .menuLinkInner, - .menuLinkInner:before { - width: 64px; - height: 64px; - } - .menuLinkText { - display: none; - } - .menuLink:after { - right: -14px; - } - .menuLink:before { - right: -17px; - height: 36px; - } - .menuLinkInner { - align-items: center; - display: flex; - justify-content: center; - } - .menuLinkInner svg { - transform: scale(0.85); - } - .menuLink .badge { - right: -18px; - } + .menuLink:after { + right: -14px; + } + .menuLink:before { + right: -17px; + height: 36px; + } + .menuLinkInner { + align-items: center; + display: flex; + justify-content: center; + padding: 0; + } + .menuLinkInner svg { + transform: scale(1); + flex: 0 0 26px; + } + .menuLink .badge { + right: -18px; + } +} +@media screen and (max-width: 860px) { + .menuLinkText { + display: none; + } + .menuLink:before { + right: -15px; + height: 26px; + } + .menuLinkInner { + align-items: center; + display: flex; + justify-content: center; + padding: 0; } + .menuLinkInner svg { + transform: scale(1); + flex: 0 0 30px; + } + .menuLink .badge { + right: -18px; + } +} +@media screen and (max-height: 870px) { + .menuLinkText { + display: none; + } + .menuLink:before { + right: -15px; + height: 36px; + } + .menuLinkInner { + align-items: center; + display: flex; + justify-content: center; + padding: 0; + } + .menuLinkInner svg { + transform: scale(1); + flex: 0 0 30px; + } + .menuLink .badge { + right: -18px; + } +} +@media screen and (max-height: 670px) { + .menuLink:before { + height: 26px; + } + .menuLink:after { + right: -12px; + } + .menuLinkInner svg { + transform: scale(1); + flex: 0 0 24px; + } +} `; //className={`icon-image ${selected ? "select" : ""}`} const NavigationButton = ({ selected, onClick, showNotif, notifText, buttonText, icoSVG, disabled }) => { diff --git a/src/renderer/component/Button/regularButton.js b/src/renderer/component/Button/regularButton.js index 01e212465..e59bde012 100644 --- a/src/renderer/component/Button/regularButton.js +++ b/src/renderer/component/Button/regularButton.js @@ -18,15 +18,15 @@ import React from "react"; import PropTypes from "prop-types"; -const RegularButton = ({ selected, onClick, size, buttonText, style, icoSVG, icoPosition, disabled, tabIndex }) => { +const RegularButton = ({ selected, onClick, size, buttonText, style, icoSVG, icoPosition, disabled }) => { return ( -
{} : onClick} className={`${size ? size : ""} ${selected ? "active" : ""} button ${style && style} iconOn${ icoPosition ? icoPosition : "None" }`} disabled={disabled} - tabIndex={tabIndex} + tabIndex={0} >
{icoSVG && icoPosition !== "right" ? icoSVG : ""} @@ -34,7 +34,7 @@ const RegularButton = ({ selected, onClick, size, buttonText, style, icoSVG, ico {icoSVG && icoPosition === "right" ? icoSVG : ""}
-
+ ); }; diff --git a/src/renderer/component/ConfirmationDialog.js b/src/renderer/component/ConfirmationDialog.js index d50c5e237..079b40973 100644 --- a/src/renderer/component/ConfirmationDialog.js +++ b/src/renderer/component/ConfirmationDialog.js @@ -44,7 +44,7 @@ const ConfirmationDialog = props => { {props.text} - + diff --git a/src/renderer/component/ConnectionStatus/ConnectionType.js b/src/renderer/component/ConnectionStatus/ConnectionType.js index e69de29bb..a508adad5 100644 --- a/src/renderer/component/ConnectionStatus/ConnectionType.js +++ b/src/renderer/component/ConnectionStatus/ConnectionType.js @@ -0,0 +1,7 @@ +import React from "react"; + +function ConnectionType(props) { + return
; +} + +export default ConnectionType; diff --git a/src/renderer/component/CopyFromDialog.js b/src/renderer/component/CopyFromDialog.js index 110f8d799..61584e974 100644 --- a/src/renderer/component/CopyFromDialog.js +++ b/src/renderer/component/CopyFromDialog.js @@ -117,7 +117,7 @@ export const CopyFromDialog = props => { { setSelectedLayer(-1); diff --git a/src/renderer/component/Icon/IconKeyboard2Stroke.js b/src/renderer/component/Icon/IconKeyboard2Stroke.js index 7daf2ca5b..24e5ee9d6 100644 --- a/src/renderer/component/Icon/IconKeyboard2Stroke.js +++ b/src/renderer/component/Icon/IconKeyboard2Stroke.js @@ -2,7 +2,7 @@ import * as React from "react"; function IconKeyboard2Stroke(props) { return ( - + + diff --git a/src/renderer/component/Icon/IconLeaf.js b/src/renderer/component/Icon/IconLeaf.js new file mode 100644 index 000000000..47a5f22f3 --- /dev/null +++ b/src/renderer/component/Icon/IconLeaf.js @@ -0,0 +1,29 @@ +import * as React from "react"; + +function IconLeaf(props) { + const pathHash = `${(Math.random() + 1).toString(36).substring(7)}`; + return ( + + + + + + + + + + + + ); +} + +export default IconLeaf; diff --git a/src/renderer/component/Icon/IconMemory2Stroke.js b/src/renderer/component/Icon/IconMemory2Stroke.js index 4123daa54..02369fd12 100644 --- a/src/renderer/component/Icon/IconMemory2Stroke.js +++ b/src/renderer/component/Icon/IconMemory2Stroke.js @@ -2,7 +2,7 @@ import * as React from "react"; function IconMemory2Stroke(props) { return ( - + + + + { +function FirmwareLoader({ width, warning, error, paused }) { return (
@@ -11,6 +11,6 @@ const FirmwareLoader = ({ width, warning, error, paused }) => {
); -}; +} export default FirmwareLoader; diff --git a/src/renderer/component/Modal/NameModal.js b/src/renderer/component/Modal/NameModal.js index 347b3bd9a..008b7b291 100644 --- a/src/renderer/component/Modal/NameModal.js +++ b/src/renderer/component/Modal/NameModal.js @@ -40,7 +40,7 @@ export default class NameModal extends React.Component { /> - + } - style="outline-sm" + style="outline-sm transp-bg" icoPosition="right" onClick={() => setShow(!show)} /> diff --git a/src/renderer/i18n/en.js b/src/renderer/i18n/en.js index ed5ab8044..7bee6783b 100644 --- a/src/renderer/i18n/en.js +++ b/src/renderer/i18n/en.js @@ -231,12 +231,12 @@ const English = { }, standardView: { noKeyTransparent: "No Key/Transparent", - callOut: 'You can remove a functionality or inherit the functionality of the upper layer using "No key" or "Transparent"', + callOut: "You can remove a functionality or inherit the functionality from the previous layer", noKey: "No Key", noKeyDescription: "There's no function or character assigned to that key.", transparent: "Transparent", trans: "Trans.", - transparentDescription: "There's no function or character assigned to that key.", + transparentDescription: "The key triggers the function assigned to the same key from the previous layer.", keys: { keys: "Keys", standardViewTitle: "Select a key", diff --git a/src/renderer/modules/BatteryStatus/BatteryStatus.js b/src/renderer/modules/BatteryStatus/BatteryStatus.js index 7aa4dc95d..2fee3b3b8 100644 --- a/src/renderer/modules/BatteryStatus/BatteryStatus.js +++ b/src/renderer/modules/BatteryStatus/BatteryStatus.js @@ -6,7 +6,7 @@ import Focus from "../../../api/focus"; //Custom components import Title from "../../component/Title"; import { ButtonConfig } from "../../component/Button"; -import { BatteryStatusSide } from "../../component/Battery"; +import { BatteryStatusSide, SavingModeIndicator } from "../../component/Battery"; //Assets import { IconBattery, IconRefresh } from "../../component/Icon"; @@ -35,6 +35,7 @@ const Style = Styled.div` .battery-defy--indicator { display: flex; grid-gap: 4px; + position: relative; } .dropdown-menu--battery { opacity: 0; @@ -94,14 +95,22 @@ const Style = Styled.div` transform: scale(1) rotate(360deg); } } +@media screen and (max-height: 870px) { + .battery-indicator--container { + > div { + flex: 0 0 50%; + } + } +} `; -const BatteryStatus = ({ disable }) => { +const BatteryStatus = props => { const [bLeft, setbLeft] = useState(100); const [bRight, setbRight] = useState(100); const [isSavingMode, setIsSavingMode] = useState(false); const [isCharging, setIsCharging] = useState(false); const [animateIcon, setAnimateIcon] = useState(0); + const [batteryInterval, setBatteryInterval] = useState(false); const target = useRef(null); useEffect(() => { @@ -109,12 +118,24 @@ const BatteryStatus = ({ disable }) => { }, []); useEffect(() => { - const intervalID = setInterval(() => { - getBatteryStatus(); - }, 60000); + if (props.disable) { + clearInterval(batteryInterval); + setBatteryInterval(false); + return; + } else { + if (batteryInterval === false) { + const intervalID = setInterval(() => { + getBatteryStatus(); + }, 60000); + setBatteryInterval(intervalID); + } + } - return () => clearInterval(intervalID); - }, []); + return () => { + clearInterval(batteryInterval); + setBatteryInterval(false); + }; + }, [props]); useEffect(() => { const intervalID = setInterval(() => { @@ -124,17 +145,16 @@ const BatteryStatus = ({ disable }) => { return () => clearInterval(intervalID); }, [animateIcon]); - const getBatteryStatus = async () => { - if (disable) return; + async function getBatteryStatus() { const focus = new Focus(); const left = await focus.command("wireless.battery.left.level"); const right = await focus.command("wireless.battery.right.level"); setbLeft(left); setbRight(right); - }; + } const forceRetrieveBattery = async () => { - if (disable) return; + if (props.disable) return; const focus = new Focus(); await focus.command("wireless.battery.forceRead"); await getBatteryStatus(); @@ -145,21 +165,22 @@ const BatteryStatus = ({ disable }) => { ); -}; +} export default FirmwareCheckProcessPanel; diff --git a/src/renderer/modules/Firmware/FirmwareErrorPanel.js b/src/renderer/modules/Firmware/FirmwareErrorPanel.js index bab339504..b0abe02aa 100644 --- a/src/renderer/modules/Firmware/FirmwareErrorPanel.js +++ b/src/renderer/modules/Firmware/FirmwareErrorPanel.js @@ -199,7 +199,7 @@ width: 100%; * @returns {} FirmwareUpdatePanel component. */ -const FirmwareErrorPanel = ({ nextBlock, retryBlock }) => { +function FirmwareErrorPanel({ nextBlock, retryBlock }) { const [state, send] = useMachine(FWSelection); const [handleError, setHandleError] = useState(false); @@ -262,7 +262,7 @@ const FirmwareErrorPanel = ({ nextBlock, retryBlock }) => { {!handleError ? ( @@ -290,6 +290,6 @@ const FirmwareErrorPanel = ({ nextBlock, retryBlock }) => {
{JSON.stringify(state.context)}
); -}; +} export default FirmwareErrorPanel; diff --git a/src/renderer/modules/Firmware/FirmwareUpdatePanel.js b/src/renderer/modules/Firmware/FirmwareUpdatePanel.js index 8c3330bea..0e9452811 100644 --- a/src/renderer/modules/Firmware/FirmwareUpdatePanel.js +++ b/src/renderer/modules/Firmware/FirmwareUpdatePanel.js @@ -19,7 +19,6 @@ import React, { useState, useEffect, useRef } from "react"; import Styled from "styled-components"; import { useMachine } from "@xstate/react"; import i18n from "../../i18n"; -import SemVer from "semver"; // State machine import FWSelection from "../../controller/FlashingSM/FWSelection"; @@ -162,10 +161,8 @@ height:inherit; } `; -const FirmwareUpdatePanel = ({ nextBlock, retryBlock, errorBlock, allowBeta }) => { +function FirmwareUpdatePanel({ nextBlock, retryBlock, errorBlock, allowBeta }) { const [state, send] = useMachine(FWSelection, { context: { allowBeta: allowBeta } }); - const [checkTimeOut, setCheckTimeOut] = useState(false); - const timerRef = useRef(null); const [loading, setLoading] = useState(true); useEffect(() => { @@ -232,7 +229,7 @@ const FirmwareUpdatePanel = ({ nextBlock, retryBlock, errorBlock, allowBeta }) =
); -}; +} export default FirmwareUpdatePanel; diff --git a/src/renderer/modules/Firmware/FirmwareUpdateProcess.js b/src/renderer/modules/Firmware/FirmwareUpdateProcess.js index 953dca5d5..83014ee24 100644 --- a/src/renderer/modules/Firmware/FirmwareUpdateProcess.js +++ b/src/renderer/modules/Firmware/FirmwareUpdateProcess.js @@ -102,7 +102,7 @@ height: inherit; * @returns {} FirmwareUpdateProcess component. */ -const FirmwareUpdateProcess = ({ nextBlock, retryBlock, context, toggleFlashing, toggleFwUpdate, onDisconnect, device }) => { +function FirmwareUpdateProcess({ nextBlock, retryBlock, context, toggleFlashing, toggleFwUpdate, onDisconnect, device }) { const [toggledFlashing, sendToggledFlashing] = useState(false); const [state, send] = useMachine(FlashDevice, { context: { @@ -131,7 +131,7 @@ const FirmwareUpdateProcess = ({ nextBlock, retryBlock, context, toggleFlashing, if (toggledFlashing) return; console.log("starting flashing indicators"); await toggleFlashing(); - toggleFwUpdate(); + await toggleFwUpdate(); sendToggledFlashing(true); }, finishFlashing: async () => { @@ -139,7 +139,7 @@ const FirmwareUpdateProcess = ({ nextBlock, retryBlock, context, toggleFlashing, sendToggledFlashing(false); console.log("closing flashin process"); await toggleFlashing(); - toggleFwUpdate(); + await toggleFwUpdate(); onDisconnect(); } } @@ -216,7 +216,7 @@ const FirmwareUpdateProcess = ({ nextBlock, retryBlock, context, toggleFlashing,
{ @@ -241,7 +241,7 @@ const FirmwareUpdateProcess = ({ nextBlock, retryBlock, context, toggleFlashing,
{ @@ -287,6 +287,6 @@ const FirmwareUpdateProcess = ({ nextBlock, retryBlock, context, toggleFlashing,
*/} ); -}; +} export default FirmwareUpdateProcess; diff --git a/src/renderer/modules/Firmware/FirmwareVersionStatus.js b/src/renderer/modules/Firmware/FirmwareVersionStatus.js index 71bacedb0..7f979899f 100644 --- a/src/renderer/modules/Firmware/FirmwareVersionStatus.js +++ b/src/renderer/modules/Firmware/FirmwareVersionStatus.js @@ -197,7 +197,7 @@ const FirmwareVersionStatus = ({ } onClick={() => { setModalFirmwareDetails(true); diff --git a/src/renderer/modules/NavigationMenu/NavigationMenu.js b/src/renderer/modules/NavigationMenu/NavigationMenu.js index 33c54812b..725ad49e5 100644 --- a/src/renderer/modules/NavigationMenu/NavigationMenu.js +++ b/src/renderer/modules/NavigationMenu/NavigationMenu.js @@ -54,37 +54,38 @@ const Styles = Styled.div` pointer-events: none; } .brand-image { + margin: 20px 0 32px 0; padding: 0 !important; - margin-left: 0; - margin-top: 20px; - margin-bottom: 32px; display: block; width: 100%; text-align: center; -webkit-app-region: drag; img { - margin: 0; - height: ${({ theme }) => theme.drawerWidth - 16}px; - width: ${({ theme }) => theme.drawerWidth - 16}px; + display: block; + margin: 0 auto; + width: 42px; + aspect-ratio: 1; } } .left-navbar { - width: ${({ theme }) => theme.drawerWidth}px; - width: 120px; + width: var(--sidebarWidth); height: 100%; - display: block !important; - position: fixed !important; z-index: 1100; padding: 12px !important; background-color: ${({ theme }) => theme.styles.navbar.background}; - + display: flex; + flex-direction: column; .navbar-nav { flex-wrap: wrap; - height: calc(100% - 98px); + height: inherit; .bottomMenu { margin-top: auto; } + .topMenu, + .bottomMenu { + width: 100%; + } } } .list-link { @@ -101,16 +102,6 @@ const Styles = Styled.div` border-radius: 8px; width: 100%; } -@media screen and (max-width: 999px) { - .left-navbar { - width: 90px; - } -} -@media screen and (max-height: 719px) { - .left-navbar { - width: 90px; - } -} `; function NavigationMenu(props) { @@ -118,7 +109,7 @@ function NavigationMenu(props) { const [isUpdated, setIsUpdated] = useState(true); const [isBeta, setIsBeta] = useState(false); const [device, setDevice] = useState({}); - const [virtual, setVirtual] = useState({}); + const [virtual, setVirtual] = useState(false); const [fwList, setFwList] = useState({}); useEffect(() => { @@ -133,7 +124,7 @@ function NavigationMenu(props) { async function contextUpdater() { const focus = new Focus(); setDevice(focus.device); - if (focus.device.bootloader) return; + if (focus.device === undefined || focus.device.bootloader) return; let parts = await focus.command("version"); parts = parts.split(" "); let versions = { @@ -184,7 +175,14 @@ function NavigationMenu(props) { return ( - + diff --git a/src/renderer/modules/NeuronConnection/NeuronConnection.js b/src/renderer/modules/NeuronConnection/NeuronConnection.js index 4df3fabd8..3ced4959e 100644 --- a/src/renderer/modules/NeuronConnection/NeuronConnection.js +++ b/src/renderer/modules/NeuronConnection/NeuronConnection.js @@ -181,7 +181,7 @@ const NeuronConnection = ({ 0 ? "outline" : "primary"}`} + style={`${connected || deviceItems.length > 0 ? "outline transp-bg" : "primary"}`} disabled={scanFoundDevices} /> {connected ? ( diff --git a/src/renderer/modules/Saving/Saving.js b/src/renderer/modules/Saving/Saving.js index 58685528e..545ab048e 100644 --- a/src/renderer/modules/Saving/Saving.js +++ b/src/renderer/modules/Saving/Saving.js @@ -27,15 +27,13 @@ const Saving = ({ saveContext, destroyContext, inContext }) => { return (