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/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
     }}
   >

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
+            {{(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
+            {{(if
+              this.canReorder
+              (modifier
+                "draggable"
                 didStartDrag=link.didStartDrag
                 didEndDrag=link.didEndDrag
                 dragMove=link.dragMove
-            }}
+              )
+            )}}
           />
         {{/if}}
       {{/each}}

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) => {

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(

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;