Modernized tabBar [JENKINS-24030]

jenkinsci · Aug 5, 2014 · 2de93f8 · 2de93f8
1 parent bc6254b
commit 2de93f8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 47 deletions.
diff --git a/core/src/main/resources/lib/layout/tab.jelly b/core/src/main/resources/lib/layout/tab.jelly
@@ -30,35 +30,16 @@ THE SOFTWARE.
 -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core">
-  <j:choose>
-    <j:when test="${tabPass=='pass1'}">
-      <!-- in the 1st pass we draw the dummy top row to get the 'dent' right -->
-      <j:choose>
-        <j:when test="${active}">
-          <td class="active" rowspan="2">${name}</td>
-          <j:set scope="parent" var="activeIndex" value="${tabIndex}" />
-        </j:when>
-        <j:otherwise>
-          <td style="height:3px; padding:0px"></td>
-        </j:otherwise>
-      </j:choose>
-    </j:when>
-    <j:otherwise>
-      <!-- in the 2nd pass we draw the real tabs -->
-      <j:if test="${tabIndex!=activeIndex}">
-        <j:choose>
-          <j:when test="${tabIndex lt activeIndex}">
-            <j:set var="cssClass" value="noRight" />
-          </j:when>
-          <j:when test="${tabIndex gt activeIndex}">
-            <j:set var="cssClass" value="noLeft" />
-          </j:when>
-        </j:choose>
-        <td class="inactive ${cssClass}">
-          <a href="${href}" title="${attrs.title}">${name}</a>
-        </td>
-      </j:if>
-    </j:otherwise>
-  </j:choose>
+  <div class="tab">
+    <j:choose>
+      <j:when test="${active}">
+        <input type="radio" id="tab-${tabBarId}-${tabIndex}" name="tab-group-${tabBarId}" checked="checked" />
+      </j:when>
+      <j:otherwise>
+        <input type="radio" id="tab-${tabBarId}-${tabIndex}" name="tab-group-${tabBarId}" />
+      </j:otherwise>
+    </j:choose>
+    <a href="${href}" class="${name.equals('+')?'addTab':''}">${name}</a>
+  </div>
   <j:set scope="parent" var="tabIndex" value="${tabIndex+1}" />
 </j:jelly>
diff --git a/core/src/main/resources/lib/layout/tabBar.jelly b/core/src/main/resources/lib/layout/tabBar.jelly
@@ -24,21 +24,12 @@ THE SOFTWARE.
 
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:d="jelly:define" xmlns:st="jelly:stapler">
-  <table cellpadding="0" cellspacing="0" id="viewList">
-    <j:set var="tab" value="${tabs}" />
-    <!-- dummy row to get spacing right -->
-    <tr style="height:3px;">
-      <td style="height:3px; padding:0px"></td>
-      <j:set var="tabIndex" value="0" />
-      <j:set var="tabPass" value="pass1" />
-      <d:invokeBody />
-    </tr>
-    <tr>
-      <td style="border: none; border-bottom: 1px solid #bbb;"><st:nbsp/></td>
-      <j:set var="tabIndex" value="0" />
-      <j:set var="tabPass" value="pass2" />
-      <d:invokeBody />
-      <td class="filler"><st:nbsp/></td>
-    </tr>
-  </table>
+
+  <!-- Use the current millis time as an id for the tab group -->
+  <j:set scope="parent" var="tabBarId" value="${h.getCurrentTime().getTime()}" />
+  <div class="tabBar">
+    <d:invokeBody/>
+  </div>
+  <div class="tabBarBaseline"></div>
+
 </j:jelly>
diff --git a/war/src/main/webapp/css/style.css b/war/src/main/webapp/css/style.css
@@ -1429,3 +1429,51 @@ table#legend-table td {
     color: #f8f8f8;
     border: 1px solid #e39280;
 }
+
+/* tabBar */
+
+.tabBar {
+  clear: both;
+  overflow: auto;
+}
+.tabBar .tab {
+  float: left;
+  margin-left: 3px;
+}
+.tabBar .tab:first-child {
+  margin-left: 15px;
+}
+.tabBar .tab a {
+  position: relative;
+  display: block;
+  background: #eee;
+  text-decoration: none;
+  color: #000;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+.tabBar .tab a:hover {
+  background: #d1d1d1;
+}
+.tabBar .tab a.addTab {
+  background: #d8efff;
+}
+.tabBar .tab a.addTab:hover {
+  background: #bed5e5;
+}
+.tabBar .tab [type=radio] {
+  display: none;
+}
+.tabBar [type=radio]:checked ~ a {
+  background: white;
+  border-bottom: 1px solid white;
+  z-index: 2;
+}
+.tabBarBaseline {
+  position: relative;
+  top: -1px;
+  border-top: 1px solid #ccc;
+  z-index: 1;
+}