* refactor dashboard blocks UI.

This commit is contained in:
Catouse
2018-05-23 18:21:04 +08:00
parent e67173bced
commit 059b28ef26
15 changed files with 55 additions and 29 deletions
+1
View File
@@ -1,3 +1,4 @@
.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.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);}
+17 -5
View File
@@ -69,10 +69,10 @@ function resizeBlock(event)
*/
function initTableHeader()
{
$('#dashboard .panel-block').each(function()
$('#dashboard .table-fixed-head').each(function()
{
var $panel = $(this);
var $table = $panel.find('.table:first');
var $table = $(this);
var $panel = $table.closest('.panel');
if(!$table.length || !$table.children('thead').length || ($panel.find('#assigntomeBlock').length && $panel.find('#assigntomeBlock > div').length > 1)) return;
var isFixed = $panel.find('.panel-body').height() < $table.outerHeight();
@@ -87,7 +87,7 @@ function initTableHeader()
var tableWidth = $table.width();
if(!$header.length)
{
$header = $('<div class="table-header-fixed" style="position: absolute; left: 0; top: 0; right: 0;"><table class="table table-fixed"></table></div>').css('right', $panel.width() - tableWidth).css('min-width', tableWidth);
$header = $('<div class="table-header-fixed" style="position: absolute; left: 0; top: 0; right: 0; padding: 10px 10px 0; background: #fff;"><table class="table table-fixed no-margin"></table></div>').css('right', $panel.width() - tableWidth - 20).css('min-width', tableWidth);
var $oldTableHead = $table.find('thead');
$oldTableHead.find('th').each(function(idx)
{
@@ -123,6 +123,16 @@ function initTableHeader()
$fixedTh.eq(idx).width($(this).width());
});
}
var timeoutCall = null;
$table.parent().off('scroll.initTableHeader').on('scroll.initTableHeader', function()
{
clearTimeout(timeoutCall);
var $tableContainer = $(this);
timeoutCall = setTimeout(function() {
$panel.toggleClass('table-scrolled', $tableContainer.scrollTop() > 0);
}, 200);
});
});
}
@@ -182,5 +192,7 @@ $(function()
// // $dashboard.find('ul.dashboard-actions').addClass('hide').children('li').addClass('right').appendTo($('#modulemenu > .nav'));
// $dashboard.find('[data-toggle=tooltip]').tooltip({container: 'body'});
// initTableHeader();
initTableHeader();
});
+5 -3
View File
@@ -12,7 +12,7 @@
?>
<style>
.block-bugs .c-id {width: 55px;}
.block-bugs .c-level {width: 50px;text-align: center;}
.block-bugs .c-level {width: 60px;text-align: center;}
.block-bugs .c-pri {width: 35px;text-align: center;}
.block-bugs .c-deadline {width: 95px;}
.block-bugs .c-status {width: 80px;}
@@ -21,7 +21,7 @@
.block-bugs.block-sm .c-status {text-align: center;}
</style>
<div class='panel-body has-table'>
<table class='table table-borderless table-fixed-head table-hover block-bugs <?php if(!$longBlock) echo 'block-sm'?>'>
<table class='table table-borderless table-fixed-head table-hover tablesorter block-bugs <?php if(!$longBlock) echo 'block-sm'?>'>
<thead>
<tr>
<th class='c-id-xs'><?php echo $lang->idAB?></th>
@@ -44,7 +44,9 @@
<?php if($longBlock):?>
<td class='c-pri'><span class='label-pri label-pri-<?php echo $bug->pri?>' title='<?php echo zget($lang->bug->priList, $bug->pri);?>'><?php echo zget($lang->bug->priList, $bug->pri)?></span></td>
<?php endif;?>
<td class='c-severity'><span class='label-severity' title='<?php echo zget($lang->bug->severityList, $bug->severity);?>' data-severity='<?php echo zget($lang->bug->severityList, $bug->severity);?>'></span></td>
<td class='c-severity'>
<span class='label-severity' title='<?php echo zget($lang->bug->severityList, $bug->severity);?>' data-severity='<?php echo $bug->severity;?>'></span>
</td>
<td class='c-name' style='color: <?php echo $bug->color?>' title='<?php echo $bug->title?>'><?php echo $bug->title?></td>
<td class='c-status' title='<?php echo zget($lang->bug->statusList, $bug->status)?>'>
<span class="status-<?php echo $bug->status?>">
+1 -1
View File
@@ -11,7 +11,7 @@
*/
?>
<div class='panel-body has-table'>
<table class='table table-borderless table-hover table-fixed-head block-builds'>
<table class='table table-borderless table-hover table-fixed-head tablesorter block-builds'>
<thead>
<tr>
<th class='w-id text-center'><?php echo $lang->idAB?></th>
+1 -1
View File
@@ -21,7 +21,7 @@
.case-status-investigate {color: #a6aab8;}
.case-status-investigate > .label-dot {background-color: #006af1;}
</style>
<table class='table table-borderless table-hover table-fixed-head block-cases <?php if(!$longBlock) echo 'block-sm';?>'>
<table class='table table-borderless table-hover table-fixed-head tablesorter block-cases <?php if(!$longBlock) echo 'block-sm';?>'>
<thead>
<tr class='text-center'>
<?php if($longBlock):?>
+1 -1
View File
@@ -11,7 +11,7 @@
*/
?>
<div class='panel-body has-table'>
<table class='table table-borderless table-hover table-fixed-head block-plan'>
<table class='table table-borderless table-hover table-fixed-head tablesorter block-plan'>
<thead>
<tr>
<?php if($longBlock):?>
@@ -11,13 +11,22 @@
*/
?>
<div id='assigntomeBlock'>
<?php foreach($hasViewPriv as $type => $bool):?>
<div id="<?php echo $type?>">
<?php include "{$type}block.html.php";?>
<ul class="nav nav-secondary">
<?php foreach($hasViewPriv as $type => $bool):?>
<li<?php if($type === 'todo') echo ' class="active"';?>><a data-tab href='#assigntomeTab-<?php echo $type;?>'><?php echo $lang->block->availableBlocks->$type;?></a></li>
<?php endforeach;?>
</ul>
<div class="tab-content">
<?php foreach($hasViewPriv as $type => $bool):?>
<div class="tab-pane<?php if($type === 'todo') echo ' active';?>" id="assigntomeTab-<?php echo $type?>">
<?php include "{$type}block.html.php";?>
</div>
<?php endforeach;?>
</div>
<?php endforeach;?>
</div>
<style>
#assigntomeBlock #todo,
#assigntomeBlock #task {border-bottom: 1px solid #eee;}
#assigntomeBlock {position: relative;}
#assigntomeBlock .block-todoes {padding-top: 10px}
#assigntomeBlock > .nav {position: absolute; top: -41px; left: 120px;}
#assigntomeBlock .block-todoes .todoes-form{top: -55px;}
</style>
+1 -1
View File
@@ -18,7 +18,7 @@
.block-products.block-sm .c-project {display: none;}
</style>
<div class="panel-body has-table block-products">
<table class='table table-borderless table-hover table-fixed-head table-fixed'>
<table class='table table-borderless table-hover table-fixed-head tablesorter table-fixed'>
<thead>
<tr>
<th class='c-name'><?php echo $lang->product->name;?></th>
+1 -1
View File
@@ -11,7 +11,7 @@
*/
?>
<div class="panel-body has-table">
<table class='table table-borderless table-hover table-fixed-head block-projects'>
<table class='table table-borderless table-hover table-fixed-head tablesorter block-projects tablesorter'>
<thead>
<tr class='text-center'>
<th class='c-name text-left'><?php echo $lang->project->name;?></th>
+1 -1
View File
@@ -11,7 +11,7 @@
*/
?>
<div class='panel-body has-table'>
<table class='table table-borderless table-hover table-fixed block-release'>
<table class='table table-borderless table-hover table-fixed tablesorter block-release'>
<thead>
<tr>
<?php if($longBlock):?>
+1 -1
View File
@@ -22,7 +22,7 @@
.block-stories.block-sm .c-status {text-align: center;}
</style>
<div class='panel-body has-table'>
<table class='table table-borderless table-hover table-fixed-head block-stories <?php if(!$longBlock) echo 'block-sm'?>'>
<table class='table table-borderless table-hover table-fixed-head tablesorter block-stories <?php if(!$longBlock) echo 'block-sm'?>'>
<thead>
<tr>
<?php if($longBlock):?>
+2 -2
View File
@@ -13,7 +13,7 @@
<style>
.block-tasks .c-id {width: 55px;}
.block-tasks .c-pri {width: 45px;text-align: center;}
.block-tasks .c-estimate {width: 55px;}
.block-tasks .c-estimate {width: 60px;}
.block-tasks .c-deadline {width: 95px;}
.block-tasks .c-status {width: 80px;}
.block-tasks.block-sm .estimate,
@@ -22,7 +22,7 @@
.block-tasks.block-sm .c-status {text-align: center;}
</style>
<div class='panel-body has-table'>
<table class='table table-borderless table-hover table-fixed-head block-tasks <?php if(!$longBlock) echo 'block-sm';?>'>
<table class='table table-borderless table-hover table-fixed-head tablesorter block-tasks <?php if(!$longBlock) echo 'block-sm';?>'>
<thead>
<tr>
<th class='c-id-xs'><?php echo $lang->idAB;?></th>
+1 -1
View File
@@ -11,7 +11,7 @@
*/
?>
<div class='panel-body has-table'>
<table class='table table-borderless table-hover table-fixed-head block-testtask'>
<table class='table table-borderless table-hover table-fixed-head tablesorter block-testtask'>
<thead>
<tr class='text-center'>
<?php if($longBlock):?>
+5 -3
View File
@@ -4,9 +4,11 @@ js::import($jsRoot . 'jquery/tablesorter/min.js');
js::import($jsRoot . 'jquery/tablesorter/metadata.js');
?>
<style>
table.tablesorter tr.tablesorter-headerRow .header.tablesorter-headerUnSorted .tablesorter-header-inner:after{font-family: NewZenIcon; font-weight: normal; content: "\e6bd"; font-size: 14px;}
table.tablesorter tr.tablesorter-headerRow .header.headerSortUp .tablesorter-header-inner:after{font-family: NewZenIcon; font-weight: normal; content: "\e6b9"; font-size: 14px; color: #03C;}
table.tablesorter tr.tablesorter-headerRow .header.headerSortDown .tablesorter-header-inner:after{font-family: NewZenIcon; font-weight: normal; content: "\e6b8"; font-size: 14px; color: #03C;}
.tablesorter-header-inner {cursor: pointer;}
.tablesorter-header-inner:hover {color: #006af1;}
table.tablesorter tr.tablesorter-headerRow .header.tablesorter-headerUnSorted .tablesorter-header-inner:after {font-family: ZentaoIcon; font-weight: normal; content: "\f0dc"; font-size: 14px;}
table.tablesorter tr.tablesorter-headerRow .header.headerSortUp .tablesorter-header-inner:after{font-family: ZentaoIcon; font-weight: normal; content: "\f0d8"; font-size: 14px; color: #03C;}
table.tablesorter tr.tablesorter-headerRow .header.headerSortDown .tablesorter-header-inner:after{font-family: ZentaoIcon; font-weight: normal; content: "\f0d7"; font-size: 14px; color: #03C;}
table.tablesorter tr.tablesorter-headerRow .header.sorter-false .tablesorter-header-inner:after{content:"";}
</style>
<script>
+2 -2
View File
File diff suppressed because one or more lines are too long