From ead21ea2ee452eb36bb7d951741aea27bbd02cbb Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Mon, 13 Dec 2021 12:11:43 +0200
Subject: [PATCH] kanban improvements

---
 client/src/views/record/kanban.js           | 32 ++++++++++++---------
 frontend/less/espo-rtl/custom.less          | 12 ++++++++
 frontend/less/espo/custom.less              |  1 -
 frontend/less/hazyblue-vertical/custom.less |  4 +++
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/client/src/views/record/kanban.js b/client/src/views/record/kanban.js
index bb8c4102e5..fad79789a3 100644
--- a/client/src/views/record/kanban.js
+++ b/client/src/views/record/kanban.js
@@ -285,6 +285,8 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
             this.$listKanban = this.$el.find('.list-kanban');
             this.$content = $('#content');
 
+            this.$groupColumnList = this.$listKanban.find('.group-column-list');
+
             this.$container = this.$el.find('.list-kanban-container');
 
             $window.off('resize.kanban');
@@ -381,7 +383,7 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
         },
 
         initSortable: function () {
-            var $list = this.$listKanban.find('.group-column-list');
+            var $list = this.$groupColumnList;
 
             $list.find('> .item').on('touchstart', (e) => {
                 e.originalEvent.stopPropagation();
@@ -394,9 +396,8 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
             $list.sortable({
                 connectWith: '.group-column-list',
                 cancel: '.dropdown-menu *',
-                containment: this.$el,
-                //scroll: false,
-                //scrollSensitivity: 200,
+                containment: this.getSelector(),
+                scroll: false,
                 over: function (e, ui) {
                     $(this).addClass('drop-hover');
                 },
@@ -404,11 +405,9 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
                     $(this).removeClass('drop-hover');
                 },
                 sort: (e, ui) => {
-                    if (this.blockScrollControl) {
-                        return;
+                    if (!this.blockScrollControl) {
+                        this.controlHorizontalScroll(e.originalEvent);
                     }
-
-                    this.controlHorizontalScroll(e.originalEvent);
                 },
                 start: (e, ui) => {
                     $grouoColumnList.addClass('drop-active');
@@ -419,6 +418,7 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
                     this.$showMore.addClass('hidden');
 
                     this.sortIsStarted = true;
+                    this.sortWasCentered = false;
 
                     this.$draggable = ui.item;
                 },
@@ -1030,7 +1030,7 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
             let marginSens = 100;
             let step = 3;
             let interval = 5;
-            let marginSensStepRatio = 1.5;
+            let marginSensStepRatio = 2.5;
 
             let isRight = rect.right - marginSens < itemRight &&
                 containerEl.scrollLeft + containerEl.offsetWidth < containerEl.scrollWidth;
@@ -1038,14 +1038,16 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
             let isLeft = rect.left + marginSens > itemLeft &&
                 containerEl.scrollLeft > 0;
 
-            if (isRight) {
+            this.$groupColumnList.sortable('refreshPositions');
+
+            if (isRight && this.sortWasCentered) {
                 let margin = rect.right - itemRight;
 
                 if (margin < marginSens / marginSensStepRatio) {
                     step *= 2.5;
                 }
 
-                let stepActual = Math.min(step, margin);
+                let stepActual = Math.min(step, containerEl.offsetWidth - containerEl.scrollLeft);
 
                 containerEl.scrollLeft = containerEl.scrollLeft + stepActual;
 
@@ -1062,14 +1064,14 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
                 return;
             }
 
-            if (isLeft) {
+            if (isLeft && this.sortWasCentered) {
                 let margin = - (rect.left - itemLeft);
 
                 if (margin < marginSens / marginSensStepRatio) {
                     step *= 2;
                 }
 
-                let stepActual = Math.min(step, margin);
+                let stepActual = Math.min(step, containerEl.scrollLeft);
 
                 containerEl.scrollLeft = containerEl.scrollLeft - stepActual;
 
@@ -1089,6 +1091,10 @@ define('views/record/kanban', ['views/record/list'], function (Dep) {
             if (this.blockScrollControl && !isLeft && !isRight) {
                 this.blockScrollControl = false;
             }
+
+            if (!isLeft && !isRight) {
+                this.sortWasCentered = true;
+            }
         },
 
     });
diff --git a/frontend/less/espo-rtl/custom.less b/frontend/less/espo-rtl/custom.less
index a1086a2953..6557432b95 100644
--- a/frontend/less/espo-rtl/custom.less
+++ b/frontend/less/espo-rtl/custom.less
@@ -288,4 +288,16 @@ td.cell[data-name="buttons"] > .btn-group {
     .search-row .search-right-buttons-group {
         float: left;
     }
+}
+
+div.list-kanban > div > table {
+    th.group-header {
+        > div {
+            .create-button {
+                float: left;
+                right: auto;
+                left: 14px;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index 596730848d..2e73db7995 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -458,7 +458,6 @@ div.list-kanban > div > table {
 
 .list-kanban {
     overflow: hidden;
-    padding-right: 3px;
 
     > .kanban-columns-container {
         margin-left: -@padding-base-horizontal;
diff --git a/frontend/less/hazyblue-vertical/custom.less b/frontend/less/hazyblue-vertical/custom.less
index 07b340dbed..08044528df 100644
--- a/frontend/less/hazyblue-vertical/custom.less
+++ b/frontend/less/hazyblue-vertical/custom.less
@@ -181,3 +181,7 @@ table.table {
 .panel.dashlet > .panel-heading > .btn-group {
     margin-top: -6px;
 }
+
+.list-kanban {
+    padding-right: 3px;
+}