Minor Toaster UI fixes
cover Minor Toaster UI fixes
Pulls together a variety of small Toaster UI tweaks by Belen.
The following changes since commit c0fe43b9bb8a82ecfc2ed72ad9b39f435fe3b707 (toaster-next):
toaster: toastergui Fix invalid char test and implementation (2016-02-16 17:54:25 -0800)
are available in the git repository at:
git://git.yoctoproject.org/poky-contrib elliot/submit/bbarrosp/misc_ui_fixes
http://git.yoctoproject.org/cgit.cgi/poky-contrib/log/?h=elliot/submit/bbarrosp/misc_ui_fixes
Belen Barros Pena (9):
toaster: comment out project release change
toaster: fix custom image name form
toaster: apply error class to name field
toaster: disable add layer button on click
toaster: reduce max height of modal dialogs
toaster: link to configuration in all breadcrumbs
toaster: make 'configuration' the first tab
toaster: adjust the search field width
toaster: add missing link to image recipe details
lib/toaster/toastergui/static/css/default.css | 5 +++-- lib/toaster/toastergui/static/js/layerdetails.js | 15 --------------- .../toastergui/static/js/newcustomimage_modal.js | 3 +++ lib/toaster/toastergui/static/js/projectpage.js | 2 ++ lib/toaster/toastergui/tables.py | 7 +++++++ .../toastergui/templates/basebuilddetailpage.html | 4 ++-- lib/toaster/toastergui/templates/basebuildpage.html | 4 ++-- lib/toaster/toastergui/templates/basetable_top.html | 4 ++-- lib/toaster/toastergui/templates/layerdetails.html | 4 +--- .../toastergui/templates/newcustomimage_modal.html | 2 +- lib/toaster/toastergui/templates/project.html | 19 ++++++++++++++----- lib/toaster/toastergui/templates/projecttopbar.html | 10 +++++----- lib/toaster/toastergui/templates/recipedetails.html | 5 +---- lib/toaster/toastergui/templates/toastertable.html | 4 ++-- 14 files changed, 45 insertions(+), 43 deletions(-)
--
1.9.3
---------------------------------------------------------------------
Intel Corporation (UK) Limited
Registered No. 1134945 (England)
Registered Office: Pipers Way, Swindon SN3 1RJ
VAT No: 860 2173 47
This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.
PATCH 1/9 toaster: comment out project release change
From: Belen Barros Pena <[email protected]>
Although the support for building more than one release and how we handle the build directories is the subject of lively discussion, we all seem to agree on removing the ability to change the release of a project. The feature is currently not working but exposed to users, which is not a happy state of affairs.
This patch comments out the controls that give access to the release changing functionality to hide them from users, but does not touch anything else. Once all moving pieces start to settle down, we can make a final decision regarding this feature, and clean up the code accordingly.
[YOCTO #8917]
--- lib/toaster/toastergui/templates/project.html | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-)
lib/toaster/toastergui/templates/project.html +14 -5
@@ -24,7 +24,9 @@ }); </script> -<div id="change-release-modal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="change-release-modal" aria-hidden="false"> +<!-- Comment out the ability to change the project release, until we decide what to do this functionality --> + +<!--div id="change-release-modal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="change-release-modal" aria-hidden="false"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> <h3>Changing Yocto Project release to <span class="proposed-release-change-name"></span></h3>
@@ -39,7 +41,7 @@ <button id="change-release-and-rm-layers" data-dismiss="modal" type="submit" class="btn btn-primary">Change release and delete layers</button> <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> </div> -</div> +</div--> <div class="row-fluid" id="project-page" style="display:none">
@@ -79,12 +81,19 @@ <div class="well well-transparent"> <h3>Project release</h3> - <p class="lead"><span id="project-release-title"></span> <i title="" data-original-title="" id="release-change-toggle" class="icon-pencil"></i></p> + <p class="lead"><span id="project-release-title"></span> + + <!-- Comment out the ability to change the project release, until we decide what to do with this functionality --> - <form class="form-inline" id="change-release-form" style="display:none;"> + <!--i title="" data-original-title="" id="release-change-toggle" class="icon-pencil"></i--> + </p> + + <!-- Comment out the ability to change the project release, until we decide what to do with this functionality --> + + <!--form class="form-inline" id="change-release-form" style="display:none;"> <select></select> <button class="btn" style="margin-left:5px;" id="change-release-btn">Change</button> <a href="#" id="cancel-release-change" class="btn btn-link">Cancel</a> - </form> + </form--> </div> </div>
Signature · 12 lines
1.9.3 --------------------------------------------------------------------- Intel Corporation (UK) Limited Registered No. 1134945 (England) Registered Office: Pipers Way, Swindon SN3 1RJ VAT No: 860 2173 47 This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.
PATCH 2/9 toaster: fix custom image name form
From: Belen Barros Pena <[email protected]>
The placeholder text in the form where you name your new custom images didn't display fully. This patch fixes the styles so that the text shows properly. It also changes the text itself to make it a bit shorter.
[YOCTO #9122]
--- lib/toaster/toastergui/static/css/default.css | 2 +- lib/toaster/toastergui/templates/newcustomimage_modal.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-)
lib/toaster/toastergui/static/css/default.css +1 -1
@@ -197,7 +197,7 @@ table p { margin-bottom: 0 } .configuration-alert p { margin-bottom: 0px; } .project-form { margin-top: 10px; } .add-layers .btn-block + .btn-block, .build .btn-block + .btn-block { margin-top: 0px; } -input.huge { font-size: 17.5px; padding: 11px 19px; } +input.huge { font-size: 17.5px; padding: 11px; min-width: 60%; } .build-form { margin-bottom: 0px; } .build-form .input-append { margin-bottom: 0px; } .build-form .btn-large { padding: 11px 35px; }
lib/toaster/toastergui/templates/newcustomimage_modal.html +1 -1
@@ -22,7 +22,7 @@ <span class="help-block span8">Image names must be unique. They should not contain spaces or capital letters, and the only allowed special character is dash (-).<p></p> </span></div> <div class="control-group controls"> - <input type="text" class="huge span5" placeholder="Type the name, something like 'core-image-myimage'" required> + <input type="text" class="huge" placeholder="Type the custom image name" required> <span class="help-block error" id="invalid-name-help" style="display:none"></span> </div> </div>
Signature · 12 lines
1.9.3 --------------------------------------------------------------------- Intel Corporation (UK) Limited Registered No. 1134945 (England) Registered Office: Pipers Way, Swindon SN3 1RJ VAT No: 860 2173 47 This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.
PATCH 3/9 toaster: apply error class to name field
In reply to Elliot SmithFrom: Belen Barros Pena <[email protected]>
The form for naming new custom images shows you an error message when the name already exists or you include an invalid character in it. But when an error appears, the input field was missing the red highlight.
This patch applies the right class to the form controls whenever an error message is shown.
--- lib/toaster/toastergui/static/js/newcustomimage_modal.js | 3 +++ 1 file changed, 3 insertions(+)
lib/toaster/toastergui/static/js/newcustomimage_modal.js +3 -0
@@ -36,6 +36,7 @@ function newCustomImageModalInit(){ function showError(text){ invalidNameHelp.text(text); invalidNameHelp.show(); + nameInput.parent().addClass('error'); } nameInput.on('keyup', function(){
@@ -47,9 +48,11 @@ function newCustomImageModalInit(){ if (nameInput.val().search(/[^a-z|0-9|-]/) != -1){ showError(invalidMsg); newCustomImgBtn.prop("disabled", true); + nameInput.parent().addClass('error'); } else { invalidNameHelp.hide(); newCustomImgBtn.prop("disabled", false); + nameInput.parent().removeClass('error'); } }); }
Signature · 12 lines
1.9.3 --------------------------------------------------------------------- Intel Corporation (UK) Limited Registered No. 1134945 (England) Registered Office: Pipers Way, Swindon SN3 1RJ VAT No: 860 2173 47 This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.
PATCH 4/9 toaster: disable add layer button on click
In reply to Elliot SmithFrom: Belen Barros Pena <[email protected]>
The 'add layer' button in the project configuration page remains enabled after you add a layer. If you click it again, the same layer you just added is added again.
This patch disables the 'add layer' button on click, to avoid this bit of weirdness.
[YOCTO #8905]
--- lib/toaster/toastergui/static/js/projectpage.js | 2 ++ 1 file changed, 2 insertions(+)
lib/toaster/toastergui/static/js/projectpage.js +2 -0
@@ -116,6 +116,8 @@ function projectPageInit(ctx) { addRmLayer(layerObj, true); /* Reset the text input */ layerAddInput.val(""); + /* Disable the add layer button*/ + layerAddBtn.attr("disabled", "disabled"); }); function addRmLayer(layerObj, add){
Signature · 12 lines
1.9.3 --------------------------------------------------------------------- Intel Corporation (UK) Limited Registered No. 1134945 (England) Registered Office: Pipers Way, Swindon SN3 1RJ VAT No: 860 2173 47 This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.
PATCH 5/9 toaster: reduce max height of modal dialogs
In reply to Elliot SmithFrom: Belen Barros Pena <[email protected]>
Now that we use modal dialogs to display dependency information for packages, we are hitting their maximum height relatively often. It is set by default to 400px, which makes it a bit tight at a 1280x800 viewport size.
Reduce the maximum height to 300px to make things a bit more comfortable.
--- lib/toaster/toastergui/static/css/default.css | 1 + 1 file changed, 1 insertion(+)
lib/toaster/toastergui/static/css/default.css +1 -0
@@ -51,6 +51,7 @@ dd li { line-height: 25px; } /* Style the filter modal dialogs */ .modal { width: 800px; margin-left: -400px; } .modal-footer .btn { float: left; } +.modal-body { max-height: 300px; } /* Hover style for the clear search icon */ .icon-remove-sign:hover { color: #999999; cursor: pointer; }
Signature · 12 lines
1.9.3 --------------------------------------------------------------------- Intel Corporation (UK) Limited Registered No. 1134945 (England) Registered Office: Pipers Way, Swindon SN3 1RJ VAT No: 860 2173 47 This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.
PATCH 6/9 toaster: link to configuration in all breadcrumbs
In reply to Elliot SmithFrom: Belen Barros Pena <[email protected]>
The existing breadcrumb does not always provide a link to the project configuration page. When you are in the build history pages, you must go back to the builds information first, and from there access the project configuration. That feels very long.
Change the breadcrumb so that the project name item always provides a link to the project configuration.
--- lib/toaster/toastergui/static/css/default.css | 1 - lib/toaster/toastergui/static/js/layerdetails.js | 15 --------------- lib/toaster/toastergui/templates/basebuilddetailpage.html | 4 ++-- lib/toaster/toastergui/templates/basebuildpage.html | 4 ++-- lib/toaster/toastergui/templates/layerdetails.html | 4 +--- lib/toaster/toastergui/templates/recipedetails.html | 5 +---- 6 files changed, 6 insertions(+), 27 deletions(-)
lib/toaster/toastergui/static/css/default.css +0 -1
@@ -10,7 +10,6 @@ /* Style the breadcrumb */ .breadcrumb { display: inline-block; background-color: transparent; } -.breadcrumb li:first-child { padding-right: 10px; } /* Styles for the help information */ .get-help { color: #CCCCCC; }
lib/toaster/toastergui/static/js/layerdetails.js +0 -15
@@ -32,21 +32,6 @@ function layerDetailsPageInit (ctx) { } }); - - $(".breadcrumb li:first a").click(function(e){ - e.preventDefault(); - /* By default this link goes to the project configuration page. However - * if we have some builds we go there instead of the default href - */ - libtoaster.getProjectInfo(libtoaster.ctx.projectPageUrl, function(prjInfo){ - if (prjInfo.builds && prjInfo.builds.length > 0) { - window.location.replace(libtoaster.ctx.projectBuildsUrl); - } else { - window.location.replace(libtoaster.ctx.projectPageUrl); - } - }); - }); - function addRemoveDep(depLayerId, add, doneCb) { var data = { layer_version_id : ctx.layerVersion.id }; if (add)
lib/toaster/toastergui/templates/basebuilddetailpage.html +2 -2
@@ -6,7 +6,7 @@ <!-- Breadcrumbs --> <div class="section"> <ul class="breadcrumb" id="breadcrumb"> - <li class="muted">{{build.project.name}}:</li> + <li><a href="{% url 'project' build.project.id %}">{{build.project.name}}</a></li> <li><a href="{% url 'projectbuilds' build.project.id %}">Builds</a></li> <li><a href="{%url 'builddashboard' build.pk%}">{{build.get_sorted_target_list.0.target}} {%if build.target_set.all.count > 1%}(+{{build.target_set.all.count|add:"-1"}}){%endif%} {{build.machine}} ({{build.completed_on|date:"d/m/y H:i"}})</a></li> {% block localbreadcrumb %}{% endblock %}
@@ -15,7 +15,7 @@ $( function () { $('#breadcrumb > li').append('<span class="divider">→</span>'); $('#breadcrumb > li:last').addClass("active"); - $('#breadcrumb > li:last > span, #breadcrumb > li:first > span').remove(); + $('#breadcrumb > li:last > span').remove(); }); </script> </div> <!--section-->
lib/toaster/toastergui/templates/basebuildpage.html +2 -2
@@ -8,7 +8,7 @@ <!-- Breadcrumbs --> <div class="section"> <ul class="breadcrumb" id="breadcrumb"> - <li class="muted">{{build.project.name}}:</li> + <li><a href="{% url 'project' build.project.id %}">{{build.project.name}}</a></li> <li><a href="{% url 'projectbuilds' build.project.id %}">Builds</a></li> <li> {% block parentbreadcrumb %}
@@ -23,7 +23,7 @@ $( function () { $('#breadcrumb > li').append('<span class="divider">→</span>'); $('#breadcrumb > li:last').addClass("active"); - $('#breadcrumb > li:last > span, #breadcrumb > li:first > span').remove(); + $('#breadcrumb > li:last > span').remove(); }); </script> </div>
lib/toaster/toastergui/templates/layerdetails.html +1 -3
@@ -8,9 +8,8 @@ <div class="section"> <ul class="breadcrumb"> - <li class="muted">{{project.name}}:</li> <li> - <a href="{% url 'project' project.id %}">Configuration</a> + <a href="{% url 'project' project.id %}">{{project.name}}</a> <span class="divider">→</span> </li> <li><a href="{% url 'projectlayers' project.id %}">Compatible layers</a>
@@ -46,7 +45,6 @@ $(document).ready(function (){ var ctx = { - projectBuildsUrl : "{% url 'projectbuilds' project.id %}", xhrUpdateLayerUrl : "{% url 'xhr_updatelayer' %}", layerVersion : { name : "{{layerversion.layer.name}}",
lib/toaster/toastergui/templates/recipedetails.html +1 -4
@@ -6,11 +6,8 @@ <div class="section"> <ul class="breadcrumb"> - <li class="muted"> - {{project.name}} - </li> <li> - <a href="{% url 'project' project.id %}">Configuration</a> + <a href="{% url 'project' project.id %}">{{project.name}}</a> <span class="divider">→</span> </li> <li>
Signature · 12 lines
1.9.3 --------------------------------------------------------------------- Intel Corporation (UK) Limited Registered No. 1134945 (England) Registered Office: Pipers Way, Swindon SN3 1RJ VAT No: 860 2173 47 This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.
PATCH 7/9 toaster: make 'configuration' the first tab
In reply to Elliot SmithFrom: Belen Barros Pena <[email protected]>
Our project pages have 4 tabs: builds, configuration, import layer and new custom image. Even though we treat the 'configuration' as the default tab, it comes second after the builds tab.
That's a bit strange: the default tab should be the first one listed. This patch changes the tab order to put 'configuration' first.
--- lib/toaster/toastergui/templates/projecttopbar.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-)
lib/toaster/toastergui/templates/projecttopbar.html +5 -5
@@ -44,17 +44,17 @@ {% if not project.is_default %} <div id="project-topbar"> <ul class="nav nav-pills"> - <li> - <a href="{% url 'projectbuilds' project.id %}"> - Builds ({{project.get_number_of_builds}}) - </a> - </li> <li id="topbar-configuration-tab"> <a href="{% url 'project' project.id %}"> Configuration </a> </li> <li> + <a href="{% url 'projectbuilds' project.id %}"> + Builds ({{project.get_number_of_builds}}) + </a> + </li> + <li> <a href="{% url 'importlayer' project.id %}"> Import layer </a>
Signature · 12 lines
1.9.3 --------------------------------------------------------------------- Intel Corporation (UK) Limited Registered No. 1134945 (England) Registered Office: Pipers Way, Swindon SN3 1RJ VAT No: 860 2173 47 This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.
PATCH 8/9 toaster: adjust the search field width
In reply to Elliot SmithFrom: Belen Barros Pena <[email protected]>
The search field at the top of our tables was using one of the Bootstrap classes for text field sizing. Those classes are a bit rigid, resulting in text fields too wide that made other table controls wrap.
Setting a maximum width to the search form using one of the span classes, combined with a % width css declaration, make for text fields that adapt a bit better to the horizontal space available in each table.
--- lib/toaster/toastergui/static/css/default.css | 1 + lib/toaster/toastergui/templates/basetable_top.html | 4 ++-- lib/toaster/toastergui/templates/toastertable.html | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-)
lib/toaster/toastergui/static/css/default.css +1 -0
@@ -114,6 +114,7 @@ th > a, th > span { font-weight: normal; } /* Styles for the navbar actions */ .btn-group + .btn-group { margin-right: 10px; } .navbar-inner > .btn-group { margin-top: 6px; } +[id^="search-input-"], #search { width: 80%; } /* Styles for the parent item in the left navigation */
lib/toaster/toastergui/templates/basetable_top.html +2 -2
@@ -161,8 +161,8 @@ <!-- control header --> <div class="navbar"> <div class="navbar-inner"> - <form class="navbar-search input-append pull-left" id="searchform"> - <input class="input-xxlarge" 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="add-on btn" tabindex="-1"><i class="icon-remove"></i></a>{%endif%} + <form class="navbar-search input-append pull-left span6" id="searchform"> + <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="add-on btn" tabindex="-1"><i class="icon-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>
lib/toaster/toastergui/templates/toastertable.html +2 -2
@@ -46,9 +46,9 @@ <!-- control header --> <div class="navbar" id="table-chrome-{{table_name}}"> <div class="navbar-inner"> - <div class="navbar-search input-append pull-left"> + <div class="navbar-search input-append pull-left span6"> - <input class="input-xxlarge" id="search-input-{{table_name}}" name="search" type="text" placeholder="Search {{title|lower}}" value="{%if request.GET.search%}{{request.GET.search}}{%endif%}"/> + <input 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="add-on btn remove-search-btn-{{table_name}}" tabindex="-1"> <i class="icon-remove"></i> </a>
Signature · 12 lines
1.9.3 --------------------------------------------------------------------- Intel Corporation (UK) Limited Registered No. 1134945 (England) Registered Office: Pipers Way, Swindon SN3 1RJ VAT No: 860 2173 47 This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.
PATCH 9/9 toaster: add missing link to image recipe details
In reply to Elliot SmithFrom: Belen Barros Pena <[email protected]>
In the 'New custom image' page, each image recipe name listed should link to the corresponding image recipe details page, so that users can look into what packages are installed by a certain image, and decide based on that if they want to customise it or not.
This patch adds that missing link.
--- lib/toaster/toastergui/tables.py | 7 +++++++ 1 file changed, 7 insertions(+)
lib/toaster/toastergui/tables.py +7 -0
@@ -589,12 +589,19 @@ class NewCustomImagesTable(ImageRecipesTable): self.queryset = self.queryset.filter(is_image=True) def setup_columns(self, *args, **kwargs): + + name_link_template = ''' + <a href="{% url 'recipedetails' extra.pid data.pk %}">{{data.name}}</a> + ''' + self.add_column(title="Image recipe", help_text="When you build an image recipe, you get an " "image: a root file system you can" "deploy to a machine", hideable=False, orderable=True, + static_data_name="name", + static_data_template=name_link_template, field_name="name") super(ImageRecipesTable, self).setup_columns(*args, **kwargs)
Signature · 12 lines
1.9.3 --------------------------------------------------------------------- Intel Corporation (UK) Limited Registered No. 1134945 (England) Registered Office: Pipers Way, Swindon SN3 1RJ VAT No: 860 2173 47 This e-mail and any attachments may contain confidential material for the sole use of the intended recipient(s). Any review or distribution by others is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.