Make sure the page showing the variable history displays correctly with Bootstrap 3.
Signed-off-by: Belen Barros Pena <[email protected]> --- .../lib/toaster/toastergui/static/css/default.css | 26 +++- .../toastergui/templates/basetable_bottom.html | 24 ++-- .../toastergui/templates/basetable_top.html | 135 ++++++++++++--------- .../toaster/toastergui/templates/configvars.html | 79 +++++++----- .../toastergui/templates/filtersnippet.html | 40 +++--- bitbake/lib/toaster/toastergui/views.py | 1 - 6 files changed, 179 insertions(+), 126 deletions(-) diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css index d808ab0..fe2c4c2 100644 --- a/bitbake/lib/toaster/toastergui/static/css/default.css +++ b/bitbake/lib/toaster/toastergui/static/css/default.css @@ -25,6 +25,13 @@ img.logo { height: 30px; vertical-align: bottom; } /* Set a limit to popover height to handle long dependency lists */ .popover-content { max-height: 350px; overflow: scroll; } +/* Set a limit to modal dialogs height to handle long variable history */ +[id^="variable-"] .modal-content { max-height: 550px; overflow-y: scroll; } + +/* Make sure long values in variable history do not make the modal dialogs + * scroll horizontally */ +[id^="variable-"] .modal-content p { word-break: break-all; } + /* Increase bottom margin of definition lists inside popovers for the Toaster version information in the top navbar, and also inside the right hand columns of our details pages */ .popover-content dd, .item-info dd { margin-bottom: 15px; } @@ -51,18 +58,20 @@ img.logo { height: 30px; vertical-align: bottom; } /* Styles for our table controls */ .form-control[id^="search-input-"], -.form-control[id^="new-search-input-"] { width: 30em; } +.form-control[id^="new-search-input-"], +#search{ width: 30em; } #search-input-selectpackagestable, #search-input-packagestable, -.form-control[id^="no-results-search-input-"]{ width: 20em; } +.form-control[id^="no-results-search-input-"] { width: 20em; } #edit-columns-button { margin-right: 30px; } -.navbar-default[id^="table-chrome-"] { background-color: transparent; } +.navbar-default[id^="table-chrome-"], +#variables .navbar-default { background-color: transparent; } [id^="table-chrome-collapse-"] .navbar-form { margin-left: -15px; } .dropdown-menu.editcol { padding-left: 10px; min-width: 200px; } span[class^="remove-search-btn-"] { position: absolute; right: 5px; top: 0; bottom: 0; height: 14px; margin: auto; font-size: 14px; cursor: pointer; color: #777;} span[class^="remove-search-btn-"]:hover { color: #333; } -#no-results-special-selectpackagestable .form-inline { margin-top: 20px; } -[id^="pagination-"] .pagination, +#no-results-special-selectpackagestable .form-inline { margin-top: 20px; } +[id^="pagination-"] .pagination, [id^="pagination-"] .navbar-form { margin-top: 0; } [id^="table-chrome-"] .navbar-form { margin-left: -15px; margin-right: -15px; } [id^="table-chrome-"] .detail-page-contols { padding-left: 0; padding-right: 0; } @@ -208,6 +217,13 @@ td > .tooltip-inner, #recipestable .get_description_or_summary { width: 40%; } #machinestable .name { white-space: nowrap; } #machinestable .description { width: 45%; } +#otable .variable_value, +#otable .file { word-break: break-all; width: 25%; } +[id^="variable-"] .file { word-break: break-all; } + +/* For the tables still not ported to ToasterTables, style the table headings + * that are not sortable */ +th > span.text-muted { font-weight: normal; } /* Override the rather ugly default code styles */ code { color: #333; background-color: transparent; } diff --git a/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html b/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html index 96f405c..7fc3138 100644 --- a/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html +++ b/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html @@ -2,7 +2,7 @@ </table> <!-- Show pagination controls --> -<div> +<div id="pagination-basetable_bottom"> <!--span class="help-inline">Showing {{objects.start_index}} to {{objects.end_index}} out of {{objects.paginator.count}} entries.</span--> <ul class="pagination"> @@ -20,16 +20,18 @@ <li class="disabled"><a href="#">»</a></li> {%endif%} </ul> - <div class="pull-right"> - <span class="help-inline">Show rows:</span> - <select class="pagesize"> - {% with "10 25 50 100 150" as list%} - {% for i in list.split %} - <option value="{{i}}">{{i}}</option> - {% endfor %} - {% endwith %} - </select> - </div> + <form class="navbar-form navbar-right"> + <div class="form-group"> + <label>Show rows:</label> + <select class="form-control pagesize"> + {% with "10 25 50 100 150" as list%} + {% for i in list.split %} + <option value="{{i}}">{{i}}</option> + {% endfor %} + {% endwith %} + </select> + </div> + </form> </div> <!-- Update page display settings --> diff --git a/bitbake/lib/toaster/toastergui/templates/basetable_top.html b/bitbake/lib/toaster/toastergui/templates/basetable_top.html index 6731ff2..61785f0 100644 --- a/bitbake/lib/toaster/toastergui/templates/basetable_top.html +++ b/bitbake/lib/toaster/toastergui/templates/basetable_top.html @@ -159,68 +159,83 @@ </script> <!-- control header --> -<div class="navbar"> - <div class="navbar-inner"> - <form class="navbar-search" id="searchform"> - <div class="input-append"> - <input id="search" name="search" type="text" placeholder="Search {%if object_search_display %}{{object_search_display}}{%else%}{{objectname}}{%endif%}" value="{%if request.GET.search %}{{request.GET.search}}{% endif %}"/>{% if request.GET.search %}<a href="javascript:$('#search').val('');searchform.submit()" class="input-append-addon btn" tabindex="-1"><i class="glyphicon glyphicon-remove"></i></a>{%endif%} - <input type="hidden" name="orderby" value="{{request.GET.orderby}}"> - <input type="hidden" name="page" value="1"> - <button class="btn" id="search-button" type="submit" value="Search">Search</button> - </div> +<div class="navbar navbar-default"> + <div class="container-fluid"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#table-chrome-collapse-variablehistory" aria-expanded="false"> + <span class="sr-only">Toggle table options</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + </div> + <div class="collapse navbar-collapse" id="table-chrome-collapse-variablehistory"> + <form class="navbar-form navbar-left" id="searchform"> + <div class="form-group"> + <div class="btn-group"> + <input class="form-control" id="search" name="search" type="text" placeholder="Search {%if object_search_display %}{{object_search_display}}{%else%}{{objectname}}{%endif%}" value="{%if request.GET.search %}{{request.GET.search}}{% endif %}"/> + {% if request.GET.search %}<a href="javascript:$('#search').val('');searchform.submit()" tabindex="-1"><span class="remove-search-btn-variables glyphicon glyphicon-remove-circle"></span></a>{%endif%} + </div> + </div> + <input type="hidden" name="orderby" value="{{request.GET.orderby}}"> + <input type="hidden" name="page" value="1"> + <button class="btn btn-default" id="search-button" type="submit" value="Search">Search</button> </form> - <div class="pull-right"> -{% if tablecols %} - <div class="btn-group"> - <button id="edit-columns-button" class="btn dropdown-toggle" data-toggle="dropdown">Edit columns - <span class="caret"></span> - </button> + <form class="navbar-form navbar-right"> + <div class="form-group"> + <label>Show rows:</label> + <select class="pagesize form-control"> + {% with "10 25 50 100 150" as list%} + {% for i in list.split %} + <option value="{{i}}">{{i}}</option> + {% endfor %} + {% endwith %} + </select> + </div> + </form> + + <div class="btn-group navbar-right"> + {% if tablecols %} + <button id="edit-columns-button" class="btn btn-default navbar-btn dropdown-toggle" data-toggle="dropdown">Edit columns + <span class="caret"></span> + </button> <!-- {{tablecols|sortcols}} --> - <ul id='editcol' class="dropdown-menu"> - {% for i in tablecols|sortcols %} - <li> - <label {% if not i.clclass %} class="checkbox muted" {%else%} class="checkbox" {%endif%}> - <input type="checkbox" class="chbxtoggle" - {% if i.clclass %} - id="{{i.clclass}}" - value="ct{{i.name}}" - {% if not i.hidden %} - checked="checked" - {%endif%} - onclick="showhideTableColumn( - $(this).attr('id'), - $(this).is(':checked'), - {% if i.ordericon %} - '{{i.orderkey}}' - {% else %} - undefined - {% endif %} - )" - {%else%} - checked disabled - {% endif %}/> {{i.name}} - </label> - </li> - {% endfor %} - </ul> - </div> -{% endif %} - <div style="display:inline"> - <span class="divider-vertical"></span> - <span class="help-inline" style="padding-top:5px;">Show rows:</span> - <select style="margin-top:5px;margin-bottom:0px;" class="pagesize"> - {% with "10 25 50 100 150" as list%} - {% for i in list.split %} - <option value="{{i}}">{{i}}</option> - {% endfor %} - {% endwith %} - </select> - </div> + <ul id="editcol" class="dropdown-menu editcol"> + {% for i in tablecols|sortcols %} + <li> + <div class="checkbox"> + <label {% if not i.clclass %} class="muted" {%endif%}> + <input type="checkbox" class="chbxtoggle" + {% if i.clclass %} + id="{{i.clclass}}" + value="ct{{i.name}}" + {% if not i.hidden %} + checked="checked" + {%endif%} + onclick="showhideTableColumn( + $(this).attr('id'), + $(this).is(':checked'), + {% if i.ordericon %} + '{{i.orderkey}}' + {% else %} + undefined + {% endif %} + )" + {%else%} + checked disabled + {% endif %}/>{{i.name}} + </label> + </div> + </li> + {% endfor %} + </ul> + {% endif %} </div> - </div> <!-- navbar-inner --> -</div> + </div> <!-- navbar-collapse --> + </div> <!-- container-fluid --> +</div> <!-- navbar-default --> <!-- the actual rows of the table --> <table class="table table-bordered table-hover tablesorter" id="otable"> @@ -228,11 +243,11 @@ <!-- Table header row; generated from "tablecols" entry in the context dict --> <tr> {% for tc in tablecols %}<th class="{%if tc.dclass%}{{tc.dclass}}{%endif%} {% if tc.clclass %}{{tc.clclass}}{% endif %}"> - {%if tc.qhelp%}<i class="icon-question-sign get-help" title="{{tc.qhelp}}"></i>{%endif%} - {%if tc.orderfield%}<a {%if tc.ordericon%} class="sorted" {%endif%}href="javascript:reload_params({'page': 1, 'orderby' : '{{tc.orderfield}}' })">{{tc.name}}</a>{%else%}<span class="muted">{{tc.name}}</span>{%endif%} + {%if tc.qhelp%}<span class="glyphicon glyphicon-question-sign get-help" title="{{tc.qhelp}}"></span>{%endif%} + {%if tc.orderfield%}<a {%if tc.ordericon%} class="sorted" {%endif%}href="javascript:reload_params({'page': 1, 'orderby' : '{{tc.orderfield}}' })">{{tc.name}}</a>{%else%}<span class="text-muted">{{tc.name}}</span>{%endif%} {%if tc.ordericon%} <i class="icon-caret-{{tc.ordericon}}"></i>{%endif%} {%if tc.filter%}<div class="btn-group pull-right"> - <a href="#filter_{{tc.filter.class}}" role="button" class="btn btn-mini {%if request.GET.filter%}{{tc.filter.options|filtered_icon:request.GET.filter}} {%endif%}" {%if request.GET.filter and tc.filter.options|filtered_tooltip:request.GET.filter %} title="<p>{{tc.filter.options|filtered_tooltip:request.GET.filter}}</p><p><a class='btn btn-sm btn-primary' href=javascript:reload_params({'filter':''})>Show all {% if filter_search_display %}{{filter_search_display}}{% else %}{{objectname}}{% endif %}</a></p>" {%endif%} data-toggle="modal"> <i class="glyphicon glyphicon-filter filtered"></i> </a> + <a href="#filter_{{tc.filter.class}}" role="button" class="btn btn-xs {%if request.GET.filter%}{{tc.filter.options|filtered_icon:request.GET.filter}} {%endif%}" {%if request.GET.filter and tc.filter.options|filtered_tooltip:request.GET.filter %} title="<p>{{tc.filter.options|filtered_tooltip:request.GET.filter}}</p><p><a class='btn btn-sm btn-primary' href=javascript:reload_params({'filter':''})>Show all {% if filter_search_display %}{{filter_search_display}}{% else %}{{objectname}}{% endif %}</a></p>" {%endif%} data-toggle="modal"> <span class="glyphicon glyphicon-filter filtered"></span> </a> </div>{%endif%} </th>{% endfor %} </tr> diff --git a/bitbake/lib/toaster/toastergui/templates/configvars.html b/bitbake/lib/toaster/toastergui/templates/configvars.html index f100b24..563e8c7 100644 --- a/bitbake/lib/toaster/toastergui/templates/configvars.html +++ b/bitbake/lib/toaster/toastergui/templates/configvars.html @@ -13,7 +13,7 @@ {% block buildinfomain %} <!-- page title --> <div class="col-md-10"> - <div class="page-header"> + <div class="page-header build-data"> <h1> {% if request.GET.filter and objects.paginator.count > 0 or request.GET.search and objects.paginator.count > 0 %} {{objects.paginator.count}} variable{{objects.paginator.count|pluralize}} found @@ -27,7 +27,7 @@ <!-- configuration table --> <div id="navTab"> - <ul class="nav nav-pills"> + <ul class="nav nav-tabs"> <li class=""><a href="{% url 'configuration' build.id %}">Summary</a></li> <li class="active"><a href="#" >BitBake variables</a></li> </ul> @@ -36,11 +36,20 @@ <div id="variables" class="tab-pane"> {% if objects.paginator.count == 0 %} - <div class="alert"> - <form class="no-results input-append" id="searchform"> - <input id="search" name="search" class="input-xxlarge" type="text" value="{% if request.GET.search %}{{request.GET.search}}{% endif %}"/>{% if request.GET.search %}<a href="javascript:$('#search').val('');searchform.submit()" class="input-append-addon btn" tabindex="-1"><i class="glyphicon glyphicon-remove"></i></a>{% endif %} - <button class="btn" type="submit" value="Search">Search</button> - <button class="btn btn-link" onclick="javascript:$('#search').val('');searchform.submit()">Show all variables</button> + <div class="alert alert-warning"> + <form class="no-results form-inline" id="searchform"> + <div class="form-group"> + <div class="btn-group"> + <input class="form-control" id="search" name="search" type="text" value="{% if request.GET.search %}{{request.GET.search}}{% endif %}"/> + {% if request.GET.search %} + <a href="javascript:$('#search').val('');searchform.submit()" tabindex="-1"> + <span class="remove-search-btn-variables glyphicon glyphicon-remove-circle"></span> + </a> + {% endif %} + </div> + </div> + <button class="btn btn-default" type="submit" value="Search">Search</button> + <button class="btn btn-link" onclick="javascript:$('#search').val('');searchform.submit()">Show all variables</button> </form> </div> @@ -50,24 +59,26 @@ {% for variable in objects %} <tr class="data"> <td class="variable_name"><a data-toggle="modal" href="#variable-{{variable.pk}}">{{variable.variable_name}}</a></td> - <td class="variable_value"><a data-toggle="modal" href="#variable-{{variable.pk}}">{{variable.variable_value|truncatechars:153}}</a></td> - <td class="file"><a data-toggle="modal" href="#variable-{{variable.pk}}"> + <td class="variable_value">{{variable.variable_value|truncatechars:153}}</td> + <td class="file"> {% if variable.vhistory.all %} {% for path in variable.vhistory.all|filter_setin_files:file_filter %} {{path}}<br/> {% endfor %} {% endif %} - </a></td> + </td> <td class="description"> {% if variable.description %} {{variable.description}} <a href="http://www.yoctoproject.org/docs/current/ref-manual/ref-manual.html#var-{{variable.variable_name|variable_parent_name}}" target="_blank"> - <i class="glyphicon glyphicon-share get-info"></i></a> + <span class="glyphicon glyphicon-new-window get-info"></span></a> {% endif %} </td> </tr> {% endfor %} - + </tbody> +</table> +</div> <! -- table-responsive --> {% include "basetable_bottom.html" %} {% endif %} </div> <!-- endvariables --> @@ -75,7 +86,7 @@ <!-- file list popups --> {% for variable in objects %} {% if variable.vhistory.count %} - <div id="variable-{{variable.pk}}" class="modal in fade" tabindex="-1" role="dialog"> + <div id="variable-{{variable.pk}}" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> @@ -95,34 +106,36 @@ <span>{{variable.variable_value|string_slice:':570'}} <span class="full"> {{variable.variable_value|string_slice:'570:'}} </span> - <a class="btn btn-mini full-show">...</a> + <a href="#" class="full-show">...</a> </span> </p> - <a class="btn btn-mini full-hide">Collapse variable value <i class="icon-caret-up"></i> + <a href="#" class="full-hide">Collapse variable value <i class="icon-caret-up"></i> </a> {% endif %} {% else %} <div class="alert alert-info">The value of <strong>{{variable.variable_name}}</strong> is an empty string</div> {% endif %} <h4>The value was set in the following configuration files:</h4> - <table class="table table-bordered table-hover"> - <thead> - <tr> - <th>Order</th> - <th>Configuration file</th> - <th>Operation</th> - <th>Line number</th> - </tr> - </thead> - <tbody> - {% for vh in variable.vhistory.all %} - <tr> - <td>{{forloop.counter}}</td><td>{{vh.file_name}}</td><td>{{vh.operation}}</td><td>{{vh.line_number}}</td> - </tr> - {%endfor%} - </tbody> - </table> - </div> + <div class="table-responsive"> + <table class="table table-bordered table-hover"> + <thead> + <tr> + <th>Order</th> + <th>Configuration file</th> + <th>Operation</th> + <th>Line</th> + </tr> + </thead> + <tbody> + {% for vh in variable.vhistory.all %} + <tr> + <td>{{forloop.counter}}</td><td class="file">{{vh.file_name}}</td><td>{{vh.operation}}</td><td>{{vh.line_number}}</td> + </tr> + {%endfor%} + </tbody> + </table> + </div> + </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> diff --git a/bitbake/lib/toaster/toastergui/templates/filtersnippet.html b/bitbake/lib/toaster/toastergui/templates/filtersnippet.html index 4c2c53e..9f86eaa 100644 --- a/bitbake/lib/toaster/toastergui/templates/filtersnippet.html +++ b/bitbake/lib/toaster/toastergui/templates/filtersnippet.html @@ -17,25 +17,27 @@ </div> <div class="modal-body"> <p>{{f.label}}</p> - <label class="radio"> - <input type="radio" name="filter" {%if request.GET.filter%}{{f.options|check_filter_status:request.GET.filter}} {%else%} checked {%endif%} value="" data-key="{{key}}"> All {%if filter_search_display%}{{filter_search_display|title}}{%else%}{{objectname|title}}{%endif%} - </label> + <div class="radio"> + <label> + <input type="radio" name="filter" {%if request.GET.filter%}{{f.options|check_filter_status:request.GET.filter}} {%else%} checked {%endif%} value="" data-key="{{key}}"> All {%if filter_search_display%}{{filter_search_display|title}}{%else%}{{objectname|title}}{%endif%} + </label> + </div> {% for option in f.options %} + <div class="radio"> {% if option.1 == 'daterange' %} - <div class="form-inline"> - <label class="radio"> + <label> <input type="radio" name="filter" id="filter_value_{{key}}" {%if key == daterange_selected %}checked{%endif%} value="{{option.1}}" data-key="{{key}}"> {{option.0}} - {% else %} + {% else %} {% if 1 %} - <label class="radio"> - <input type="radio" name="filter" {%if request.GET.filter == option.1 %}checked{%endif%} value="{{option.1}}" data-key="{{key}}"> {{option.0}} + <label> + <input type="radio" name="filter" {%if request.GET.filter == option.1 %}checked{%endif%} value="{{option.1}}" data-key="{{key}}"> {{option.0}} {% comment "do not disable radio selections by count for now" %}{% else %} - <label class="radio muted"> + <label class="text-muted"> <input type="radio" name="filter" disabled {%if request.GET.filter == option.1 %}checked{%endif%} value="{{option.1}}" data-key="{{key}}"> {{option.0}} {% endcomment %}{% endif %} {% endif %} {% if option.3 %}<i class="icon-question-sign get-help" data-placement="right" title="{{option.3}}"></i>{% endif %} - </label> + </label></div> {% if option.1 == 'daterange' %} <input type="text" id="date_from_{{key}}" name="date_from_{{key}}" disabled class="input-sm" /><label class="help-inline">to</label> <input type="text" id="date_to_{{key}}" name="date_to_{{key}}" disabled class="input-sm" /> @@ -50,12 +52,18 @@ {% endif %} </div> <div class="modal-footer"> - <button type="submit" class="btn btn-primary" data-key="{{key}}">Apply</button> - {% if request.GET.filter %} - {% if request.GET.filter|string_remove_regex:':.*' != f.options.0.1|string_remove_regex:':.*' %} - <span class="help-inline pull-left">You can only apply one filter to the table. This filter will override the current filter.</span> - {% endif %} - {% endif %} + <div class="row"> + <div class="col-md-6"> + <button type="submit" class="btn btn-primary" data-key="{{key}}">Apply</button> + </div> + <div class="col-md-6"> + {% if request.GET.filter %} + {% if request.GET.filter|string_remove_regex:':.*' != f.options.0.1|string_remove_regex:':.*' %} + <p class="text-right text-muted">You can only apply one filter to the table. This filter will override the current filter.</p> + {% endif %} + {% endif %} + </div> + </div> </div> </form> </div><!-- /.modal-content --> diff --git a/bitbake/lib/toaster/toastergui/views.py b/bitbake/lib/toaster/toastergui/views.py index 1f908ea..f05677e 100755 --- a/bitbake/lib/toaster/toastergui/views.py +++ b/bitbake/lib/toaster/toastergui/views.py @@ -898,7 +898,6 @@ def configvars(request, build_id): }, {'name': 'Value', 'qhelp': "The value assigned to the variable", - 'dclass': "span4", }, {'name': 'Set in file', 'qhelp': "The last configuration file that touched the variable value", -- 1.9.1 -- _______________________________________________ toaster mailing list [email protected] https://lists.yoctoproject.org/listinfo/toaster
