* improve UI of views with side handler.

This commit is contained in:
Catouse
2016-11-25 11:34:45 +08:00
parent a3c2640ef7
commit c6a495b083
10 changed files with 128 additions and 117 deletions
+1
View File
@@ -107,6 +107,7 @@ js::set('bugBrowseType', ($browseType == 'bymodule' and $this->session->bugBrows
</div>
</div>
<div class='main'>
<script>setTreeBox();</script>
<form method='post' id='bugForm'>
<?php
$datatableId = $this->moduleName . ucfirst($this->methodName);
+74 -73
View File
@@ -32,80 +32,81 @@ js::set('confirmDelete', $lang->user->confirmDelete);
</div>
</div>
<div class='main'>
<form action='<?php echo $this->createLink('user', 'batchEdit', "deptID=$deptID")?>' method='post' id='userListForm'>
<table class='table table-condensed table-hover table-striped tablesorter table-fixed table-selectable' id='userList'>
<thead>
<tr class='colhead'>
<?php $vars = "param=$param&type=$type&orderBy=%s&recTotal={$pager->recTotal}&recPerPage={$pager->recPerPage}";?>
<th class='w-id'><?php common::printorderlink('id', $orderBy, $vars, $lang->idAB);?></th>
<th><?php common::printorderlink('realname', $orderBy, $vars, $lang->user->realname);?></th>
<th><?php common::printOrderLink('account', $orderBy, $vars, $lang->user->account);?></th>
<th><?php common::printOrderLink('role', $orderBy, $vars, $lang->user->role);?></th>
<th><?php common::printOrderLink('email', $orderBy, $vars, $lang->user->email);?></th>
<th><?php common::printOrderLink('gender', $orderBy, $vars, $lang->user->gender);?></th>
<th><?php common::printOrderLink('phone', $orderBy, $vars, $lang->user->phone);?></th>
<th><?php common::printOrderLink('qq', $orderBy, $vars, $lang->user->qq);?></th>
<th><?php common::printOrderLink('join', $orderBy, $vars, $lang->user->join);?></th>
<th><?php common::printOrderLink('last', $orderBy, $vars, $lang->user->last);?></th>
<th><?php common::printOrderLink('visits', $orderBy, $vars, $lang->user->visits);?></th>
<th class='w-90px'><?php echo $lang->actions;?></th>
</tr>
</thead>
<tbody>
<?php
$canBatchEdit = common::hasPriv('user', 'batchEdit');
?>
<?php foreach($users as $user):?>
<tr class='text-center'>
<td class='cell-id'>
<?php
if($canBatchEdit) echo "<input type='checkbox' name='users[]' value='$user->account'> ";
printf('%03d', $user->id);
?>
</td>
<td><?php if(!common::printLink('user', 'view', "account=$user->account", $user->realname)) echo $user->realname;?></td>
<td><?php echo $user->account;?></td>
<td><?php echo $lang->user->roleList[$user->role];?></td>
<td><?php echo html::mailto($user->email);?></td>
<td><?php if(isset($lang->user->genderList[$user->gender])) echo $lang->user->genderList[$user->gender];?></td>
<td><?php echo $user->phone;?></td>
<td><?php if($user->qq) echo html::a("tencent://message/?uin=$user->qq", $user->qq);?></td>
<td><?php echo $user->join;?></td>
<td><?php if($user->last) echo date('Y-m-d', $user->last);?></td>
<td><?php echo $user->visits;?></td>
<td class='text-left'>
<?php
common::printIcon('user', 'edit', "userID=$user->id&from=company", '', 'list');
if(strpos($this->app->company->admins, ",{$user->account},") === false and common::hasPriv('user', 'delete'))
{
echo html::a($this->createLink('user', 'delete', "userID=$user->id"), '<i class="icon-remove"></i>', '', "title='{$lang->user->delete}' class='btn-icon iframe'");
}
if((strtotime(date('Y-m-d H:i:s')) - strtotime($user->locked)) < $this->config->user->lockMinutes * 60)
{
common::printIcon('user', 'unlock', "userID=$user->account", '', 'list', '', "hiddenwin");
}
if($user->ranzhi) common::printIcon('user', 'unbind', "userID=$user->account", '', 'list', 'unlink', "hiddenwin");
?>
</td>
</tr>
<?php endforeach;?>
</tbody>
<tfoot>
<tr>
<td colspan='12'>
<div class='table-actions clearfix'>
<?php
if($canBatchEdit) echo html::selectButton();
if($canBatchEdit) echo html::submitButton($lang->edit, 'onclick=batchEdit()', 'btn btn-default');
<script>setTreeBox();</script>
<form action='<?php echo $this->createLink('user', 'batchEdit', "deptID=$deptID")?>' method='post' id='userListForm'>
<table class='table table-condensed table-hover table-striped tablesorter table-fixed table-selectable' id='userList'>
<thead>
<tr class='colhead'>
<?php $vars = "param=$param&type=$type&orderBy=%s&recTotal={$pager->recTotal}&recPerPage={$pager->recPerPage}";?>
<th class='w-id'><?php common::printorderlink('id', $orderBy, $vars, $lang->idAB);?></th>
<th><?php common::printorderlink('realname', $orderBy, $vars, $lang->user->realname);?></th>
<th><?php common::printOrderLink('account', $orderBy, $vars, $lang->user->account);?></th>
<th><?php common::printOrderLink('role', $orderBy, $vars, $lang->user->role);?></th>
<th><?php common::printOrderLink('email', $orderBy, $vars, $lang->user->email);?></th>
<th><?php common::printOrderLink('gender', $orderBy, $vars, $lang->user->gender);?></th>
<th><?php common::printOrderLink('phone', $orderBy, $vars, $lang->user->phone);?></th>
<th><?php common::printOrderLink('qq', $orderBy, $vars, $lang->user->qq);?></th>
<th><?php common::printOrderLink('join', $orderBy, $vars, $lang->user->join);?></th>
<th><?php common::printOrderLink('last', $orderBy, $vars, $lang->user->last);?></th>
<th><?php common::printOrderLink('visits', $orderBy, $vars, $lang->user->visits);?></th>
<th class='w-90px'><?php echo $lang->actions;?></th>
</tr>
</thead>
<tbody>
<?php
$canBatchEdit = common::hasPriv('user', 'batchEdit');
?>
</div>
<?php echo $pager->show();?>
</td>
</tr>
</tfoot>
</table>
</form>
<?php foreach($users as $user):?>
<tr class='text-center'>
<td class='cell-id'>
<?php
if($canBatchEdit) echo "<input type='checkbox' name='users[]' value='$user->account'> ";
printf('%03d', $user->id);
?>
</td>
<td><?php if(!common::printLink('user', 'view', "account=$user->account", $user->realname)) echo $user->realname;?></td>
<td><?php echo $user->account;?></td>
<td><?php echo $lang->user->roleList[$user->role];?></td>
<td><?php echo html::mailto($user->email);?></td>
<td><?php if(isset($lang->user->genderList[$user->gender])) echo $lang->user->genderList[$user->gender];?></td>
<td><?php echo $user->phone;?></td>
<td><?php if($user->qq) echo html::a("tencent://message/?uin=$user->qq", $user->qq);?></td>
<td><?php echo $user->join;?></td>
<td><?php if($user->last) echo date('Y-m-d', $user->last);?></td>
<td><?php echo $user->visits;?></td>
<td class='text-left'>
<?php
common::printIcon('user', 'edit', "userID=$user->id&from=company", '', 'list');
if(strpos($this->app->company->admins, ",{$user->account},") === false and common::hasPriv('user', 'delete'))
{
echo html::a($this->createLink('user', 'delete', "userID=$user->id"), '<i class="icon-remove"></i>', '', "title='{$lang->user->delete}' class='btn-icon iframe'");
}
if((strtotime(date('Y-m-d H:i:s')) - strtotime($user->locked)) < $this->config->user->lockMinutes * 60)
{
common::printIcon('user', 'unlock', "userID=$user->account", '', 'list', '', "hiddenwin");
}
if($user->ranzhi) common::printIcon('user', 'unbind', "userID=$user->account", '', 'list', 'unlink', "hiddenwin");
?>
</td>
</tr>
<?php endforeach;?>
</tbody>
<tfoot>
<tr>
<td colspan='12'>
<div class='table-actions clearfix'>
<?php
if($canBatchEdit) echo html::selectButton();
if($canBatchEdit) echo html::submitButton($lang->edit, 'onclick=batchEdit()', 'btn btn-default');
?>
</div>
<?php echo $pager->show();?>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
<script lanugage='javascript'>$('#dept<?php echo $deptID;?>').addClass('active');</script>
<?php include '../../common/view/footer.html.php';?>
+1
View File
@@ -66,6 +66,7 @@ var browseType = '<?php echo $browseType;?>';
</div>
</div>
<div class='main'>
<script>setTreeBox();</script>
<table class='table table-condensed table-hover table-striped tablesorter table-fixed' id='docList'>
<thead>
<tr>
+1
View File
@@ -99,6 +99,7 @@
</div>
</div>
<div class='main'>
<script>setTreeBox();</script>
<form method='post' id='productStoryForm'>
<?php
$datatableId = $this->moduleName . ucfirst($this->methodName);
+1
View File
@@ -50,6 +50,7 @@
</div>
</div>
<div class='main'>
<script>setTreeBox();</script>
<form method='post' id='projectStoryForm'>
<table class='table tablesorter table-condensed table-fixed table-selectable' id='storyList'>
<thead>
+1
View File
@@ -38,6 +38,7 @@ js::set('browseType', $browseType);
</div>
</div>
<div class='main'>
<script>setTreeBox();</script>
<form method='post' id='projectTaskForm'>
<?php
$datatableId = $this->moduleName . ucfirst($this->methodName);
+1
View File
@@ -36,6 +36,7 @@ js::set('batchDelete', $lang->testcase->confirmBatchDelete);
</div>
</div>
<div class='main'>
<script>setTreeBox();</script>
<form id='batchForm' method='post'>
<?php
$datatableId = $this->moduleName . ucfirst($this->methodName);
+1
View File
@@ -31,6 +31,7 @@ var moduleID = '<?php echo $moduleID;?>';
</div>
</div>
<div class='main'>
<script>setTreeBox();</script>
<form method='post' name='casesform' id='casesForm'>
<?php
$vars = "taskID=$task->id&browseType=$browseType&param=$param&orderBy=%s&recToal={$pager->recTotal}&recPerPage={$pager->recPerPage}";
+43 -43
View File
@@ -385,35 +385,6 @@ function showTreeBox(treeType)
$('.side-handle .icon-caret-right').removeClass('icon-caret-right').addClass('icon-caret-left');
}
/**
* Toggle tree menu.
* @access public
* @return void
*/
function toggleTreeBox()
{
var treeType = $('.side-handle').data('id');
if(typeof treeType == 'undefined' || treeType == null) return;
if($.cookie(treeType) == 'hide') hideTreeBox(treeType);
$('.side-handle').toggle
(
function()
{
if($.cookie(treeType) == 'hide') return showTreeBox(treeType);
hideTreeBox(treeType);
},
function()
{
if($.cookie(treeType) == 'show') return hideTreeBox(treeType);
showTreeBox(treeType);
}
);
setTimeout(function(){$('.outer.with-side').addClass('with-transition')}, 1000);
}
/**
* set tree menu.
@@ -422,8 +393,32 @@ function toggleTreeBox()
*/
function setTreeBox()
{
var $handle = $('.side-handle');
if($handle.data('setted')) return;
var treeType = $handle.data('id');
if(treeType)
{
if($.cookie(treeType) == 'hide') hideTreeBox(treeType);
$handle.toggle
(
function()
{
if($.cookie(treeType) == 'hide') return showTreeBox(treeType);
hideTreeBox(treeType);
},
function()
{
if($.cookie(treeType) == 'show') return hideTreeBox(treeType);
showTreeBox(treeType);
}
).data('setted', true);
}
if($('.outer > .side').length) $('.outer').addClass('with-side');
toggleTreeBox();
setTimeout(function(){$('.outer.with-side').addClass('with-transition')}, 1000);
adjustOuterSize();
}
/**
@@ -478,6 +473,21 @@ function saveWindowSize()
$.cookie('windowHeight', height)
}
/**
* Adjust Outer box's width and height.
*
* @access public
* @return void
*/
function adjustOuterSize()
{
var side = $('#wrap .outer > .side');
var sideH = side.length ? (side.outerHeight() + $('#featurebar').outerHeight() + 20) : 0;
var height = Math.max(sideH, $(window).height() - $('#header').outerHeight() - ($('#footer').outerHeight() || 0) - 20);
if(navigator.userAgent.indexOf("MSIE 8.0") >= 0) height -= 40;
$('#wrap .outer').css('min-height', height);
}
/**
* Set Outer box's width and height.
*
@@ -486,20 +496,10 @@ function saveWindowSize()
*/
function setOuterBox()
{
// if($('.sub-featurebar').length) $('#featurebar').addClass('with-sub');
var side = $('#wrap .outer > .side');
var resetOuterHeight = function()
{
var sideH = side.length ? (side.outerHeight() + $('#featurebar').outerHeight() + 20) : 0;
var height = Math.max(sideH, $(window).height() - $('#header').outerHeight() - ($('#footer').outerHeight() || 0) - 20);
if(navigator.userAgent.indexOf("MSIE 8.0") >= 0) height -= 40;
$('#wrap .outer').css('min-height', height);
}
side.resize(resetOuterHeight);
$(window).resize(resetOuterHeight);
resetOuterHeight();
side.resize(adjustOuterSize);
$(window).resize(adjustOuterSize);
adjustOuterSize();
}
/**
+4 -1
View File
@@ -353,7 +353,7 @@ div.form-control[contenteditable='true'] {height: auto; text-align: left; outlin
.panel .table-bordered tfoot > tr:last-child > td {border-bottom: 0}
/* small panel */
.panel-sm .panel-heading {padding: 7px 10px}
.panel-sm .panel-heading {padding: 6px 10px}
/* list group */
.list-group-item {padding: 8px 15px}
@@ -628,6 +628,9 @@ body {color:#141414; padding-bottom: 40px;}
.outer .side-handle:hover {background: #c5c5c5; color: #04f}
.outer.with-transition .side, .outer .side-handle.with-transition {transition: all 0.3s;}
.outer .side, .outer .side + .main {visibility: hidden;}
.outer.with-side .side, .outer.with-side .side + .main {visibility: visible;}
.outer.hide-side .side{width: 0; border: none;}
.outer.hide-side .side .side-handle {right: -15px;}
.outer.hide-side .side .side-body {display:none;}