Merge branch 'sprint/168_sunhao/task45145'
This commit is contained in:
zhujinyong
@@ -5,66 +5,57 @@
|
||||
#kanbanList .panel-heading {padding: 10px;}
|
||||
#kanbanList .panel-body {padding: 0 10px 10px;}
|
||||
#kanbanList .kanban {min-height: 120px; overflow: visible;}
|
||||
#kanbanList .kanban-item {margin-top: 0; border-radius: 2px;}
|
||||
#kanbanList .kanban-item:hover {border: 1px solid #ccc;}
|
||||
#kanbanList .kanban-item + .kanban-item {margin-top: 10px;}
|
||||
#kanbanList .kanban-lane-items {padding: 10px; min-height: 38px;}
|
||||
#kanbanList .kanban-card {border-radius: 2px; padding: 10px;}
|
||||
#kanbanList .kanban-card:hover {border: 1px solid #ccc;}
|
||||
#kanbanList .kanban-header,
|
||||
#kanbanList .kanban-lane {border-bottom: none; margin-bottom: 0; min-height: 60px;}
|
||||
#kanbanList .kanban-lane {border-bottom: none; margin-bottom: 0;}
|
||||
#kanbanList .kanban-sub-lane {border-bottom: 0;}
|
||||
#kanbanList .kanban-lane {margin-top: 2px; min-height: 100px;}
|
||||
#kanbanList .kanban-lane.has-sub-lane {background-color: transparent;}
|
||||
#kanbanList .kanban-lane + .kanban-lane {border-top: 10px solid #fff;}
|
||||
#kanbanList .kanban-lane + .kanban-lane {margin-top: 10px;}
|
||||
#kanbanList .kanban-sub-lane + .kanban-sub-lane {margin-top: 2px;}
|
||||
#kanbanList .kanban-col + .kanban-col {border-left: 2px solid #fff;}
|
||||
#kanbanList .kanban-header-col {height: 72px; padding: 20px 5px;}
|
||||
#kanbanList .kanban-header-col > .title {margin: 0; line-height: 32px; height: 32px}
|
||||
#kanbanList .kanban-header-col > .title > .text {font-weight: bold; max-width: 200px; max-width: calc(100% - 50px);}
|
||||
#kanbanList .kanban-header-col > .title > .icon, #kanbanList .kanban-header-col > .title > .count {top: -11px}
|
||||
#kanbanList .kanban-header-col > .title > .text {max-width: 200px; max-width: calc(100% - 50px);}
|
||||
#kanbanList .kanban-header + .kanban-lane > .kanban-lane-name {margin-top: 0;}
|
||||
#kanbanList .kanban-header {position: relative;}
|
||||
#kanbanList .kanban-item.link-block {padding: 0;}
|
||||
#kanbanList .kanban-item.link-block > a {padding: 10px; display: block;}
|
||||
#kanbanList .kanban-item > .title {white-space: nowrap; overflow: hidden; text-overflow: clip;}
|
||||
#kanbanList .kanban-item.link-block > a {padding: 10px; display: block;}
|
||||
#kanbanList .kanban-item.has-progress {padding-right: 40px; position: relative;}
|
||||
#kanbanList .kanban-item.has-progress > .progress-pie {position: absolute; right: 7px; top: 7px}
|
||||
#kanbanList .kanban-item.has-left-border {border-left: 2px solid #838a9d;}
|
||||
#kanbanList .kanban-item.has-left-border.border-left-green {border-left-color: #0bd986;}
|
||||
#kanbanList .kanban-item.has-left-border.border-left-red {border-left-color: #ff5d5d;}
|
||||
#kanbanList .kanban-item.has-left-border.border-left-blue {border-left-color: #0991ff;}
|
||||
#kanbanList .kanban-item.link-block a {padding: 10px; display: block;}
|
||||
#kanbanList .kanban-card > .title {white-space: nowrap; overflow: hidden; text-overflow: clip;}
|
||||
#kanbanList .kanban-card.has-progress {padding-right: 40px; position: relative;}
|
||||
#kanbanList .kanban-card.has-progress > .progress-pie {position: absolute; right: 7px; top: 7px}
|
||||
#kanbanList .kanban-card.has-left-border {border-left: 2px solid #838a9d;}
|
||||
#kanbanList .kanban-card.has-left-border.border-left-green {border-left-color: #0bd986;}
|
||||
#kanbanList .kanban-card.has-left-border.border-left-red {border-left-color: #ff5d5d;}
|
||||
#kanbanList .kanban-card.has-left-border.border-left-blue {border-left-color: #0991ff;}
|
||||
#kanbanList .no-flex .kanban-lane > .kanban-sub-lanes[data-sub-lanes-count="1"] > .kanban-sub-lane {min-height: 90px;}
|
||||
#kanbanList .no-flex .kanban-lane > .kanban-sub-lanes[data-sub-lanes-count="2"] > .kanban-sub-lane {min-height: 45px;}
|
||||
|
||||
.kanban-affixed {padding-top: 72px;}
|
||||
.kanban-affixed > .kanban-header {position: fixed!important; top: 0; background: rgba(80,80,80,.9); color: #fff; z-index: 100;}
|
||||
|
||||
#kanbanList .kanban-header-col[data-type="doingProject"],
|
||||
#kanbanList .kanban-header-col[data-type="doingProject"] + .kanban-header-col[data-type="doingExecution"] {padding: 38px 10px 0;}
|
||||
#kanbanList .kanban-header-col[data-type="doingProject"]:after {content: attr(data-span-text); display: block; position: absolute; z-index: 10; left: 0; right: -100%; right: calc(-100% - 2px); top: 0; line-height: 36px; text-align: center; font-weight: bold; border-bottom: 2px solid #fff; background-color: #ededed;}
|
||||
#kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-lane-items {height: 100%; display: flex; flex-direction: column; justify-content: center;}
|
||||
#kanbanList .kanban-item.kanban-item-span,
|
||||
#kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-item {background-color: transparent; border: none; padding: 0; text-align: center; box-shadow: none!important;}
|
||||
#kanbanList .kanban-item.kanban-item-span:hover,
|
||||
#kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-item:hover {box-shadow: none;}
|
||||
#kanbanList .kanban-item.kanban-item-span > .title,
|
||||
#kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-item > .title {white-space: normal;}
|
||||
#kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-item {padding: 0;}
|
||||
#kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-lane-items {height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0; overflow: hidden;}
|
||||
#kanbanList .kanban-card.kanban-card-span,
|
||||
#kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-card {background-color: transparent; border: none; padding: 0; text-align: center; box-shadow: none!important; margin: 0; height: auto!important;}
|
||||
#kanbanList .kanban-card.kanban-card-span:hover,
|
||||
#kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-card:hover {box-shadow: none;}
|
||||
#kanbanList .kanban-card.kanban-card-span > .title,
|
||||
#kanbanList .kanban-col[data-type="unclosedProduct"] .kanban-card > .title {white-space: normal; line-height: 1;}
|
||||
|
||||
#kanbanList .kanban-col[data-type="normalRelease"] .kanban-item > .title {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 38px;}
|
||||
#kanbanList .kanban-col[data-type="normalRelease"] .kanban-item > .title > .text {display: block; white-space: nowrap; text-overflow: clip; overflow: hidden;}
|
||||
#kanbanList .kanban-col[data-type="normalRelease"] .kanban-item > .title.has-icon > .text {margin-right: 5px; max-width: calc(100% - 20px);}
|
||||
#kanbanList .no-flex .kanban-col[data-type="normalRelease"] .kanban-item > .title {display: block; height: 38px;}
|
||||
#kanbanList .no-flex .kanban-col[data-type="normalRelease"] .kanban-item > .title > .text {display: inline-block;}
|
||||
#kanbanList .no-flex .kanban-col[data-type="normalRelease"] .kanban-item > .title > .icon {position: relative; top: -5px}
|
||||
#kanbanList .kanban-col[data-type="normalRelease"] .kanban-card > .title {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
|
||||
#kanbanList .kanban-col[data-type="normalRelease"] .kanban-card > .title > .text {display: block; white-space: nowrap; text-overflow: clip; overflow: hidden;}
|
||||
#kanbanList .kanban-col[data-type="normalRelease"] .kanban-card > .title.has-icon > .text {margin-right: 5px; max-width: calc(100% - 20px);}
|
||||
#kanbanList .no-flex .kanban-col[data-type="normalRelease"] .kanban-card > .title {display: block; height: 38px;}
|
||||
#kanbanList .no-flex .kanban-col[data-type="normalRelease"] .kanban-card > .title > .text {display: inline-block;}
|
||||
#kanbanList .no-flex .kanban-col[data-type="normalRelease"] .kanban-card > .title > .icon {position: relative; top: -5px}
|
||||
#kanbanList .kanban-affixed .kanban-header-col[data-type="doingProject"]:after {background-color: #606060;}
|
||||
|
||||
/* Show project and execution in one row */
|
||||
#kanbanList .kanban-lane-col[data-type="doingProject"] + .kanban-lane-col {border-left: none; box-shadow: inset 2px 0 0 #fff;}
|
||||
#kanbanList .kanban-lane-col[data-type="doingProject"] > .kanban-lane-items {padding: 0; overflow: visible; max-height: none!important;}
|
||||
#kanbanList .project-row {position: relative; width: 200%; width: calc(200% + 2px);}
|
||||
#kanbanList .project-row + .project-row {border-top: 2px solid #fff;}
|
||||
#kanbanList .kanban-lane-col[data-type="doingProject"] > .kanban-lane-items {padding: 0!important; overflow: visible; max-height: none!important;}
|
||||
#kanbanList .kanban-item-span {padding: 0!important;}
|
||||
#kanbanList .project-row {position: relative; width: 200%; width: calc(200% + 2px); height: 62px!important;}
|
||||
#kanbanList .kanban-item-span + .kanban-item-span > .project-row {border-top: 2px solid #fff;}
|
||||
#kanbanList .project-row > .project-col {float: left; width: 50%; padding: 10px;}
|
||||
#kanbanList .project-row > .project-col + .project-col {padding: 10px 9px 10px 11px;}
|
||||
#kanbanList .project-row > .execution-item {position: absolute!important; left: 100%; top: 0}
|
||||
</style>
|
||||
<script>
|
||||
@@ -102,7 +93,7 @@ function renderSpanItem(item, $item)
|
||||
$title = $('<div class="title" />').appendTo($item);
|
||||
}
|
||||
$title.text(item.name).attr('title', item.name);
|
||||
return $item.addClass('kanban-item-span');
|
||||
return $item.addClass('kanban-card-span');
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -308,16 +299,17 @@ function renderReleaseItem(item, $item)
|
||||
*/
|
||||
function renderDoingProjectItem(item, $item)
|
||||
{
|
||||
$item.removeClass('kanban-item').addClass('project-row clearfix').empty();
|
||||
$item.closest('.kanban-item').addClass('kanban-item-span');
|
||||
$item.removeClass('kanban-card').addClass('project-row clearfix').empty();
|
||||
|
||||
var $projectCol = $('<div class="project-col"></div>').appendTo($item);
|
||||
var $projectItem = $('<div class="kanban-item project-item"></div>').appendTo($projectCol);
|
||||
var $projectItem = $('<div class="kanban-card project-item"></div>').appendTo($projectCol);
|
||||
renderProjectItem(item, $projectItem);
|
||||
|
||||
var $executionCol = $('<div class="project-col"></div>').appendTo($item);
|
||||
if(item.execution)
|
||||
{
|
||||
var $executionItem = $('<div class="kanban-item execution-item"></div>').appendTo($executionCol);
|
||||
var $executionItem = $('<div class="kanban-card execution-item"></div>').appendTo($executionCol);
|
||||
renderExecutionItem(item.execution, $executionItem);
|
||||
}
|
||||
|
||||
@@ -389,9 +381,7 @@ function affixKanbanHeader($kanbanBoard, affixed)
|
||||
$kanbanBoard.css('padding-top', affixed ? $header.outerHeight() : '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Update kanban affix state for all boards in page
|
||||
*/
|
||||
/** Update kanban affix state for all boards in page */
|
||||
function updateKanbanAffixState()
|
||||
{
|
||||
var $boards = $('.kanban-board');
|
||||
@@ -417,34 +407,36 @@ function updateKanbanAffixState()
|
||||
if($currentAffixedBoard) affixKanbanHeader($currentAffixedBoard, true);
|
||||
}
|
||||
|
||||
/** Try to update kanban affix state */
|
||||
function tryUpdateKanbanAffix()
|
||||
{
|
||||
if(window.updateKanbanAffixTimer) $.zui.clearAsap(window.updateKanbanAffixTimer);
|
||||
window.updateKanbanAffixTimer = $.zui.asap(function()
|
||||
{
|
||||
updateKanbanAffixState();
|
||||
window.updateKanbanAffixTimer = null;
|
||||
});
|
||||
}
|
||||
|
||||
/* Kanban color list for lane name */
|
||||
if(!window.kanbanColorList) window.kanbanColorList = ['#32C5FF', '#006AF1', '#9D28B2', '#FF8F26', '#7FBB00', '#424BAC', '#66c5f8', '#EC2761'];
|
||||
|
||||
/* Set default options to kanban component */
|
||||
$.extend($.fn.kanban.Constructor.DEFAULTS,
|
||||
{
|
||||
readonly: true,
|
||||
maxColHeight: 260,
|
||||
itemRender: renderKanbanItem,
|
||||
useFlex: false,
|
||||
showCount: true,
|
||||
showZeroCount: true,
|
||||
onRenderHeaderCol: function($col, col)
|
||||
readonly: true,
|
||||
maxColHeight: 260,
|
||||
itemRender: renderKanbanItem,
|
||||
showCount: true,
|
||||
showZeroCount: true,
|
||||
fluidBoardWidth: true,
|
||||
onRenderLaneName: function($name, lane, $kanban, columns, kanban)
|
||||
{
|
||||
if(col.type === 'doingProject' && window.doingText) $col.attr('data-span-text', window.doingText);
|
||||
var color = kanbanColorList[lane.$index % kanbanColorList.length];
|
||||
$name.css('background-color', color);
|
||||
},
|
||||
onRenderKanban: function($kanban, kanbanData)
|
||||
{
|
||||
$kanban.find('.kanban-lane').each(function(index)
|
||||
{
|
||||
var $lane = $(this);
|
||||
if ($lane.data('lane').color) return;
|
||||
|
||||
var $laneName = $lane.find('.kanban-lane-name');
|
||||
var color = kanbanColorList[index % kanbanColorList.length];
|
||||
$laneName.css('background-color', color);
|
||||
});
|
||||
|
||||
/* Update project count and execution count */
|
||||
var doingProjectCount = 0;
|
||||
var doingExecutionCount = 0;
|
||||
@@ -460,29 +452,13 @@ $.extend($.fn.kanban.Constructor.DEFAULTS,
|
||||
},
|
||||
onCreate: function(kanban)
|
||||
{
|
||||
kanban.$.on('scroll', updateKanbanAffixState);
|
||||
updateKanbanAffixState();
|
||||
kanban.$.on('scroll', tryUpdateKanbanAffix);
|
||||
tryUpdateKanbanAffix();
|
||||
}
|
||||
});
|
||||
|
||||
$(function()
|
||||
{
|
||||
/* Update kanban affix state on window resize or scroll */
|
||||
var updateTimer;
|
||||
var updateCallback = function()
|
||||
{
|
||||
updateKanbanAffixState();
|
||||
updateTimer = null;
|
||||
};
|
||||
$(window.kanbanAffixContainer || window).on('scroll resize', function(e)
|
||||
{
|
||||
if(updateTimer)
|
||||
{
|
||||
if(window.requestAnimationFrame) cancelAnimationFrame(updateTimer);
|
||||
else clearTimeout(updateTimer);
|
||||
}
|
||||
if(window.requestAnimationFrame) updateTimer = requestAnimationFrame(updateCallback);
|
||||
else updateTimer = setTimeout(updateCallback, 50);
|
||||
});
|
||||
$(window.kanbanAffixContainer || window).on('scroll resize', tryUpdateKanbanAffix);
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user