Allow vertical scrollbars to be disabled (user preferences, visible by default)

client/components/boards/boardBody.jade

@@ -21,7 +21,8 @@ template(name="boardBody")
         class="{{#if hasSwimlanes}}dragscroll{{/if}}"
         class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
         class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
-        class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
+        class="{{#if draggingActive.get}}is-dragging-active{{/if}}"
+        class="{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}")
         if showOverlay.get
           .board-overlay
         if currentBoard.isTemplatesBoard

client/components/boards/boardBody.js

@@ -270,6 +270,11 @@ BlazeComponent.extendComponent({
     }
   },
 
+  isVerticalScrollbars() {
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.isVerticalScrollbars();
+  },
+
   openNewListForm() {
     if (this.isViewSwimlanes()) {
       // The form had been removed in 416b17062e57f215206e93a85b02ef9eb1ab4902

client/components/cards/cardDetails.jade

@@ -5,7 +5,7 @@ template(name="cardDetails")
 
   +attachmentViewer
 
-  section.card-details.js-card-details.nodragscroll(class='{{#if cardMaximized}}card-details-maximized{{/if}}' class='{{#if isPopup}}card-details-popup{{/if}}'): .card-details-canvas
+  section.card-details.js-card-details.nodragscroll(class='{{#if cardMaximized}}card-details-maximized{{/if}}' class='{{#if isPopup}}card-details-popup{{/if}}' class='{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}'): .card-details-canvas
     .card-details-header(class='{{#if colorClass}}card-details-{{colorClass}}{{/if}}')
       +inlinedForm(classNames="js-card-details-title")
         +editCardTitleForm

client/components/cards/cardDetails.js

@@ -114,6 +114,11 @@ BlazeComponent.extendComponent({
     );
   },
 
+  isVerticalScrollbars() {
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.isVerticalScrollbars();
+  },
+
   /** returns if the list id is the current list id
    * @param listId list id to check
    * @return is the list id the current list id ?

client/components/lists/listBody.jade

@@ -1,6 +1,6 @@
 template(name="listBody")
   unless collapsed
-    .list-body
+    .list-body(class="{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}")
       .minicards.clearfix.js-minicards(class="{{#if reachedWipLimit}}js-list-full{{/if}}")
         if cards.length
           +inlinedForm(autoclose=false position="top")

client/components/lists/listBody.js

@@ -231,6 +231,11 @@ BlazeComponent.extendComponent({
     );
   },
 
+  isVerticalScrollbars() {
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.isVerticalScrollbars();
+  },
+
   cardDetailsPopup(event) {
     if (!Popup.isOpen()) {
       Popup.open("cardDetails")(event);

client/components/main/layouts.css

@@ -446,6 +446,9 @@ a:not(.disabled).is-active i.fa {
   padding: 0;
   padding-top: 15px;
 }
+.no-scrollbars {
+  scrollbar-width: none;
+}
 @media screen and (max-width: 800px) {
   #content {
     margin: 1px 0px 0px 0px;

client/components/sidebar/sidebar.jade

@@ -1,5 +1,5 @@
 template(name="sidebar")
-  .board-sidebar.sidebar(class="{{#if isOpen}}is-open{{/if}}")
+  .board-sidebar.sidebar(class="{{#if isOpen}}is-open{{/if}} {{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}")
     //a.sidebar-tongue.js-toggle-sidebar(
     //  class="{{#if isTongueHidden}}is-hidden{{/if}}",
     //  title="{{showTongueTitle}}")
@@ -33,6 +33,11 @@ template(name='homeSidebar')
       span {{_ 'hide-minicard-label-text'}}
       b  
       .materialCheckBox(class="{{#if hiddenMinicardLabelText}}is-checked{{/if}}")
+  ul
+    a.flex.js-vertical-scrollbars-toggle(title="{{_ 'enable-vertical-scrollbars'}}")
+      span {{_ 'enable-vertical-scrollbars'}}
+      b  
+      .materialCheckBox(class="{{#if isVerticalScrollbars}}is-checked{{/if}}")
   hr
   unless currentUser.isNoComments
     h3.activity-title

client/components/sidebar/sidebar.js

@@ -110,6 +110,11 @@ BlazeComponent.extendComponent({
     return user && user.isKeyboardShortcuts();
   },
 
+  isVerticalScrollbars() {
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.isVerticalScrollbars();
+  },
+
   events() {
     return [
       {
@@ -134,6 +139,9 @@ BlazeComponent.extendComponent({
         'click .js-keyboard-shortcuts-toggle'() {
           ReactiveCache.getCurrentUser().toggleKeyboardShortcuts();
         },
+        'click .js-vertical-scrollbars-toggle'() {
+          ReactiveCache.getCurrentUser().toggleVerticalScrollbars();
+        },
         'click .js-close-sidebar'() {
           Sidebar.toggle()
         },
@@ -155,6 +163,10 @@ BlazeComponent.extendComponent({
       return false;
     }
   },
+  isVerticalScrollbars() {
+    const user = ReactiveCache.getCurrentUser();
+    return user && user.isVerticalScrollbars();
+  },
   showActivities() {
     let ret = Utils.getCurrentBoard().showActivities ?? false;
     return ret;

imports/i18n/data/en.i18n.json

@@ -383,6 +383,7 @@
   "email-sent": "Email sent",
   "email-verifyEmail-subject": "Verify your email address on __siteName__",
   "email-verifyEmail-text": "Hello __user__,\n\nTo verify your account email, simply click the link below.\n\n__url__\n\nThanks.",
+  "enable-vertical-scrollbars": "Enable vertical scrollbars",
   "enable-wip-limit": "Enable WIP Limit",
   "error-board-doesNotExist": "This board does not exist",
   "error-board-notAdmin": "You need to be admin of this board to do that",

models/users.js

@@ -451,6 +451,13 @@ Users.attachSchema(
       type: Boolean,
       defaultValue: false,
     },
+    'profile.verticalScrollbars': {
+      /**
+       * User-specified state of vertical scrollbars visibility.
+       */
+      type: Boolean,
+      defaultValue: true,
+    },
     services: {
       /**
        * services field of the user
@@ -966,6 +973,11 @@ Users.helpers({
     return keyboardShortcuts;
   },
 
+  isVerticalScrollbars() {
+    const { verticalScrollbars = true } = this.profile || {};
+    return verticalScrollbars;
+  },
+
   remove() {
     User.remove({
       _id: this._id,
@@ -1038,6 +1050,14 @@ Users.mutations({
       },
     };
   },
+  toggleVerticalScrollbars() {
+    const { verticalScrollbars = true } = this.profile || {};
+    return {
+      $set: {
+        'profile.verticalScrollbars': !verticalScrollbars,
+      },
+    };
+  },
 
   addInvite(boardId) {
     return {