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

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

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