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

* change project tree view UI.

Browse Source
This commit is contained in:
Catouse
2016-04-28 12:05:05 +08:00
parent c38da5160f
commit 26c54d376e
4 changed files with 62 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/project/css/tree.css
+13 -9
View File
@@ -1,21 +1,25 @@
.no-padding {padding: 0!important;}
#projectTree {margin-bottom: 0}
#projectTree > .tree-action-item {display: none!important}
#projectTree li > .tree-item-wrapper > .tree-toggle {display: block}
#projectTree li > .tree-item-wrapper:hover {display: block; background-color: #edf3fe; cursor: pointer; margin-left: -20px; padding-left: 20px;}
#projectTree li > .tree-item-wrapper:hover {background-color: #edf3fe; cursor: pointer; margin-left: -20px; padding-left: 20px;}
#projectTree li {line-height: 30px; padding-top: 0; padding-bottom: 0}
#projectTree > li > .tree-item-wrapper {display: block; background-color: #edf3fe; margin-left: -20px; padding-left: 20px; border-bottom: 1px solid #ddd; cursor: pointer}
#projectTree > li > .tree-item-wrapper:hover {background-color: #eee}
#projectTree > li.open > .tree-item-wrapper {border-bottom: none}
#projectTree > li.open + li > .tree-item-wrapper {border-top: 1px solid #ddd}
#projectTree.tree li>.list-toggle:before {content: '\e6bb'}
#projectTree.tree li.open>.list-toggle:before {content: '\e6b8';}
#projectTree.tree li.has-list.open > ul:after {top: -10px; bottom: 17px}
#projectTree.tree ul > li.has-list:after {top: 14px}
#projectTree.tree ul > li:after {top: 13px}
#projectTree.tree li>.list-toggle {top: 2px}
#projectTree .item-type-story > ul > li {padding-left: 10px;}
#projectTree.tree li:before {display: none}
#projectTree .table-bordered tr > td:first-child, #projectTree .table-bordered tr > th:first-child {border-left: 1px solid #ddd; padding-left: 0; padding-right: 0}
#projectTree .item-type-tasks .tree-item-wrapper:hover {background-color: #fff}
#projectTree .item-type-story > ul > li {padding-left: 10px;}
#projectTree .item-type-tasks > .tree-item-wrapper:hover {background-color: #f5f5f5}
#projectTree .task-pri {position: relative; top: -1px}
#projectTree .task-assignto {display: inline-block; margin-left: 10px; color: #808080}
#projectTree .task-info {float: right; display: none}
#projectTree .task-info > div {display: inline-block; margin: 0 5px;}
#projectTree .task-info > div.buttons {position: relative; top: 2px}
#projectTree .item-type-task:hover .task-info {display: block}
.tree-view-btn {min-width: 36px;}
.main > .panel > .panel-heading > .panel-actions {margin-top: -8px; margin-right: -12px;}
module/project/model.php
+6 -4
View File
@@ -2007,10 +2007,10 @@ class projectModel extends model
$storyTasks = isset($taskGroups[$node->id][$story->id]) ? $taskGroups[$node->id][$story->id] : array();
if(!empty($storyTasks))
{
$taskItems = $this->formatTasksForTree($storyTasks, $story);
$taskItems = $this->formatTasksForTree($storyTasks, $story);
$storyItem->tasksCount = count($taskItems);
$storyItem->children = array();
$storyItem->children[] = array('id' => 'tasks' . $story->id, 'tasks' => $taskItems, 'type' => 'tasks', 'actions' => false);
$storyItem->children = $taskItems;
}
$node->children[] = $storyItem;
@@ -2022,8 +2022,9 @@ class projectModel extends model
$tasks = isset($taskGroups[$node->id][0]) ? $taskGroups[$node->id][0] : array();
if(!empty($tasks))
{
$taskItems = $this->formatTasksForTree($tasks);
$node->children[] = array('id' => 'tasks', 'tasks' => $taskItems, 'type' => 'tasks', 'actions' => false);
$taskItems = $this->formatTasksForTree($tasks);
$node->tasksCount = count($taskItems);
$node->children = $taskItems;
}
}
@@ -2082,6 +2083,7 @@ class projectModel extends model
$buttons .= common::buildIconButton('task', 'close', "taskID=$task->id", $task, 'list', '', '', 'iframe', true);
$buttons .= common::buildIconButton('task', 'edit', "taskID=$task->id", '', 'list');
$taskItem->buttons = $buttons;
$taskItem->actions = false;
$taskItems[] = $taskItem;
}
module/project/view/tree.html.php
+22 -15
View File
@@ -27,8 +27,8 @@ include './taskheader.html.php';
</div>
</div>
</div>
<div class='panel-body no-padding'>
<ul id='projectTree'></ul>
<div class='panel-body'>
<ul id='projectTree' class='tree-lines'></ul>
</div>
</div>
</div>
@@ -56,6 +56,7 @@ $(function()
var hoursFormat = '<?php echo $lang->project->hours ?>';
var viewLevel = '<?php echo $level ?>' || 'custom';
var data = $.parseJSON('<?php echo json_encode($tree, JSON_HEX_QUOT | JSON_HEX_APOS);?>');
console.log('DATA', data);
var $tree = $('#projectTree');
var statusMap = $.parseJSON('<?php echo json_encode($lang->task->statusList);?>');
var selectCustomLevel = function() {$('.tree-view-btn.active').removeClass('active').filter('[data-type="custom"]').addClass('active');};
@@ -70,7 +71,7 @@ $(function()
{
title: '<?php echo $lang->project->batchWBS ?>',
template: '<a data-toggle="tooltip" href="javascript:;"><i class="icon icon-sitemap"></i>',
templateInList: '<a href="javascript:;"><i class="icon icon-sitemap"></i> <?php echo $lang->project->batchWBS ?></a>',
templateInList: false,
linkTemplate: '<?php echo helper::createLink('tree', 'edit', "moduleID={0}&type=task"); ?>'
},
},
@@ -84,10 +85,10 @@ $(function()
},
itemCreator: function($li, item)
{
$li.closest('li').addClass('item-type-' + item.type);
$li.toggleClass('tree-toggle', item.type !== 'task').closest('li').addClass('item-type-' + item.type);
if(item.type === 'product')
{
$li.append($('<span><i class="icon icon-cube text-muted"></i> ' + item.title + '</span>')).addClass('tree-toggle');
$li.append($('<span><i class="icon icon-cube text-muted"></i> ' + item.title + '</span>'));
}
else if(item.type === 'story')
{
@@ -99,23 +100,29 @@ $(function()
}
else if(item.type === 'task')
{
$li.append('<span class="pri' + item.pri + '">' + item.pri + '</span> ').append($('<a>').attr({href: item.url}).text('#' + item.id + ' ' + item.title).css('color', item.color));
$li.append('<span class="task-pri pri' + item.pri + '">' + (item.pri || '') + '</span> ').append($('<a>').attr({href: item.url}).text('#' + item.id + ' ' + item.title).css('color', item.color));
if(item.assignedTo) $li.append($('<span class="task-assignto"/>').html(item.assignedTo ? ('<i class="icon icon-user text-muted"></i> ' + item.assignedTo) : ''));
var $info = $('<div class="task-info clearfix"/>');
$info.append($('<div/>').addClass('task-' + item.status).text(statusMap[item.status]));
$info.append($('<div/>').text(hoursFormat.replace('%s', item.estimate).replace('%s', item.consumed).replace('%s', item.left)));
$info.append($('<div class="buttons"/>').html(item.buttons));
$li.append($info);
}
else if(item.type === 'tasks')
{
if(item.tasks && item.tasks.length)
{
var $table = $('<table class="table table-fixed table-bordered table-condensed table-hover table-striped"><tbody></tbody></table>');
var $table = $('<table class="table table-tasks table-fixed table-bordered table-condensed table-hover table-striped"><tbody></tbody></table>');
var $tbody = $table.find('tbody');
$.each(item.tasks, function(idx, task)
{
var $tr = $('<tr class="text-center"/>');
$tr.append($('<td width="30"/>').append('<span class="pri' + task.pri + '">' + (task.pri || '') + '</span>'));
$tr.append($('<td/>').addClass('text-left').append($('<a>').attr({href: task.url}).text('#' + task.id + ' ' + task.title).css('color', task.color)));
$tr.append($('<td width="90"/>').html(task.assignedTo ? ('<i class="icon icon-user text-muted"></i> ' + task.assignedTo) : ''));
$tr.append($('<td width="70"/>').addClass(task.storyChanged ? 'warning' : task.status).text(statusMap[task.status]));
$tr.append($('<td width="140"/>').text(hoursFormat.replace('%s', task.estimate).replace('%s', task.consumed).replace('%s', task.left)));
$tr.append($('<td width="130"/>').html(task.buttons));
$tr.append($('<td class="td-extra" width="30"/>').append('<span class="pri' + task.pri + '">' + (task.pri || '') + '</span>'));
$tr.append($('<td class="td-extra" width="90"/>').html(task.assignedTo ? ('<i class="icon icon-user text-muted"></i> ' + task.assignedTo) : ''));
$tr.append($('<td class="td-extra" width="70"/>').addClass(task.status).text(statusMap[task.status]));
$tr.append($('<td class="td-extra" width="140"/>').text(hoursFormat.replace('%s', task.estimate).replace('%s', task.consumed).replace('%s', task.left)));
$tr.append($('<td class="td-extra" width="150"/>').html(task.buttons));
$tbody.append($tr);
});
$li.append($table);
@@ -123,12 +130,12 @@ $(function()
}
else if(item.type === 'unlinkStory')
{
$li.append($('<span class="tree-item-title"><i class="icon icon-tasks text-muted"></i> ' + item.title + '</span>')).addClass('tree-toggle');
$li.append($('<span class="tree-item-title"><i class="icon icon-tasks text-muted"></i> ' + item.title + '</span>'));
if(item.tasksCount) $li.append(' <span class="label label-task-count label-badge">' + item.tasksCount + '</span>');
}
else
{
$li.addClass('tree-toggle').append($('<span class="tree-toggle"><i class="icon icon-bookmark-empty text-muted"></i> ' + (item.title || item.name) + '</span>'));
$li.append($('<span class="tree-toggle"><i class="icon icon-bookmark-empty text-muted"></i> ' + (item.title || item.name) + '</span>'));
}
}
});
@@ -145,7 +152,7 @@ $(function()
if(level === 'task')
{
tree.collapse();
tree.show($('.item-type-tasks').parent().parent());
tree.show($('.item-type-tasks, .item-type-task').parent().parent());
}
if(level === 'product') tree.collapse();
else if(level === 'module')
www/theme/default/style.css
+21 -21
View File
@@ -204,27 +204,27 @@ fieldset.actionbox ol {padding-top: 8px\0/;}
.stars-list {color: #E48600}
/* status in table */
td.done, td[class$="-done"],
td.pass, td[class$="-pass"],
td.resolved, td[class$="-resolved"],
td.normal, td[class$="-normal"],
td.status-active, td[class$="-active"] {color:#229f24;}
td.wait, td[class$="-wait"] {color:#808080;}
td.pause, td[class$="-pause"],
td.suspended, td[class$="-suspended"] {color:#E48600;}
td.delay, td[class$="-delay"] {color:#e84e0f;}
td.closed, td[class$="-closed"],
td.cancel, td[class$="-cancel"] {color:#888;}
td.doing, td[class$="-doing"],
td.changed, td[class$="-changed"],
td.investigate, td[class$="-investigate"] {color:#d2322d;}
td.delayed, td[class$="-delayed"] {background:#e84e0f!important; color:white;}
td.blocked, td[class$="-blocked"] {background:yellow!important;}
td.fail, td[class$="-fail"] {color:#d2322d}
td.draft, td[class$="-draft"] {color:#8957a1}
.bug-active, td.bug-active {color: #8957a1}
.testcase-normal, td.testcase-normal,
.story-active, td.story-active {color: #333}
td.done, [class$="-done"],
td.pass, [class$="-pass"],
td.resolved, [class$="-resolved"],
td.normal, [class$="-normal"],
td.status-active, [class$="-active"] {color:#229f24;}
td.wait, [class$="-wait"] {color:#808080;}
td.pause, [class$="-pause"],
td.suspended, [class$="-suspended"] {color:#E48600;}
td.delay, [class$="-delay"] {color:#e84e0f;}
td.closed, [class$="-closed"],
td.cancel, [class$="-cancel"] {color:#888;}
td.doing, [class$="-doing"],
td.changed, [class$="-changed"],
td.investigate, [class$="-investigate"] {color:#d2322d;}
td.delayed, [class$="-delayed"] {background:#e84e0f!important; color:white;}
td.blocked, [class$="-blocked"] {background:yellow!important;}
td.fail, [class$="-fail"] {color:#d2322d}
td.draft, [class$="-draft"] {color:#8957a1}
.bug-active {color: #8957a1}
.testcase-normal,
.story-active {color: #333}
/* tabs */
.nav-tabs > li > a {padding: 5px 10px; color: #333; line-height: 20px; max-height: 32px}