Changes to the controls above our tables to make them look nice with Bootstrap 3. This patch applies only to tables using toaster tables.
Signed-off-by: Belen Barros Pena <[email protected]> --- .../lib/toaster/toastergui/static/css/default.css | 11 ++++ bitbake/lib/toaster/toastergui/static/js/table.js | 5 +- .../toaster/toastergui/templates/toastertable.html | 60 ++++++++++++---------- 3 files changed, 47 insertions(+), 29 deletions(-) diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css index 5090dec..1485337 100644 --- a/bitbake/lib/toaster/toastergui/static/css/default.css +++ b/bitbake/lib/toaster/toastergui/static/css/default.css @@ -39,3 +39,14 @@ img.logo { height: 30px; vertical-align: bottom; } .get-help-red { color: #B94A48; } .get-help-red:hover { color: #943A38; cursor: pointer; } +/* Styles for our table controls */ +.form-control[id^="search-input-"] { width: 30em; } +#edit-columns-button { margin-right: 30px; } +.navbar-default[id^="table-chrome-"] { background-color: transparent; } +[id^="table-chrome-collapse-"] .navbar-form { margin-left: -15px; } +.dropdown-menu.editcol { padding-left: 10px; min-width: 180px; } +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; } + +/* Override the default font-weight for labels: it's a bit too much */ +label { font-weight: normal; } diff --git a/bitbake/lib/toaster/toastergui/static/js/table.js b/bitbake/lib/toaster/toastergui/static/js/table.js index 85ed188..be32bb3 100644 --- a/bitbake/lib/toaster/toastergui/static/js/table.js +++ b/bitbake/lib/toaster/toastergui/static/js/table.js @@ -251,7 +251,7 @@ function tableInit(ctx){ tableHeadRow.append(header); /* Now setup the checkbox state and click handler */ - var toggler = $('<li><label class="checkbox"><input type="checkbox" id="checkbox-'+ col.field_name +'" class="col-toggle" value="'+col.field_name+'" />'+col.title+'</label></li>'); + var toggler = $('<li><div class="checkbox"><label><input type="checkbox" id="checkbox-'+ col.field_name +'" class="col-toggle" value="'+col.field_name+'" />'+col.title+'</label></div></li>'); var togglerInput = toggler.find("input"); @@ -261,7 +261,8 @@ function tableInit(ctx){ if (col.hideable){ togglerInput.click(colToggleClicked); } else { - toggler.find("label").addClass("muted"); + toggler.find("label").addClass("text-muted"); + toggler.find("label").parent().addClass("disabled"); togglerInput.attr("disabled", "disabled"); } diff --git a/bitbake/lib/toaster/toastergui/templates/toastertable.html b/bitbake/lib/toaster/toastergui/templates/toastertable.html index ed179b2..debf6e6 100644 --- a/bitbake/lib/toaster/toastergui/templates/toastertable.html +++ b/bitbake/lib/toaster/toastergui/templates/toastertable.html @@ -44,39 +44,45 @@ <div id="table-container-{{table_name}}" style="visibility: hidden"> <!-- control header --> - <div class="navbar" id="table-chrome-{{table_name}}"> - <div class="navbar-inner"> - <div class="navbar-search pull-left"> - <div class="input-append"> - <input id="search-input-{{table_name}}" class="input-xxlarge" name="search" type="text" placeholder="Search {{title|lower}}" value="{%if request.GET.search%}{{request.GET.search}}{%endif%}"/> - <a href="#" style="display:none" class="input-append-addon btn remove-search-btn-{{table_name}}" tabindex="-1"> - <i class="glyphicon glyphicon-remove"></i> - </a> - <span class="input-append-btn"> - <button class="btn" id="search-submit-{{table_name}}" >Search</button> - </span> - </div> + <div class="navbar navbar-default" id="table-chrome-{{table_name}}"> + <div class="container-fluid"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#table-chrome-collapse-{{table_name}}" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> </div> - - <div class="pull-right"> - <div class="btn-group"> - <button id="edit-columns-button" class="btn dropdown-toggle" data-toggle="dropdown">Edit columns + <div class="collapse navbar-collapse" id="table-chrome-collapse-{{table_name}}"> + <form class="navbar-form navbar-left"> + <div class="form-group"> + <div class="btn-group"> + <input id="search-input-{{table_name}}" class="form-control" name="search" type="text" placeholder="Search {{title|lower}}" value="{%if request.GET.search%}{{request.GET.search}}{%endif%}"/> + <span class="remove-search-btn-{{table_name}} glyphicon glyphicon-remove-circle" tabindex="-1" style="display:none;"> + </div> + </div> + <button class="btn btn-default" id="search-submit-{{table_name}}" >Search</button> + </form> + <form class="navbar-form navbar-right"> + <div clas="form-group"> + <label>Show rows:</label> + <select class="form-control pagesize-{{table_name}}"> + {% 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"> + <button id="edit-columns-button" class="btn btn-default navbar-btn dropdown-toggle" data-toggle="dropdown">Edit columns <span class="caret"></span> </button> <ul class="dropdown-menu editcol"> </ul> </div> - <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-{{table_name}}"> - {% with "10 25 50 100 150" as list%} - {% for i in list.split %} - <option value="{{i}}">{{i}}</option> - {% endfor %} - {% endwith %} - </select> - </div> </div> </div> </div> -- 1.9.1 -- _______________________________________________ toaster mailing list [email protected] https://lists.yoctoproject.org/listinfo/toaster
