[Toaster] [PATCH 13/20] toaster: build data Package details to Bootstrap 3

Belen Barros Pena belen.barros.pena at linux.intel.com
Thu Jun 9 06:24:26 PDT 2016


Make sure the pages showing details about packages built and installed
display correctly with Bootstrap 3.

Signed-off-by: Belen Barros Pena <belen.barros.pena at linux.intel.com>
---
 .../lib/toaster/toastergui/static/css/default.css  |  3 ++-
 .../templates/package_built_dependencies.html      | 12 +++++------
 .../toastergui/templates/package_built_detail.html |  8 ++++----
 .../toastergui/templates/package_detail_base.html  | 24 +++++++++++-----------
 .../templates/package_included_dependencies.html   |  8 ++++----
 .../templates/package_included_tabs.html           |  8 ++++----
 .../toaster/toastergui/templatetags/projecttags.py | 12 +++++------
 7 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index 1621383..b266f66 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -111,7 +111,8 @@ tbody > tr > td > .glyphicon-minus-sign { color: #a94442; }
 h1 > .glyphicon-edit,
 p.lead .glyphicon { font-size: 16px; }
 h2 > .glyphicon-question-sign,
-h3 > .glyphicon-question-sign { font-size: 14px; }
+h3 > .glyphicon-question-sign,
+.heading-help { font-size: 14px; }
 
 /* Create a class for wells without background colour */
 .well-transparent { background-color: transparent; }
diff --git a/bitbake/lib/toaster/toastergui/templates/package_built_dependencies.html b/bitbake/lib/toaster/toastergui/templates/package_built_dependencies.html
index e53eb9d..a5d5893 100644
--- a/bitbake/lib/toaster/toastergui/templates/package_built_dependencies.html
+++ b/bitbake/lib/toaster/toastergui/templates/package_built_dependencies.html
@@ -2,16 +2,16 @@
 {% load projecttags %}
 
 {% block tabcontent %}
-        <ul class="nav nav-pills">
+        <ul class="nav nav-tabs">
             <li class="">
                 <a href="{% url 'package_built_detail' build.id package.id %}">
-                    <i class="icon-question-sign get-help" title="Shows the files produced by this package."></i>
+                    <span class="glyphicon glyphicon-question-sign get-help" title="Shows the files produced by this package."></span>
                     Generated files ({{package.buildfilelist_package.count}})
                 </a>
             </li>
             <li class="active">
                 <a href="{% url 'package_built_dependencies' build.id package.id %}">
-                    <i class="icon-question-sign get-help" title="Shows the runtime packages required by this package."></i>
+                    <span class="glyphicon glyphicon-question-sign get-help" title="Shows the runtime packages required by this package."></span>
                     Runtime dependencies ({{dependency_count}})
                 </a>
             </li>
@@ -24,7 +24,7 @@
                 </div>
             {% else %}
                 <div class="alert alert-info">
-                    <strong>{{package.fullpackagespec}}</strong> is <strong>not included</strong> in any image. This page shows you the projected runtime dependencies if you include <strong>{{package.fullpackagespec}}</strong> in future builds.
+                    <strong>{{package.fullpackagespec}}</strong> is <strong>not included</strong> in any image. This page shows you the projected runtime dependencies if you were to include <strong>{{package.fullpackagespec}}</strong> in an image.
                 </div>
                 <table class="table table-bordered table-hover">
                     <thead>
@@ -64,7 +64,7 @@
                             <th>Version</th>
                             <th class="sizecol col-md-2">Size</th>
                             <th>
-                                <i class="icon-question-sign get-help" title="Five relationship types exist: recommends, suggests, provides, replaces and conflicts"></i>
+                                <span class="glyphicon glyphicon-question-sign get-help" title="Five relationship types exist: recommends, suggests, provides, replaces and conflicts"></span>
                                 Relationship type
                             </th>
                         </tr>
@@ -87,7 +87,7 @@
                             <td class="sizecol">{{other_dep.size|filtered_filesizeformat}}</td>
                             <td>
                                 {{other_dep.dep_type_display}}
-                                <i class="icon-question-sign get-help hover-help" title="{{other_dep.dep_type_help}}" ></i>
+                                <span class="glyphicon glyphicon-question-sign get-help hover-help" title="{{other_dep.dep_type_help}}" ></span>
                             </td>
                         </tr>
                     	{% endfor %}
diff --git a/bitbake/lib/toaster/toastergui/templates/package_built_detail.html b/bitbake/lib/toaster/toastergui/templates/package_built_detail.html
index 9be8ccb..0bdbc2a 100644
--- a/bitbake/lib/toaster/toastergui/templates/package_built_detail.html
+++ b/bitbake/lib/toaster/toastergui/templates/package_built_detail.html
@@ -6,13 +6,13 @@
         <!-- Generated Files -->
         {% if package.buildtargetlist_package.count == 0 %}
             {# Not included case #}
-            <ul class="nav nav-pills">
+            <ul class="nav nav-tabs">
                 <li class="active"> <a href="#">
-                    <i class="icon-question-sign get-help" title="Files added to a root file system when you include {{package.name}} in an image"></i>
+                    <span class="glyphicon glyphicon-question-sign get-help" title="Files added to a root file system when you include {{package.name}} in an image"></span>
                     Generated files ({{packageFileCount}})
                 </a></li>
                 <li class=""><a href="{% url 'package_built_dependencies' build.id package.id %}">
-                    <i class="icon-question-sign get-help" title="Projected runtime dependencies when you include {{package.name}} in an image"></i>
+                    <span class="glyphicon glyphicon-question-sign get-help" title="Projected runtime dependencies when you include {{package.name}} in an image"></span>
                     Runtime dependencies ({{dependency_count}})
                 </a></li>
             </ul>
@@ -21,7 +21,7 @@
             <!-- Package file list or if empty, alert pane -->
             {% if packageFileCount > 0 %}
                 <div class="alert alert-info">
-                    <strong>{{package.fullpackagespec}}</strong> is <strong>not included</strong> in any image. This page shows you the files added to an image root file system if you include <strong>{{package.fullpackagespec}}</strong> in future builds.
+                    <strong>{{package.fullpackagespec}}</strong> is <strong>not included</strong> in any image. This page shows you the files that would be added to an image root file system with <strong>{{package.fullpackagespec}}</strong> included in it.
                 </div>
                 {% include "tablesort.html" %}
                     <tbody>
diff --git a/bitbake/lib/toaster/toastergui/templates/package_detail_base.html b/bitbake/lib/toaster/toastergui/templates/package_detail_base.html
index 17562a8..d0e9ebf 100644
--- a/bitbake/lib/toaster/toastergui/templates/package_detail_base.html
+++ b/bitbake/lib/toaster/toastergui/templates/package_detail_base.html
@@ -14,8 +14,8 @@
     function fmtAliasHelp(package_name, alias, hover) {
         var r = null;
         if (alias != null && alias != '') {
-            r = '<span class="muted"> as ' + alias + '&nbsp';
-            r += '<i class="icon-question-sign get-help';
+            r = '<span class="text-muted"> as ' + alias + '&nbsp';
+            r += '<span class="glyphicon glyphicon-question-sign get-help';
             if (hover) {
                 r+= ' hover-help';
             }
@@ -23,9 +23,9 @@
                 r+= ' heading-help';
             }
             r += '"';
-            title = package_name + ' was renamed at packaging time and was installed on your system as ' + alias;
+						title = '<code>' + package_name + '</code> was renamed at packaging time and was installed on your system as <code>' + alias + '</code>';
             r += ' title="' + title + '">';
-            r += '</i>';
+						r += '</span>';
             r += '</span>';
             document.write(r);
         }
@@ -45,7 +45,7 @@
 {% block pagedetailinfomain %}
     <div class="row">
       <div class="col-md-12">
-        <div class="page-header">
+        <div class="page-header build-data">
             {% block mainheading %}
             <h1>{{package.fullpackagespec}}</h1>
             {% endblock %}
@@ -68,7 +68,7 @@
         <dl class="item-info">
             <dt>
                 Size
-                <i class="icon-question-sign get-help" title="The size of the package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The size of the package"></span>
             </dt>
             <dd>
                 {% comment %}
@@ -85,7 +85,7 @@
 
             <dt>
                 License
-                <i class="icon-question-sign get-help" title="The license under which this package is distributed"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The license under which this package is distributed"></span>
             </dt>
             <dd>{{package.license}}</dd>
 
@@ -101,7 +101,7 @@
 
             <dt>
                 Recipe
-                <i class="icon-question-sign get-help" title="The name of the recipe building this package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The name of the recipe building this package"></span>
             </dt>
             <dd>
                 {% if package.recipe_id > 0 %}
@@ -113,13 +113,13 @@
 
             <dt>
                 Recipe version
-                <i class="icon-question-sign get-help" title="The version of the recipe building this package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The version of the recipe building this package"></span>
             </dt>
             <dd>{{package.recipe.version}}</dd>
 
             <dt>
                 Layer
-                <i class="icon-question-sign get-help" title="The name of the layer providing the recipe that builds this package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The name of the layer providing the recipe that builds this package"></span>
             </dt>
             <dd>
                 {{package.recipe.layer_version.layer.name}}
@@ -136,13 +136,13 @@
             {% if package.recipe.layer_version.branch %}
             <dt>
                 Layer branch
-                <i class="icon-question-sign get-help" title="The Git branch of the layer providing the recipe that builds this package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The Git branch of the layer providing the recipe that builds this package"></span>
             </dt>
             <dd>{{package.recipe.layer_version.branch}}</dd>
             {% endif %}
             <dt>
                 Layer commit
-                <i class="icon-question-sign get-help" title="The Git commit of the layer providing the recipe that builds this package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The Git commit of the layer providing the recipe that builds this package"></span>
             </dt>
 
             <dd class="iscommit">{{package.recipe.layer_version.commit}}</dd>
diff --git a/bitbake/lib/toaster/toastergui/templates/package_included_dependencies.html b/bitbake/lib/toaster/toastergui/templates/package_included_dependencies.html
index 0672ba3..c1f3eec 100644
--- a/bitbake/lib/toaster/toastergui/templates/package_included_dependencies.html
+++ b/bitbake/lib/toaster/toastergui/templates/package_included_dependencies.html
@@ -59,7 +59,7 @@
                         <th>Version</th>
                         <th class='sizecol col-md-2'>Size</th>
                         <th>
-                            <i class="icon-question-sign get-help" title="Five relationship types exist: recommends, suggests, provides, replaces and conflicts"></i>
+                            <span class="glyphicon glyphicon-question-sign get-help" title="Five relationship types exist: recommends, suggests, provides, replaces and conflicts"></span>
                             Relationship type
                         </th>
                     </tr>
@@ -86,17 +86,17 @@
                                 <td class='sizecol'>{{other_dep.size|filtered_filesizeformat}} </td>
                                 <td>
                                     {{other_dep.dep_type_display}}
-                                    <i class="icon-question-sign get-help hover-help" title="{{other_dep.dep_type_help}}" ></i>
+                                    <span class="glyphicon glyphicon-question-sign get-help hover-help" title="{{other_dep.dep_type_help}}" ></span>
                                 </td>
                             </tr>
                         {% else %}
-                            <tr class="muted">
+                            <tr class="text-muted">
                                 <td>{{other_dep.name}}</td>
                                 <td>{{other_dep.version}}</td>
                                 <td></td>
                                 <td>
                                     {{other_dep.dep_type_display}}
-                                    <i class="icon-question-sign get-help hover-help" title="{{other_dep.dep_type_help}}" ></i>
+                                    <span class="glyphicon glyphicon-question-sign get-help hover-help" title="{{other_dep.dep_type_help}}" ></span>
                                 </td>
                             </tr>
                         {% endif %}
diff --git a/bitbake/lib/toaster/toastergui/templates/package_included_tabs.html b/bitbake/lib/toaster/toastergui/templates/package_included_tabs.html
index 958aa88..e89fa21 100644
--- a/bitbake/lib/toaster/toastergui/templates/package_included_tabs.html
+++ b/bitbake/lib/toaster/toastergui/templates/package_included_tabs.html
@@ -1,12 +1,12 @@
 
-    <ul class="nav nav-pills">
+    <ul class="nav nav-tabs">
     {% if active_tab == "detail" %}
         <li class="active">
     {% else %}
         <li class="">
     {% endif %}
             <a href="{% url 'package_included_detail' build.id target.id package.id %}">
-                <i class="icon-question-sign get-help" title="The files this package adds to the image root file system"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The files this package adds to the image root file system"></span>
                 Files in root file system ({{packageFileCount}})
             </a>
         </li>
@@ -16,7 +16,7 @@
         <li class="">
     {% endif %}
             <a href="{% url 'package_included_dependencies' build.id target.id package.id %}">
-                <i class="icon-question-sign get-help" title="Package runtime dependencies"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="Package runtime dependencies"></span>
                 Runtime dependencies ({{dependency_count}})
             </a>
         </li>
@@ -26,7 +26,7 @@
         <li class="">
     {% endif %}
             <a href="{% url 'package_included_reverse_dependencies' build.id target.id package.id %}">
-                <i class="icon-question-sign get-help" title="The package runtime reverse dependencies (i.e. the packages in this image that depend on this package). Reverse dependencies reflect only the 'depends' dependency type"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The package runtime reverse dependencies (i.e. the packages in this image that depend on this package). Reverse dependencies reflect only the 'depends' dependency type"></span>
                 Reverse runtime dependencies ({{reverse_count}})
             </a>
         </li>
diff --git a/bitbake/lib/toaster/toastergui/templatetags/projecttags.py b/bitbake/lib/toaster/toastergui/templatetags/projecttags.py
index 119311d..dc75f22 100644
--- a/bitbake/lib/toaster/toastergui/templatetags/projecttags.py
+++ b/bitbake/lib/toaster/toastergui/templatetags/projecttags.py
@@ -112,11 +112,11 @@ def task_color(task_object, show_green=False):
         show_green argument should be True to get green color.
     """
     if not task_object.task_executed:
-        return 'class=muted'
+        return 'class=text-muted'
     elif task_object.outcome == task_object.OUTCOME_FAILED:
-        return 'class=error'
+        return 'class=text-danger'
     elif task_object.outcome == task_object.OUTCOME_SUCCESS and show_green:
-        return 'class=green'
+        return 'class=text-success'
     else:
         return ''
 
@@ -250,15 +250,15 @@ from django.utils.safestring import mark_safe
 @register.filter
 def format_vpackage_rowclass(size):
     if size == -1:
-        return mark_safe('class="muted"')
+        return mark_safe('class="text-muted"')
     return ''
 
 @register.filter
 def format_vpackage_namehelp(name):
     r =  name + ' '
-    r += '<i class="icon-question-sign get-help hover-help"'
+    r += '<span class="glyphicon glyphicon-question-sign get-help hover-help"'
     r += ' title = "' + name + ' has not been built">'
-    r += '</i>'
+    r += '</span>'
     return mark_safe(r)
 
 @register.filter
-- 
1.9.1



More information about the toaster mailing list