From 253a4bdf4ab8b147df3c5795b33f9de329cd0631 Mon Sep 17 00:00:00 2001 From: dingyongliang Date: Fri, 16 Sep 2022 02:03:24 +0000 Subject: [PATCH 1/3] * task #68927, adjust the label style. --- module/kanban/css/view.css | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/module/kanban/css/view.css b/module/kanban/css/view.css index dcd4e1040c..b507dc3658 100644 --- a/module/kanban/css/view.css +++ b/module/kanban/css/view.css @@ -157,24 +157,27 @@ .executionName .delayed {margin-right: 10px;} #kanbanBox {position: relative;} -#regionTabs {background-color: #efefef; z-index: 100; display: flex;} +#regionTabs {background-color: #efefef; z-index: 100; display: flex; align-items: center; gap: 1.5rem;} #regionTabs .leftBtn.disabled i, #regionTabs .rightBtn.disabled i{color: #c2c2c2;} +#regionTabs .leftBtn i, #regionTabs .rightBtn i{vertical-align: 1px;} #regionTabs .icon-angle-left, #regionTabs .icon-angle-right {font-size: 20px; vertical-align: -webkit-baseline-middle;} -#regionNavTabs {display: inline-flex; overflow: hidden; width: 100%; padding-left: 10px;} -#regionNavTabs > ul {display: inline-flex; border-bottom: unset;} -#regionNavTabs > ul > li {padding: 6px 15px; margin-bottom: 6px; border-radius: 4px 4px 0px 0px;} -#regionNavTabs > ul > li.active {background-color: #fff;} -#regionNavTabs > ul > li.active::before {content: ''; width: 10px; height: 10px; position: absolute; left: -10px; top: 21px; background: radial-gradient(circle at 0% 0%,transparent 10px,#fff 0);} -#regionNavTabs > ul > li.active::after {content: ''; width: 10px; height: 10px; position: absolute; left: calc(100%); top: 21px; background: radial-gradient(circle at 100% 0%,transparent 10px,#fff 0);} -#regionNavTabs > ul > li > a {max-width: 195px; overflow: hidden; white-space: nowrap; padding: 0; background-color: transparent;} -#regionNavTabs > ul > li.active > a:before {background: unset;} +#regionNavTabs {display: inline-flex; overflow: hidden; padding-left: 10px;} +#regionNavTabs > ul {display: inline-flex; border-bottom: none; margin-bottom: -3px;} +#regionNavTabs > ul > li {padding: 0; text-align: center;} +#regionNavTabs > ul > li > a {min-width: 134px; overflow: hidden; white-space: nowrap; z-index: 0; position: relative; padding: 1.7rem; margin-left: -1.5rem; background: none; outline: 0;} +#regionNavTabs > ul > li:first-child > a {margin-left: 0;} +#regionNavTabs > ul > li.active > a {z-index: 1;} +#regionNavTabs > ul > li.active > a::before {background-color: #fff;} +#regionNavTabs > ul > li > a:before {content: ""; position: absolute; top: -1rem; left: 0; background: #f8f8f8; height: 100%; width: 100%; z-index: -1; border-top-left-radius: 1rem; border-top-right-radius: 1rem; transform: perspective(0.5rem) rotateX(2deg); transform-origin: bottom;} +#regionNavTabs > ul > li > a > span {vertical-align: bottom; overflow: hidden; max-width: 6em; white-space: nowrap; display: inline-block;} +#regionNavTabs > ul > li.active > a > span {color: #2b80ff!important;} #regionTabs.affixed {margin-bottom: 5px; position: fixed; top: 0px;} #regionTabs.affixed + #kanbanContainer .kanban-board.kanban-affixed > .kanban-header {margin-top: 30px;} #regionTabs.affixed + #kanbanContainer .kanban-board.kanban-affixed > .kanban-header + .kanban-lane {margin-top: 38px;} #regionTabs.affixed ul > li {margin-bottom: 0px !important;} #regionTabs .region-actions .dropdown-menu {top: 25px;} #region-tab-actions {display: none;} -#region-tab-actions.active {display: flex; position: relative; right: 0px; top: -2px;} +#region-tab-actions.active {display: flex;} .region {display: none;} .region.active {display: block;} .region.active.notAll {margin-top: -5px;} From a52b6135af271fc53b6b40a773b52d50bf99026b Mon Sep 17 00:00:00 2001 From: dingyongliang Date: Fri, 16 Sep 2022 06:27:49 +0000 Subject: [PATCH 2/3] * adjust the button position. --- module/kanban/css/view.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/module/kanban/css/view.css b/module/kanban/css/view.css index b507dc3658..9f41016324 100644 --- a/module/kanban/css/view.css +++ b/module/kanban/css/view.css @@ -157,11 +157,12 @@ .executionName .delayed {margin-right: 10px;} #kanbanBox {position: relative;} -#regionTabs {background-color: #efefef; z-index: 100; display: flex; align-items: center; gap: 1.5rem;} +#regionTabs {background-color: #efefef; z-index: 100; display: flex; align-items: center; gap: 1.5rem; justify-content: space-between;} #regionTabs .leftBtn.disabled i, #regionTabs .rightBtn.disabled i{color: #c2c2c2;} #regionTabs .leftBtn i, #regionTabs .rightBtn i{vertical-align: 1px;} #regionTabs .icon-angle-left, #regionTabs .icon-angle-right {font-size: 20px; vertical-align: -webkit-baseline-middle;} -#regionNavTabs {display: inline-flex; overflow: hidden; padding-left: 10px;} +#regionNavTabs {display: inline-flex; overflow: hidden;} +.leftBtn.hidden + #regionNavTabs {padding-left: 10px;} #regionNavTabs > ul {display: inline-flex; border-bottom: none; margin-bottom: -3px;} #regionNavTabs > ul > li {padding: 0; text-align: center;} #regionNavTabs > ul > li > a {min-width: 134px; overflow: hidden; white-space: nowrap; z-index: 0; position: relative; padding: 1.7rem; margin-left: -1.5rem; background: none; outline: 0;} From 6c2d51f30a0bf25f05da1b95b07734293f58b60d Mon Sep 17 00:00:00 2001 From: dingyongliang Date: Fri, 16 Sep 2022 07:01:40 +0000 Subject: [PATCH 3/3] * fix swipeRegionNavTabs. --- module/kanban/css/view.css | 2 +- module/kanban/js/view.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/module/kanban/css/view.css b/module/kanban/css/view.css index 9f41016324..9883b42ea9 100644 --- a/module/kanban/css/view.css +++ b/module/kanban/css/view.css @@ -165,7 +165,7 @@ .leftBtn.hidden + #regionNavTabs {padding-left: 10px;} #regionNavTabs > ul {display: inline-flex; border-bottom: none; margin-bottom: -3px;} #regionNavTabs > ul > li {padding: 0; text-align: center;} -#regionNavTabs > ul > li > a {min-width: 134px; overflow: hidden; white-space: nowrap; z-index: 0; position: relative; padding: 1.7rem; margin-left: -1.5rem; background: none; outline: 0;} +#regionNavTabs > ul > li > a {min-width: 134px; overflow: hidden; white-space: nowrap; z-index: 0; position: relative; padding: 1.7rem; margin-left: -20px; background: none; outline: 0;} #regionNavTabs > ul > li:first-child > a {margin-left: 0;} #regionNavTabs > ul > li.active > a {z-index: 1;} #regionNavTabs > ul > li.active > a::before {background-color: #fff;} diff --git a/module/kanban/js/view.js b/module/kanban/js/view.js index 29c29ed155..dde04a185c 100644 --- a/module/kanban/js/view.js +++ b/module/kanban/js/view.js @@ -1865,6 +1865,8 @@ function swipeRegionNavTabs($object, direction) { /* If you swipe left, the distance is equal to the item's left. */ distance = - itemLeft + radius - ($item.prev().hasClass('active') ? radiusWidth : 0); + /* tab overlap width */ + distance += 20; if($item.prev().length == 0) { distance = 0; @@ -1882,6 +1884,7 @@ function swipeRegionNavTabs($object, direction) { /* If you swipe right, the distance is equal to the left distance of item plus the width of item minus the width of the regionNavTabs. */ distance = offsetWidth - itemOffset - radius + nextRadius - radiusWidth * 2; + distance += 20; if($item.next().length == 0) { distance = - objectWidth + offsetWidth - radiusWidth * 2; @@ -1922,6 +1925,7 @@ function initRegionTabs() if(acitiveItemLeft + distance < 0) { distance = - acitiveItemLeft; + distance += 20; if($acitiveItem.prev().length == 0) { distance = 0; @@ -1932,6 +1936,7 @@ function initRegionTabs() else if(acitiveItemWidth + acitiveItemLeft + distance + radiusWidth * 2 > regionTabsWidth && acitiveItemLeft != 0 && acitiveItemWidth != 0) { distance = regionTabsWidth - acitiveItemWidth - acitiveItemLeft + (distance != 0 ? - radiusWidth * 2 : radiusWidth); + distance += 20; if($acitiveItem.next().length == 0) { distance = regionTabsWidth - acitiveItemWidth - acitiveItemLeft - radiusWidth * 2;