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}}
+
{{#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;