Design/EasySoft-ZenTaoPMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

* improve kanban UI.

Browse Source
This commit is contained in:
Catouse
2018-06-15 11:58:01 +08:00
parent e08f63acd7
commit b5ff0d3090
4 changed files with 96 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/project/css/kanban.css
+3 -1
View File
@@ -1,4 +1,4 @@
.boards {display: table; table-layout: fixed; width: 100%; }
.boards {display: table; table-layout: fixed; width: auto; }
.board {display: table-cell; width: 16.666666667%; padding: 10px; border: 1px solid transparent; transition: background-color .2s, opacity .2s; vertical-align: top;}
.board-item {border: 1px solid #EBEBEB; padding: 5px 10px; cursor: move; border-radius: 2px; background-color: #fff; transition: border .2s, opacity .2s; overflow: hidden;}
.board-item.disabled {cursor: not-allowed;}
@@ -17,6 +17,8 @@
.board-item.dragging {opacity: .35;}
.board-item .btn {padding: 2px 10px 2px 23px; font-size: 12px; position: relative; left: -2px;}
.board-item .btn-icon-left > .icon {width: 22px; height: 22px; line-height: 20px; font-size: 14px;}
#kanban {overflow-y: auto}
#kanban > .table {min-width: 1100px;}
#kanban.dragging .boards.dragging .board {background: #eee; opacity: .35; border-color: #f1f1f1}
#kanban thead .c-side {padding: 5px;}
#kanban .label-pri {width: 16px; height: 16px; line-height: 16px; min-width: 16px; font-size: 12px;}
module/project/css/storykanban.css
+3 -1
View File
@@ -1,4 +1,4 @@
.boards {display: table; table-layout: fixed; width: 100%; }
.boards {display: table; table-layout: fixed; width: auto; }
.board {display: table-cell; width: 16.666666667%; padding: 10px; border: 1px solid transparent; transition: background-color .2s, opacity .2s; vertical-align: top;}
.board-item {border: 1px solid #EBEBEB; padding: 5px 10px; cursor: move; border-radius: 2px; background-color: #fff; transition: border .2s, opacity .2s; overflow: hidden;}
.board-item.disabled {cursor: not-allowed;}
@@ -17,6 +17,8 @@
.board-item .btn {padding: 2px 10px 2px 30px; font-size: 12px;}
.board-item .btn-icon-left > .icon {width: 22px; height: 22px; line-height: 20px; font-size: 14px;}
.board-item .status {line-height: 20px; display: inline-block; vertical-align: middle;}
#kanban {overflow-y: auto}
#kanban > .table {min-width: 1100px;}
#kanban.dragging .boards.dragging .board {background: #eee; opacity: .35; border-color: #f1f1f1}
#kanban thead .c-side {padding: 5px;}
#kanban .label-pri {width: 16px; height: 16px; line-height: 16px; min-width: 16px; font-size: 12px;}
module/project/js/kanban.js
+45 -1
View File
@@ -26,12 +26,56 @@ $(function()
}
};
// Get scrollbar width
var getScrollbarWidth = function ()
{
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
};
var scrollbarWidth = getScrollbarWidth();
var fixBoardWidth = function()
{
var $table = $kanban.find('.table');
var kanbanWidth = $table.width();
var $cBoards = $table.find('thead>tr>th.c-board:not(.c-side)');
var boardCount = $cBoards.length;
var $cSide = $table.find('thead>tr>th.c-board.c-side');
var totalWidth = kanbanWidth - scrollbarWidth;
if ($cSide.length) totalWidth = totalWidth - ($cSide.outerWidth() + 5);
var cBoardWidth = Math.floor(totalWidth/boardCount) - 16;
$cBoards.not(':last').width(cBoardWidth);
$cBoards.first().width(cBoardWidth + 5);
$kanban.find('.boards > .board').width(cBoardWidth + 16 - 22);
};
fixBoardWidth();
$(window).on('resize', fixBoardWidth);
var refresh = function()
{
var selfClose = $.cookie('selfClose');
$.cookie('selfClose', 0, {expires:config.cookieLife, path:config.webRoot});
if(selfClose == 1) $kanban.load(location.href + ' #kanban');
if(selfClose == 1) $kanban.load(location.href + ' #kanban', fixBoardWidth);
};
var kanbanModalTrigger = new $.zui.ModalTrigger({type: 'iframe', width:800});
module/project/js/storykanban.js
+45 -1
View File
@@ -18,12 +18,56 @@ $(function()
}
};
// Get scrollbar width
var getScrollbarWidth = function ()
{
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
};
var scrollbarWidth = getScrollbarWidth();
var fixBoardWidth = function()
{
var $table = $kanban.find('.table');
var kanbanWidth = $table.width();
var $cBoards = $table.find('thead>tr>th.c-board:not(.c-side)');
var boardCount = $cBoards.length;
var $cSide = $table.find('thead>tr>th.c-board.c-side');
var totalWidth = kanbanWidth - scrollbarWidth;
if ($cSide.length) totalWidth = totalWidth - ($cSide.outerWidth() + 5);
var cBoardWidth = Math.floor(totalWidth/boardCount) - 16;
$cBoards.not(':last').width(cBoardWidth);
$cBoards.first().width(cBoardWidth + 5);
$kanban.find('.boards > .board').width(cBoardWidth + 16 - 22);
};
fixBoardWidth();
$(window).on('resize', fixBoardWidth);
var refresh = function()
{
var selfClose = $.cookie('selfClose');
$.cookie('selfClose', 0, {expires:config.cookieLife, path:config.webRoot});
if(selfClose == 1) $kanban.load(location.href + ' #kanban');
if(selfClose == 1) $kanban.load(location.href + ' #kanban', fixBoardWidth);
};
var lastOperation;