bitbake: toastergui: Implement new top navigation design

Additional items for top level navigation. This is part of a wider
navigation redesign.

[YOCTO #7329]

(Bitbake rev: 456a4a6782d3098cc9abb39659a619fdcf52eb01)

Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: Ed Bartosh <ed.bartosh@linux.intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

bitbake/lib/toaster/toastergui/static/css/default.css

@@ -22,7 +22,7 @@
 .get-help-red { color: #B94A48; font-size: 16px; padding-left: 2px; }
 .get-help-red:hover { color: #943A38; cursor: pointer; }
 .build-form>i:first-of-type { margin-left: 5px; }
-.manual { margin: 11px 15px;}
+.manual { margin: 11px 15px 0 11px;}
 .heading-help { font-size: 14px; }
 
 /* Styles for the external link */
@@ -163,7 +163,7 @@ table { table-layout: fixed; word-wrap: break-word; }
 /* Configuration styles */
 .icon-trash { color: #B94A48; font-size: 16px; padding-left: 5px; }
 .icon-trash:hover { color: #943A38; text-decoration: none; cursor: pointer; }
-.icon-pencil, .icon-download-alt, .icon-refresh, .icon-star-empty, .icon-star, .icon-tasks { font-size: 16px; color: #0088CC; padding-left: 2px; }
+.icon-pencil, .icon-download-alt, .icon-refresh, .icon-star-empty, .icon-star  { font-size: 16px; color: #0088CC; padding-left: 2px; }
 .icon-pencil:hover, .icon-download-alt:hover, .icon-refresh:hover, .icon-star-empty:hover, .icon-star:hover, .icon-tasks:hover { color: #005580; text-decoration: none; cursor: pointer; }
 .icon-share { padding-left: 2px; }
 .alert-success .icon-refresh, .alert-success .icon-tasks { color: #468847; }
@@ -308,3 +308,7 @@ thead .add-del-layers { width: 124px; }
   }
 }
 /* End copied in from newer version of Font-Awesome 4.3.0 */
+
+.top-padded {
+  padding-top: 60px;
+}

bitbake/lib/toaster/toastergui/templates/base.html

@@ -69,8 +69,9 @@
     Loading <i class="fa-pulse icon-spinner"></i>
   </div>
 
-<div class="navbar navbar-static-top">
-    <div class="navbar-inner">
+<div class="navbar navbar-fixed-top">
+ <div class="navbar-inner">
+   <div class="container-fluid">
             <a class="brand logo" href="#"><img src="{% static 'img/logo.png' %}" class="" alt="Yocto logo project"/></a>
             <span class="brand">
                 <a href="/">Toaster</a>
@@ -78,6 +79,24 @@
                     <i class="icon-info-sign" title="<strong>Toaster version information</strong>" data-content="<dl><dt>Branch</dt><dd>{{TOASTER_BRANCH}}</dd><dt>Revision</dt><dd>{{TOASTER_REVISION}}</dd></dl>"></i>
                 {% endif %}
             </span>
+<ul class="nav">
+
+  <li {% if "builds" in  request.path  %}
+       class="active"
+      {% endif %}>
+    <a href="{% url 'all-builds' %}">
+      <i class="icon-tasks"></i>
+      All builds
+    </a>
+  </li>
+  <li {% if "projects" in  request.path  %}
+       class="active"
+      {% endif %}>
+    <a href="{% url 'all-projects' %}">
+      <i class="icon-folder-open"></i>
+      All projects
+    </a>
+  </li>                                                                         </ul>
             <a class="pull-right manual" target="_blank" href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html">
                 <i class="icon-book"></i>
                 Toaster manual
@@ -128,12 +147,15 @@
 
 
     </div>
+ </div>
 </div>
 
-<div class="container-fluid">
+<div class="container-fluid top-padded">
+<div class="row-fluid">
 {% block pagecontent %}
 {% endblock %}
 </div>
+</div>
 </body>
 </html>
 

bitbake/lib/toaster/toastergui/templates/basetable_top_projectbuilds.html

@@ -1,14 +0,0 @@
-{% extends "basetable_top.html" %}
-
-{%block custombuttons %}
-  <div class="btn-group builds-projects">
-    <button class="btn dropdown-toggle" data-toggle="dropdown">
-        <span class="selection">Show all projects</span>
-        <i class="icon-caret-down"></i>
-    </button>
-    <ul class="dropdown-menu">
-        <li><a href="{% url 'all-builds'%}">Show all builds</a></li>
-        <li><a href="{% url 'all-projects'%}">Show all projects</a></li>
-    </ul>
-  </div>
-{%endblock%}

bitbake/lib/toaster/toastergui/templates/projects.html

@@ -34,7 +34,7 @@
     </div>
 
   {% else %} {# We have builds to display #}
-  {% include "basetable_top_projectbuilds.html" %}
+  {% include "basetable_top.html" %}
   {% for o in objects %}
     <tr class="data">
       <td><a href="{% url 'project' o.id %}">{{o.name}}</a></td>