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

Merge branch 'sprint/sunhao/optimize_dropmenu' into 'master'

Browse Source 
* optimize UI for dropmenu.

See merge request easycorp/zentaopms!2519
This commit is contained in:
朱金勇
2022-03-24 09:20:45 +00:00
parent eef0da7fd0 f6b6fdd023
commit b2b30ea4bc
13 changed files with 54 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
module/execution/view/ajaxgetdropmenu.html.php
+7 -14
View File
@@ -5,28 +5,21 @@
#navTabs {position: sticky; top: 0; background: #fff; z-index: 950;}
#navTabs>li {padding: 0px 10px; display: inline-block}
#navTabs>li>span {display: inline-block;}
#navTabs>li>a {padding: 8px 0px; display: inline-block}
#navTabs>li.active>a {font-weight: 700; color: #0c64eb;}
#navTabs>li.active>a:before {position: absolute; right: 0; bottom: -1px; left: 0; display: block; height: 2px; content: ' '; background: #0c64eb; }
#navTabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {border: none;}
#navTabs>li>a {margin: 0!important; padding: 8px 0px; display: inline-block}
#tabContent {margin-top: 10px; z-index: 900;}
#tabContent {margin-top: 5px; z-index: 900; max-width: 220px}
.executionTree ul {list-style: none; margin: 0}
.executionTree .executions>ul {padding-left: 7px;}
.executionTree .executions>ul>li>div {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
.executionTree .executions>ul>li label {background: rgba(255,255,255,0.5); line-height: unset; color: #838a9d; border: 1px solid #d8d8d8; border-radius: 2px; padding: 1px 4px;}
.executionTree li a i.icon {font-size: 15px !important;}
.executionTree li a i.icon:before {min-width: 16px !important;}
.executionTree li .label {position: unset; margin-bottom: 0;}
.executionTree li>a, div.hide-in-search>a {display: block; padding: 2px 10px 2px 5px; overflow: hidden; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px;}
.executionTree li>a.selected {color: #e9f2fb; background-color: #0c64eb;}
.executionTree .tree li>.list-toggle {line-height: 24px;}
.executionTree .tree li.has-list.open:before {content: unset;}
#swapper li>div.hide-in-search>a:focus, #swapper li>div.hide-in-search>a:hover {color: #838a9d; cursor: default;}
a.executionName:focus, a.executionName:hover {background: #0c64eb; color: #fff !important;}
#swapper li > a {padding-top: 4px; padding-bottom: 4px;}
#swapper li > a {margin-top: 4px; margin-bottom: 4px;}
#swapper li {padding-top: 0; padding-bottom: 0;}
#swapper .tree li>.list-toggle {top: -1px;}
</style>
@@ -80,7 +73,7 @@ foreach($executions as $projectID => $projectExecutions)
$selected = $execution->id == $executionID ? 'selected' : '';
if($execution->status != 'done' and $execution->status != 'closed' and ($execution->PM == $this->app->user->account or isset($execution->teams[$this->app->user->account])))
{
$myExecutionsHtml .= '<li>' . html::a(sprintf($link, $execution->id), $execution->name, '', "class='$selected executionName' title='{$execution->name}' data-key='" . zget($executionsPinYin, $execution->name, '') . "' data-app='{$this->app->tab}'") . '</li>';
$myExecutionsHtml .= '<li>' . html::a(sprintf($link, $execution->id), $execution->name, '', "class='$selected clickable' title='{$execution->name}' data-key='" . zget($executionsPinYin, $execution->name, '') . "' data-app='{$this->app->tab}'") . '</li>';
if($selected == 'selected') $tabActive = 'myExecution';
@@ -88,7 +81,7 @@ foreach($executions as $projectID => $projectExecutions)
}
else if($execution->status != 'done' and $execution->status != 'closed' and $execution->PM != $this->app->user->account and !isset($execution->teams[$this->app->user->account]))
{
$normalExecutionsHtml .= '<li>' . html::a(sprintf($link, $execution->id), $execution->name, '', "class='$selected executionName' title='{$execution->name}' data-key='" . zget($executionsPinYin, $execution->name, '') . "' data-app='{$this->app->tab}'") . '</li>';
$normalExecutionsHtml .= '<li>' . html::a(sprintf($link, $execution->id), $execution->name, '', "class='$selected clickable' title='{$execution->name}' data-key='" . zget($executionsPinYin, $execution->name, '') . "' data-app='{$this->app->tab}'") . '</li>';
if($selected == 'selected') $tabActive = 'other';
@@ -96,7 +89,7 @@ foreach($executions as $projectID => $projectExecutions)
}
else if($execution->status == 'done' or $execution->status == 'closed')
{
$closedExecutionsHtml .= '<li>' . html::a(sprintf($link, $execution->id), $execution->name, '', "class='$selected executionName' title='$execution->name' data-key='" . zget($executionsPinYin, $execution->name, '') . "' data-app='{$this->app->tab}'") . '</li>';
$closedExecutionsHtml .= '<li>' . html::a(sprintf($link, $execution->id), $execution->name, '', "class='$selected clickable' title='$execution->name' data-key='" . zget($executionsPinYin, $execution->name, '') . "' data-app='{$this->app->tab}'") . '</li>';
if($selected == 'selected') $tabActive = 'closed';
}
@@ -119,7 +112,7 @@ $closedExecutionsHtml .= '</ul>';
<div class='list-group'>
<?php $tabActive = ($myExecutions and ($tabActive == 'closed' or $tabActive == 'myExecution')) ? 'myExecution' : 'other';?>
<?php if($myExecutions): ?>
<ul class="nav nav-tabs" id="navTabs">
<ul class="nav nav-tabs nav-tabs-primary" id="navTabs">
<li class="<?php if($tabActive == 'myExecution') echo 'active';?>"><?php echo html::a('#myExecution', $lang->execution->involved, '', "data-toggle='tab' class='not-list-item not-clear-menu'");?><span class="label label-light label-badge"><?php echo $myExecutions;?></span><li>
<li class="<?php if($tabActive == 'other') echo 'active';?>"><?php echo html::a('#other', $lang->project->other, '', "data-toggle='tab' class='not-list-item not-clear-menu'")?><span class="label label-light label-badge"><?php echo $others;?></span><li>
</ul>
module/kanban/view/ajaxgetkanbanmenu.html.php
+7 -14
View File
@@ -4,28 +4,21 @@
#navTabs {position: sticky; top: 0; background: #fff; z-index: 950;}
#navTabs>li {padding: 0px 10px; display: inline-block}
#navTabs>li>span {display: inline-block;}
#navTabs>li>a {padding: 8px 0px; display: inline-block}
#navTabs>li.active>a {font-weight: 700; color: #0c64eb;}
#navTabs>li.active>a:before {position: absolute; right: 0; bottom: -1px; left: 0; display: block; height: 2px; content: ' '; background: #0c64eb;}
#navTabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {border: none;}
#navTabs>li>a {margin: 0!important; padding: 8px 0px; display: inline-block}
#tabContent {margin-top: 10px; z-index: 900;}
#tabContent {margin-top: 5px; z-index: 900; max-width: 220px}
.kanbanTree ul {list-style: none; margin: 0}
.kanbanTree .kanbans>ul {padding-left: 7px;}
.kanbanTree .kanbans>ul>li>div {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
.kanbanTree .kanbans>ul>li label {background: rgba(255,255,255,0.5); line-height: unset; color: #838a9d; border: 1px solid #d8d8d8; border-radius: 2px; padding: 1px 4px;}
.kanbanTree li a i.icon {font-size: 15px !important;}
.kanbanTree li a i.icon:before {min-width: 16px !important;}
.kanbanTree li .label {position: unset; margin-bottom: 0;}
.kanbanTree li>a, div.hide-in-search>a {display: block; padding: 2px 10px 2px 5px; overflow: hidden; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px;}
.kanbanTree li>a.selected {color: #e9f2fb; background-color: #0c64eb;}
.kanbanTree .tree li>.list-toggle {line-height: 24px;}
.kanbanTree .tree li.has-list.open:before {content: unset;}
#swapper li>div.hide-in-search>a:focus, #swapper li>div.hide-in-search>a:hover {color: #838a9d; cursor: default;}
a.kanbanName:focus, a.kanbanName:hover {background: #0c64eb; color: #fff !important;}
#swapper li > a {padding-top: 4px; padding-bottom: 4px;}
#swapper li > a {margin-top: 4px; margin-bottom: 4px;}
#swapper li {padding-top: 0; padding-bottom: 0;}
#swapper .tree li>.list-toggle {top: -1px;}
</style>
@@ -77,7 +70,7 @@ foreach($kanbanList as $spaceID => $spaceKanbans)
if($kanban->status != 'closed' and $kanban->owner == $this->app->user->account)
{
$myKanbansHtml .= '<li>' . html::a(sprintf($link, $kanban->id), $kanbanName, '', "class='$selected kanbanName' title='{$kanban->name}' data-key='" . zget($kanbansPinYin, $kanban->name, '') . "'") . '</li>';
$myKanbansHtml .= '<li>' . html::a(sprintf($link, $kanban->id), $kanbanName, '', "class='$selected clickable' title='{$kanban->name}' data-key='" . zget($kanbansPinYin, $kanban->name, '') . "'") . '</li>';
if($selected == 'selected') $tabActive = 'myKanban';
@@ -85,7 +78,7 @@ foreach($kanbanList as $spaceID => $spaceKanbans)
}
elseif($kanban->status != 'closed' and !($kanban->owner == $this->app->user->account))
{
$normalKanbansHtml .= '<li>' . html::a(sprintf($link, $kanban->id), $kanbanName, '', "class='$selected kanbanName' title='{$kanban->name}' data-key='" . zget($kanbansPinYin, $kanban->name, '') . "'") . '</li>';
$normalKanbansHtml .= '<li>' . html::a(sprintf($link, $kanban->id), $kanbanName, '', "class='$selected clickable' title='{$kanban->name}' data-key='" . zget($kanbansPinYin, $kanban->name, '') . "'") . '</li>';
if($selected == 'selected') $tabActive = 'other';
@@ -93,7 +86,7 @@ foreach($kanbanList as $spaceID => $spaceKanbans)
}
elseif($kanban->status == 'closed')
{
$closedKanbansHtml .= '<li>' . html::a(sprintf($link, $kanban->id), $kanbanName, '', "class='$selected kanbanName' title='{$kanban->name}' data-key='" . zget($kanbansPinYin, $kanban->name, '') . "'") . '</li>';
$closedKanbansHtml .= '<li>' . html::a(sprintf($link, $kanban->id), $kanbanName, '', "class='$selected clickable' title='{$kanban->name}' data-key='" . zget($kanbansPinYin, $kanban->name, '') . "'") . '</li>';
if($selected == 'selected') $tabActive = 'closed';
}
@@ -117,7 +110,7 @@ $closedKanbansHtml .= '</ul>';
<div class='list-group'>
<?php $tabActive = ($myKanbans and ($tabActive == 'closed' or $tabActive == 'myKanban')) ? 'myKanban' : 'other';?>
<?php if($myKanbans): ?>
<ul class="nav nav-tabs" id="navTabs">
<ul class="nav nav-tabs nav-tabs-primary" id="navTabs">
<li class="<?php if($tabActive == 'myKanban') echo 'active';?>"><?php echo html::a('#myKanban', $lang->kanban->my, '', "data-toggle='tab' class='not-list-item not-clear-menu'");?><span class="label label-light label-badge"><?php echo $myKanbans;?></span><li>
<li class="<?php if($tabActive == 'other') echo 'active';?>"><?php echo html::a('#other', $lang->kanban->other, '', "data-toggle='tab' class='not-list-item not-clear-menu'")?><span class="label label-light label-badge"><?php echo $others;?></span><li>
</ul>
module/product/view/ajaxgetdropmenu.html.php
+7 -13
View File
@@ -6,12 +6,9 @@
#navTabs {position: sticky; top: 0; background: #fff; z-index: 950;}
#navTabs>li {padding: 0px 10px; display: inline-block}
#navTabs>li>span {display: inline-block;}
#navTabs>li>a {padding: 8px 0px; display: inline-block}
#navTabs>li.active>a {font-weight: 700; color: #0c64eb;}
#navTabs>li.active>a:before {position: absolute; right: 0; bottom: -1px; left: 0; display: block; height: 2px; content: ' '; background: #0c64eb; }
#navTabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {border: none;}
#navTabs>li>a {margin: 0!important; padding: 8px 0px; display: inline-block}
#tabContent {margin-top: 10px; z-index: 900;}
#tabContent {margin-top: 5px; z-index: 900; max-width: 220px}
.productTree ul {list-style: none; margin: 0}
.productTree .products>ul {padding-left: 7px;}
.productTree .products>ul>li>div {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
@@ -20,14 +17,11 @@
.productTree li a i.icon:before {min-width: 16px !important;}
.productTree li .label {position: unset; margin-bottom: 0;}
.productTree li>a, div.hide-in-search>a {display: block; padding: 2px 10px 2px 5px; overflow: hidden; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px;}
.productTree li>a.selected {color: #e9f2fb; background-color: #0c64eb;}
.productTree .tree li>.list-toggle {line-height: 24px;}
.productTree .tree li.has-list.open:before {content: unset;}
#swapper li>div.hide-in-search>a:focus, #swapper li>div.hide-in-search>a:hover {color: #838a9d; cursor: default;}
a.productName:focus, a.productName:hover {background: #0c64eb; color: #fff !important;}
#swapper li > a {padding-top: 4px; padding-bottom: 4px;}
#swapper li > a {margin-top: 4px; margin-bottom: 4px;}
#swapper li {padding-top: 0; padding-bottom: 0;}
#swapper .tree li>.list-toggle {top: -1px;}
@@ -82,7 +76,7 @@ foreach($products as $programID => $programProducts)
if($product->status == 'normal' and $product->PO == $this->app->user->account)
{
$myProductsHtml .= '<li>' . html::a($linkHtml, $productName, '', "class='$selected productName' title='{$productName}' data-key='" . zget($productsPinYin, $product->name, '') . "' data-app='$app->tab'") . '</li>';
$myProductsHtml .= '<li>' . html::a($linkHtml, $productName, '', "class='$selected clickable' title='{$productName}' data-key='" . zget($productsPinYin, $product->name, '') . "' data-app='$app->tab'") . '</li>';
if($selected == 'selected') $tabActive = 'myProduct';
@@ -90,7 +84,7 @@ foreach($products as $programID => $programProducts)
}
else if($product->status == 'normal' and !($product->PO == $this->app->user->account))
{
$normalProductsHtml .= '<li>' . html::a($linkHtml, $productName, '', "class='$selected productName' title='{$productName}' data-key='" . zget($productsPinYin, $product->name, '') . "' data-app='$app->tab'") . '</li>';
$normalProductsHtml .= '<li>' . html::a($linkHtml, $productName, '', "class='$selected clickable' title='{$productName}' data-key='" . zget($productsPinYin, $product->name, '') . "' data-app='$app->tab'") . '</li>';
if($selected == 'selected') $tabActive = 'other';
@@ -98,7 +92,7 @@ foreach($products as $programID => $programProducts)
}
else if($product->status == 'closed')
{
$closedProductsHtml .= '<li>' . html::a($linkHtml, $productName, '', "class='$selected productName' title='$productName' class='closed' data-key='" . zget($productsPinYin, $product->name, '') . "' data-app='$app->tab'") . '</li>';
$closedProductsHtml .= '<li>' . html::a($linkHtml, $productName, '', "class='$selected clickable' title='$productName' class='closed' data-key='" . zget($productsPinYin, $product->name, '') . "' data-app='$app->tab'") . '</li>';
if($selected == 'selected') $tabActive = 'closed';
}
@@ -121,7 +115,7 @@ $closedProductsHtml .= '</ul>';
<div class='list-group'>
<?php $tabActive = ($myProducts and ($tabActive == 'closed' or $tabActive == 'myProduct')) ? 'myProduct' : 'other';?>
<?php if($myProducts): ?>
<ul class="nav nav-tabs" id="navTabs">
<ul class="nav nav-tabs nav-tabs-primary" id="navTabs">
<li class="<?php if($tabActive == 'myProduct') echo 'active';?>"><?php echo html::a('#myProduct', $lang->product->mine, '', "data-toggle='tab' class='not-list-item not-clear-menu'");?><span class="label label-light label-badge"><?php echo $myProducts;?></span><li>
<li class="<?php if($tabActive == 'other') echo 'active';?>"><?php echo html::a('#other', $lang->product->other, '', "data-toggle='tab' class='not-list-item not-clear-menu'")?><span class="label label-light label-badge"><?php echo $others;?></span><li>
</ul>
module/project/view/ajaxgetdropmenu.html.php
+7 -13
View File
@@ -5,12 +5,9 @@
#navTabs {position: sticky; top: 0; background: #fff; z-index: 950;}
#navTabs>li {padding: 0px 10px; display: inline-block}
#navTabs>li>span {display: inline-block;}
#navTabs>li>a {padding: 8px 0px; display: inline-block}
#navTabs>li.active>a {font-weight: 700; color: #0c64eb;}
#navTabs>li.active>a:before {position: absolute; right: 0; bottom: -1px; left: 0; display: block; height: 2px; content: ' '; background: #0c64eb;}
#navTabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {border: none;}
#navTabs>li>a {margin: 0!important; padding: 8px 0px; display: inline-block}
#tabContent {margin-top: 10px; z-index: 900;}
#tabContent {margin-top: 5px; z-index: 900; max-width: 220px}
.projectTree ul {list-style: none; margin: 0}
.projectTree .projects>ul {padding-left: 7px;}
.projectTree .projects>ul>li>div {display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
@@ -19,14 +16,11 @@
.projectTree li a i.icon:before {min-width: 16px !important;}
.projectTree li .label {position: unset; margin-bottom: 0;}
.projectTree li>a, div.hide-in-search>a {display: block; padding: 2px 10px 2px 5px; overflow: hidden; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px;}
.projectTree li>a.selected {color: #e9f2fb; background-color: #0c64eb;}
.projectTree .tree li>.list-toggle {line-height: 24px;}
.projectTree .tree li.has-list.open:before {content: unset;}
#swapper li>div.hide-in-search>a:focus, #swapper li>div.hide-in-search>a:hover {color: #838a9d; cursor: default;}
a.projectName:focus, a.projectName:hover {background: #0c64eb; color: #fff !important;}
#swapper li > a {padding-top: 4px; padding-bottom: 4px;}
#swapper li > a {margin-top: 4px; margin-bottom: 4px;}
#swapper li {padding-top: 0; padding-bottom: 0;}
#swapper .tree li>.list-toggle {top: -1px;}
</style>
@@ -81,7 +75,7 @@ foreach($projects as $programID => $programProjects)
if($project->status != 'done' and $project->status != 'closed' and $project->PM == $this->app->user->account)
{
$myProjectsHtml .= '<li>' . html::a(sprintf($link, $project->id), $projectName, '', "class='$selected projectName' title='{$project->name}' data-key='" . zget($projectsPinYin, $project->name, '') . "'") . '</li>';
$myProjectsHtml .= '<li>' . html::a(sprintf($link, $project->id), $projectName, '', "class='$selected clickable' title='{$project->name}' data-key='" . zget($projectsPinYin, $project->name, '') . "'") . '</li>';
if($selected == 'selected') $tabActive = 'myProject';
@@ -89,7 +83,7 @@ foreach($projects as $programID => $programProjects)
}
else if($project->status != 'done' and $project->status != 'closed' and !($project->PM == $this->app->user->account))
{
$normalProjectsHtml .= '<li>' . html::a(sprintf($link, $project->id), $projectName, '', "class='$selected projectName' title='{$project->name}' data-key='" . zget($projectsPinYin, $project->name, '') . "'") . '</li>';
$normalProjectsHtml .= '<li>' . html::a(sprintf($link, $project->id), $projectName, '', "class='$selected clickable' title='{$project->name}' data-key='" . zget($projectsPinYin, $project->name, '') . "'") . '</li>';
if($selected == 'selected') $tabActive = 'other';
@@ -97,7 +91,7 @@ foreach($projects as $programID => $programProjects)
}
else if($project->status == 'done' or $project->status == 'closed')
{
$closedProjectsHtml .= '<li>' . html::a(sprintf($link, $project->id), $projectName, '', "class='$selected projectName' title='$project->name' data-key='" . zget($projectsPinYin, $project->name, '') . "'") . '</li>';
$closedProjectsHtml .= '<li>' . html::a(sprintf($link, $project->id), $projectName, '', "class='$selected clickable' title='$project->name' data-key='" . zget($projectsPinYin, $project->name, '') . "'") . '</li>';
if($selected == 'selected') $tabActive = 'closed';
}
@@ -121,7 +115,7 @@ $closedProjectsHtml .= '</ul>';
<div class='list-group'>
<?php $tabActive = ($myProjects and ($tabActive == 'closed' or $tabActive == 'myProject')) ? 'myProject' : 'other';?>
<?php if($myProjects): ?>
<ul class="nav nav-tabs" id="navTabs">
<ul class="nav nav-tabs nav-tabs-primary" id="navTabs">
<li class="<?php if($tabActive == 'myProject') echo 'active';?>"><?php echo html::a('#myProject', $lang->project->myProject, '', "data-toggle='tab' class='not-list-item not-clear-menu'");?><span class="label label-light label-badge"><?php echo $myProjects;?></span><li>
<li class="<?php if($tabActive == 'other') echo 'active';?>"><?php echo html::a('#other', $lang->project->other, '', "data-toggle='tab' class='not-list-item not-clear-menu'")?><span class="label label-light label-badge"><?php echo $others;?></span><li>
</ul>