From c42ca921b24bf86bbef3d3bb8530d787c632bee0 Mon Sep 17 00:00:00 2001
From: Catouse <catouse@gmail.com>
Date: Wed, 4 May 2016 11:29:56 +0800
Subject: [PATCH]  * change style of module labels.

---
 module/bug/view/browse.html.php          |  7 +++----
 module/product/view/browse.html.php      |  7 +++----
 module/project/view/taskheader.html.php  | 13 ++++++++-----
 module/testcase/view/caseheader.html.php |  7 +++----
 www/theme/default/style.css              | 15 ++++++++++++---
 5 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/module/bug/view/browse.html.php b/module/bug/view/browse.html.php
index 43a9c98480..d5de88a79d 100644
--- a/module/bug/view/browse.html.php
+++ b/module/bug/view/browse.html.php
@@ -20,17 +20,16 @@ js::set('bugBrowseType', ($browseType == 'bymodule' and $this->session->bugBrows
 <div id='featurebar'>
   <ul class='nav'>
     <li>
-      <span>
+      <div class='label-angle<?php if($moduleID) echo ' with-close';?>'>
         <?php
         echo $moduleName;
         if($moduleID)
         {
             $removeLink = $browseType == 'bymodule' ? inlink('browse', "productID=$productID&branch=$branch&browseType=$browseType&param=0&orderBy=$orderBy&recTotal={$pager->recTotal}&recPerPage={$pager->recPerPage}") : 'javascript:removeCookieByKey("bugModule")';
-            echo '&nbsp;' . html::a($removeLink, "<i class='icon icon-remove'></i>", '', "class='text-muted'") . '&nbsp;';
+            echo html::a($removeLink, "<i class='icon icon-remove'></i>", '', "class='text-muted'");
         }
-        echo " <i class='icon-angle-right'></i>&nbsp; ";
         ?>
-      </span>
+      </div>
     </li>
     <?php foreach(customModel::getFeatureMenu($this->moduleName, $this->methodName) as $menuItem):?>
     <?php if(isset($menuItem->hidden)) continue;?>
diff --git a/module/product/view/browse.html.php b/module/product/view/browse.html.php
index 21b9ca699c..310d11c613 100644
--- a/module/product/view/browse.html.php
+++ b/module/product/view/browse.html.php
@@ -16,17 +16,16 @@
 <div id='featurebar'>
   <ul class='nav'>
     <li>
-      <span>
+      <div class='label-angle<?php if($moduleID) echo ' with-close';?>'>
         <?php
         echo $moduleName;
         if($moduleID)
         {
             $removeLink = $browseType == 'bymodule' ? inlink('browse', "productID=$productID&branch=$branch&browseType=$browseType&param=0&orderBy=$orderBy&recTotal={$pager->recTotal}&recPerPage={$pager->recPerPage}") : 'javascript:removeCookieByKey("storyModule")';
-            echo '&nbsp;' . html::a($removeLink, "<i class='icon icon-remove'></i>", '', "class='text-muted'") . '&nbsp;';
+            echo html::a($removeLink, "<i class='icon icon-remove'></i>", '', "class='text-muted'");
         }
-        echo " <i class='icon-angle-right'></i>&nbsp; "
         ?>
-      </span>
+      </div>
     </li>
     <?php foreach(customModel::getFeatureMenu($this->moduleName, $this->methodName) as $menuItem):?>
     <?php if(isset($menuItem->hidden)) continue;?>
diff --git a/module/project/view/taskheader.html.php b/module/project/view/taskheader.html.php
index 00d873b3a8..d4e6c3bbd3 100644
--- a/module/project/view/taskheader.html.php
+++ b/module/project/view/taskheader.html.php
@@ -1,27 +1,30 @@
 <div id='featurebar'>
   <ul class='nav'>
     <?php
-    echo '<li><span>';
+    echo '<li>';
     if(!empty($productID))
     {
+        echo '<div class="label-angle with-close">';
         $product    = $this->product->getById($productID);
         $removeLink = $browseType == 'byproduct' ? inlink('task', "projectID=$projectID&browseType=$status&param=0&orderBy=$orderBy&recTotal={$pager->recTotal}&recPerPage={$pager->recPerPage}") : 'javascript:removeCookieByKey("productBrowseParam")';
-        echo $product->name;
-        echo '&nbsp;' . html::a($removeLink, "<i class='icon icon-remove'></i>", '', "class='text-muted'") . '&nbsp;';
+        echo '<i class="icon icon-cube"></i> ' . $product->name;
+        echo html::a($removeLink, "<span class='close'>&times;</span>", '', "class='text-muted'");
     }
     elseif(!empty($moduleID))
     {
+        echo '<div class="label-angle with-close">';
         $module     = $this->tree->getById($moduleID);
         $removeLink = $browseType == 'bymodule' ? inlink('task', "projectID=$projectID&browseType=$status&param=0&orderBy=$orderBy&recTotal={$pager->recTotal}&recPerPage={$pager->recPerPage}") : 'javascript:removeCookieByKey("moduleBrowseParam")';
         echo $module->name;
-        echo '&nbsp;' . html::a($removeLink, "<i class='icon icon-remove'></i>", '', "class='text-muted'") . '&nbsp;';
+        echo html::a($removeLink, "<span class='close'>&times;</span>", '', "class='text-muted'");
     }
     else
     {
+        echo '<div class="label-angle">';
         $this->app->loadLang('tree');
         echo $this->lang->tree->all;
     }
-    echo " <i class='icon-angle-right'></i>&nbsp; </span></li>";
+    echo "</div></li>";
 
     foreach(customModel::getFeatureMenu('project', 'task') as $menuItem)
     {
diff --git a/module/testcase/view/caseheader.html.php b/module/testcase/view/caseheader.html.php
index 779e802eb3..e40bc532b3 100644
--- a/module/testcase/view/caseheader.html.php
+++ b/module/testcase/view/caseheader.html.php
@@ -2,17 +2,16 @@
 <div id='featurebar'>
   <ul class='nav'>
     <li>
-      <span>
+      <div class='label-angle<?php if($moduleID) echo ' with-close';?>'>
         <?php
         echo isset($moduleID) ? $moduleName : $this->lang->tree->all;
         if(!empty($moduleID))
         {
             $removeLink = $browseType == 'bymodule' ? inlink('browse', "productID=$productID&branch=$branch&browseType=$browseType&param=0&orderBy=$orderBy&recTotal={$pager->recTotal}&recPerPage={$pager->recPerPage}") : 'javascript:removeCookieByKey("caseModule")';
-            echo '&nbsp;' . html::a($removeLink, "<i class='icon icon-remove'></i>", '', "class='text-muted'") . '&nbsp;';
+            echo html::a($removeLink, "<i class='icon icon-remove'></i>", '', "class='text-muted'");
         }
-        echo " <i class='icon-angle-right'></i>&nbsp; ";
         ?>
-      </span>
+      </div>
     </li>
     <?php
     $hasBrowsePriv = common::hasPriv('testcase', 'browse');
diff --git a/www/theme/default/style.css b/www/theme/default/style.css
index 713eed45cf..dc64b60110 100644
--- a/www/theme/default/style.css
+++ b/www/theme/default/style.css
@@ -60,8 +60,17 @@ tr.text-center > td.text-right, tr.text-center > th.text-right {text-align: righ
 /* remove outline of links */
 a,a:focus,a:active {text-decoration: none; outline:none;}
 
-/* Lable */
+/* Label */
 .label-badge {padding: 2px 6px}
+.label-angle {background-color: #d3dff7; line-height: 24px; padding: 0 5px; position: relative; top: 2px; border: 1px solid #c6d2eb; margin-right: 18px; font-size: 13px; transition: all .2s; color: #114f8e}
+.label-angle > a {position: absolute; right: 0; top: 0; filter: alpha(opacity=0); opacity: 0}
+.label-angle.with-close:hover {padding-right: 18px;}
+.label-angle:hover > a {filter: alpha(opacity=100); opacity: 1}
+.label-angle:before, .label-angle:after {content: ' '; display: block; width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 13px; border-color: transparent transparent transparent #c6d2eb; position: absolute; right: -13px; top: -1px; z-index: 1}
+.label-angle:after {border-width: 12px 0 12px 12px; top: 0px; z-index: 2; right: -11px; border-color: transparent transparent transparent #d3dff7;}
+
+/* Label in table */
+.table .label.label-info {background: #d3dff7; border: 1px solid #c6d2eb; color: #114f8e;}
 
 /* dropdown */
 .dropdown-menu {min-width: 80px; padding: 4px 0; z-index:1020;}
@@ -373,8 +382,8 @@ body {font-size: 13px; color:#141414;padding-bottom: 40px;}
 #mainmenu .nav > li > a {display: block; margin-right: 3px; white-space:nowrap; padding:7px 15px; color:#E5E5E5; font-size: 14px; background:#114f8e;-webkit-box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.10);box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.10);}
 #mainmenu .nav > li > a:hover{background-color: #2e6dad;color: #fff; box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2);}
 #mainmenu .nav > li.active > a { background-color:#e5e5e5;color:#21841d; font-weight:bold;}
-#mainmenu .nav > li.custom-item {opacity: 0; transition: opacity .4s .6s}
-#mainmenu:hover .nav > li.custom-item {opacity: 1;}
+#mainmenu .nav > li.custom-item {filter: alpha(opacity=0); opacity: 0; transition: opacity .4s .6s}
+#mainmenu:hover .nav > li.custom-item {filter: alpha(opacity=100); opacity: 1;}
 #mainmenu .nav > li.custom-item > a {background-color: transparent; box-shadow: none}
 #mainmenu .nav > li.custom-item > a:hover {background-color: #2e6dad;color: #fff; box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2);}