kanban scroll

client/res/templates/record/kanban.tpl

@@ -13,6 +13,7 @@
 </div>
 {{/if}}
 
+<div class="list-kanban-container">
 <div class="list-kanban" data-scope="{{scope}}" style="min-width: {{minTableWidthPx}}px">
     <div class="kanban-head-container">
     <table class="kanban-head">
@@ -68,6 +69,7 @@
     </table>
     </div>
 </div>
+</div>
 
 
 {{#if isEmptyList}}

client/src/views/record/kanban.js

@@ -52,7 +52,7 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
 
         rowActionsView: 'views/record/row-actions/default-kanban',
 
-        minColumnWidthPx: 125,
+        minColumnWidthPx: 220,
 
         events: {
             'click a.link': function (e) {
@@ -106,6 +106,13 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
 
                 this.actionCreateInGroup(group);
             },
+            'mousedown .kanban-columns td': function (e) {
+                if ($(e.originalEvent.target).closest('.item').length) {
+                    return;
+                }
+
+                this.initBackDrag(e.originalEvent);
+            },
         },
 
         showMore: true,
@@ -120,6 +127,8 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
 
         buttonsDisabled: false,
 
+        backDragStarted: true,
+
         data: function () {
             return {
                 scope: this.scope,
@@ -276,6 +285,8 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
             this.$listKanban = this.$el.find('.list-kanban');
             this.$content = $('#content');
 
+            this.$container = this.$el.find('.list-kanban-container');
+
             $window.off('resize.kanban');
             $window.on('resize.kanban', () => {
                 this.adjustMinHeight();
@@ -924,7 +935,7 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
             let options = {
                 attributes: attributes,
                 scope: this.scope,
-            }
+            };
 
             this.createView('quickCreate', viewName, options, (view) => {
                 view.render();
@@ -935,5 +946,36 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
             });
         },
 
+        initBackDrag: function (e) {
+            this.backDragStarted = true;
+
+            let containerEl = this.$container.get(0);
+
+            containerEl.style.cursor = 'grabbing';
+            containerEl.style.userSelect = 'none';
+
+            let $document = $(document);
+
+            let startLeft = containerEl.scrollLeft;
+            let startX = e.clientX;
+
+            $document.on('mousemove.' + this.cid, (e) => {
+                let dx = e.originalEvent.clientX - startX;
+
+                containerEl.scrollLeft = startLeft - dx;
+            });
+
+            $document.one('mouseup.' + this.cid, () => {
+                this.stopBackDrag();
+            });
+        },
+
+        stopBackDrag: function () {
+            this.$container.get(0).style.cursor = 'default';
+            this.$container.get(0).style.userSelect = 'none';
+
+            $(document).off('mousemove.' + this.cid);
+        },
+
     });
 });

frontend/less/espo/custom.less

@@ -447,7 +447,15 @@ div.list-kanban > div > table {
     }
 }
 
+.list-kanban-container {
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
 .list-kanban {
+    overflow: hidden;
+    padding-right: 3px;
+
     > .kanban-columns-container {
         margin-left: -@padding-base-horizontal;
         margin-right: -@padding-base-horizontal;