Make sure that all information displays correctly, and all controls interact as designed, with Bootstrap 3.
Signed-off-by: Belen Barros Pena <[email protected]> --- .../lib/toaster/toastergui/static/css/default.css | 45 ++++- .../toaster/toastergui/static/js/layerdetails.js | 65 ++++--- bitbake/lib/toaster/toastergui/tables.py | 12 +- .../toaster/toastergui/templates/layerdetails.html | 204 +++++++++++---------- .../toastergui/templates/toastertable-simple.html | 104 ++++++----- 5 files changed, 243 insertions(+), 187 deletions(-) diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css index ddea5ee..43c7c54 100644 --- a/bitbake/lib/toaster/toastergui/static/css/default.css +++ b/bitbake/lib/toaster/toastergui/static/css/default.css @@ -22,8 +22,13 @@ img.logo { height: 30px; vertical-align: bottom; } /* Increase popovers width to fit commit SHAs */ .popover { max-width: 350px; } -/* Increase bottom margin of definition lists inside popovers for the Toaster version information in the top navbar */ -.popover-content dd { margin-bottom: 15px; } +/* 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, +.well dd { margin-bottom: 15px; } + +/* Style the horizonal definition lists */ +.dl-horizontal dt { width: 200px; line-height: 25px; } +.dl-horizontal dd { margin-left: 220px; line-height: 25px; } /* Style our build results */ .build-result .progress { margin-bottom: 0; } @@ -52,6 +57,8 @@ span[class^="remove-search-btn-"] { position: absolute; right: 5px; top: 0; bott span[class^="remove-search-btn-"]:hover { color: #333; } [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; } /* Override the default font-weight for labels: it's a bit too much */ label { font-weight: normal; } @@ -111,6 +118,7 @@ h3 > .glyphicon-question-sign { font-size: 14px; } /* Style the most built recipes list in the project page */ #freq-build-list .checkbox input[type="checkbox"] { position: relative; margin: 0 10px 0 0; vertical-align: middle; } +#freq-build-list.lead > li { line-height: 25px; } #freq-build-list { margin-top: 20px; } #freq-build-list label { padding-left: 0; } #freq-build-btn { margin-top: 10px; } @@ -119,16 +127,22 @@ h3 > .glyphicon-question-sign { font-size: 14px; } /* Style the layers section in the project page and the layer dependencies in the import layer form */ #layer-container .form-inline { margin-top: 20px; } #layer-add-input { width: 17em; } -#layers-in-project-list, -#layer-deps-list { margin-top: 20px; } -#layers-in-project-list > li, -#layer-deps-list > li { line-height: 38px; } -#layers-in-project-list .glyphicon-trash, -#layer-deps-list .glyphicon-trash { font-size: 16px; margin-left: 7px; } +ul.lead { margin-top: 20px; } +ul.lead > li { line-height: 38px; } +ul.lead .glyphicon-trash, +ul.lead .glyphicon-trash { font-size: 16px; margin-left: 7px; } #layers-in-project-list .tooltip-inner { max-width: 600px; } #no-layers-in-project { margin-top: 20px; } #no-layers-in-project ul { margin-top: 10px; } +/* Style the layer information icons in the layer details pages */ +dd .glyphicon-trash, +dd .glyphicon-edit { margin-left: 5px; } + +/* Style the forms and definition lists in the layer details pages */ +#change-repo-form .form-control { width: 17em; } +#information dd > form { margin-bottom: 5px; margin-top: 5px; } + /* Create a class for additional top margin that we can use in headings */ .top-air { margin-top: 40px; } @@ -161,8 +175,10 @@ td > .tooltip-inner { padding: 10px; } #newcustomimagestable .get_description_or_summary, #imagerecipestable .get_description_or_summary, #softwarerecipestable .get_description_or_summary, -#machinestable .description, #layerstable .layer__summary { width: 30%; } +#recipestable .get_description_or_summary { width: 40%; } +#machinestable .name { white-space: nowrap; } +#machinestable .description { width: 45%; } /* Override the rather ugly default code styles */ code { color: #333; background-color: transparent; } @@ -171,3 +187,14 @@ code { color: #333; background-color: transparent; } .breadcrumb > li + li::before { content: none; } .breadcrumb { background-color: transparent; padding-left: 0; padding-top: 15px; } .breadcrumb .divider { color: #777; margin: 0 5px; } + +/* Reduce top margin for the page-header class */ +.page-header { margin-top: 30px; } + +/* Set some space around the layer button in the layer details pages */ +.tab-content { margin-top: 20px; } +.tab-pane { margin-top: 20px; } + +/* Style the new window icons */ +.glyphicon-new-window:hover { text-decoration: none; } +.dl-horizontal > dd > .glyphicon-new-window { margin-left: 5px; } diff --git a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js index d545406..dbc6ba6 100644 --- a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js +++ b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js @@ -18,6 +18,13 @@ function layerDetailsPageInit (ctx) { layerDepBtn.removeAttr("disabled"); }); + /* disable the add layer button if its input field is empty */ + layerDepInput.on("keyup",function(){ + if ( $(this).val().length == 0 ) { + layerDepBtn.attr("disabled", "disabled"); + } + }); + $(window).on('hashchange', function(e){ switch(window.location.hash){ case '#machines': @@ -76,7 +83,7 @@ function layerDetailsPageInit (ctx) { addRemoveDep(currentLayerDepSelection.id, true, function(){ /* Make a list item for the new layer dependency */ - var newLayerDep = $("<li><a></a><span class=\"icon-trash\" data-toggle=\"tooltip\" title=\"Delete\"></span></li>"); + var newLayerDep = $("<li><a></a><span class=\"glyphicon glyphicon-trash\" data-toggle=\"tooltip\" title=\"Delete\"></span></li>"); newLayerDep.data('layer-id', currentLayerDepSelection.id); newLayerDep.children("span").tooltip(); @@ -94,11 +101,11 @@ function layerDetailsPageInit (ctx) { /* Clear the current selection */ layerDepInput.val(""); currentLayerDepSelection = undefined; - layerDepBtn.attr("disabled","disabled"); + layerDepBtn.attr("disabled", "disabled"); }); }); - $(".icon-pencil").click(function (){ + $(".glyphicon-edit").click(function (){ var mParent = $(this).parent("dd"); mParent.prev().css("margin-top", "10px"); mParent.children("form").slideDown(); @@ -106,8 +113,12 @@ function layerDetailsPageInit (ctx) { currentVal.hide(); /* Set the current value to the input field */ mParent.find("textarea,input").val(currentVal.text()); + /* If the input field is empty, disable the submit button */ + if ( mParent.find("textarea,input").val().length == 0 ) { + mParent.find(".change-btn").attr("disabled", "disabled"); + } /* Hides the "Not set" text */ - mParent.children(".muted").hide(); + mParent.children(".text-muted").hide(); /* We're editing so hide the delete icon */ mParent.children(".delete-current-value").hide(); mParent.find(".cancel").show(); @@ -128,21 +139,21 @@ function layerDetailsPageInit (ctx) { mParent.children(".current-value").show(); /* Show the "Not set" text if we ended up with no value */ if (!mParent.children(".current-value").html()){ - mParent.children(".muted").fadeIn(); + mParent.children(".text-muted").fadeIn(); mParent.children(".delete-current-value").hide(); } else { mParent.children(".delete-current-value").show(); } - mParent.children(".icon-pencil").show(); - mParent.prev().css("margin-top", "0px"); + mParent.children(".glyphicon-edit").show(); + mParent.prev().css("margin-top", "0"); }); }); function defaultAddBtnText(){ var text = " Add the "+ctx.layerVersion.name+" layer to your project"; addRmLayerBtn.text(text); - addRmLayerBtn.prepend("<span class=\"icon-plus\"></span>"); + addRmLayerBtn.prepend("<span class=\"glyphicon glyphicon-plus\"></span>"); addRmLayerBtn.removeClass("btn-danger"); } @@ -159,7 +170,7 @@ function layerDetailsPageInit (ctx) { var text = " Add the "+ctx.layerVersion.name+" layer to your project "+ "to enable these recipes"; addRmLayerBtn.text(text); - addRmLayerBtn.prepend("<span class=\"icon-plus\"></span>"); + addRmLayerBtn.prepend("<span class=\"glyphicon glyphicon-plus\"></span>"); } else { defaultAddBtnText(); } @@ -177,7 +188,7 @@ function layerDetailsPageInit (ctx) { $("#no-recipes-yet").hide(); } - targetTab.removeClass("muted"); + targetTab.removeClass("text-muted"); if (window.location.hash === "#recipes"){ /* re run the machinesTabShow to update the text */ targetsTabShow(); @@ -192,20 +203,20 @@ function layerDetailsPageInit (ctx) { else $("#no-machines-yet").hide(); - machineTab.removeClass("muted"); + machineTab.removeClass("text-muted"); if (window.location.hash === "#machines"){ /* re run the machinesTabShow to update the text */ machinesTabShow(); } $(".select-machine-btn").click(function(e){ - if ($(this).attr("disabled") === "disabled") + if ($(this).hasClass("disabled")) e.preventDefault(); }); }); - targetTab.on('show', targetsTabShow); + targetTab.on('show.bs.tab', targetsTabShow); function machinesTabShow(){ if (!ctx.layerVersion.inCurrentPrj) { @@ -213,7 +224,7 @@ function layerDetailsPageInit (ctx) { var text = " Add the "+ctx.layerVersion.name+" layer to your project " + "to enable these machines"; addRmLayerBtn.text(text); - addRmLayerBtn.prepend("<span class=\"icon-plus\"></span>"); + addRmLayerBtn.prepend("<span class=\"glyphicon glyphicon-plus\"></span>"); } else { defaultAddBtnText(); } @@ -222,7 +233,7 @@ function layerDetailsPageInit (ctx) { window.location.hash = "machines"; } - machineTab.on('show', machinesTabShow); + machineTab.on('show.bs.tab', machinesTabShow); $(".pagesize").change(function(){ var search = libtoaster.parseUrlParams(); @@ -239,17 +250,17 @@ function layerDetailsPageInit (ctx) { if (added){ /* enable and switch all the button states */ - $(".build-recipe-btn").removeAttr("disabled"); - $(".select-machine-btn").removeAttr("disabled"); + $(".build-recipe-btn").removeClass("disabled"); + $(".select-machine-btn").removeClass("disabled"); addRmLayerBtn.addClass("btn-danger"); addRmLayerBtn.data('directive', "remove"); addRmLayerBtn.text(" Remove the "+ctx.layerVersion.name+" layer from your project"); - addRmLayerBtn.prepend("<span class=\"icon-trash\"></span>"); + addRmLayerBtn.prepend("<span class=\"glyphicon glyphicon-trash\"></span>"); } else { /* disable and switch all the button states */ - $(".build-recipe-btn").attr("disabled","disabled"); - $(".select-machine-btn").attr("disabled", "disabled"); + $(".build-recipe-btn").addClass("disabled"); + $(".select-machine-btn").addClass("disabled"); addRmLayerBtn.removeClass("btn-danger"); addRmLayerBtn.data('directive', "add"); @@ -257,7 +268,7 @@ function layerDetailsPageInit (ctx) { * on which tab is currently visible. Unfortunately we can't just call * tab('show') as if it's already visible it doesn't run the event. */ - switch ($(".nav-pills .active a").prop('id')){ + switch ($(".nav-tabs .active a").prop('id')){ case 'machines-tab': machinesTabShow(); break; @@ -325,7 +336,7 @@ function layerDetailsPageInit (ctx) { text = entryElement.val(); /* Hide the "Not set" text if it's visible */ - inputArea.find(".muted").hide(); + inputArea.find(".text-muted").hide(); inputArea.find(".current-value").text(text); /* Same behaviour as cancel in that we hide the form/show current * value. @@ -343,9 +354,9 @@ function layerDetailsPageInit (ctx) { /* Disable the change button when we have no data in the input */ $("dl input, dl textarea").on("input",function() { if ($(this).val().length === 0) - $(this).parent().children(".change-btn").attr("disabled", "disabled"); + $(this).parent().next(".change-btn").attr("disabled", "disabled"); else - $(this).parent().children(".change-btn").removeAttr("disabled"); + $(this).parent().next(".change-btn").removeAttr("disabled"); }); /* This checks to see if the dt's dd has data in it or if the change data @@ -359,7 +370,7 @@ function layerDetailsPageInit (ctx) { /* There's no current value and the layer is editable * so show the "Not set" and hide the delete icon */ - dd.find(".muted").show(); + dd.find(".text-muted").show(); dd.find(".delete-current-value").hide(); } else { /* We're not viewing an editable layer so hide the empty dd/dl pair */ @@ -387,9 +398,9 @@ function layerDetailsPageInit (ctx) { }); - layerDepsList.find(".icon-trash").click(layerDepRemoveClick); + layerDepsList.find(".glyphicon-trash").click(layerDepRemoveClick); layerDepsList.find("a").tooltip(); - $(".icon-trash").tooltip(); + $(".glyphicon-trash").tooltip(); $(".commit").tooltip(); } diff --git a/bitbake/lib/toaster/toastergui/tables.py b/bitbake/lib/toaster/toastergui/tables.py index dead0d7..efc9c7b 100644 --- a/bitbake/lib/toaster/toastergui/tables.py +++ b/bitbake/lib/toaster/toastergui/tables.py @@ -307,7 +307,11 @@ class LayerMachinesTable(MachinesTable): self.add_column(title="Description", field_name="description") - select_btn_template = '<a href="{% url "project" extra.pid %}?setMachine={{data.name}}" class="btn btn-block select-machine-btn" {% if extra.in_prj == 0%}disabled="disabled"{%endif%}>Select machine</a>' + select_btn_template = ''' + <a href="{% url "project" extra.pid %}?setMachine={{data.name}}" + class="btn btn-default btn-block select-machine-btn + {% if extra.in_prj == 0%}disabled{%endif%}">Select machine</a> + ''' self.add_column(title="Select machine", static_data_name="add-del-layers", @@ -455,7 +459,11 @@ class LayerRecipesTable(RecipesTable): self.add_column(title="Description", field_name="get_description_or_summary") - build_recipe_template ='<button class="btn btn-block build-recipe-btn" data-recipe-name="{{data.name}}" {%if extra.in_prj == 0 %}disabled="disabled"{%endif%}>Build recipe</button>' + build_recipe_template = ''' + <a class="btn btn-default btn-block build-recipe-btn + {%if extra.in_prj == 0 %}disabled{%endif%}" + data-recipe-name="{{data.name}}">Build recipe</a> + ''' self.add_column(title="Build recipe", static_data_name="add-del-layers", diff --git a/bitbake/lib/toaster/toastergui/templates/layerdetails.html b/bitbake/lib/toaster/toastergui/templates/layerdetails.html index dc6018b..781f281 100644 --- a/bitbake/lib/toaster/toastergui/templates/layerdetails.html +++ b/bitbake/lib/toaster/toastergui/templates/layerdetails.html @@ -7,30 +7,30 @@ {% block pagecontent %} <div class="row"> - <ul class="breadcrumb"> - <li> - <a href="{% url 'project' project.id %}">{{project.name}}</a> - <span class="divider">→</span> - </li> - <li><a href="{% url 'projectlayers' project.id %}">Compatible layers</a> - <span class="divider">→</span> - </li> - <li class="active"> - {{layerversion.layer.name}} ({{layerversion.get_vcs_reference|truncatechars:13}}) - </li> - </ul> -</div> + <div class="col-md-12"> + <ul class="breadcrumb"> + <li> + <a href="{% url 'project' project.id %}">{{project.name}}</a> + <span class="divider">→</span> + </li> + <li><a href="{% url 'projectlayers' project.id %}">Compatible layers</a> + <span class="divider">→</span> + </li> + <li class="active"> + {{layerversion.layer.name}} ({{layerversion.get_vcs_reference|truncatechars:13}}) + </li> + </ul> {# If this is not an imported layer then hide the edit ui #} {% if not layerversion.layer_source_id or layerversion.layer_source.sourcetype != layerversion.layer_source.TYPE_IMPORTED %} <style scoped> - .icon-pencil { + .glyphicon-edit { display:none; } .delete-current-value{ display: none; } - li .icon-trash { + li .glyphicon-trash { display:none; } .add-deps { @@ -69,8 +69,6 @@ }); </script> -<div class="row"> - <div class="col-md-12"> <div class="page-header"> <h1>{{layerversion.layer.name}} <small class="commit" {% if layerversion.get_vcs_reference|length > 13 %} @@ -78,8 +76,6 @@ {% endif %}> ({{layerversion.get_vcs_reference|truncatechars:13}})</small></h1> </div> - </div> -</div> <div class="row"> <!-- container for tabs --> @@ -88,27 +84,27 @@ <button type="button" class="close" id="dismiss-alert">×</button> <span id="alert-msg"></span> </div> - <ul class="nav nav-pills"> + <ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#information" id="details-tab">Layer details</a> </li> <li> - <a data-toggle="tab" href="#recipes" class="muted" id="targets-tab">Recipes (<span class="table-count-recipestable"></span>)</a> + <a data-toggle="tab" href="#recipes" class="text-muted" id="targets-tab">Recipes (<span class="table-count-recipestable"></span>)</a> </li> <li> - <a data-toggle="tab" href="#machines" class="muted" id="machines-tab">Machines (<span class="table-count-machinestable"></span>)</a> + <a data-toggle="tab" href="#machines" class="text-muted" id="machines-tab">Machines (<span class="table-count-machinestable"></span>)</a> </li> </ul> <div class="tab-content"> <span class="button-place"> {% if layerversion.id not in projectlayers %} - <button id="add-remove-layer-btn" data-directive="add" class="btn btn-large btn-block"> + <button id="add-remove-layer-btn" data-directive="add" class="btn btn-default btn-lg btn-block"> <span class="glyphicon glyphicon-plus"></span> Add the {{layerversion.layer.name}} layer to your project </button> {% else %} - <button id="add-remove-layer-btn" data-directive="remove" class="btn btn-block btn-large btn-danger"> - <span class="icon-trash"></span> + <button id="add-remove-layer-btn" data-directive="remove" class="btn btn-default btn-block btn-lg btn-danger"> + <span class="glyphicon glyphicon-trash"></span> Remove the {{layerversion.layer.name}} layer from your project </button> {% endif %} @@ -118,60 +114,60 @@ <div id="information" class="tab-pane active"> <dl class="dl-horizontal"> <dt class=""> - <i class="icon-question-sign get-help" title="Fetch/clone URL of the repository"></i> + <span class="glyphicon glyphicon-question-sign get-help" title="Fetch/clone URL of the repository"></span> Repository URL </dt> <dd> <span class="current-value">{{layerversion.layer.vcs_url}}</span> {% if layerversion.get_vcs_link_url %} - <a href="{{layerversion.get_vcs_link_url}}/" class="glyphicon glyphicon-share get-info" target="_blank"></a> + <a href="{{layerversion.get_vcs_link_url}}/" class="glyphicon glyphicon-new-window" target="_blank"></a> {% endif %} - <form id="change-repo-form" class="control-group" style="display:none"> - <div class="input-append"> - <input type="text" class="input-xlarge" value="{{layerversion.layer.vcs_url}}"> - <button data-layer-prop="vcs_url" class="btn change-btn" type="button">Save</button> - <a href="#" style="display:none" class="btn btn-link cancel">Cancel</a> - </div> - </form> - <i class="icon-pencil" ></i> - </dd> - <dt> - <i class="icon-question-sign get-help" title="Subdirectory within the repository where the layer is located, if not in the root (usually only used if the repository contains more than one layer)"></i> - Repository subdirectory - </dt> - <dd> - <span class="muted" style="display:none">Not set</span> - <span class="current-value">{{layerversion.dirpath}}</span> - {% if layerversion.get_vcs_dirpath_link_url %} - <a href="{{layerversion.get_vcs_dirpath_link_url}}" class="glyphicon glyphicon-share get-info" target="_blank"></a> - {% endif %} - <form id="change-subdir-form" style="display:none;"> - <div class="input-append"> - <input type="text" value="{{layerversion.dirpath}}"> - <button data-layer-prop="dirpath" class="btn change-btn" type="button">Save</button> - <a href="#" style="display:none" class="btn btn-link cancel">Cancel</a> - </div> - </form> - <i id="change-subdir" class="icon-pencil"></i> - <span class="icon-trash delete-current-value" data-toggle="tooltip" title="Delete"></span> - </dd> - <dt> - <i class="icon-question-sign get-help" title="The Git branch, tag or commit"></i> - Git revision - </dt> - <dd> - <span class="current-value">{{layerversion.get_vcs_reference}}</span> - <form style="display:none;"> - <div class="input-append"> - <input type="text" value="{{layerversion.get_vcs_reference}}"> - <button data-layer-prop="commit" class="btn change-btn" type="button">Save</button> - <a href="#" style="display:none" class="btn btn-link cancel">Cancel</a> - </div> - </form> - <i class="icon-pencil"></i> - </dd> - <dt> - <i class="icon-question-sign get-help" title="Other layers this layer depends upon"></i> + <form id="change-repo-form" class="form-inline" style="display:none"> + <div class="form-group"> + <input type="text" class="form-control" value="{{layerversion.layer.vcs_url}}"> + </div> + <button data-layer-prop="vcs_url" class="btn btn-default change-btn" type="button">Save</button> + <a href="#" style="display:none" class="btn btn-link cancel">Cancel</a> + </form> + <span class="glyphicon glyphicon-edit"></span> + </dd> + <dt> + <span class="glyphicon glyphicon-question-sign get-help" title="Subdirectory within the repository where the layer is located, if not in the root (usually only used if the repository contains more than one layer)"></span> + Repository subdirectory + </dt> + <dd> + <span class="text-muted" style="display:none">Not set</span> + <span class="current-value">{{layerversion.dirpath}}</span> + {% if layerversion.get_vcs_dirpath_link_url %} + <a href="{{layerversion.get_vcs_dirpath_link_url}}" class="glyphicon glyphicon-new-window" target="_blank"></a> + {% endif %} + <form id="change-subdir-form" class="form-inline" style="display:none;"> + <div class="form-group"> + <input type="text" class="form-control" value="{{layerversion.dirpath}}"> + </div> + <button data-layer-prop="dirpath" class="btn btn-default change-btn" type="button">Save</button> + <a href="#" style="display:none" class="btn btn-link cancel">Cancel</a> + </form> + <span id="change-subdir" class="glyphicon glyphicon-edit"></span> + <span class="glyphicon glyphicon-trash delete-current-value" data-toggle="tooltip" title="Delete"></span> + </dd> + <dt> + <span class="glyphicon glyphicon-question-sign get-help" title="The Git branch, tag or commit"></span> + Git revision + </dt> + <dd> + <span class="current-value">{{layerversion.get_vcs_reference}}</span> + <form style="display:none;" class="form-inline"> + <div class="form-group"> + <input type="text" class="form-control" value="{{layerversion.get_vcs_reference}}"> + </div> + <button data-layer-prop="commit" class="btn btn-default change-btn" type="button">Save</button> + <a href="#" style="display:none" class="btn btn-link cancel">Cancel</a> + </form> + <span class="glyphicon glyphicon-edit"></i> + </dd> + <dt> + <span class="glyphicon glyphicon-question-sign get-help" title="Other layers this layer depends upon"></span> Layer dependencies </dt> <dd> @@ -179,21 +175,23 @@ {% for ld in layerversion.dependencies.all %} <li data-layer-id="{{ld.depends_on.id}}"> <a data-toggle="tooltip" title="{{ld.depends_on.layer.vcs_url}} | {{ld.depends_on.get_vcs_reference}}" href="{% url 'layerdetails' project.id ld.depends_on.id %}">{{ld.depends_on.layer.name}}</a> - <span class="icon-trash " data-toggle="tooltip" title="Delete"></span> + <span class="glyphicon glyphicon-trash " data-toggle="tooltip" title="Delete"></span> </li> {% endfor %} </ul> - <div class="input-append add-deps"> - <input type="text" autocomplete="off" data-minLength="1" data-autocomplete="off" placeholder="Type a layer name" id="layer-dep-input"> - <a class="btn" id="add-layer-dependency-btn" > - Add layer - </a> - </div> - <span class="help-block add-deps">You can only add layers Toaster knows about</span> - </dd> - </dl> - </div> - <!-- end layerdetails tab --> + <form class="form-inline add-deps"> + <div class="form-group"> + <input class="form-control" type="text" autocomplete="off" data-minLength="1" data-autocomplete="off" placeholder="Type a layer name" id="layer-dep-input"> + </div> + <a class="btn btn-default" id="add-layer-dependency-btn" disabled="disabled"> + Add layer + </a> + <span class="help-block add-deps">You can only add layers Toaster knows about</span> + </form> + </dd> + </dl> + </div> + <!-- end layerdetails tab --> <!-- targets tab --> <div id="recipes" class="tab-pane"> <!-- Recipe table --> @@ -216,7 +214,7 @@ <div id="no-machines-yet" class="alert alert-info" style="display:none"> <p>Toaster does not have machine information for the <strong> {{layerversion.layer.name}} </strong> layer.</p> - <p>Toaster learns about layers when you build them. If this layer provides any machines, they will be listed here after you build the <strong> {{layerversion.layer.name}} </strong> layer.</p> + <p>Sadly, machine information cannot be obtained from builds, so this page will remain empty.</p> </div> @@ -238,32 +236,36 @@ <dt> Summary - <i class="icon-question-sign get-help" title="One-line description of the layer"></i> + <span class="glyphicon glyphicon-question-sign get-help" title="One-line description of the layer"></span> </dt> <dd> - <span class="muted" style="display:none">Not set</span> + <span class="text-muted" style="display:none">Not set</span> <span class="current-value">{{layerversion.layer.summary|default_if_none:''}}</span> - <form style="display:none; margin-bottom:20px"> - <textarea class="col-md-12" rows="2">{% if layerversion.layer.summary %}{{layerversion.layer.summary}}{% endif %}</textarea> - <button class="btn change-btn" data-layer-prop="summary" type="button">Save</button> - <a href="#" class="btn btn-link cancel">Cancel</a> + <form style="display:none; margin-bottom:20px; margin-top:5px;"> + <div class="form-group"> + <textarea class="form-control" rows="2">{% if layerversion.layer.summary %}{{layerversion.layer.summary}}{% endif %}</textarea> + </div> + <button class="btn btn-default change-btn" data-layer-prop="summary" type="button">Save</button> + <a href="#" class="btn btn-link cancel">Cancel</a> </form> - <i class="icon-pencil"></i> - <span class="icon-trash delete-current-value" data-toggle="tooltip" title="Delete"></span> + <span class="glyphicon glyphicon-edit"></span> + <span class="glyphicon glyphicon-trash delete-current-value" data-toggle="tooltip" title="Delete"></span> </dd> <dt> Description </dt> <dd> - <span class="muted" style="display:none">Not set</span> + <span class="text-muted" style="display:none">Not set</span> <span class="current-value">{{layerversion.layer.description|default_if_none:''}}</span> - <form style="display:none; margin-bottom:20px"> - <textarea class="col-md-12" rows="6">{% if layerversion.layer.description %}{{layerversion.layer.description}}{% endif %}</textarea> - <button class="btn change-btn" data-layer-prop="description" type="button" >Save</button> + <form style="display:none; margin-bottom:20px; margin-top:5px;"> + <div class="form-group"> + <textarea class="form-control" rows="6">{% if layerversion.layer.description %}{{layerversion.layer.description}}{% endif %}</textarea> + </div> + <button class="btn btn-default change-btn" data-layer-prop="description" type="button" >Save</button> <a href="#" class="btn btn-link cancel">Cancel</a> </form> - <i class="icon-pencil"></i> - <span class="icon-trash delete-current-value" data-toggle="tooltip" title="Delete"></span> + <span class="glyphicon glyphicon-edit"></span> + <span class="glyphicon glyphicon-trash delete-current-value" data-toggle="tooltip" title="Delete"></span> </dd> {% if layerversion.layer.up_id %} <dt>Layer index</dt> @@ -277,5 +279,7 @@ </div> </div> </div> +</div> <!-- close column 12 div --> +</div> <!-- close top row div --> {% endblock %} diff --git a/bitbake/lib/toaster/toastergui/templates/toastertable-simple.html b/bitbake/lib/toaster/toastergui/templates/toastertable-simple.html index e0a203d..26445c3 100644 --- a/bitbake/lib/toaster/toastergui/templates/toastertable-simple.html +++ b/bitbake/lib/toaster/toastergui/templates/toastertable-simple.html @@ -27,68 +27,74 @@ {% include 'toastertable-filter.html' %} <div id="no-results-{{table_name}}" style="display:none"> - <div class="alert"> - <form class="no-results input-append"> - <input class="input-xlarge" id="new-search-input-{{table_name}}" name="search" type="text" placeholder="Search {{title|lower}}" value="{% if request.GET.search %}{{request.GET.search}}{% endif %}"/> - <a href="#" class="input-append-addon btn remove-search-btn-{{table_name}}" tabindex="-1"> - <i class="glyphicon glyphicon-remove"></i> - </a> - <button class="btn search-submit-{{table_name}}" >Search</button> - <button class="btn btn-link remove-search-btn-{{table_name}}">Show {{title|lower}} - </button> + <div class="alert alert-warning"> + <form class="no-results form-inline"> + <div class="form-group"> + <div class="btn-group"> + <input class="form-control" id="new-search-input-{{table_name}}" 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"></span> + </div> + </div> + <button class="btn btn-default search-submit-{{table_name}}">Search</button> + <button class="btn btn-link remove-search-btn-{{table_name}}">Show all {{title|lower}}</button> </form> </div> </div> <div id="table-container-{{table_name}}" style="visibility: hidden"> <!-- control header --> <div id="table-chrome-{{table_name}}"> - <div class="navbar-search input-append pull-left"> + <div class="container-fluid detail-page-contols"> + <form class="navbar-form navbar-left"> + <div class="form-group"> + <div class="btn-group"> + <input class="form-control" id="search-input-{{table_name}}" name="search" type="text" placeholder="Search {{title|lower}}" value="{% if request.GET.search %}{{request.GET.search}}{% endif %}"/> + <span href="#" style="display:none" class="remove-search-btn-{{table_name}} glyphicon glyphicon-remove-circle" tabindex="-1"></span> + </div> + </div> + <button class="btn btn-default" id="search-submit-{{table_name}}" >Search</button> + </form> - <input class="input-xlarge" id="search-input-{{table_name}}" 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> - <button class="btn" id="search-submit-{{table_name}}" >Search</button> - </div> - - <div class="pull-right"> - - <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> + <form class="navbar-form navbar-right"> + <div class="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> </div> <!-- The actual table --> - <table class="table table-bordered table-hover tablesorter" id="{{table_name}}"> - <thead> - <tr><th></th></tr> - </thead> - <tbody></tbody> - </table> + <div class="table-responsive"> + <table class="table table-bordered table-hover" id="{{table_name}}"> + <thead> + <tr><th></th></tr> + </thead> + <tbody></tbody> + </table> + </div> <!-- Pagination controls --> <div id="pagination-{{table_name}}"> - <ul class="pagination"> - </ul> + <ul class="pagination"> + </ul> - <div class="pull-right"> - <span class="help-inline">Show rows:</span> - <select 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> + <form class="navbar-form navbar-right"> + <div class="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> </div> -- 1.9.1 -- _______________________________________________ toaster mailing list [email protected] https://lists.yoctoproject.org/listinfo/toaster
