sundowndev
/
betaflight-configurator
mirror of https://github.com/sundowndev/betaflight-configurator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix hover/drag-after-push bug for buttons for Motor Direction dialog on Android

10.8-maintenance
Ivan Efimov 2021-01-08 16:42:12 -06:00
parent fbe76a41ce
commit e76d4af683
2 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/EscDshotDirection/EscDshotDirectionComponent.js
View File

@ -31,6 +31,24 @@ class EscDshotDirectionComponent
static get HIGHLIGHTED_BUTTON_CLASS() { return "highlighted"; } static get HIGHLIGHTED_BUTTON_CLASS() { return "highlighted"; }
static get RED_TEXT_CLASS() { return "red-text"; } static get RED_TEXT_CLASS() { return "red-text"; }
static get _BUTTON_PUSH_DOWN_EVENT_TYPE()
{
if (GUI.isCordova()) {
return "touchstart";
} else {
return "mousedown";
}
}
static get _BUTTON_RELEASE_EVENT_TYPE()
{
if (GUI.isCordova()) {
return "touchend";
} else {
return "mouseup mouseout";
}
}
_readDom() _readDom()
{ {
this._domAgreeSafetyCheckBox = $("#escDshotDirectionDialog-safetyCheckbox"); this._domAgreeSafetyCheckBox = $("#escDshotDirectionDialog-safetyCheckbox");
@ -117,8 +135,7 @@ class EscDshotDirectionComponent
_deactivateNormalReverseButtons() _deactivateNormalReverseButtons()
{ {
if (null !== this._activationButtonTimeoutId) if (null !== this._activationButtonTimeoutId) {
{
clearTimeout(this._activationButtonTimeoutId); clearTimeout(this._activationButtonTimeoutId);
} }
@ -128,7 +145,7 @@ class EscDshotDirectionComponent
_subscribeDirectionSpinButton(button, direction, buttonText) _subscribeDirectionSpinButton(button, direction, buttonText)
{ {
button.on("mousedown touchstart", () => { button.on(EscDshotDirectionComponent._BUTTON_PUSH_DOWN_EVENT_TYPE, () => {
this._sendCurrentEscSpinDirection(direction); this._sendCurrentEscSpinDirection(direction);
this._motorIsSpinning = true; this._motorIsSpinning = true;
button.text(this._releaseToStopText); button.text(this._releaseToStopText);
@ -138,7 +155,7 @@ class EscDshotDirectionComponent
this._domSecondHint.addClass(EscDshotDirectionComponent.RED_TEXT_CLASS); this._domSecondHint.addClass(EscDshotDirectionComponent.RED_TEXT_CLASS);
}); });
button.on("mouseup mouseout touchend", () => { button.on(EscDshotDirectionComponent._BUTTON_RELEASE_EVENT_TYPE, () => {
if (this._motorIsSpinning) { if (this._motorIsSpinning) {
button.text(buttonText); button.text(buttonText);
this._motorIsSpinning = false; this._motorIsSpinning = false;
@ -175,7 +192,7 @@ class EscDshotDirectionComponent
this._domMotorButtonsBlock.append(button); this._domMotorButtonsBlock.append(button);
this._motorButtons[motorIndex] = button; this._motorButtons[motorIndex] = button;
button.on("mousedown touchstart", () => { button.on(EscDshotDirectionComponent._BUTTON_PUSH_DOWN_EVENT_TYPE, () => {
this._domSecondActionDiv.toggle(true); this._domSecondActionDiv.toggle(true);
this._motorIsSpinning = true; this._motorIsSpinning = true;
this._domActionHint.html(this._releaseButtonToStopText); this._domActionHint.html(this._releaseButtonToStopText);
@ -185,7 +202,7 @@ class EscDshotDirectionComponent
this._motorDriver.spinMotor(this._selectedMotor); this._motorDriver.spinMotor(this._selectedMotor);
}); });
button.on("mouseup mouseout touchend", () => { button.on(EscDshotDirectionComponent._BUTTON_RELEASE_EVENT_TYPE, () => {
if (this._motorIsSpinning) { if (this._motorIsSpinning) {
this._domActionHint.html(this._topHintText); this._domActionHint.html(this._topHintText);
this._domActionHint.removeClass(EscDshotDirectionComponent.RED_TEXT_CLASS); this._domActionHint.removeClass(EscDshotDirectionComponent.RED_TEXT_CLASS);

18
src/components/EscDshotDirection/Styles.css
View File

@ -4,6 +4,12 @@
flex-flow: column; flex-flow: column;
} }
.escDshotDirection-Component .regular-button{
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
outline-style: none;
}
.escDshotDirection-ComponentHeader { .escDshotDirection-ComponentHeader {
padding-bottom: 12px; padding-bottom: 12px;
} }
@ -100,12 +106,14 @@
text-align: center; text-align: center;
} }
#escDshotDirectionDialog-NormalDialog .regular-button.pushed:hover { @media (hover: hover) {
background-color: #993333; #escDshotDirectionDialog-NormalDialog .regular-button.pushed:hover {
} background-color: #993333;
}
#escDshotDirectionDialog-NormalDialog .regular-button:hover { #escDshotDirectionDialog-NormalDialog .regular-button:hover {
background-color: #993333; background-color: #993333;
}
} }
#escDshotDirectionDialog-MainContent .regular-button.highlighted { #escDshotDirectionDialog-MainContent .regular-button.highlighted {