diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index 89e99ae6d..de1c1ca3c 100644 --- a/client/components/boards/boardBody.jade +++ b/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 diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index eb5690f43..29bf5e5bb 100644 --- a/client/components/boards/boardBody.js +++ b/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 diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index 99288bfe6..6ca69c754 100644 --- a/client/components/cards/cardDetails.jade +++ b/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 diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index ce1e9066a..9d022b2cd 100644 --- a/client/components/cards/cardDetails.js +++ b/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 ? diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade index 22a11fec8..662b5f187 100644 --- a/client/components/lists/listBody.jade +++ b/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") diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js index f68599c83..05fabd4a2 100644 --- a/client/components/lists/listBody.js +++ b/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); diff --git a/client/components/main/layouts.css b/client/components/main/layouts.css index 22ec3b609..a08b2f3ed 100644 --- a/client/components/main/layouts.css +++ b/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; diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade index 59548713c..d10149381 100644 --- a/client/components/sidebar/sidebar.jade +++ b/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 diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js index e9329fc27..36cc3f050 100644 --- a/client/components/sidebar/sidebar.js +++ b/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; diff --git a/imports/i18n/data/en.i18n.json b/imports/i18n/data/en.i18n.json index 3f09fdb3e..2eb6c9401 100644 --- a/imports/i18n/data/en.i18n.json +++ b/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", diff --git a/models/users.js b/models/users.js index 5d28dae3b..68b811b76 100644 --- a/models/users.js +++ b/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 {