From 1c3382ed136e967c4dff71c6eb9f813f3cefdb0f Mon Sep 17 00:00:00 2001
From: daitingting <daitingting@xirangit.com>
Date: Fri, 20 Apr 2018 14:44:23 +0800
Subject: [PATCH 1/2]  * Rewrite browse page of tree.

---
 module/tree/control.php          |  12 +-
 module/tree/css/common.css       |  33 ++---
 module/tree/js/browse.js         |  18 +--
 module/tree/js/common.js         |  49 +++++---
 module/tree/lang/zh-cn.php       |   2 +-
 module/tree/view/browse.html.php | 206 ++++++++++++++++---------------
 6 files changed, 166 insertions(+), 154 deletions(-)

diff --git a/module/tree/control.php b/module/tree/control.php
index 02542e5fbe..659af48970 100644
--- a/module/tree/control.php
+++ b/module/tree/control.php
@@ -72,7 +72,7 @@ class tree extends control
             $this->view->currentProduct = $currentProduct;
             $this->view->productModules = $this->tree->getOptionMenu($currentProduct, 'story');
 
-            $title      = $product->name . $this->lang->colon . $this->lang->tree->manageProduct;
+            $title      = $this->lang->tree->manageProduct;
             $position[] = html::a($this->createLink('product', 'browse', "product=$rootID"), $product->name);
             $position[] = $this->lang->tree->manageProduct;
         }
@@ -84,7 +84,7 @@ class tree extends control
             if($this->config->global->flow == 'onlyTest') $this->lang->set('menugroup.tree', 'bug');
             if($this->config->global->flow != 'onlyTest') $this->lang->set('menugroup.tree', 'qa');
 
-            $title      = $product->name . $this->lang->colon . $this->lang->tree->manageBug;
+            $title      = $this->lang->tree->manageBug;
             $position[] = html::a($this->createLink('bug', 'browse', "product=$rootID"), $product->name);
             $position[] = $this->lang->tree->manageBug;
         }
@@ -96,7 +96,7 @@ class tree extends control
             if($this->config->global->flow == 'onlyTest') $this->lang->set('menugroup.tree', 'testcase');
             if($this->config->global->flow != 'onlyTest') $this->lang->set('menugroup.tree', 'qa');
 
-            $title      = $product->name . $this->lang->colon . $this->lang->tree->manageCase;
+            $title      = $this->lang->tree->manageCase;
             $position[] = html::a($this->createLink('testcase', 'browse', "product=$rootID"), $product->name);
             $position[] = $this->lang->tree->manageCase;
         }
@@ -107,7 +107,7 @@ class tree extends control
             $this->lang->tree->menuOrder = $this->lang->testsuite->menuOrder;
             $this->lang->set('menugroup.tree', 'qa');
 
-            $title      = $lib->name . $this->lang->colon . $this->lang->tree->manageCaseLib;
+            $title      = $this->lang->tree->manageCaseLib;
             $position[] = html::a($this->createLink('testsuite', 'library', "libID=$rootID"), $lib->name);
             $position[] = $this->lang->tree->manageCaseLib;
         }
@@ -119,7 +119,7 @@ class tree extends control
             $this->lang->tree->menuOrder = $this->lang->doc->menuOrder;
             $this->lang->set('menugroup.tree', 'doc');
 
-            $title      = $lib->name . $this->lang->colon . $this->lang->tree->manageCustomDoc;
+            $title      = $this->lang->tree->manageCustomDoc;
             $position[] = html::a($this->createLink('doc', 'browse', "libID=$rootID"), $lib->name);
             $position[] = $this->lang->tree->manageCustomDoc;
         }
@@ -138,7 +138,7 @@ class tree extends control
             $this->view->currentProduct = $currentProduct;
             $this->view->productModules = $this->tree->getOptionMenu($currentProduct, 'line');
 
-            $title      = $this->lang->product->common . $this->lang->colon . $this->lang->tree->manageLine;
+            $title      = $this->lang->tree->manageLine;
             $position[] = $this->lang->tree->manageLine;
         }
 
diff --git a/module/tree/css/common.css b/module/tree/css/common.css
index d013e995ed..16ed45f934 100644
--- a/module/tree/css/common.css
+++ b/module/tree/css/common.css
@@ -1,21 +1,14 @@
-.parentModule {width:10%; vertical-align:middle;}
-.copy {display:block; margin-bottom:5px;}
+.row-module {max-width: 500px; min-width: 400px;}
+.row-module + .row-module {margin-top: 5px;}
+.col-module {min-width: 200px;}
+.col-module .form-control {border-radius: 2px 0 0 2px;}
+.col-module select.form-control {border-radius: 0 2px 2px 0; border-left-width: 0;}
+.col-module select.form-control:focus {margin-left: -1px; border-left-width: 1px;}
+.col-shorts .form-control {border-radius: 0 2px 2px 0; border-left-width: 0;}
+.col-shorts .form-control:focus {margin-left: -1px; border-left-width: 1px;}
+.col-shorts {width: 110px;}
+.col-actions {width: 80px; padding-left: 5px;}
 
