diff --git a/module/execution/css/kanban.css b/module/execution/css/kanban.css index 14aad0d1ef..406a3026a9 100644 --- a/module/execution/css/kanban.css +++ b/module/execution/css/kanban.css @@ -1,8 +1,4 @@ -#header {position: fixed; top: 0; left: 0; right: 0; z-index: 10;} -#mainMenu {position: fixed; padding: 10px 15px; top: 60px; left: 0; right: 0; background-color: #efefef; z-index: 0;} -#main {padding-bottom: 0; padding-top: 50px;} -#main > .container {max-width: none!important; padding: 0} -#kanbanContainer {border-radius: 0; margin: 48px 0 0 0;} +#main > .container {max-width: 1960px!important; padding: 0 10px} .kanban + .kanban {margin-top: 15px} .kanban-item > .title { display: block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis} diff --git a/module/execution/js/kanban.js b/module/execution/js/kanban.js index 933fbee85c..d78efa7ffa 100644 --- a/module/execution/js/kanban.js +++ b/module/execution/js/kanban.js @@ -450,7 +450,7 @@ function renderTaskItem(item, $item, col) var $title = $item.find('.title'); if(!$title.length) { - $title = $(' ') + $title = $(' ') .attr('href', $.createLink('task', 'view', 'taskID=' + item.id)); $title.appendTo($item); } @@ -464,7 +464,7 @@ function renderTaskItem(item, $item, col) $infos.html( [ '#' + item.id + '', - '' + item.pri + '', + '' + item.pri + '', item.estimate ? '' + item.estimate + 'h' : '', ].join('')); if(item.assignedTo) $infos.append(renderUserAvatar(item.assignedTo)); @@ -474,7 +474,7 @@ function renderTaskItem(item, $item, col) return $item; } - + /* Add column renderer/ 添加特定列类型或列条目类型渲染方法 */ addColumnRenderer('story', renderStoryItem); addColumnRenderer('bug', renderBugItem); @@ -519,7 +519,7 @@ function createKanban(kanbanID, data, options) var $kanban = $('#kanban-' + kanbanID); if($kanban.length) return updateKanban(kanbanID, data); - $kanban = $('
').appendTo('#kanbans'); + $kanban = $('').appendTo('#kanbans'); $kanban.kanban($.extend({data: data}, options)); } @@ -556,11 +556,26 @@ function fullScreen() { whenFailEnterFullscreen(error); } + } +} +window.kanbanDropRules = +{ + story: + { + blacklog: true, + ready: ['blacklog', 'dev-doing'], + 'dev-doing': ['dev-done'], + 'dev-done': ['test-doing'], + 'test-doing': ['test-done'], + 'test-done': ['accepted'], + 'accepted': ['published'], + 'published': false, } } /** +<<<<<<< module/execution/js/kanban.js * Exit full screen. * * @access public @@ -573,7 +588,67 @@ function exitFullScreen() $.cookie('isFullScreen', 0); } + * Find drop columns + * @param {JQuery} $element Drag element + * @param {JQuery} $root Dnd root element + */ +function findDropColumns($element, $root) +{ + var $col = $element.closest('.kanban-col'); + var col = $col.data(); + var kanbanID = $root.data('id'); + var kanbanRules = window.kanbanDropRules ? window.kanbanDropRules[kanbanID] : null; + if(!kanbanRules) return $root.find('.kanban-lane-col:not([data-type="' + col.type + '"])'); + + var colRules = kanbanRules[col.type]; + var lane = $col.closest('.kanban-lane').data('lane'); + return $root.find('.kanban-lane-col').filter(function() + { + if(!colRules) return false; + if(colRules === true) return true; + + var $newCol = $(this); + var newCol = $newCol.data(); + if(newCol.id === col.id) return false; + + var $newLane = $newCol.closest('.kanban-lane'); + var newLane = $newLane.data('lane'); + var canDropHere = colRules.indexOf(newCol.type) > -1 && newLane.id === lane.id; + if(canDropHere) $newCol.addClass('can-drop-here'); + return canDropHere; + }); +} + +/** + * Handle finish drop task + * @param {Object} event Event object + * @returns {void} + */ +function handleFinishDrop(event) +{ + var $item = $(event.element); // The drag item + var $dragCol = $item.closest('.kanban-lane-col'); + var $dropCol = $(event.target); + + /* Get d-n-d(drag and drop) infos 获取拖放操作相关信息 */ + var item = $item.data('item'); + var fromColType = $dragCol.data('type'); + var toColType = $dropCol.data('type'); + var kanbanID = $item.closest('.kanban').data('id'); + + /* TODO: Save d-n-d infos to server 将拖放操作信息提交到服务器 */ + console.log('TODO: Save d-n-d infos to server 将拖放操作信息提交到服务器', {item, fromColType, toColType, kanbanID}); + + /* + // TODO: The server must return a updated kanban data 服务器返回更新后的看板数据 + + // 调用 updateKanban 更新看板数据 + updateKanban(kanbanID, newKanbanData); + */ + + $('#kanbans').find('.can-drop-here').removeClass('can-drop-here'); +} /* Overload kanban default options */ $.extend($.fn.kanban.Constructor.DEFAULTS, @@ -595,12 +670,19 @@ $(function() /* Common options 用于初始化看板的通用选项 */ var commonOptions = { - maxColHeight: 'auto', - minColWidth: 240, - droppable: true, - showCount: true, - showZeroCount: true, - countRender: renderColumnCount + maxColHeight: 'auto', + minColWidth: 240, + maxColWidth: 240, + showCount: true, + showZeroCount: true, + fluidBoardWidth: true, + countRender: renderColumnCount, + droppable: + { + target: findDropColumns, + finish: handleFinishDrop, + mouseButton: 'left' + } }; /* Create story kanban 创建需求看板 */ diff --git a/www/js/zui/kanban/min.css b/www/js/zui/kanban/min.css index 530c038cd1..4af7426fa8 100644 --- a/www/js/zui/kanban/min.css +++ b/www/js/zui/kanban/min.css @@ -1,6 +1,6 @@ /*! - * ZUI: ZUI Kanban View - v1.9.2 - 2021-10-26 + * ZUI: ZUI Kanban View - v1.9.2 - 2021-10-27 * http://openzui.com * GitHub: https://github.com/easysoft/zui.git * Copyright (c) 2021 cnezsoft.com; Licensed MIT - */.kanban{min-height:300px}.kanban-header,.kanban-lane,.kanban-sub-lane{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;flex-direction:row;background-color:#f1f3f5;border-bottom:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.kanban-header{padding-left:20px;background-color:rgba(0,0,0,.07)}.kanban-no-lane-name .kanban-header{padding-left:0}.kanban-col{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.not-use-flex .kanban-col{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.no-flex .kanban-col{float:left}.kanban-col+.kanban-col{border-left:2px solid #fff}.kanban-header-col{position:relative;height:32px}.kanban-header-col>.title{display:block;height:32px;margin:0 32px;line-height:32px;text-align:center}.kanban-header-col>.title>.text{display:inline-block;max-width:100px;margin:0 5px;overflow:hidden;text-overflow:'';white-space:nowrap}.kanban-header-col>.title>.count,.kanban-header-col>.title>.icon{position:relative;top:-12px}.kanban-header-col>.title>.count{color:#8b91a2}.kanban-header-col[data-id=ADD]>.title{margin:6px;opacity:.7}.kanban-header-col[data-id=ADD]>.actions{display:none}.kanban-header-col>.actions{position:absolute;top:0;right:0}.kanban-header-col>.actions>.btn{min-width:32px}.kanban-header-col>.actions>.btn>.icon{opacity:.5}.kanban-header-has-parent>.kanban-header-col{height:64px;padding:16px 0}.kanban-header-parent-col{padding:0!important}.kanban-header-parent-col>.kanban-header-col{height:32px;padding:0}.kanban-header-sub-cols{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:-1px;margin-left:-2px;flex-direction:row;border-top:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row}.kanban-header-sub-cols>.kanban-col{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.no-flex .kanban-header-sub-cols{display:table;table-layout:fixed}.no-flex .kanban-header-sub-cols>.kanban-col{width:50%}.kanban-lane{min-height:100px}.kanban-lane+.kanban-lane{margin-top:3px}.no-flex .kanban-lane{position:relative;padding-left:20px}.kanban-lane-name{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:20px;overflow:hidden;color:#fff;text-align:center;background-color:#3dc6fd;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.kanban-lane-name>.text{position:absolute;top:5px;right:1px;bottom:5px;display:block;overflow:hidden;line-height:20px;text-align:center;white-space:normal;-webkit-writing-mode:tb-rl;-ms-writing-mode:tb-rl;writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}.no-flex .kanban-lane-name{position:absolute;top:0;bottom:0;left:0}.kanban-header+.kanban-lane>.kanban-lane-name{margin-top:-33px}.kanban-header.kanban-header-has-parent+.kanban-lane>.kanban-lane-name{margin-top:-65px}.kanban-sub-lanes{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column}.kanban-sub-lanes.no-sub-lane{background-color:#f1f3f5}.kanban-sub-lane{-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto}.kanban-lane-col.drop-to{outline:3px solid rgba(255,190,57,.25);outline-offset:-3px}.kanban-lane-col.drop-to .kanban-lane-actions>.btn{background-color:rgba(255,190,57,.25);border:1px dotted #ff9800}.kanban-lane-col.drop-to .kanban-lane-actions>.btn>span{opacity:0}.kanban-lane-col[data-type=EMPTY]{background-color:#fff}.kanban-lane-items{max-height:300px;padding:0 10px 10px;overflow:auto}.kanban-size-inited .kanban-lane-items{max-height:100%!important}.kanban-lane-actions{padding:10px 15px}.kanban-item{padding:10px;margin-top:10px;background:#fff;border:1px solid #fff;border-radius:4px;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);-webkit-transition:-webkit-box-shadow .2s,-webkit-transform .2s;-o-transition:box-shadow .2s,-o-transform .2s;transition:-webkit-box-shadow .2s,-webkit-transform .2s;transition:box-shadow .2s,transform .2s;transition:box-shadow .2s,transform .2s,-webkit-box-shadow .2s,-webkit-transform .2s,-o-transform .2s}.kanban-item.drag-from{background-color:#aaa;opacity:.2}.kanban-item:hover{border-color:rgba(0,0,0,.1);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.09);box-shadow:0 4px 10px 0 rgba(0,0,0,.09)}.kanban-item.drag-shadow{border-color:rgba(0,0,0,.2);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.09),0 4px 20px 0 rgba(0,0,0,.5);box-shadow:0 4px 10px 0 rgba(0,0,0,.09),0 4px 20px 0 rgba(0,0,0,.5);-webkit-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)} \ No newline at end of file + */.kanban{min-height:300px}.kanban-header,.kanban-lane,.kanban-sub-lane{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;flex-direction:row;background-color:#f1f3f5;border-bottom:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.kanban-header{padding-left:20px;background-color:rgba(0,0,0,.07)}.kanban-no-lane-name .kanban-header{padding-left:0}.kanban-col{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.not-use-flex .kanban-col{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.no-flex .kanban-col{float:left}.kanban-col+.kanban-col{border-left:2px solid #fff}.kanban-header-col{position:relative;height:32px}.kanban-header-col>.title{display:block;height:32px;margin:0 32px;line-height:32px;text-align:center}.kanban-header-col>.title>.text{display:inline-block;max-width:100px;margin:0 5px;overflow:hidden;text-overflow:'';white-space:nowrap}.kanban-header-col>.title>.count,.kanban-header-col>.title>.icon{position:relative;top:-12px}.kanban-header-col>.title>.count{color:#8b91a2}.kanban-header-col[data-id=ADD]>.title{margin:6px;opacity:.7}.kanban-header-col[data-id=ADD]>.actions{display:none}.kanban-header-col>.actions{position:absolute;top:0;right:0}.kanban-header-col>.actions>.btn{min-width:32px}.kanban-header-col>.actions>.btn>.icon{opacity:.5}.kanban-header-has-parent>.kanban-header-col{height:64px;padding:16px 0}.kanban-header-parent-col{padding:0!important}.kanban-header-parent-col>.kanban-header-col{height:32px;padding:0}.kanban-header-sub-cols{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:-1px;margin-left:-2px;flex-direction:row;border-top:2px solid #fff;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row}.kanban-header-sub-cols>.kanban-col{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.no-flex .kanban-header-sub-cols{display:table;table-layout:fixed}.no-flex .kanban-header-sub-cols>.kanban-col{width:50%}.kanban-lane{min-height:100px}.kanban-lane+.kanban-lane{margin-top:3px}.no-flex .kanban-lane{position:relative;padding-left:20px}.kanban-lane-name{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:20px;overflow:hidden;color:#fff;text-align:center;background-color:#3dc6fd;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.kanban-lane-name>.text{position:absolute;top:5px;right:1px;bottom:5px;display:block;overflow:hidden;line-height:20px;text-align:center;white-space:normal;-webkit-writing-mode:tb-rl;-ms-writing-mode:tb-rl;writing-mode:tb-rl;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl}.no-flex .kanban-lane-name{position:absolute;top:0;bottom:0;left:0}.kanban-header+.kanban-lane>.kanban-lane-name{margin-top:-33px}.kanban-header.kanban-header-has-parent+.kanban-lane>.kanban-lane-name{margin-top:-65px}.kanban-sub-lanes{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column}.kanban-sub-lanes.no-sub-lane{background-color:#f1f3f5}.kanban-sub-lane{-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto}.kanban-lane-col.drop-to{outline:3px solid rgba(255,190,57,.25);outline-offset:-3px}.kanban-lane-col.drop-to .kanban-lane-actions>.btn{background-color:rgba(255,190,57,.25);border:1px dotted #ff9800}.kanban-lane-col.drop-to .kanban-lane-actions>.btn>span{opacity:0}.kanban-lane-col[data-type=EMPTY]{background-color:#fff}.kanban-lane-items{max-height:300px;padding:0 10px 10px;overflow:auto}.kanban-size-inited .kanban-lane-items{max-height:100%!important}.kanban-lane-actions{padding:10px 15px}.kanban-item{padding:10px;margin-top:10px;background:#fff;border:1px solid #fff;border-radius:4px;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);-webkit-transition:-webkit-box-shadow .2s,-webkit-transform .2s;-o-transition:box-shadow .2s,-o-transform .2s;transition:-webkit-box-shadow .2s,-webkit-transform .2s;transition:box-shadow .2s,transform .2s;transition:box-shadow .2s,transform .2s,-webkit-box-shadow .2s,-webkit-transform .2s,-o-transform .2s}.kanban-item.drag-from{background-color:#aaa;opacity:.2}.kanban-item:hover{border-color:rgba(0,0,0,.1);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.09);box-shadow:0 4px 10px 0 rgba(0,0,0,.09)}.kanban-item.drag-shadow{border-color:rgba(0,0,0,.2);-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.05),0 4px 20px 0 rgba(0,0,0,.3);box-shadow:0 4px 10px 0 rgba(0,0,0,.05),0 4px 20px 0 rgba(0,0,0,.3);-webkit-transition:-webkit-box-shadow .2s,-webkit-transform .4s!important;-o-transition:box-shadow .2s,-o-transform .4s!important;transition:-webkit-box-shadow .2s,-webkit-transform .4s!important;transition:box-shadow .2s,transform .4s!important;transition:box-shadow .2s,transform .4s,-webkit-box-shadow .2s,-webkit-transform .4s,-o-transform .4s!important}.kanban-item.drag-shadow.in{-webkit-transform:scale(1.1) rotate(5deg);-ms-transform:scale(1.1) rotate(5deg);-o-transform:scale(1.1) rotate(5deg);transform:scale(1.1) rotate(5deg)}.kanban-dragging{cursor:move} \ No newline at end of file diff --git a/www/js/zui/kanban/min.js b/www/js/zui/kanban/min.js index ca1bfda77b..3547a6532c 100644 --- a/www/js/zui/kanban/min.js +++ b/www/js/zui/kanban/min.js @@ -1,7 +1,7 @@ /*! - * ZUI: ZUI Kanban View - v1.9.2 - 2021-10-26 + * ZUI: ZUI Kanban View - v1.9.2 - 2021-10-27 * http://openzui.com * GitHub: https://github.com/easysoft/zui.git * Copyright (c) 2021 cnezsoft.com; Licensed MIT */ -!function(a){"use strict";var n="zui.kanban",e="object"==typeof CSS&&CSS.supports("display","flex"),t=function(o,i){var d=this;d.name=n,d.$=a(o).addClass("kanban"),d.options=i=a.extend({},t.DEFAULTS,this.$.data(),i),d.data=i.data||[],d.render(d.data);var s=function(n){if(i.onAction){var e=a(this);i.onAction(e.data("action"),e,n,d)}};if(d.$.on("click",".action",s).on("dblclick",".action-dbc",s),"auto"===i.droppable&&(i.droppable=!i.readonly),i.droppable){var r={selector:".kanban-item",target:'.kanban-lane-col:not([data-type="EMPTY"])',drop:function(a){"function"==typeof i.droppable?i.droppable(a):i.onAction&&i.onAction("dropItem",a.element,a,d)}};"object"==typeof i.droppable&&a.extend(r,i.droppable),d.$.droppable(r)}e&&i.useFlex||a(window).on("resize",function(){d.adjustSize()}),i.useFlex&&e||d.$.addClass("not-use-flex"),i.onCreate&&i.onCreate(d)};t.prototype.render=function(a){var n=this;a&&(n.data=a),n.data&&!Array.isArray(n.data)&&(n.data=[n.data]);var t=n.data||[];n.options.beforeRender&&n.options.beforeRender(n,t),n.$.toggleClass("kanban-readonly",!!n.options.readonly).toggleClass("kanban-no-lane-name",!!n.options.noLaneName),n.$.children(".kanban-board").addClass("kanban-expired");for(var o=0;o