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

* improve UI of dashboard.

Browse Source
This commit is contained in:
Catouse
2018-06-15 17:40:55 +08:00
parent 99a4facb5b
commit 53fc742e64
6 changed files with 151 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/block/css/dashboard.css
+17 -3
View File
@@ -1,5 +1,19 @@
.block-statistic .nav-stacked {overflow: auto; max-height: 220px;}
.nav > li > .btn {padding: 0 5px; line-height: 24px; margin: 3px; color: #3C4353;}
.dashboard .panel-body {max-height: 400px; overflow: auto;}
.dashboard .panel-actions {padding-top: 7px;}
.dashboard .panel.table-scrolled .table-header-fixed {border-bottom: 1px solid #ddd; box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 2px 4px 0 rgba(0,0,0,0.025);}
#dashboard .panel-body {max-height: 400px; overflow: auto;}
#dashboard .panel-actions {padding-top: 7px;}
#dashboard .panel.table-scrolled .table-header-fixed {border-bottom: 1px solid #ddd; box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 2px 4px 0 rgba(0,0,0,0.025);}
@media (min-width: 992px)
{
#dashboard > .row {display: table; width: 100%; margin: 0;}
#dashboard > .row > .col-main,
#dashboard > .row > .col-side {display: table-cell; float: none; padding: 0;}
#dashboard > .row > .col-main {padding-right: 10px }
#dashboard > .row > .col-side {padding-left: 10px }
}
#dashboard.sortable-sorting .panel {box-shadow: 0 1px 1px rgba(0,0,0,.075), 0 2px 6px 0 rgba(0,0,0,.075)}
#dashboard.sortable-sorting .panel > * {display: none;}
#dashboard.sortable-sorting .panel:before {display: block; content: attr(data-name); padding: 12px 20px; font-weight: bold; font-size: 14px;}
#dashboard.sortable-sorting .panel.dragging {visibility: visible; background: transparent; background: rgba(0,0,0,.075); box-shadow: inset 0 2px 6px rgba(0,0,0,.075);}
#dashboard.sortable-sorting .panel.dragging:before {color: #bbb;}
#dashboard.sortable-sorting .panel.drag-shadow {box-shadow: 0 1px 3px rgba(0,0,0,.175), 0 3px 8px 0 rgba(0,0,0,.175)}
module/block/js/dashboard.js
+72 -41
View File
@@ -27,39 +27,67 @@ function deleteBlock(index)
/**
* Sort blocks.
*
* @param object $orders format is {'block2' : 1, 'block1' : 2, oldOrder : newOrder}
* @param array $orders format is {'blockid' : 1, 'block1' : 2}
* @param function $callback
* @access public
* @return void
*/
function sortBlocks(orders)
function sortBlocks(newOrders, callback)
{
var ordersMap = [];
$.each(orders, function(blockId, order) {ordersMap.push({id: blockId, order: order});});
ordersMap.sort(function(a, b) {return a.order - b.order;});
var newOrders = $.map(ordersMap, function(order, idx) {return order.id});
$.getJSON(createLink('block', 'sort', 'orders=' + newOrders.join(',') + '&module=' + module), function(data)
{
// if(data.result == 'success') $.zui.messager.success(config.ordersSaved);
});
$.getJSON(createLink('block', 'sort', 'orders=' + newOrders.join(',') + '&module=' + module), callback);
}
/**
* Resize block
* @param object $event
* @param string $blockId
* @param function $callback
* @access public
* @return void
*/
function resizeBlock(event)
function resizeBlock(blockID, width, callback)
{
var blockID = event.element.find('.panel').data('id');
var data = event.type == 'vertical' ? event.height : event.grid;
$.getJSON(createLink('block', 'resize', 'id=' + blockID + '&type=' + event.type + '&data=' + data), function(data)
$.getJSON(createLink('block', 'resize', 'id=' + blockID + '&type=horizontal&data=' + width), function(data)
{
if(data.result !== 'success') event.revert();
callback();
});
refreshBlock($('#block' + blockID));
}
function refreshBlock($panel, afterRefresh)
{
var url = $panel.data('url');
$panel.addClass('load-indicator loading');
$.ajax({url: url, dataType: 'html'}).done(function(data)
{
var $data = $(data);
if($data.hasClass('panel')) $panel.empty().append($data.children());
else $panel.find('.panel-body').replaceWith($data);
if($.isFunction(afterRefresh))
{
afterRefresh.call(this,
{
result: true,
data: data,
$panel: $panel
});
}
$panel.find('.tablesorter').sortTable();
initTableHeader();
}).fail(function()
{
$panel.addClass('panel-error');
if($.isFunction(afterRefresh))
{
afterRefresh.call(this,
{
result: false,
$panel: $panel
});
}
}).always(function()
{
$panel.removeClass('loading');
});
initTableHeader();
}
/**
@@ -170,29 +198,32 @@ function hiddenBlock(index)
$(function()
{
// var $dashboard = $('#dashboard').dashboard(
// {
// height : 240,
// draggable : !useGuest,
// shadowType : false,
// afterOrdered : sortBlocks,
// afterPanelRemoved : deleteBlock,
// sensitive : true,
// panelRemovingTip : config.confirmRemoveBlock,
// resizable : !useGuest,
// onResize : resizeBlock,
// afterRefresh : function(e)
// {
// var $sortTable = e.$panel.find('.tablesorter');
// if($sortTable.length) $sortTable.sortTable();
// initTableHeader();
// }
// });
//
// // $dashboard.find('ul.dashboard-actions').addClass('hide').children('li').addClass('right').appendTo($('#modulemenu > .nav'));
// $dashboard.find('[data-toggle=tooltip]').tooltip({container: 'body'});
initTableHeader();
initTableHeader();
// Init dashboard
$('#dashboard').sortable(
{
selector: '.panel',
trigger: '.panel-heading',
finish: function(e)
{
var newOrders = [];
var isSideCol = e.element.parent().is('.col-side');
e.list.each(function(params)
{
newOrders.push($(this).data('id'));
});
sortBlocks(newOrders, function()
{
resizeBlock(e.element.data('id'), isSideCol ? 4 : 8);
});
e.element.toggleClass('block-sm', isSideCol);
}
}).on('click', '.refresh-panel', function()
{
refreshBlock($(this).closest('.panel'));
});
});
module/block/view/dashboard.html.php
+58 -64
View File
@@ -22,78 +22,72 @@ $useGuest = $this->app->user->account == 'guest';
<div class='col-md-8 col-main'>
<?php foreach($longBlocks as $index => $block):?>
<?php if(isset($config->block->closed) and strpos(",{$config->block->closed},", ",{$block->source}|{$block->block},") !== false) continue;?>
<div class='row'>
<div class='col-sm-12'>
<div class='panel block-<?php echo $block->block;?> <?php if(isset($block->params->color)) echo 'panel-' . $block->params->color;?>' id='block<?php echo $block->id?>' data-id='<?php echo $block->id?>' data-name='<?php echo $block->title?>'>
<?php $hasHeading = ($block->block != 'welcome');?>
<?php if($hasHeading):?>
<div class='panel-heading'>
<div class='panel-title'><?php echo $block->title;?></div>
<?php endif;?>
<nav class='panel-actions nav nav-default'>
<?php if(!empty($block->actionLink)) echo '<li>' . $block->actionLink . '</li>';?>
<?php if(!empty($block->moreLink)) echo '<li>' . html::a($block->moreLink, 'MORE', '', "title='{$lang->more}'") . '</li>'; ?>
<li class='dropdown'>
<a href='javascript:;' data-toggle='dropdown' class='panel-action'><i class='icon icon-ellipsis-v'></i></a>
<ul class='dropdown-menu pull-right'>
<?php if(!$useGuest):?>
<li><a data-toggle='modal' href="<?php echo $this->createLink("block", "admin", "id=$block->id&module=$module");?>" class='edit-block' data-title='<?php echo $block->title;?>' ><?php echo $lang->edit;?></a></li>
<?php if(!$block->source and $block->block == 'html'):?>
<li><a href="javascript:hiddenBlock(<?php echo $index;?>)" class="hidden-panel"><?php echo $lang->block->hidden;?></a></li>
<?php endif;?>
<li><a href='javascript:deleteBlock(<?php echo $index;?>);' class='remove-panel'><?php echo $lang->block->remove;?></a></li>
<?php endif;?>
<?php if($this->app->user->admin):?>
<li><?php echo html::a($this->createLink('block', 'close', "blockID={$block->id}"), $lang->block->closeForever, 'hiddenwin', "class='close-block' onclick=\"return confirm('{$lang->block->confirmClose}')\"")?>
<?php endif;?>
</ul>
</li>
</nav>
<?php if($hasHeading):?>
</div>
<?php endif;?>
<?php echo $this->fetch('block', 'printBlock', "id=$block->id&module=$module")?>
</div>
<div class='panel block-<?php echo $block->block;?> <?php if(isset($block->params->color)) echo 'panel-' . $block->params->color;?>' id='block<?php echo $block->id?>' data-id='<?php echo $block->id?>' data-name='<?php echo $block->title?>' data-order='<?php echo $block->order?>' data-url='<?php echo $block->blockLink?>'>
<?php $hasHeading = ($block->block != 'welcome');?>
<?php if($hasHeading):?>
<div class='panel-heading'>
<div class='panel-title'><?php echo $block->title;?></div>
<?php endif;?>
<nav class='panel-actions nav nav-default'>
<?php if(!empty($block->actionLink)) echo '<li>' . $block->actionLink . '</li>';?>
<?php if(!empty($block->moreLink)) echo '<li>' . html::a($block->moreLink, 'MORE', '', "title='{$lang->more}' class='small'") . '</li>'; ?>
<li class='dropdown'>
<a href='javascript:;' data-toggle='dropdown' class='panel-action'><i class='icon icon-ellipsis-v'></i></a>
<ul class='dropdown-menu pull-right'>
<li><a href='javascript:;' class='refresh-panel'><i class='icon-repeat'></i> <?php echo $lang->block->refresh ?></a></li>
<?php if(!$useGuest):?>
<li><a data-toggle='modal' href="<?php echo $this->createLink("block", "admin", "id=$block->id&module=$module");?>" class='edit-block' data-title='<?php echo $block->title;?>' ><?php echo $lang->edit;?></a></li>
<?php if(!$block->source and $block->block == 'html'):?>
<li><a href="javascript:hiddenBlock(<?php echo $index;?>)" class="hidden-panel"><?php echo $lang->block->hidden;?></a></li>
<?php endif;?>
<li><a href='javascript:deleteBlock(<?php echo $index;?>);' class='remove-panel'><?php echo $lang->block->remove;?></a></li>
<?php endif;?>
<?php if($this->app->user->admin):?>
<li><?php echo html::a($this->createLink('block', 'close', "blockID={$block->id}"), $lang->block->closeForever, 'hiddenwin', "class='close-block' onclick=\"return confirm('{$lang->block->confirmClose}')\"")?>
<?php endif;?>
</ul>
</li>
</nav>
<?php if($hasHeading):?>
</div>
<?php endif;?>
<?php echo $this->fetch('block', 'printBlock', "id=$block->id&module=$module")?>
</div>
<?php endforeach;?>
</div>
<div class='col-md-4 col-side'>
<?php foreach($shortBlocks as $index => $block):?>
<?php if(isset($config->block->closed) and strpos(",{$config->block->closed},", ",{$block->source}|{$block->block},") !== false) continue;?>
<div class='row'>
<div class='col-sm-12'>
<div class='panel block-<?php echo $block->block;?> <?php if(isset($block->params->color)) echo 'panel-' . $block->params->color;?>' id='block<?php echo $block->id?>' data-id='<?php echo $block->id?>' data-name='<?php echo $block->title?>'>
<?php $hasHeading = ($block->block != 'welcome');?>
<?php if($hasHeading):?>
<div class='panel-heading'>
<div class='panel-title'><?php echo $block->title;?></div>
<?php endif;?>
<nav class='panel-actions nav nav-default'>
<?php if(!empty($block->actionLink)) echo '<li>' . $block->actionLink . '</li>';?>
<?php if(!empty($block->moreLink)) echo '<li>' . html::a($block->moreLink, 'MORE', '', "title='{$lang->more}'") . '</li>';?>
<li class='dropdown'>
<a href='javascript:;' data-toggle='dropdown' class='panel-action'><i class='icon icon-ellipsis-v'></i></a>
<ul class='dropdown-menu pull-right'>
<?php if(!$useGuest):?>
<li><a data-toggle='modal' href="<?php echo $this->createLink("block", "admin", "id=$block->id&module=$module"); ?>" class='edit-block' data-title='<?php echo $block->title; ?>' ><?php echo $lang->edit; ?></a></li>
<?php if(!$block->source and $block->block == 'html'):?>
<li><a href="javascript:hiddenBlock(<?php echo $index;?>)" class="hidden-panel"><?php echo $lang->block->hidden; ?></a></li>
<?php endif;?>
<li><a href='javascript:deleteBlock(<?php echo $index?>);' class='remove-panel'><?php echo $lang->block->remove; ?></a></li>
<?php endif;?>
<?php if($this->app->user->admin):?>
<li><?php echo html::a($this->createLink('block', 'close', "blockID={$block->id}"), $lang->block->closeForever, 'hiddenwin', "class='close-block' onclick=\"return confirm('{$lang->block->confirmClose}')\"")?>
<?php endif;?>
</ul>
</li>
</nav>
<?php if($hasHeading):?>
</div>
<?php endif;?>
<?php echo $this->fetch('block', 'printBlock', "id=$block->id&module=$module")?>
</div>
<div class='panel block-sm block-<?php echo $block->block;?> <?php if(isset($block->params->color)) echo 'panel-' . $block->params->color;?>' id='block<?php echo $block->id?>' data-id='<?php echo $block->id?>' data-name='<?php echo $block->title?>' data-order='<?php echo $block->order?>' data-url='<?php echo $block->blockLink?>'>
<?php $hasHeading = ($block->block != 'welcome');?>
<?php if($hasHeading):?>
<div class='panel-heading'>
<div class='panel-title'><?php echo $block->title;?></div>
<?php endif;?>
<nav class='panel-actions nav nav-default'>
<?php if(!empty($block->actionLink)) echo '<li>' . $block->actionLink . '</li>';?>
<?php if(!empty($block->moreLink)) echo '<li>' . html::a($block->moreLink, 'MORE', '', "title='{$lang->more}' class='small'") . '</li>';?>
<li class='dropdown'>
<a href='javascript:;' data-toggle='dropdown' class='panel-action'><i class='icon icon-ellipsis-v'></i></a>
<ul class='dropdown-menu pull-right'>
<li><a href='javascript:;' class='refresh-panel'><i class='icon-repeat'></i> <?php echo $lang->block->refresh ?></a></li>
<?php if(!$useGuest):?>
<li><a data-toggle='modal' href="<?php echo $this->createLink("block", "admin", "id=$block->id&module=$module"); ?>" class='edit-block' data-title='<?php echo $block->title; ?>' ><?php echo $lang->edit; ?></a></li>
<?php if(!$block->source and $block->block == 'html'):?>
<li><a href="javascript:hiddenBlock(<?php echo $index;?>)" class="hidden-panel"><?php echo $lang->block->hidden; ?></a></li>
<?php endif;?>
<li><a href='javascript:deleteBlock(<?php echo $index?>);' class='remove-panel'><?php echo $lang->block->remove; ?></a></li>
<?php endif;?>
<?php if($this->app->user->admin):?>
<li><?php echo html::a($this->createLink('block', 'close', "blockID={$block->id}"), $lang->block->closeForever, 'hiddenwin', "class='close-block' onclick=\"return confirm('{$lang->block->confirmClose}')\"")?>
<?php endif;?>
</ul>
</li>
</nav>
<?php if($hasHeading):?>
</div>
<?php endif;?>
<?php echo $this->fetch('block', 'printBlock', "id=$block->id&module=$module")?>
</div>
<?php endforeach;?>
</div>
module/block/view/productblock.html.php
+2 -2
View File
@@ -19,7 +19,7 @@
<tr>
<th class='c-name'><?php echo $lang->product->name;?></th>
<?php if($longBlock):?>
<th class='c-name .c-project'><?php echo $lang->product->currentProject;?></th>
<th class='c-name c-project'><?php echo $lang->product->currentProject;?></th>
<?php endif;?>
<th class='c-num'><?php echo $lang->product->plans;?></th>
<th class='c-num'><?php echo $lang->product->releases;?></th>
@@ -36,7 +36,7 @@
<tr class='text-center' data-url='<?php echo empty($sso) ? $viewLink : $sso . $sign . 'referer=' . base64_encode($viewLink); ?>' <?php echo $appid?>>
<td class='c-name text-left' title='<?php echo $product->name?>'><?php echo $product->name?></td>
<?php if($longBlock):?>
<td class='c-name .c-project text-left'><?php echo zget($projects, $product->id, '');?></td>
<td class='c-name c-project text-left'><?php echo zget($projects, $product->id, '');?></td>
<?php endif;?>
<td class="c-num"><?php echo $product->plans?></td>
<td class="c-num"><?php echo $product->releases?></td>
module/block/view/storyblock.html.php
+1 -1
View File
@@ -13,7 +13,7 @@
<style>
.block-stories .c-id {width: 55px;}
.block-stories .c-pri {width: 45px;text-align: center;}
.block-stories .c-estimate {width: 55px;}
.block-stories .c-estimate {width: 65px;}
.block-stories .c-status {width: 80px;}
.block-stories .c-stage {width: 80px;}
.block-stories.block-sm .estimate,
www/js/zui/min.js
+1 -1
View File
File diff suppressed because one or more lines are too long