-.outer .row .col-md-8 .table-form {max-width: 600px}
-
-#sonModule, #moduleBox > span > input, #moduleBox > table{max-width: 500px}
-#sonModule  .row-table .input-group input {border-right: none}
-#moduleBox span > .form-control {margin-bottom: 5px;}
-
-.w-260px {width: 260px!important}
-table.copy td {padding: 0!important}
-table.copy td .form-control {border-right: 0}
-
-.tree-toggle {cursor: pointer;}
-.tree-actions, .tree li.hover > .tree-actions {opacity: 1}
-.tree-item-branch > .tree-actions [data-type='sort'] {display: none}
-.tree-item-branch > .tree-actions [data-type='add'] > .icon-plus:before {content: '\e6c7'}
-
-#childrenForm table .chosen-container .chosen-single {border-right-color: transparent}
-#childrenForm table .chosen-container .chosen-single {border-right-color: transparent}
-#childrenForm .col-table + .col-table .form-control {border-left: transparent;}
+.col-module .chosen-container-single .chosen-single {border-radius: 2px 0 0 2px; border-right-width: 0; padding-right: 1px;}
+.col-module .chosen-container-active .chosen-single {border-right-width: 1px; padding-right: 0;}
+.col-shorts .chosen-container-single .chosen-single {border-radius: 0 2px 2px 0;}
diff --git a/module/tree/js/browse.js b/module/tree/js/browse.js
index 5fce104d12..a581c7bbed 100644
--- a/module/tree/js/browse.js
+++ b/module/tree/js/browse.js
@@ -7,15 +7,17 @@ function syncModule(rootID, type)
     $.getJSON(link, function(modules)
     {
         if(modules.length == 0) return false;
+
         $('.helplink').addClass('hidden');
-        var $inputgroup = $('<div></div>').append($('.input-group .icon-remove:first').closest('.row-table').clone()).html();
+        var $inputgroup = $('<div></div>').append($('.col-actions .icon-trash:first').closest('.table-row').clone()).html();
+
         $.each(modules, function(key, module)
         {
-            $('.row-table').each(function()
+            $('#sonModule > .table-row').each(function()
             {
                 moduleName = $(this).find('input[id^=modules]').val();
                 if(moduleName == module.name) modules[key] = null;
-                if(!moduleName) $(this).closest('.row-table').remove();
+                if(!moduleName) $(this).closest('#sonModule > .table-row').not('.copy').remove();
             })
         });  
 
@@ -25,16 +27,16 @@ function syncModule(rootID, type)
             {
                 /* Duplicate removal for mdoule name. */
                 var unique = true;
-                $('#sonModule > .row-table').each(function()
+                $('#sonModule > .table-row').not('.copy').each(function()
                 {
-                    if($(this).find('.col-table:first').find(':input').val() == module.name) unique = false;
+                    if($(this).find('.table-col:first').find(':input').val() == module.name) unique = false;
                 })
 
                 if(unique)
                 {
                     $('#sonModule').append($inputgroup);
-                    $('#sonModule .row-table:last input[id^=modules]').val(module.name);
-                    $('#sonModule .row-table:last input[id^=shorts]').val(module.short);
+                    $('#sonModule .table-row:last input[id^=modules]').val(module.name);
+                    $('#sonModule .table-row:last input[id^=shorts]').val(module.short);
                 }
             }
         })
@@ -63,7 +65,7 @@ function syncProductOrProject(obj, type)
 
 function toggleCopy()
 {
-   var $copy = $('table.copy');
+   var $copy = $('.table-row.copy');
    if($copy.size() == 0) return false;
    $copy.toggle();
 }
diff --git a/module/tree/js/common.js b/module/tree/js/common.js
index 974d7526b7..b5e7d8a86e 100644
--- a/module/tree/js/common.js
+++ b/module/tree/js/common.js
@@ -1,22 +1,8 @@
-function addItem(obj)
-{
-    var $inputgroup = $(obj).closest('.row-table');
-    $inputgroup.after($inputgroup.clone()).next('.row-table').find('input').val('');
-}
-
-function insertItem(obj)
-{
-    var $inputgroup = $(obj).closest('.row-table');
-    var insertHtml  = $('#insertItemBox').children('.row-table').clone();
-    $inputgroup.after(insertHtml).next('.row-table').find('input').val('');
-
-    updateItemOrder();
-}
-
 function updateItemOrder()
 {
     var order = 10;
-    $('#sonModule').children('.row-table').each(function(){
+    $('#sonModule').children('.row-table').each(function()
+    {
         if($(this).find("input[name*='order']").length > 0)
         {
             console.log(order);
@@ -28,8 +14,35 @@ function updateItemOrder()
     $('#maxOrder').val(order - 10);
 }
 
+function addItem(obj)
+{
+    var $inputRow = $(obj).closest('.row-module');
+    var $newRow = $('#insertItemBox').children('.row-module').clone().insertAfter($inputRow).addClass('highlight');
+    $newRow.find('input').val('');
+    setTimeout(function()
+    {
+        $newRow.removeClass('highlight');
+    }, 1600);
+    updateItemOrder();
+}
+
+function insertItem(obj)
+{
+    var $inputgroup = $(obj).closest('.row-table');
+    var insertHtml  = $('#insertItemBox').children('.row-table').clone();
+    $inputgroup.after(insertHtml).next('.row-table').find('input').val('');
+
+    updateItemOrder();
+}
+
 function deleteItem(obj)
 {
-    if($(obj).closest('.row-table').siblings('.row-table.addedItem').find('i.icon-remove').size() <= 0) return;
-    $(obj).closest('.row-table').remove();
+    var $inputRow = $(obj).closest('.row-module');
+    if ($inputRow.siblings('.row-module.row-module-new').find('.btn-delete').length > 0)
+    {
+        $inputRow.addClass('highlight').fadeOut(500, function()
+        {
+            $inputRow.remove();
+        });
+    }
 }
diff --git a/module/tree/lang/zh-cn.php b/module/tree/lang/zh-cn.php
index 1ccbb583be..44f262f082 100644
--- a/module/tree/lang/zh-cn.php
+++ b/module/tree/lang/zh-cn.php
@@ -32,7 +32,7 @@ $lang->tree->manageBugChild     = '维护Bug子模块';
 $lang->tree->manageCaseChild    = '维护用例子模块';
 $lang->tree->manageCaselibChild = '维护测试库子模块';
 $lang->tree->manageTaskChild    = "维护{$lang->projectCommon}子模块";
-$lang->tree->syncFromProduct    = '复制';
+$lang->tree->syncFromProduct    = '复制模块';
 $lang->tree->dragAndSort        = "拖放排序";
 $lang->tree->sort               = "排序";
 $lang->tree->addChild           = "增加子模块";
diff --git a/module/tree/view/browse.html.php b/module/tree/view/browse.html.php
index c11daffb87..c2f9cc2506 100644
--- a/module/tree/view/browse.html.php
+++ b/module/tree/view/browse.html.php
@@ -14,125 +14,131 @@
 <?php js::set('viewType', $viewType);?>
 <?php $hasBranch = (strpos('story|bug|case', $viewType) !== false and (!empty($root->type) && $root->type != 'normal')) ? true : false;?>
 <?php $name = $viewType == 'line' ? $lang->tree->line : ($viewType == 'doc' ? $lang->tree->cate : $lang->tree->name);?>
-<div id='featurebar'>
-  <div class='heading'><?php echo $viewType == 'line' ? $lang->tree->manageLine : $lang->tree->common;?></div>
+<div id="mainMenu" class="clearfix">
+  <div class="btn-toolbar pull-left">
+    <?php $backLink = $this->session->{$viewType . 'List'} ? $this->session->{$viewType . 'List'} : 'javascript:history.go(-1)';?>
+    <a href="<?php echo $backLink;?>" class="btn btn-link">
+      <i class="icon icon-back icon-sm"></i> <?php echo $lang->goback;?>
+    </a>
+    <div class="divider"></div>
+    <div class="page-title">
+    <span class="text"><?php echo ($viewType == 'line' ? $lang->tree->manageLine : $lang->tree->common) . '：' . $root->name;?></span>
+    </div>
+  </div>
 </div>
-<div class='row'>
-  <div class='col-sm-4'>
-    <div class='panel'>
-      <div class='panel-heading'><i class='icon-cog'></i> <strong><?php echo $title;?></strong></div>
-      <div class='panel-body'>
-        <div class='container'>
-          <ul class='tree-lines' id='modulesTree' data-name='tree-<?php echo $viewType?>'></ul>
-        </div>
+<div id="mainContent" class="main-row">
+  <div class="side-col col-4">
+    <div class="panel">
+      <div class="panel-heading">
+        <div class="panel-title"><?php echo $title;?></div>
+      </div>
+      <div class="panel-body">
+        <ul class='tree-lines' id='modulesTree' data-name='tree-<?php echo $viewType;?>'></ul>
       </div>
     </div>
   </div>
-  <div class='col-sm-8'>
-    <form id='childrenForm' class='form-condensed' method='post' target='hiddenwin' action='<?php echo $this->createLink('tree', 'manageChild', "root=$rootID&viewType=$viewType");?>'>
-      <div class='panel'>
-        <div class='panel-heading'>
-          <i class='icon-sitemap'></i>
+  <div class="main-col col-8">
+    <div class="panel">
+      <div class="panel-heading">
+        <div class="panel-title">
           <?php $manageChild = 'manage' . ucfirst($viewType) . 'Child';?>
           <?php echo strpos($viewType, 'doc') !== false ? $lang->doc->manageType : $lang->tree->$manageChild;?>
-          <?php if($viewType == 'story' and $allProduct):?>
-          <div class='panel-actions pull-right'><?php echo html::a('javascript:toggleCopy()', $lang->tree->syncFromProduct, '', "class='btn btn-sm'")?></div>
-          <?php endif;?>
         </div>
-        <div class='panel-body'>
+        <?php if($viewType == 'story' and $allProduct):?>
+        <div class="panel-actions btn-toolbar"><?php echo html::a('javascript:toggleCopy()', $lang->tree->syncFromProduct, '', "class='btn btn-sm'")?></div>
+        <?php endif;?>
+      </div>
+      <div class="panel-body">
+        <form id='childrenForm' method='post' target='hiddenwin' action='<?php echo $this->createLink('tree', 'manageChild', "root=$rootID&viewType=$viewType");?>'>
           <table class='table table-form'>
             <tr>
               <?php if($viewType != 'line'):?>
-              <td class='parentModule'>
-                <nobr>
+              <td class="text-middle text-nowrap text-right with-padding">
                 <?php
-                echo html::a($this->createLink('tree', 'browse', "root=$rootID&viewType=$viewType"), empty($root->name) ? '' : $root->name);
-                echo $lang->arrow;
+                echo html::a($this->createLink('tree', 'browse', "root=$rootID&viewType=$viewType"), empty($root->name) ? '' : $root->name) . "<i class='icon icon-angle-right muted'></i>";
                 foreach($parentModules as $module)
                 {
-                    echo html::a($this->createLink('tree', 'browse', "root=$rootID&viewType=$viewType&moduleID=$module->id"), $module->name);
-                    echo $lang->arrow;
+                    echo html::a($this->createLink('tree', 'browse', "root=$rootID&viewType=$viewType&moduleID=$module->id"), $module->name) . " <i class='icon icon-angle-right muted'></i>";
                 }
                 ?>
-                </nobr>
               </td>
               <?php endif;?>
-              <td id='moduleBox'>
-                <?php
-                if($viewType == 'story' and $allProduct)
-                {
-                    echo "<table class='copy w-p100'><tr>";
-                    echo "<td class='w-260px'>" . html::select('allProduct', $allProduct, '', "class='form-control chosen' onchange=\"syncProductOrProject(this,'product')\"") . '</td>';
-                    echo "<td class='w-200px'>" . html::select('productModule', $productModules, '', "class='form-control chosen'") . '</td>';
-                    echo "<td class=''>" . html::commonButton($lang->tree->syncFromProduct, "id='copyModule' onclick='syncModule($currentProduct, \"story\")'") . '</td>';
-                    echo '</tr></table>';
-                }
-                $maxOrder = 0;
-                echo '<div id="sonModule">';
-                foreach($sons as $sonModule)
-                {
-                    if($sonModule->order > $maxOrder) $maxOrder = $sonModule->order;
-                    $disabled = $sonModule->type == $viewType ? '' : 'disabled';
-                    echo "<div class='row-table' style='margin-bottom:5px'>";
-                    echo "<div class='col-table'>" . html::input("modules[id$sonModule->id]", $sonModule->name, 'class="form-control" autocomplete="off"' . $disabled) . '</div>';
-                    if($hasBranch) echo "<div class='col-table'>" . html::select("branch[id$sonModule->id]", $branches, $sonModule->branch, 'class="form-control" disabled') . '</div>';
-                    echo "<div class='col-table' style='width:120px'><div class='input-group'>" . html::input("shorts[id$sonModule->id]", $sonModule->short, "class='form-control' placeholder='{$lang->tree->short}' $disabled autocomplete='off'") . html::hidden("order[id$sonModule->id]", $sonModule->order);
-                    echo "<span class='input-group-btn' style='border-left:1px solid'><a href='javascript:;' onclick='insertItem(this)' class='btn btn-block'><i class='icon icon-plus'></i></a></span>";
-                    echo '</div></div>';
-                    echo '</div>';
-                }
-                for($i = 0; $i < TREE::NEW_CHILD_COUNT ; $i ++)
-                {
-                    echo "<div class='row-table addedItem' style='margin-bottom:5px'>";
-                    echo "<div class='col-table'>" . html::input("modules[]", '', "class='form-control' placeholder='{$name}' autocomplete='off'") . '</div>';
-                    if($hasBranch) echo '<div class="col-table">' . html::select("branch[]", $branches, $branch, 'class="form-control"') . '</div>';
-                    echo "<div class='col-table' style='width:120px'><div class='input-group'>" . html::input("shorts[]", '', "class='form-control' placeholder='{$lang->tree->short}' autocomplete='off'");
-                    echo "<span class='input-group-btn'><a href='javascript:;' onclick='addItem(this)' class='btn btn-block'><i class='icon icon-plus'></i></a></span>";
-                    echo "<span class='input-group-btn'><a href='javascript:;' onclick='deleteItem(this)' class='btn btn-block'><i class='icon icon-remove'></i></a></span>";
-                    echo '</div></div>';
-                    echo '</div>';
-                }
+              <td>
+                <div id='sonModule'>
+                  <?php if($viewType == 'story' and $allProduct):?>
+                  <div class='table-row row-module copy'>
+                    <div class='table-col col-module'><?php echo html::select('allProduct', $allProduct, '', "class='form-control chosen' onchange=\"syncProductOrProject(this,'product')\"");?></div>
+                    <div class='table-col col-shorts'><?php echo html::select('productModule', $productModules, '', "class='form-control chosen'");?></div>
+                    <div class='table-col col-actions'>
+                      <?php echo html::commonButton('', "id='copyModule' onclick='syncModule($currentProduct, \"story\")'", 'btn btn-link btn-icon', 'icon icon-copy');?>
+                    </div>
+                  </div>
+                  <?php endif;?>
 
-                echo "<div id='insertItemBox' class='hidden'>";
-                echo "<div class='row-table' style='margin-bottom:5px'>";
-                echo "<div class='col-table'>" . html::input("modules[]", '', "class='form-control' placeholder='{$name}' autocomplete='off'") . '</div>';
-                if($hasBranch) echo '<div class="col-table">' . html::select("branch[]", $branches, $branch, 'class="form-control" disabled') . '</div>';
-                echo "<div class='col-table' style='width:120px'><div class='input-group'>" . html::input("shorts[]", '', "class='form-control' placeholder='{$lang->tree->short}' autocomplete='off'") . html::hidden("order[]");
-                echo "<span class='input-group-btn' style='border-left:1px solid'><a href='javascript:;' onclick='deleteItem(this)' class='btn btn-block'><i class='icon icon-remove'></i></a></span>";
-                echo '</div></div>';
-                echo '</div></div>';
+                  <?php $maxOrder = 0;?>
+                  <?php foreach($sons as $sonModule):?>
+                  <?php if($sonModule->order > $maxOrder) $maxOrder = $sonModule->order;?>
+                  <?php $disabled = $sonModule->type == $viewType ? '' : 'disabled';?>
+                  <div class="table-row row-module">
+                    <div class="table-col col-module"><?php echo html::input("modules[id$sonModule->id]", $sonModule->name, 'class="form-control" autocomplete="off"' . $disabled);?></div>
+                    <?php if($hasBranch):?>
+                    <div class="table-col col-module"><?php echo html::select("branch[id$sonModule->id]", $branches, $sonModule->branch, 'class="form-control" disabled');?></div>
+                    <?php endif;?>
+                    <div class="table-col col-shorts"><?php echo html::input("shorts[id$sonModule->id]", $sonModule->short, "class='form-control' placeholder='{$lang->tree->short}' $disabled autocomplete='off'") . html::hidden("order[id$sonModule->id]", $sonModule->order);?></div>
+                    <div class="table-col col-actions">
+                      <button type="button" class="btn btn-link btn-icon btn-add" onclick="addItem(this)"><i class="icon icon-plus"></i></button>
+                    </div>
+                  </div>
+                  <?php endforeach;?>
+                  <?php for($i = 0; $i < TREE::NEW_CHILD_COUNT ; $i ++):?>
+                  <div class="table-row row-module row-module-new">
+                    <div class="table-col col-module"><?php echo html::input("modules[]", '', "class='form-control' placeholder='{$name}' autocomplete='off'");?></div>
+                    <?php if($hasBranch):?>
+                    <div class="table-col col-module"><?php echo html::select("branch[]", $branches, $branch, 'class="form-control"');?></div>
+                    <?php endif;?>
+                    <div class="table-col col-shorts"><?php echo html::input("shorts[]", '', "class='form-control' placeholder='{$lang->tree->short}' autocomplete='off'");?></div>
+                    <div class="table-col col-actions">
+                      <button type="button" class="btn btn-link btn-icon btn-add" onclick="addItem(this)"><i class="icon icon-plus"></i></button>
+                      <button type="button" class="btn btn-link btn-icon btn-delete" onclick="deleteItem(this)"><i class="icon icon-trash"></i></button>
+                    </div>
+                  </div>
+                  <?php endfor;?>
+                </div>
 
-                echo '</div>';
-                ?>
+                <div id="insertItemBox" class="template">
+                  <div class="table-row row-module row-module-new">
+                    <div class="table-col col-module"><?php echo html::input("modules[]", '', "class='form-control' placeholder='{$name}' autocomplete='off'");?></div>
+                    <?php if($hasBranch):?>
+                    <div class="table-col col-module"><?php echo html::select("branch[]", $branches, $branch, 'class="form-control"');?></div>
+                    <?php endif;?>
+                    <div class="table-col col-shorts"><?php echo html::input("shorts[]", '', "class='form-control' placeholder='{$lang->tree->short}' autocomplete='off'");?></div>
+                    <div class="table-col col-actions">
+                      <button type="button" class="btn btn-link btn-icon btn-add" onclick="addItem(this)"><i class="icon icon-plus"></i></button>
+                      <button type="button" class="btn btn-link btn-icon btn-delete" onclick="deleteItem(this)"><i class="icon icon-trash"></i></button>
+                    </div>
+                  </div>
+                </div>
               </td>
             </tr>
             <tr>
               <?php if($viewType != 'line'):?>
               <td></td>
               <?php endif;?>
-              <td colspan='2'>
-                <?php 
-                echo html::submitButton();
-                echo $this->session->{$viewType . 'List'} ? html::linkButton($this->lang->goback, $this->session->{$viewType .'List'}) : html::backButton();
-                echo html::hidden('parentModuleID', $currentModuleID);
-                echo html::hidden('maxOrder', $maxOrder);
-                ?>      
-                <input type='hidden' value='<?php echo $currentModuleID;?>' name='parentModuleID' />
+              <td colspan="2">
+                <?php echo html::submitButton('', '', 'btn btn-primary btn-wide');?>
+                <?php echo $this->session->{$viewType . 'List'} ? html::linkButton($this->lang->goback, $this->session->{$viewType .'List'}, 'btn btn-wide btn-gray') : html::backButton('', '', 'btn btn-wide btn-gray');?>
+                <?php echo html::hidden('parentModuleID', $currentModuleID);?>
+                <?php echo html::hidden('maxOrder', $maxOrder);?>
               </td>
             </tr>
+            </tbody> 
           </table>
-        </div>
+        </form>
       </div>
-    </form>
+    </div>
   </div>
 </div>
-<?php if($viewType !== 'story'): ?>
-<style>
-<?php if($viewType != 'bug') echo ".tree-item-story > .tree-actions > .tree-action[data-type='edit'],";?>
-.tree-item-story > .tree-actions > .tree-action[data-type='sort'],
-.tree-item-story > .tree-actions > .tree-action[data-type='delete'] {display: none!important}
-</style>
-<?php endif;?>
+
 <script>
 $(function()
 {
@@ -156,32 +162,33 @@ $(function()
             if(item.type === 'case') $toggle.append('&nbsp; <span class="text-muted">[C]</span>');
             $li.append($toggle);
             if(item.nodeType || item.type) $li.addClass('tree-item-' + (item.nodeType || item.type));
+            $li.toggleClass('active', <?php echo $currentModuleID ?> === item.id);
             return true;
         },
-        actions: 
+        actions:
         {
             sort:
             {
-                title: '<?php echo $lang->tree->dragAndSort ?>',
-                template: '<a class="sort-handler"><?php echo $lang->tree->sort ?></a>'
+                 title: '<?php echo $lang->tree->dragAndSort ?>',
+                 template: '<a class="sort-handler"><?php echo $lang->tree->sort ?></a>'
             },
             edit:
             {
                 linkTemplate: '<?php echo helper::createLink('tree', 'edit', "moduleID={0}&type=$viewType"); ?>',
                 title: '<?php echo $lang->tree->edit ?>',
-                template: '<a href="javascript:;"><?php echo $lang->edit?></a>'
+                template: '<a><?php echo $lang->edit?></a>'
             },
             "delete":
             {
                 linkTemplate: '<?php echo helper::createLink('tree', 'delete', "rootID=$rootID&moduleID={0}"); ?>',
                 title: '<?php echo $lang->tree->delete ?>',
-                template: '<a href="javascript:;"><?php echo $lang->delete?></a>'
+                template: '<a><?php echo $lang->delete?></a>'
             },
             subModules:
             {
                 linkTemplate: '<?php echo helper::createLink('tree', 'browse', "rootID=$rootID&viewType=$viewType&moduleID={0}&branch={1}"); ?>',
                 title: '<?php echo $viewType == 'line' ? '': $lang->tree->child ?>',
-                template: '<a href="javascript:;"><?php echo $viewType == 'line' ? '': (strpos($viewType, 'doc') !== false ? $lang->doc->childType : $lang->tree->child)?></a>'
+                template: '<a><?php echo $viewType == 'line' ? '': (strpos($viewType, 'doc') !== false ? $lang->doc->childType : $lang->tree->child)?></a>',
             }
         },
         action: function(event)
@@ -189,12 +196,11 @@ $(function()
             var action = event.action, $target = $(event.target), item = event.item;
             if(action.type === 'edit')
             {
-                $target.modalTrigger(
-                {
+                new $.zui.ModalTrigger({
                     type: 'ajax',
                     url: action.linkTemplate.format(item.id),
                     keyboard: true
-                }).trigger('click');
+                }).show();
             }
             else if(action.type === 'delete')
             {
@@ -228,8 +234,8 @@ $(function()
     var $tree = $('#modulesTree').tree(options);
 
     var tree = $tree.data('zui.tree');
-    if(!tree.store.time) tree.expand($tree.find('li:not(.tree-action-item)').first());
     if(<?php echo $currentModuleID ?>)
+    if(0)
     {
         var $currentLi = $tree.find('.module-name[data-id=' + <?php echo $currentModuleID ?> + ']').closest('li');
         if($currentLi.length) tree.show($currentLi);
@@ -242,10 +248,8 @@ $(function()
         e.stopPropagation();
     });
 
-    $tree.find('[data-toggle="tooltip"]').tooltip();
-
     $('#modulemenu > .nav > li > a[href*=tree][href*=browse]').not('[href*=<?php echo $viewType;?>]').parent().removeClass('active');
-    if(viewType == 'line') $('#modulemenu > .nav > li > a[href*=product][href*=all]').parent('li[data-id=all]').addClass('active');
+    if(window.config.viewType == 'line') $('#modulemenu > .nav > li > a[href*=product][href*=all]').parent('li[data-id=all]').addClass('active');
 });
 </script>
 <?php 

From d639c5c79694b51be5e7ada82b8638be5f260266 Mon Sep 17 00:00:00 2001
From: wangyidong <yidong@cnezsoft.com>
Date: Fri, 20 Apr 2018 15:17:12 +0800
Subject: [PATCH 2/2]  * adjust for project-story page.

---
 module/project/css/storykanban.css       |   1 +
 module/project/js/story.js               |   3 -
 module/project/view/story.html.php       | 358 +++++++++++------------
 module/project/view/storykanban.html.php | 126 ++++----
 4 files changed, 244 insertions(+), 244 deletions(-)

diff --git a/module/project/css/storykanban.css b/module/project/css/storykanban.css
index 419f4a17e3..145196c807 100644
--- a/module/project/css/storykanban.css
+++ b/module/project/css/storykanban.css
@@ -1,3 +1,4 @@
+table#kanbanHeader {margin-bottom:0px;}
 #kanbanHeader th{border: 1px solid #ddd; padding:8px;}
 #kanbanHeader th{position: relative}
 
diff --git a/module/project/js/story.js b/module/project/js/story.js
index c05d3acb30..d828e0e8f1 100644
--- a/module/project/js/story.js
+++ b/module/project/js/story.js
@@ -16,9 +16,6 @@ $(function()
         });
     });
 
-    fixedTfootAction('#projectStoryForm');
-    fixedTheadOfList('#storyList');
-
     $('#module' + moduleID).addClass('active');
     $('#product' + productID).addClass('active');
     $('#branch' + branchID).addClass('active');
diff --git a/module/project/view/story.html.php b/module/project/view/story.html.php
index 7b775d56c6..7192d8365f 100644
--- a/module/project/view/story.html.php
+++ b/module/project/view/story.html.php
@@ -12,18 +12,21 @@
 ?>
 <?php $canOrder = common::hasPriv('project', 'storySort');?>
 <?php include '../../common/view/header.html.php';?>
-<?php include '../../common/view/tablesorter.html.php';?>
 <?php if($canOrder) include '../../common/view/sortable.html.php';?>
 <?php js::set('moduleID', ($type == 'byModule' ? $param : 0));?>
 <?php js::set('productID', ($type == 'byProduct' ? $param : 0));?>
 <?php js::set('branchID', ($type == 'byBranch' ? (int)$param : ''));?>
 <?php js::set('confirmUnlinkStory', $lang->project->confirmUnlinkStory)?>
-<div id='featurebar'>
-  <ul class='nav'>
-    <li class='active'><?php if(common::hasPriv('project', 'story')) echo html::a($this->createLink('project', 'story', "project=$project->id"), $lang->project->story);?></li>
-    <li><?php if(common::hasPriv('project', 'storykanban')) echo html::a($this->createLink('project', 'storykanban', "project=$project->id"), $lang->project->kanban);?></li>
-  </ul>
-  <div class='actions'>
+<div id="mainMenu" class="clearfix">
+  <div id="sidebarHeader">
+    <?php echo html::commonButton('<i class="icon icon-caret-left"></i>', '', 'btn btn-icon btn-sm btn-info sidebar-toggle');?>
+    <div class="title" title='<?php echo $project->name?>'><?php echo $project->name;?></div>
+  </div>
+  <div class="btn-toolbar pull-left">
+    <?php if(common::hasPriv('project', 'story')) echo html::a($this->createLink('project', 'story', "project=$project->id"), "<span class='text'>{$lang->project->story}</span>", '', "class='btn btn-link btn-active-text'");?>
+    <?php if(common::hasPriv('project', 'storykanban')) echo html::a($this->createLink('project', 'storykanban', "project=$project->id"), "<span class='text'>{$lang->project->kanban}</span>", '', "class='btn btn-link'");?>
+  </div>
+  <div class="btn-toolbar pull-right">
     <div class='btn-group'>
     <?php
     common::printIcon('story', 'export', "productID=$productID&orderBy=id_desc", '', 'button', '', '', 'export');
@@ -36,7 +39,7 @@
 
         $misc = common::hasPriv('story', 'batchCreate') ? '' : "disabled";
         $link = common::hasPriv('story', 'batchCreate') ?  $this->createLink('story', 'batchCreate', "productID=$productID&branch=0&moduleID=0&story=0&project=$project->id") : '#';
-        echo "<button type='button' class='btn dropdown-toggle {$misc}' data-toggle='dropdown'>";
+        echo "<button type='button' class='btn btn-link dropdown-toggle {$misc}' data-toggle='dropdown'>";
         echo "<span class='caret'></span>";
         echo '</button>';
         echo "<ul class='dropdown-menu pull-right'>";
@@ -48,7 +51,7 @@
     if(commonModel::isTutorialMode())
     {
         $wizardParams = helper::safe64Encode("project=$project->id");
-        echo html::a($this->createLink('tutorial', 'wizard', "module=project&method=linkStory&params=$wizardParams"), "<i class='icon-link'></i> {$lang->project->linkStory}",'', "class='btn link-story-btn'");
+        echo html::a($this->createLink('tutorial', 'wizard', "module=project&method=linkStory&params=$wizardParams"), "<i class='icon-link'></i> {$lang->project->linkStory}",'', "class='btn btn-link link-story-btn'");
     }
     else
     {
@@ -56,7 +59,7 @@
         common::printIcon('project', 'linkStory', "project=$project->id", '', 'button', 'link', '', 'link-story-btn');
         if(common::hasPriv('project', 'importPlanStories'))
         {
-            echo "<button type='button' class='btn dropdown-toggle' data-toggle='dropdown'>";
+            echo "<button type='button' class='btn btn-link dropdown-toggle' data-toggle='dropdown'>";
             echo "<span class='caret'></span>";
             echo '</button>';
             echo "<ul class='dropdown-menu pull-right'>";
@@ -68,181 +71,178 @@
     ?>
     </div>
   </div>
-  <div id='querybox' class='show'></div>
 </div>
 
-<div class='side' id='taskTree'>
-  <a class='side-handle' data-id='projectTree'><i class='icon-caret-left'></i></a>
-  <div class='side-body'>
-    <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>
+<div id='queryBox' class='show'></div>
+<div id="mainContent" class="main-row">
+  <div class='side-col' id='sidebar'>
+    <div class="cell">
+      <?php echo $moduleTree;?>
     </div>
   </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>
-        <tr class='colhead'>
-        <?php $vars = "projectID={$project->id}&orderBy=%s&type=$type&param=$param&recTotal={$pager->recTotal}&recPerPage={$pager->recPerPage}"; ?>
-          <th class='w-id  {sorter:false}'>  <?php common::printOrderLink('id',         $orderBy, $vars, $lang->idAB);?></th>
-          <?php if($canOrder):?>
-          <th class='w-50px {sorter:false}'> <?php common::printOrderLink('order',      $orderBy, $vars, $lang->project->updateOrder);?></th>
-          <?php endif;?>
-          <th class='w-pri {sorter:false}'>  <?php common::printOrderLink('pri',        $orderBy, $vars, $lang->priAB);?></th>
-          <th class='{sorter:false}'>        <?php common::printOrderLink('title',      $orderBy, $vars, $lang->story->title);?></th>
-          <th class='w-user {sorter:false}'> <?php common::printOrderLink('openedBy',   $orderBy, $vars, $lang->openedByAB);?></th>
-          <th class='w-80px {sorter:false}'> <?php common::printOrderLink('assignedTo', $orderBy, $vars, $lang->assignedToAB);?></th>
-          <th class='w-hour {sorter:false}'> <?php common::printOrderLink('estimate',   $orderBy, $vars, $lang->story->estimateAB);?></th>
-          <th class='w-hour {sorter:false}'> <?php common::printOrderLink('status',     $orderBy, $vars, $lang->statusAB);?></th>
-          <th class='w-70px {sorter:false}'> <?php common::printOrderLink('stage',      $orderBy, $vars, $lang->story->stageAB);?></th>
-          <th title='<?php echo $lang->story->taskCount?>' class='w-30px'><?php echo $lang->story->taskCountAB;?></th>
-          <th title='<?php echo $lang->story->bugCount?>'  class='w-30px'><?php echo $lang->story->bugCountAB;?></th>
-          <th title='<?php echo $lang->story->caseCount?>' class='w-30px'><?php echo $lang->story->caseCountAB;?></th>
-          <th class='w-110px {sorter:false}'><?php echo $lang->actions;?></th>
-        </tr>
-      </thead>
-      <tbody id='storyTableList' class='sortable'>
-        <?php
-        $totalEstimate = 0;
-        $canBatchEdit  = common::hasPriv('story', 'batchEdit');
-        $canBatchClose = common::hasPriv('story', 'batchClose');
-        ?>
-        <?php foreach($stories as $key => $story):?>
-        <?php
-        $storyLink      = $this->createLink('story', 'view', "storyID=$story->id&version=$story->version&from=project&param=$project->id");
-        $totalEstimate += $story->estimate;
-        ?>
-        <tr class='text-center' id="story<?php echo $story->id;?>" data-id='<?php echo $story->id;?>' data-order='<?php echo $story->order ?>' data-estimate='<?php echo $story->estimate?>' data-cases='<?php echo zget($storyCases, $story->id, 0)?>'>
-          <td class='cell-id'>
-            <?php if($canBatchEdit or $canBatchClose):?>
-            <input type='checkbox' name='storyIDList[<?php echo $story->id;?>]' value='<?php echo $story->id;?>' />
+  <div class="main-col">
+    <form class='main-table table-story' method='post' data-ride='table' id='projectStoryForm'>
+      <div class="table-header">
+        <div class="table-statistic"><?php echo $summary;?></div>
+        <nav class="btn-toolbar pull-right"></nav>
+      </div>
+      <table class='table has-sort-head' id='storyList'>
+        <thead>
+          <tr>
+          <?php
+          $totalEstimate = 0;
+          $canBatchEdit  = common::hasPriv('story', 'batchEdit');
+          $canBatchClose = common::hasPriv('story', 'batchClose');
+          ?>
+          <?php $vars = "projectID={$project->id}&orderBy=%s&type=$type&param=$param&recTotal={$pager->recTotal}&recPerPage={$pager->recPerPage}"; ?>
+            <th class='c-id'>
+              <?php if($canBatchEdit or $canBatchClose):?>
+              <div class="checkbox-primary check-all" title="<?php echo $lang->selectAll?>">
+                <label></label>
+              </div>
+              <?php endif;?>
+              <?php common::printOrderLink('id', $orderBy, $vars, $lang->idAB);?>
+            </th>
+            <?php if($canOrder):?>
+            <th class='w-80px'> <?php common::printOrderLink('order',      $orderBy, $vars, $lang->project->updateOrder);?></th>
             <?php endif;?>
-            <?php echo html::a($storyLink, sprintf('%03d', $story->id));?>
-          </td>
-          <?php if($canOrder):?>
-          <td class='sort-handler'><i class='icon-move'></i></td>
+            <th class='w-pri'>  <?php common::printOrderLink('pri',        $orderBy, $vars, $lang->priAB);?></th>
+            <th> <?php common::printOrderLink('title',      $orderBy, $vars, $lang->story->title);?></th>
+            <th class='w-user'> <?php common::printOrderLink('openedBy',   $orderBy, $vars, $lang->openedByAB);?></th>
+            <th class='w-80px'> <?php common::printOrderLink('assignedTo', $orderBy, $vars, $lang->assignedToAB);?></th>
+            <th class='w-80px'> <?php common::printOrderLink('estimate',   $orderBy, $vars, $lang->story->estimateAB);?></th>
+            <th class='w-80px'> <?php common::printOrderLink('status',     $orderBy, $vars, $lang->statusAB);?></th>
+            <th class='w-70px'> <?php common::printOrderLink('stage',      $orderBy, $vars, $lang->story->stageAB);?></th>
+            <th title='<?php echo $lang->story->taskCount?>' class='w-30px'><?php echo $lang->story->taskCountAB;?></th>
+            <th title='<?php echo $lang->story->bugCount?>'  class='w-30px'><?php echo $lang->story->bugCountAB;?></th>
+            <th title='<?php echo $lang->story->caseCount?>' class='w-30px'><?php echo $lang->story->caseCountAB;?></th>
+            <th class='w-160px'><?php echo $lang->actions;?></th>
+          </tr>
+        </thead>
+        <tbody id='storyTableList' class='sortable'>
+          <?php foreach($stories as $key => $story):?>
+          <?php
+          $storyLink      = $this->createLink('story', 'view', "storyID=$story->id&version=$story->version&from=project&param=$project->id");
+          $totalEstimate += $story->estimate;
+          ?>
+          <tr id="story<?php echo $story->id;?>" data-id='<?php echo $story->id;?>' data-order='<?php echo $story->order ?>' data-estimate='<?php echo $story->estimate?>' data-cases='<?php echo zget($storyCases, $story->id, 0)?>'>
+            <td class='c-id'>
+              <div class="checkbox-primary">
+                <?php if($canBatchEdit or $canBatchClose):?>
+                <input type='checkbox' name='storyIDList[<?php echo $story->id;?>]' value='<?php echo $story->id;?>' />
+                <label></label>
+                <?php endif;?>
+                <?php printf('%03d', $story->id);?>
+            </td>
+            <?php if($canOrder):?>
+            <td class='sort-handler'><i class='icon-move'></i></td>
+            <?php endif;?>
+            <td><span class='<?php echo 'pri' . zget($lang->story->priList, $story->pri, $story->pri)?>'><?php echo zget($lang->story->priList, $story->pri, $story->pri);?></span></td>
+            <td class='text-left' title="<?php echo $story->title?>">
+              <?php if(isset($branchGroups[$story->product][$story->branch])) echo "<span class='label label-info label-badge'>" . $branchGroups[$story->product][$story->branch] . '</span>';?>
+              <?php echo html::a($storyLink,$story->title, null, "style='color: $story->color'");?>
+            </td>
+            <td><?php echo $users[$story->openedBy];?></td>
+            <td><?php echo $users[$story->assignedTo];?></td>
+            <td><?php echo $story->estimate;?></td>
+            <td class='story-<?php echo $story->status;?>'><?php echo zget($lang->story->statusList, $story->status);?></td>
+            <td><?php echo $lang->story->stageList[$story->stage];?></td>
+            <td class='linkbox'>
+              <?php
+              $tasksLink = $this->createLink('story', 'tasks', "storyID=$story->id&projectID=$project->id");
+              $storyTasks[$story->id] > 0 ? print(html::a($tasksLink, $storyTasks[$story->id], '', 'class="iframe"')) : print(0);
+              ?>
+            <td>
+              <?php
+              $bugsLink = $this->createLink('story', 'bugs', "storyID=$story->id&projectID=$project->id");
+              $storyBugs[$story->id] > 0 ? print(html::a($bugsLink, $storyBugs[$story->id], '', 'class="iframe"')) : print(0);
+              ?>
+            </td>
+            <td>
+              <?php
+              $casesLink = $this->createLink('story', 'cases', "storyID=$story->id&projectID=$project->id");
+              $storyCases[$story->id] > 0 ? print(html::a($casesLink, $storyCases[$story->id], '', 'class="iframe"')) : print(0);
+              ?>
+            </td>
+            <td class='c-actions'>
+              <?php
+              $hasDBPriv = common::hasDBPriv($project, 'project');
+              $param = "projectID={$project->id}&story={$story->id}&moduleID={$story->module}";
+
+              $lang->task->create = $lang->project->wbs;
+              if(commonModel::isTutorialMode())
+              {
+                  $wizardParams = helper::safe64Encode($param);
+                  echo html::a($this->createLink('tutorial', 'wizard', "module=task&method=create&params=$wizardParams"), "<i class='icon-plus-border'></i>",'', "class='btn btn-link btn-task-create' title='{$lang->project->wbs}'");
+              }
+              else
+              {
+                  if($hasDBPriv) common::printIcon('task', 'create', $param, '', 'list', 'plus', '', 'btn-task-create');
+              }
+
+              $lang->task->batchCreate = $lang->project->batchWBS;
+              if($hasDBPriv) common::printIcon('task', 'batchCreate', "projectID={$project->id}&story={$story->id}", '', 'list', 'plus-sign');
+
+              $lang->testcase->batchCreate = $lang->testcase->create;
+              if($productID && $hasDBPriv) common::printIcon('testcase', 'batchCreate', "productID=$story->product&branch=$story->branch&moduleID=$story->module&storyID=$story->id", '', 'list', 'sitemap');
+
+              if(common::hasPriv('project', 'unlinkStory', $project))
+              {
+                  $unlinkURL = $this->createLink('project', 'unlinkStory', "projectID=$project->id&storyID=$story->id&confirm=yes");
+                  echo html::a("javascript:ajaxDelete(\"$unlinkURL\",\"storyList\",confirmUnlinkStory)", '<i class="icon-unlink"></i>', '', "class='btn btn-link' title='{$lang->project->unlinkStory}'");
+              }
+              ?>
+            </td>
+          </tr>
+          <?php endforeach;?>
+        </tbody>
+      </table>
+      <?php if($stories):?>
+      <div class='table-footer'>
+        <?php if($canBatchEdit or $canBatchClose):?>
+        <div class="checkbox-primary check-all"><label><?php echo $lang->selectAll?></label></div>
+        <?php endif;?>
+        <div class='table-actions btn-toolbar'>
+          <?php
+          if($canBatchEdit)
+          {
+              $actionLink = $this->createLink('story', 'batchEdit', "productID=0&projectID=$project->id");
+              echo html::commonButton($lang->edit, "data-form-action='$actionLink'");
+          }
+          if($canBatchClose)
+          {
+              $actionLink = $this->createLink('story', 'batchClose', "productID=0&projectID=$project->id");
+              echo html::commonButton($lang->close, "data-form-action='$actionLink'");
+          }
+          ?>
+          <?php if(common::hasPriv('story', 'batchChangeStage')):?>
+          <div class="btn-group dropup">
+            <button data-toggle="dropdown" type="button" class="btn"><?php echo $lang->story->stageAB;?> <span class="caret"></span></button>
+            <?php
+            echo "<ul class='dropdown-menu'>";
+            $lang->story->stageList[''] = $lang->null;
+            foreach($lang->story->stageList as $key => $stage)
+            {
+                $actionLink = $this->createLink('story', 'batchChangeStage', "stage=$key");
+                echo "<li>" . html::a('#', $stage, '', "onclick=\"setFormAction('$actionLink','hiddenwin')\"") . "</li>";
+            }
+            echo '</ul>';
+            ?>
+          </div>
           <?php endif;?>
-          <td><span class='<?php echo 'pri' . zget($lang->story->priList, $story->pri, $story->pri)?>'><?php echo zget($lang->story->priList, $story->pri, $story->pri);?></span></td>
-          <td class='text-left' title="<?php echo $story->title?>">
-            <?php if(isset($branchGroups[$story->product][$story->branch])) echo "<span class='label label-info label-badge'>" . $branchGroups[$story->product][$story->branch] . '</span>';?>
-            <?php echo html::a($storyLink,$story->title, null, "style='color: $story->color'");?>
-          </td>
-          <td><?php echo $users[$story->openedBy];?></td>
-          <td><?php echo $users[$story->assignedTo];?></td>
-          <td><?php echo $story->estimate;?></td>
-          <td class='story-<?php echo $story->status;?>'><?php echo zget($lang->story->statusList, $story->status);?></td>
-          <td><?php echo $lang->story->stageList[$story->stage];?></td>
-          <td class='linkbox'>
-            <?php
-            $tasksLink = $this->createLink('story', 'tasks', "storyID=$story->id&projectID=$project->id");
-            $storyTasks[$story->id] > 0 ? print(html::a($tasksLink, $storyTasks[$story->id], '', 'class="iframe"')) : print(0);
-            ?>
-          <td>
-            <?php
-            $bugsLink = $this->createLink('story', 'bugs', "storyID=$story->id&projectID=$project->id");
-            $storyBugs[$story->id] > 0 ? print(html::a($bugsLink, $storyBugs[$story->id], '', 'class="iframe"')) : print(0);
-            ?>
-          </td>
-          <td>
-            <?php
-            $casesLink = $this->createLink('story', 'cases', "storyID=$story->id&projectID=$project->id");
-            $storyCases[$story->id] > 0 ? print(html::a($casesLink, $storyCases[$story->id], '', 'class="iframe"')) : print(0);
-            ?>
-          </td>
-          <td>
-            <?php
-            $hasDBPriv = common::hasDBPriv($project, 'project');
-            $param = "projectID={$project->id}&story={$story->id}&moduleID={$story->module}";
-
-            $lang->task->create = $lang->project->wbs;
-            if(commonModel::isTutorialMode())
-            {
-                $wizardParams = helper::safe64Encode($param);
-                echo html::a($this->createLink('tutorial', 'wizard', "module=task&method=create&params=$wizardParams"), "<i class='icon-plus-border'></i>",'', "class='btn-icon btn-task-create' title='{$lang->project->wbs}'");
-            }
-            else
-            {
-                if($hasDBPriv) common::printIcon('task', 'create', $param, '', 'list', 'plus-border', '', 'btn-task-create');
-            }
-
-            $lang->task->batchCreate = $lang->project->batchWBS;
-            if($hasDBPriv) common::printIcon('task', 'batchCreate', "projectID={$project->id}&story={$story->id}", '', 'list', 'plus-sign');
-
-            $lang->testcase->batchCreate = $lang->testcase->create;
-            if($productID && $hasDBPriv) common::printIcon('testcase', 'batchCreate', "productID=$story->product&branch=$story->branch&moduleID=$story->module&storyID=$story->id", '', 'list', 'sitemap');
-
-            if(common::hasPriv('project', 'unlinkStory', $project))
-            {
-                $unlinkURL = $this->createLink('project', 'unlinkStory', "projectID=$project->id&storyID=$story->id&confirm=yes");
-                echo html::a("javascript:ajaxDelete(\"$unlinkURL\",\"storyList\",confirmUnlinkStory)", '<i class="icon-unlink"></i>', '', "class='btn-icon' title='{$lang->project->unlinkStory}'");
-            }
-            ?>
-          </td>
-        </tr>
-        <?php endforeach;?>
-      </tbody>
-      <tfoot>
-        <tr>
-          <td colspan='<?php echo $canOrder ? 13 : 12;?>'>
-            <div class='table-actions clearfix'>
-            <?php
-            $storyInfo = sprintf($lang->project->productStories, inlink('linkStory', "project={$project->id}"));
-            if(count($stories))
-            {
-              if($canBatchEdit or $canBatchClose) echo html::selectButton();
-
-                echo "<div class='btn-group dropup'>";
-                if($canBatchEdit)
-                {
-                    $actionLink = $this->createLink('story', 'batchEdit', "productID=0&projectID=$project->id");
-                    echo html::commonButton($lang->edit, "onclick=\"setFormAction('$actionLink')\"");
-                }
-                echo "<button id='moreAction' type='button' class='btn dropdown-toggle' data-toggle='dropdown'><span class='caret'></span></button>";
-                echo "<ul class='dropdown-menu' id='moreActionMenu'>";
-                if($canBatchClose)
-                {
-                    $actionLink = $this->createLink('story', 'batchClose', "productID=0&projectID=$project->id");
-                    $misc       = "onclick=\"setFormAction('$actionLink')\"";
-                    echo '<li>' . html::a('#', $lang->close, '', $misc) . '</li>';
-                }
-
-                if(common::hasPriv('story', 'batchChangeStage'))
-                {
-                    echo "<li class='dropdown-submenu'>";
-                    echo html::a('javascript:;', $lang->story->stageAB, '', "id='stageItem'");
-                    echo "<ul class='dropdown-menu'>";
-                    $lang->story->stageList[''] = $lang->null;
-                    foreach($lang->story->stageList as $key => $stage)
-                    {
-                        $actionLink = $this->createLink('story', 'batchChangeStage', "stage=$key");
-                        echo "<li>" . html::a('#', $stage, '', "onclick=\"setFormAction('$actionLink','hiddenwin')\"") . "</li>";
-                    }
-                    echo '</ul></li>';
-                }
-
-                if(common::hasPriv('project', 'batchUnlinkStory'))
-                {
-                    $actionLink = $this->createLink('project', 'batchUnlinkStory', "projectID=$project->id");
-                    $misc       = "onclick=\"setFormAction('$actionLink')\"";
-                    echo '<li>' . html::a('#', $lang->project->unlinkStory, '', $misc) . '</li>';
-                }
-                echo '</ul></div>';
-                $storyInfo = $summary;
-            }
-            echo "<div class='text'>{$storyInfo}</div>";
-            ?>
-            </div>
-            <?php echo $pager->show();?>
-          </td>
-        </tr>
-      </tfoot>
-    </table>
-  </form>
+          <?php 
+          if(common::hasPriv('project', 'batchUnlinkStory'))
+          {
+              $actionLink = $this->createLink('project', 'batchUnlinkStory', "projectID=$project->id");
+              echo html::commonButton($lang->project->unlinkStory, "data-form-action='$actionLink'");
+          }
+          ?>
+        </div>
+        <?php echo $pager->show('right', 'pagerjs');?>
+      </div>
+      <?php endif;?>
+    </form>
+  </div>
 </div>
 
 <div class="modal fade" id="linkStoryByPlan">
diff --git a/module/project/view/storykanban.html.php b/module/project/view/storykanban.html.php
index 6c42f922d0..ce2cafdca7 100644
--- a/module/project/view/storykanban.html.php
+++ b/module/project/view/storykanban.html.php
@@ -10,12 +10,12 @@
 ?>
 <?php include '../../common/view/header.html.php';?>
 <?php js::set('confirmUnlinkStory', $lang->project->confirmUnlinkStory)?>
-<div id='featurebar'>
-  <ul class='nav'>
-    <li><?php if(common::hasPriv('project', 'story')) echo html::a($this->createLink('project', 'story', "project=$project->id"), $lang->project->story);?></li>
-    <li class='active'><?php if(common::hasPriv('project', 'storykanban')) echo html::a($this->createLink('project', 'storykanban', "project=$project->id"), $lang->project->kanban);?></li>
-  </ul>
-  <div class='actions'>
+<div id="mainMenu" class="clearfix">
+  <div class="btn-toolbar pull-left">
+    <?php if(common::hasPriv('project', 'story')) echo html::a($this->createLink('project', 'story', "project=$project->id"), "<span class='text'>{$lang->project->story}</span>", '', "class='btn btn-link'");?>
+    <?php if(common::hasPriv('project', 'storykanban')) echo html::a($this->createLink('project', 'storykanban', "project=$project->id"), "<span class='text'>{$lang->project->kanban}</span>", '', "class='btn btn-link btn-active-text'");?>
+  </div>
+  <div class="btn-toolbar pull-right">
     <div class='btn-group'>
     <?php 
     common::printIcon('story', 'export', "productID=$productID&orderBy=id_desc", '', 'button', '', '', 'export');
@@ -26,75 +26,77 @@
     if(commonModel::isTutorialMode())
     {
         $wizardParams = helper::safe64Encode("project=$project->id");
-        echo html::a($this->createLink('tutorial', 'wizard', "module=project&method=linkStory&params=$wizardParams"), "<i class='icon-link'></i> {$lang->project->linkStory}",'', "class='btn link-story-btn'");
+        echo html::a($this->createLink('tutorial', 'wizard', "module=project&method=linkStory&params=$wizardParams"), "<i class='icon-link'></i> {$lang->project->linkStory}",'', "class='btn btn-link link-story-btn'");
     }
     else
     {
-        common::printIcon('project', 'linkStory', "project=$project->id", '', 'button', 'link', '', 'link-story-btn');
+        common::printIcon('project', 'linkStory', "project=$project->id", '', 'button', 'link', '', 'btn-link link-story-btn');
     }
     ?>
     </div>
   </div>
-  <div id='querybox' class='show'></div>
 </div>
-<?php
-$cols    = array('projected', 'developing', 'developed', 'testing', 'tested', 'verified', 'released');
-$account = $this->app->user->account;
-?>
-<div id='kanban'>
-  <table class='boards-layout table table-fixed' id='kanbanHeader'>
-    <thead>
-      <tr>
-        <?php foreach ($cols as $col):?>
-        <th class='col-<?php echo $col?>'><?php echo $lang->story->stageList[$col];?></th>
-        <?php endforeach;?>
-      </tr>
-    </thead>
-  </table>
-  <table class='boards-layout table active-disabled table-bordered table-fixed' id='kanbanWrapper'>
-    <thead>
-      <tr>
-        <?php foreach($cols as $col):?>
-        <th class='col-<?php echo $col?>'></th>
-        <?php endforeach;?>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <?php foreach($cols as $col):?>
-        <td class='col-droppable col-<?php echo $col?>' data-id='<?php echo $col?>'>
-          <?php if(!empty($stories[$col])):?>
-          <?php foreach($stories[$col] as $story):?>
-          <div class='board board-story board-story-<?php echo $col; ?>' data-id='<?php echo $story->id?>' id='story-<?php echo $story->id?>'>
-            <div class='board-title'>
-              <?php echo html::a($this->createLink('story', 'view', "story=$story->id", '', true), $story->title, '', 'class="kanbanFrame" title="' . $story->title . '"');?>
-              <div class='board-actions'>
-                <button type='button' class='btn btn-mini btn-link btn-info-toggle'><i class='icon-angle-down'></i></button>
-                <div class='dropdown'>
-                  <button type='button' class='btn btn-mini btn-link dropdown-toggle' data-toggle='dropdown'>
-                    <span class='icon-ellipsis-v'></span>
-                  </button>
-                  <div class='dropdown-menu' style='left:-20px'>
-                    <?php echo (common::hasPriv('project', 'unlinkStory')) ? html::a($this->createLink('project', 'unlinkStory', "story=$story->id"), $lang->project->unlinkStory, 'hiddenwin') : '';?>
+<div id='querybox' class='show'></div>
+<div id="mainContent" class="main-content">
+  <?php
+  $cols    = array('projected', 'developing', 'developed', 'testing', 'tested', 'verified', 'released');
+  $account = $this->app->user->account;
+  ?>
+  <div id='kanban'>
+    <table class='boards-layout table table-fixed' id='kanbanHeader'>
+      <thead>
+        <tr>
+          <?php foreach ($cols as $col):?>
+          <th class='col-<?php echo $col?>'><?php echo $lang->story->stageList[$col];?></th>
+          <?php endforeach;?>
+        </tr>
+      </thead>
+    </table>
+    <table class='boards-layout table active-disabled table-bordered table-fixed' id='kanbanWrapper'>
+      <thead>
+        <tr>
+          <?php foreach($cols as $col):?>
+          <th class='col-<?php echo $col?>'></th>
+          <?php endforeach;?>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <?php foreach($cols as $col):?>
+          <td class='col-droppable col-<?php echo $col?>' data-id='<?php echo $col?>'>
+            <?php if(!empty($stories[$col])):?>
+            <?php foreach($stories[$col] as $story):?>
+            <div class='board board-story board-story-<?php echo $col; ?>' data-id='<?php echo $story->id?>' id='story-<?php echo $story->id?>'>
+              <div class='board-title'>
+                <?php echo html::a($this->createLink('story', 'view', "story=$story->id", '', true), $story->title, '', 'class="kanbanFrame" title="' . $story->title . '"');?>
+                <div class='board-actions'>
+                  <button type='button' class='btn btn-mini btn-link btn-info-toggle'><i class='icon-angle-down'></i></button>
+                  <div class='dropdown'>
+                    <button type='button' class='btn btn-mini btn-link dropdown-toggle' data-toggle='dropdown'>
+                      <span class='icon-ellipsis-v'></span>
+                    </button>
+                    <div class='dropdown-menu' style='left:-20px'>
+                      <?php echo (common::hasPriv('project', 'unlinkStory')) ? html::a($this->createLink('project', 'unlinkStory', "story=$story->id"), $lang->project->unlinkStory, 'hiddenwin') : '';?>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div class='board-footer clearfix'>
-              <span class='story-id board-id' title='<?php echo $lang->story->id?>'><?php echo $story->id?></span> 
-              <span class='story-pri pri-<?php echo $story->pri?>' title='<?php echo $lang->story->pri?>'></span>
-              <div class='pull-right'>
-                <span class='text-left' title='<?php echo $lang->story->status?>'><?php echo zget($this->lang->story->statusList, $story->status, '');?></span>
+              <div class='board-footer clearfix'>
+                <span class='story-id board-id' title='<?php echo $lang->story->id?>'><?php echo $story->id?></span> 
+                <span class='story-pri pri-<?php echo $story->pri?>' title='<?php echo $lang->story->pri?>'></span>
+                <div class='pull-right'>
+                  <span class='text-left' title='<?php echo $lang->story->status?>'><?php echo zget($this->lang->story->statusList, $story->status, '');?></span>
+                </div>
               </div>
             </div>
-          </div>
-          <?php endforeach?>
-          <?php endif?>
-        </td>
-        <?php endforeach;?>
-      </tr>
-    </tbody>
-  </table>
+            <?php endforeach?>
+            <?php endif?>
+          </td>
+          <?php endforeach;?>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
 <?php js::set('projectID', $projectID);?>
 <?php include '../../common/view/footer.html.php';?>