Drag handle toggle at top left: Each touch/non-touch screen can

use different setting, because it's saved to browser localstorage,
not database. For example, when using Firefox Multi-Account Containers AddOn,
different browsers etc, when logged in as same user.

Thanks to hatl and xet7 !

Fixes #4715

client/components/main/header.css

@@ -107,6 +107,12 @@
 #header-quick-access a {
   text-decoration: none;
 }
+#header-quick-access i.fa {
+  color: #fff;
+}
+#header-quick-access i.fa:hover {
+  color: #ccc;
+}
 #header-quick-access #header-user-bar,
 #header-quick-access #header-new-board-icon,
 #header-quick-access ul li {

client/components/main/header.jade

@@ -6,6 +6,12 @@ template(name="header")
     The first link goes to the boards page.
   if currentUser
     #header-quick-access(class=currentBoard.colorClass)
+      a.js-toggle-desktop-drag-handles(title="{{_ 'show-desktop-drag-handles'}}" alt="{{_ 'show-desktop-drag-handles'}}")
+        i.fa.fa-arrows
+          if isShowDesktopDragHandles
+            i.fa.fa-check-square-o
+          unless isShowDesktopDragHandles
+            i.fa.fa-times
       if isMiniScreen
         span
           a(href="{{pathFor 'home'}}")

client/components/main/header.js

@@ -57,6 +57,19 @@ Template.header.events({
     Session.set('currentList', this._id);
     Session.set('currentCard', null);
   },
+  'click .js-toggle-desktop-drag-handles'() {
+    //currentUser = Meteor.user();
+    //if (currentUser) {
+    //  Meteor.call('toggleDesktopDragHandles');
+    //} else if (window.localStorage.getItem('showDesktopDragHandles')) {
+    if (window.localStorage.getItem('showDesktopDragHandles')) {
+      window.localStorage.removeItem('showDesktopDragHandles');
+      location.reload();
+    } else {
+      window.localStorage.setItem('showDesktopDragHandles', 'true');
+      location.reload();
+    }
+  },
 });
 
 Template.offlineWarning.events({

client/components/users/userHeader.jade

@@ -159,12 +159,12 @@ template(name="changeSettingsPopup")
     //    | {{_ 'hide-system-messages'}}
     //    if hiddenSystemMessages
     //      i.fa.fa-check
-    li
-      a.js-toggle-desktop-drag-handles
-        i.fa.fa-arrows
-        | {{_ 'show-desktop-drag-handles'}}
-        if isShowDesktopDragHandles
-          i.fa.fa-check
+    //li
+    //  a.js-toggle-desktop-drag-handles
+    //    i.fa.fa-arrows
+    //    | {{_ 'show-desktop-drag-handles'}}
+    //    if isShowDesktopDragHandles
+    //      i.fa.fa-check
     unless currentUser.isWorker
       li
         label.bold.clear

client/lib/utils.js

@@ -288,10 +288,11 @@ Utils = {
 
   // returns if desktop drag handles are enabled
   isShowDesktopDragHandles() {
-    const currentUser = Meteor.user();
-    if (currentUser) {
-      return (currentUser.profile || {}).showDesktopDragHandles;
-    } else if (window.localStorage.getItem('showDesktopDragHandles')) {
+    //const currentUser = Meteor.user();
+    //if (currentUser) {
+    //  return (currentUser.profile || {}).showDesktopDragHandles;
+    //} else if (window.localStorage.getItem('showDesktopDragHandles')) {
+    if (window.localStorage.getItem('showDesktopDragHandles')) {
       return true;
     } else {
       return false;
@@ -300,7 +301,8 @@ Utils = {
 
   // returns if mini screen or desktop drag handles
   isTouchScreenOrShowDesktopDragHandles() {
-    return this.isTouchScreen() || this.isShowDesktopDragHandles();
+    //return this.isTouchScreen() || this.isShowDesktopDragHandles();
+    return this.isShowDesktopDragHandles();
   },
 
   calculateIndexData(prevData, nextData, nItems = 1) {