From 3eaf48aa37ae7a817f3412aae7087805d65f8a40 Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Wed, 22 Mar 2023 13:34:19 +1100
Subject: [PATCH] FIX: disable reorder links on touch screens (#20769)

This feature causes troubles on touch screens like phones and tablets. Right now, we would like to limit it to mouse and touchpads.

/t/94351
---
 .../app/components/sidebar/section.hbs        |  6 ++--
 .../sidebar/user/custom-sections.hbs          | 28 ++++++++++++-------
 .../sidebar/user/custom-sections.js           |  6 ++++
 .../components/sidebar/user/section-link.js   |  6 ++--
 .../common/base/sidebar-custom-section.scss   |  2 +-
 5 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
index 11569ee5d0e..a521e36004a 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
@@ -1,9 +1,7 @@
 {{#if this.displaySection}}
   <div
-    class={{concat
-      "sidebar-section-wrapper sidebar-section-"
-      @sectionName
-      " "
+    class={{concat-class
+      (concat "sidebar-section-wrapper sidebar-section-" @sectionName)
       @class
     }}
   >
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.hbs
index 67453e08bba..da43c6652ec 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.hbs
@@ -17,11 +17,15 @@
             @prefixValue={{link.icon}}
             @href={{link.value}}
             @class={{link.linkDragCss}}
-            {{draggable
-              didStartDrag=link.didStartDrag
-              didEndDrag=link.didEndDrag
-              dragMove=link.dragMove
-            }}
+            {{(if
+              this.canReorder
+              (modifier
+                "draggable"
+                didStartDrag=link.didStartDrag
+                didEndDrag=link.didEndDrag
+                dragMove=link.dragMove
+              )
+            )}}
           />
         {{else}}
           <Sidebar::SectionLink
@@ -33,11 +37,15 @@
             @prefixType="icon"
             @prefixValue={{link.icon}}
             @class={{link.linkDragCss}}
-            {{draggable
-              didStartDrag=link.didStartDrag
-              didEndDrag=link.didEndDrag
-              dragMove=link.dragMove
-            }}
+            {{(if
+              this.canReorder
+              (modifier
+                "draggable"
+                didStartDrag=link.didStartDrag
+                didEndDrag=link.didEndDrag
+                dragMove=link.dragMove
+              )
+            )}}
           />
         {{/if}}
       {{/each}}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.js b/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.js
index 3562777db9e..ab8ee860d50 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.js
@@ -28,6 +28,12 @@ export default class SidebarUserCustomSections extends Component {
     });
   }
 
+  get canReorder() {
+    return document
+      .getElementsByTagName("html")[0]
+      .classList.contains("no-touch");
+  }
+
   @bind
   _refresh() {
     return ajax("/sidebar_sections.json", {}).then((json) => {
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/user/section-link.js
index 0cdce813f61..bf71db0cfcf 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/user/section-link.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/user/section-link.js
@@ -23,7 +23,7 @@ export default class SectionLink {
 
   @bind
   didStartDrag(e) {
-    this.mouseY = e.targetTouches ? e.targetTouches[0].screenY : e.screenY;
+    this.mouseY = e.screenY;
   }
 
   @bind
@@ -36,9 +36,7 @@ export default class SectionLink {
 
   @bind
   dragMove(e) {
-    const currentMouseY = e.targetTouches
-      ? e.targetTouches[0].screenY
-      : e.screenY;
+    const currentMouseY = e.screenY;
     const distance = currentMouseY - this.mouseY;
     if (!this.linkHeight) {
       this.linkHeight = document.getElementsByClassName(
diff --git a/app/assets/stylesheets/common/base/sidebar-custom-section.scss b/app/assets/stylesheets/common/base/sidebar-custom-section.scss
index d34adc479a0..c53d8b78afc 100644
--- a/app/assets/stylesheets/common/base/sidebar-custom-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-custom-section.scss
@@ -20,7 +20,7 @@
       .sidebar-section-link-prefix.icon,
       .sidebar-section-link {
         background: none;
-        color: var(--primary-low);
+        color: var(--primary-low-mid);
       }
       .sidebar-section-link.drag {
         font-weight: bold;