diff --git a/client/res/templates/record/kanban.tpl b/client/res/templates/record/kanban.tpl index a5683bc0d6..13f7fa5382 100644 --- a/client/res/templates/record/kanban.tpl +++ b/client/res/templates/record/kanban.tpl @@ -13,6 +13,7 @@ {{/if}} +
@@ -68,6 +69,7 @@
+
{{#if isEmptyList}} diff --git a/client/src/views/record/kanban.js b/client/src/views/record/kanban.js index 60703c746f..b87fffce62 100644 --- a/client/src/views/record/kanban.js +++ b/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); + }, + }); }); diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less index 7643bdfa89..b5107b6646 100644 --- a/frontend/less/espo/custom.less +++ b/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;