diff --git a/src/requirements.txt b/src/requirements.txt index 2f1574582..0708fa17c 100644 --- a/src/requirements.txt +++ b/src/requirements.txt @@ -4,4 +4,4 @@ pytest==5.0.1 applicationinsights==0.11.9 python-socketio==4.3.1 requests==2.22.0 -pywin32==227; platform_system == "Windows" \ No newline at end of file +pywin32==227; platform_system == "Windows" diff --git a/src/view/components/toolbar/MotionSensorBar.tsx b/src/view/components/toolbar/MotionSensorBar.tsx index 907f61a4a..db1f1a020 100644 --- a/src/view/components/toolbar/MotionSensorBar.tsx +++ b/src/view/components/toolbar/MotionSensorBar.tsx @@ -4,6 +4,7 @@ import * as React from "react"; import InputSlider from "./InputSlider"; import SensorButton from "./SensorButton"; +import svg from "../cpx/Svg_utils"; import { CONSTANTS } from "../../constants"; import "../../styles/MotionSensorBar.css"; @@ -162,7 +163,10 @@ class MotionSensorBar extends React.Component { ); } - private onMouseDown = () => this.handleOnclick(true, "shake"); + private onMouseDown = (event: React.PointerEvent) => { + this.updateShakePress(true, event.currentTarget.id); + this.handleOnclick(true, "shake"); + }; private onKeyUp = (event: React.KeyboardEvent) => this.onKeyEvent(event, false); @@ -170,7 +174,10 @@ class MotionSensorBar extends React.Component { private onKeyDown = (event: React.KeyboardEvent) => this.onKeyEvent(event, true); - private onMouseUp = () => this.handleOnclick(false, "shake"); + private onMouseUp = (event: React.PointerEvent) => { + this.updateShakePress(false, event.currentTarget.id); + this.handleOnclick(false, "shake"); + }; private handleOnclick = (active: boolean, type: string) => { const messageState = { [type]: active }; @@ -187,6 +194,19 @@ class MotionSensorBar extends React.Component { this.handleOnclick(active, "shake"); } } + + private updateShakePress = (shakeState: boolean, id: string): void => { + const svgElement = window.document.getElementById("cpx_svg"); + const buttonElement = window.document.getElementById(id); + const cpxSvg: SVGElement = (svgElement as unknown) as SVGElement; + + if (svgElement && cpxSvg && buttonElement) { + buttonElement.setAttribute("aria-pressed", shakeState.toString()); + shakeState + ? svg.addClass(cpxSvg, "shake-pressed") + : svg.removeClass(cpxSvg, "shake-pressed"); + } + }; } export default MotionSensorBar; diff --git a/src/view/components/toolbar/SensorButton.tsx b/src/view/components/toolbar/SensorButton.tsx index 7eb693f17..03bb9a8dd 100644 --- a/src/view/components/toolbar/SensorButton.tsx +++ b/src/view/components/toolbar/SensorButton.tsx @@ -8,6 +8,7 @@ import { ISensorButtonProps } from "../../viewUtils"; const SensorButton: React.FC = props => { return (