* enhanced the user experience of tree box sider.

This commit is contained in:
Catouse
2014-04-08 16:27:51 +08:00
parent ae41be9f1c
commit 54245c08dd
12 changed files with 92 additions and 58 deletions
+1 -1
View File
@@ -1,4 +1,4 @@
function setModal4List(colorboxClass, replaceID)
{
if(onlybody != 'yes') $('.iframe').modalTrigger({width:900, height:500, type:'iframe', afterHide:function(){parent.location.href=parent.location.href;}})
if(onlybody != 'yes') $('.iframe').modalTrigger({width:900, type:'iframe', afterHide:function(){parent.location.href=parent.location.href;}})
}
+11 -5
View File
@@ -73,12 +73,18 @@ if($customed)
<div class='side' id='treebox'>
<button class='side-handle' data-id='storyTree'><i class='icon-caret-left'></i></button>
<header class='nobr'><?php echo html::icon($lang->icons['product']);?> <strong><?php echo $productName;?></strong></header>
<div class='side-body'>
<?php echo $moduleTree;?>
<div class='text-right'>
<?php common::printLink('tree', 'browse', "productID=$productID&view=bug", $lang->tree->manage);?>
<?php common::printLink('tree', 'fix', "root=$productID&type=bug", $lang->tree->fix, 'hiddenwin');?>
<div class='panel panel-sm'>
<div class='panel-heading nobr'>
<?php echo html::icon($lang->icons['product']);?> <strong><?php echo $productName;?></strong>
</div>
<div class='panel-body'>
<?php echo $moduleTree;?>
<div class='text-right'>
<?php common::printLink('tree', 'browse', "productID=$productID&view=bug", $lang->tree->manage);?>
<?php common::printLink('tree', 'fix', "root=$productID&type=bug", $lang->tree->fix, 'hiddenwin');?>
</div>
</div>
</div>
</div>
</div>
+7 -3
View File
@@ -22,10 +22,14 @@ js::set('confirmDelete', $lang->user->confirmDelete);
</div>
<div class='side'>
<button class='side-handle' data-id='companyTree'><i class='icon-caret-left'></i></button>
<header class='nobr'><?php echo html::icon($lang->icons['company']);?> <strong><?php echo $lang->dept->common;?></strong></header>
<div class='side-body'>
<?php echo $deptTree;?>
<div class='text-right'><?php common::printLink('dept', 'browse', '', $lang->dept->manage);?></div>
<div class='panel panel-sm'>
<div class='panel-heading nobr'><?php echo html::icon($lang->icons['company']);?> <strong><?php echo $lang->dept->common;?></strong></div>
<div class='panel-body'>
<?php echo $deptTree;?>
<div class='text-right'><?php common::printLink('dept', 'browse', '', $lang->dept->manage);?></div>
</div>
</div>
</div>
</div>
<div class='main'>
+9 -5
View File
@@ -30,12 +30,16 @@ var browseType = '<?php echo $browseType;?>';
</div>
<div class='side' id='treebox'>
<button class='side-handle' data-id='treebox'><i class='icon-caret-left'></i></button>
<header class='nobr'><?php echo html::icon('folder-close');?> <strong><?php echo $libName;?></strong></header>
<div class='side-body'>
<?php echo $moduleTree;?>
<div class='text-right'>
<?php common::printLink('tree', 'browse', "rootID=$libID&view=doc", $lang->doc->manageType);?>
<?php if(is_numeric($libID)) common::printLink('tree', 'fix', "root=$libID&type=customdoc", $lang->tree->fix, 'hiddenwin');?>
<div class='panel panel-sm'>
<div class='panel-heading nobr'><?php echo html::icon('folder-close');?> <strong><?php echo $libName;?></strong></div>
<div class='panel-body'>
<?php echo $moduleTree;?>
<div class='text-right'>
<?php common::printLink('tree', 'browse', "rootID=$libID&view=doc", $lang->doc->manageType);?>
<?php if(is_numeric($libID)) common::printLink('tree', 'fix', "root=$libID&type=customdoc", $lang->tree->fix, 'hiddenwin');?>
</div>
</div>
</div>
</div>
</div>
+9 -5
View File
@@ -54,12 +54,16 @@
</div>
<div class='side' id='treebox'>
<button class='side-handle' data-id='productTree'><i class='icon-caret-left'></i></button>
<header class='nobr'><?php echo html::icon($lang->icons['product']);?> <strong><?php echo $productName;?></strong></header>
<div class='side-body'>
<?php echo $moduleTree;?>
<div class='text-right'>
<?php common::printLink('tree', 'browse', "rootID=$productID&view=story", $lang->tree->manage);?>
<?php common::printLink('tree', 'fix', "root=$productID&type=story", $lang->tree->fix, 'hiddenwin');?>
<div class='panel panel-sm'>
<div class='panel-heading nobr'><?php echo html::icon($lang->icons['product']);?> <strong><?php echo $productName;?></strong></div>
<div class='panel-body'>
<?php echo $moduleTree;?>
<div class='text-right'>
<?php common::printLink('tree', 'browse', "rootID=$productID&view=story", $lang->tree->manage);?>
<?php common::printLink('tree', 'fix', "root=$productID&type=story", $lang->tree->fix, 'hiddenwin');?>
</div>
</div>
</div>
</div>
</div>
+13 -7
View File
@@ -22,14 +22,20 @@ var browseType = '<?php echo $browseType;?>';
<div class='side' id='taskTree'>
<button class='side-handle' data-id='storyTree'><i class='icon-caret-left'></i></button>
<header class='nobr'><?php echo html::icon($lang->icons['project']);?> <strong><?php echo $project->name;?></strong></header>
<div class='side-body'>
<?php echo $moduleTree;?>
<div class='text-right'>
<?php common::printLink('project', 'edit', "projectID=$projectID", $lang->edit);?>
<?php common::printLink('project', 'delete', "projectID=$projectID&confirm=no", $lang->delete, 'hiddenwin');?>
<?php common::printLink('tree', 'browsetask', "rootID=$projectID&productID=0", $lang->tree->manage);?>
<?php common::printLink('tree', 'fix', "root=$projectID&type=task", $lang->tree->fix, 'hiddenwin');?>
<div class='panel panel-sm'>
<div class='panel-heading nobr'>
<?php echo html::icon($lang->icons['project']);?> <strong><?php echo $project->name;?></strong>
</div>
<div class='panel-body'>
<?php echo $moduleTree;?>
<div class='text-right'>
<?php common::printLink('project', 'edit', "projectID=$projectID", $lang->edit);?>
<?php common::printLink('project', 'delete', "projectID=$projectID&confirm=no", $lang->delete, 'hiddenwin');?>
<?php common::printLink('tree', 'browsetask', "rootID=$projectID&productID=0", $lang->tree->manage);?>
<?php common::printLink('tree', 'fix', "root=$projectID&type=task", $lang->tree->fix, 'hiddenwin');?>
</div>
</div>
</div>
</div>
</div>
+14 -12
View File
@@ -1,13 +1,15 @@
<header><strong><?php echo $lang->report->list;?></strong></header>
<div class='side-body pd-0'>
<ul id='report-list' class='list-group'>
<?php
ksort($lang->reportList->$submenu->lists);
foreach($lang->reportList->$submenu->lists as $list)
{
list($label, $module, $method) = explode('|', $list);
echo html::a($this->createLink($module, $method), "<i class='icon-file-powerpoint'></i> " . $label, '', "class='list-group-item'");
}
?>
</ul>
<div class='side-body'>
<div class='panel panel-sm'>
<div class='panel-heading nobr'><strong><?php echo $lang->report->list;?></strong></div>
<ul id='report-list' class='list-group'>
<?php
ksort($lang->reportList->$submenu->lists);
foreach($lang->reportList->$submenu->lists as $list)
{
list($label, $module, $method) = explode('|', $list);
echo html::a($this->createLink($module, $method), "<i class='icon-file-powerpoint'></i> " . $label, '', "class='list-group-item'");
}
?>
</ul>
</div>
</div>
+9 -5
View File
@@ -57,12 +57,16 @@ js::set('confirmDelete', $lang->testcase->confirmDelete);
</div>
<div class='side' id='treebox'>
<button class='side-handle' data-id='storyTree'><i class='icon-caret-left'></i></button>
<header class='nobr'><?php echo html::icon($lang->icons['product']);?> <strong><?php echo $productName;?></strong></header>
<div class='side-body'>
<?php echo $moduleTree;?>
<div class='text-right'>
<?php common::printLink('tree', 'browse', "productID=$productID&view=case", $lang->tree->manage);?>
<?php common::printLink('tree', 'fix', "root=$productID&type=case", $lang->tree->fix, 'hiddenwin');?>
<div class='panel panel-sm'>
<div class='panel-heading nobr'><?php echo html::icon($lang->icons['product']);?> <strong><?php echo $productName;?></strong></div>
<div class='panel-body'>
<?php echo $moduleTree;?>
<div class='text-right'>
<?php common::printLink('tree', 'browse', "productID=$productID&view=case", $lang->tree->manage);?>
<?php common::printLink('tree', 'fix', "root=$productID&type=case", $lang->tree->fix, 'hiddenwin');?>
</div>
</div>
</div>
</div>
</div>
-4
View File
@@ -1,7 +1,5 @@
function browseByModule(active)
{
$('.side').removeClass('hidden');
$('.divider').removeClass('hidden');
$('#bymoduleTab').addClass('active');
$('#' + active + 'Tab').removeClass('active');
$('#querybox').addClass('hidden');
@@ -11,8 +9,6 @@ function browseByModule(active)
function browseBySearch(active)
{
$('#querybox').removeClass('hidden');
$('.side').addClass('hidden');
$('.divider').addClass('hidden');
$('#' + active + 'Tab').removeClass('active');
$('#bysearchTab').addClass('active');
$('#bymoduleTab').removeClass('active');
+6 -2
View File
@@ -43,9 +43,13 @@ var moduleID = '<?php echo $moduleID;?>';
</div>
<div class='side' id='casesbox'>
<button class='side-handle' data-id='storyTree'><i class='icon-caret-left'></i></button>
<header class='nobr'><?php echo html::icon($lang->icons['product']);?> <strong><?php echo $productName;?></strong></header>
<div class='side-body'>
<?php echo $moduleTree;?>
<div class='panel panel-sm'>
<div class='panel-heading nobr'><?php echo html::icon($lang->icons['product']);?> <strong><?php echo $productName;?></strong></div>
<div class='panel-body'>
<?php echo $moduleTree;?>
</div>
</div>
</div>
</div>
<div class='main'>
+2
View File
@@ -322,6 +322,8 @@ function toggleTreeBox()
showTreeBox(treeType);
}
);
setTimeout(function(){$('.outer.with-side').addClass('with-transition')}, 1000);
}
/**
+11 -9
View File
@@ -297,7 +297,7 @@ div.form-control[contenteditable='true'] {height: auto; text-align: left; outlin
.panel .table-bordered tr > td:last-child,.panel .table-bordered tr > th:last-child {border-right: 0;}
/* small panel */
.panel-sm .panel-heading {padding: 6px 10px}
.panel-sm .panel-heading {padding: 7px 10px}
/* list group */
.list-group-item {padding: 8px 15px}
@@ -506,18 +506,20 @@ body {font-size: 12px; color:#141414;padding-bottom: 40px;}
/* side */
.outer.with-side #featurebar, .outer.with-side #titlebar {margin-bottom: 20px;}
.outer.with-side .main, .outer.with-side .side + form, .outer.with-side .main, .outer.with-side .side + table {margin-left: 220px; margin-right: 20px; transition: all 0.3s;}
.outer.with-side .main, .outer.with-side .side + form, .outer.with-side .main, .outer.with-side .side + table {margin-left: 220px; margin-right: 20px;}
.outer.with-side.with-transition .main, .outer.with-side.with-transition .side + form, .outer.with-side.with-transition .main, .outer.with-side.with-transition .side + table {transition: all 0.3s;}
.outer.with-side .main, .outer.with-side > form > .table, .outer.with-side > .table{border: 1px solid #ddd}
.outer.with-side .table tr > th:first-child, .outer.with-side .table tr > td:first-child {padding-left: 8px}
.outer.with-side .table tr > th:last-child, .outer.with-side .table tr > td:last-child {padding-right: 8px}
.outer .side {width: 180px; position: absolute; left: 20px; background: #fafafa; border: 1px solid #ddd; transition: all 0.3s;}
.outer .side > header {padding: 5px 10px; line-height: 20px; border-bottom: 1px solid #ddd; background: #f1f1f1}
.outer .side-body {padding: 10px;}
.outer .side .side-handle {position: absolute; right: 5px; top: 4px; width: 22px; line-height: 18px; border: 1px solid #ddd; background: #e5e5e5; border-radius: 2px; color: #666; transition: all 0.3s;}
.outer .side .side-handle:hover {background: #fff; color: #333}
.outer .side {width: 180px; position: absolute; left: 20px; background: #fafafa;}
.outer .side-body {overflow: hidden;}
.outer .side-body .panel {min-width: 180px}
.outer .side-body .panel-body {padding: 10px;}
.outer .side-handle {position: absolute; right: 5px; top: 4px; width: 22px; line-height: 18px; border: 1px solid #ddd; background: #FFF; border-radius: 2px; color: #666;}
.outer .side-handle:hover {background: #fff; color: #333}
.outer.with-transition .side, .outer .side-handle.with-transition { transition: all 0.3s;}
.outer.hide-side .side{width: 0; border: none;}
.outer.hide-side .side > header, .outer.hide-side .side-body {display: none;}
.outer.hide-side .side{width: 0; border: none}
.outer.hide-side .side .side-handle {right: -1px; top: 0; border-radius: 0 4px 4px 0}
.outer.with-side.hide-side .main, .outer.with-side.hide-side .side + form, .outer.with-side.hide-side .main, .outer.with-side .side + table {margin-left: 30px}