FIX: delay custom section reorder (#20781)

Reorder should start after 300ms.
In addition, pointer events should be blocked to not open link after reorder is finished.
This commit is contained in:
Krzysztof Kotlarek 2023-03-23 15:05:36 +11:00 committed by GitHub
parent 5d4c5d959a
commit 4fe79ccc79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 7 deletions

View File

@ -13,7 +13,7 @@ export function setEnvironment(e) {
}
export function isTesting() {
return environment === "testing";
return environment === "testing" || environment === "test";
}
// Generally means "before we migrated to Ember CLI"

View File

@ -1,6 +1,7 @@
import { tracked } from "@glimmer/tracking";
import { bind } from "discourse-common/utils/decorators";
import RouteInfoHelper from "discourse/lib/sidebar/route-info-helper";
import { isTesting } from "discourse-common/config/environment";
export default class SectionLink {
@tracked linkDragCss;
@ -22,8 +23,25 @@ export default class SectionLink {
}
@bind
didStartDrag(e) {
this.mouseY = e.screenY;
didStartDrag(event) {
// 0 represents left button of the mouse
if (event.button === 0) {
this.willDrag = true;
setTimeout(
() => {
this.delayedStart(event);
},
isTesting() ? 0 : 300
);
}
}
delayedStart(event) {
if (this.willDrag) {
this.mouseY = event.screenY;
this.linkDragCss = "drag";
this.section.disable();
this.drag = true;
}
}
@bind
@ -32,11 +50,16 @@ export default class SectionLink {
this.mouseY = null;
this.section.enable();
this.section.reorder();
this.willDrag = false;
this.drag = false;
}
@bind
dragMove(e) {
const currentMouseY = e.screenY;
dragMove(event) {
if (!this.drag) {
return;
}
const currentMouseY = event.screenY;
const distance = currentMouseY - this.mouseY;
if (!this.linkHeight) {
this.linkHeight = document.getElementsByClassName(
@ -55,7 +78,5 @@ export default class SectionLink {
this.mouseY = currentMouseY;
}
}
this.linkDragCss = "drag";
this.section.disable();
}
}

View File

@ -16,6 +16,9 @@
}
.sidebar-section-wrapper.disabled {
a {
pointer-events: none;
}
.sidebar-section-link-wrapper {
.sidebar-section-link-prefix.icon,
.sidebar-section-link {