Make sure the project configuration page looks nice with Bootstrap 3.
Signed-off-by: Belen Barros Pena <[email protected]>
---
.../lib/toaster/toastergui/static/css/default.css | 54 ++++++++++++++++++--
.../lib/toaster/toastergui/static/js/libtoaster.js | 4 +-
.../toaster/toastergui/static/js/projectpage.js | 4 +-
.../toastergui/templates/baseprojectpage.html | 2 +-
.../lib/toaster/toastergui/templates/project.html | 59 +++++++++-------------
.../toastergui/templates/projecttopbar.html | 43 ++++++++--------
6 files changed, 102 insertions(+), 64 deletions(-)
diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css
b/bitbake/lib/toaster/toastergui/static/css/default.css
index 3790f9c..795fe41 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -68,8 +68,56 @@ thead > tr > th > a.sorted { font-weight: bold; color: #333;
}
/* In table headings, separate the help bubble from the column heading */
thead > tr > th > .glyphicon-question-sign { margin-right: 5px; }
-/* Style build outcome and download icons */
+/* Style build outcome in tables, download, remove and change icons */
tbody > tr > td > .glyphicon-ok-circle { color: #3c763d; }
tbody > tr > td > .glyphicon-minus-sign { color: #a94442; }
-.glyphicon-download-alt { color: #337ab7; }
-.glyphicon-download-alt:hover { color: #23527c; }
+.glyphicon-download-alt,
+.glyphicon-edit { color: #337ab7; }
+.glyphicon-download-alt:hover,
+.glyphicon-edit:hover { color: #23527c; cursor: pointer }
+.glyphicon-trash { color: #a94442; }
+.glyphicon-trash:hover { color: #843534; cursor: pointer; }
+
+/* Set the font size for icons inside headings and lead paragraphs */
+h1 > .glyphicon-edit,
+p.lead .glyphicon { font-size: 16px; }
+
+h3 > .glyphicon-question-sign { font-size: 14px; }
+
+/* Create a class for wells without background colour */
+.well-transparent { background-color: transparent; }
+
+/* Create a class for the left navigation headers */
+.nav-header { display: block; font-size: 12px; font-weight: bold; line-height:
20px; color: #999; text-transform: uppercase; margin-top: 20px !important;
margin-bottom: 15px; padding-left: 15px; }
+
+/* Increase the tabs padding and margin in the project pages to fit the build
form and the main content */
+#project-topbar .nav-tabs > li > a { padding: 15px; }
+#project-topbar { margin-bottom: 20px; }
+
+/* Style the project name change form in the project pages */
+#project-name-change-input { width: 20em; }
+
+/* Style the build form in the project pages */
+#project-topbar .input-lg { width: 18em; }
+#project-topbar form .glyphicon { top: 15px; right: 4px; }
+#build-button { padding: 10px 30px; }
+
+/* Style the form links in the project page (all machines, all layers, etc) */
+.form-link { margin-top: 10px; }
+
+/* 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 { margin-top: 20px; }
+#freq-build-list label { padding-left: 0; }
+#freq-build-btn { margin-top: 10px; }
+#no-most-built { margin-top: 20px; }
+
+/* Style the layers section in the project page */
+#layer-container .form-inline { margin-top: 20px; }
+#layer-add-input { width: 17em; }
+#layers-in-project-list { margin-top: 20px; }
+#layers-in-project-list > li { line-height: 38px; }
+#layers-in-project-list .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; }
diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
index fad1429..c00c5ab 100644
--- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
@@ -557,8 +557,8 @@ $(document).ready(function() {
// show task type and outcome in task details pages
$(".task-info").tooltip({ container: 'body', html: true, delay: {show:
200}, placement: 'right' });
- // initialise the tooltips for the icon-pencil icons
- $(".icon-pencil").tooltip({ container: 'body', html: true, delay: {show:
400}, title: "Change" });
+ // initialise the tooltips for the edit icons
+ $(".glyphicon-edit").tooltip({ container: 'body', html: true, delay:
{show: 400}, title: "Change" });
// initialise the tooltips for the download icons
$(".icon-download-alt").tooltip({ container: 'body', html: true, delay: {
show: 200 } });
diff --git a/bitbake/lib/toaster/toastergui/static/js/projectpage.js
b/bitbake/lib/toaster/toastergui/static/js/projectpage.js
index 3013416..9cbed2b 100644
--- a/bitbake/lib/toaster/toastergui/static/js/projectpage.js
+++ b/bitbake/lib/toaster/toastergui/static/js/projectpage.js
@@ -145,7 +145,7 @@ function projectPageInit(ctx) {
for (var i in layers){
var layerObj = layers[i];
- var projectLayer = $("<li><a></a><span class=\"icon-trash\"
data-toggle=\"tooltip\" title=\"Remove\"></span></li>");
+ var projectLayer = $("<li><a></a><span class=\"glyphicon
glyphicon-trash\" data-toggle=\"tooltip\" title=\"Remove\"></span></li>");
projectLayer.data('layer', layerObj);
projectLayer.children("span").tooltip();
@@ -208,7 +208,7 @@ function projectPageInit(ctx) {
}
for (var i in recipes){
- var freqTargetCheck = $('<li><label class="checkbox"><input
type="checkbox" /><span class="freq-target-name"></span></label></li>');
+ var freqTargetCheck = $('<li><div class="checkbox"><label><input
type="checkbox" /><span class="freq-target-name"></span></label></li>');
freqTargetCheck.find(".freq-target-name").text(recipes[i]);
freqTargetCheck.find("input").val(recipes[i]);
freqTargetCheck.click(function(){
diff --git a/bitbake/lib/toaster/toastergui/templates/baseprojectpage.html
b/bitbake/lib/toaster/toastergui/templates/baseprojectpage.html
index 483a485..b3b6f1c 100644
--- a/bitbake/lib/toaster/toastergui/templates/baseprojectpage.html
+++ b/bitbake/lib/toaster/toastergui/templates/baseprojectpage.html
@@ -24,7 +24,7 @@ $(document).ready(function(){
<!-- only on config pages -->
<div id="config-nav" class="col-md-2">
- <ul class="nav nav-list well">
+ <ul class="nav nav-pills nav-stacked">
<li><a class="nav-parent" href="{% url 'project' project.id
%}">Configuration</a></li>
<li class="nav-header">Compatible metadata</li>
<li><a href="{% url 'projectcustomimages' project.id %}">Custom
images</a></li>
diff --git a/bitbake/lib/toaster/toastergui/templates/project.html
b/bitbake/lib/toaster/toastergui/templates/project.html
index 045a89f..ff9eab7 100644
--- a/bitbake/lib/toaster/toastergui/templates/project.html
+++ b/bitbake/lib/toaster/toastergui/templates/project.html
@@ -54,19 +54,19 @@
<div class="well well-transparent" id="machine-section">
<h3>Machine</h3>
- <p class="lead"><span id="project-machine-name"></span> <i title=""
data-original-title="" id="change-machine-toggle" class="icon-pencil"></i></p>
+ <p class="lead"><span id="project-machine-name"></span> <span
class="glyphicon glyphicon-edit" id="change-machine-toggle"></span></p>
- <form id="select-machine-form" style="display:none;">
+ <form id="select-machine-form" style="display:none;" class="form-inline">
<div class="alert alert-info">
<strong>Machine changes have a big impact on build outcome.</strong>
You cannot really compare the builds for the new machine with the previous ones.
</div>
- <div class="input-append">
- <input id="machine-change-input" autocomplete="off" value=""
data-provide="typeahead" data-minlength="1" data-autocomplete="off" type="text">
- <button id="machine-change-btn" class="btn"
type="button">Save</button> <a href="#" id="cancel-machine-change" class="btn
btn-link">Cancel</a>
+ <div class="form-group">
+ <input class="form-control" id="machine-change-input"
autocomplete="off" value="" data-provide="typeahead" data-minlength="1"
data-autocomplete="off" type="text">
</div>
-
- <p><a href="{% url 'projectmachines' project.id %}" class="link">View
compatible machines</a></p>
+ <button id="machine-change-btn" class="btn btn-default"
type="button">Save</button>
+ <a href="#" id="cancel-machine-change" class="btn btn-link">Cancel</a>
+ <p class="form-link"><a href="{% url 'projectmachines' project.id
%}">View compatible machines</a></p>
</form>
</div>
@@ -74,11 +74,11 @@
<h3>Most built recipes</h3>
<div class="alert alert-info" style="display:none" id="no-most-built">
- <span class="lead">You haven't built any recipes yet</span>
- <p style="margin-top: 10px;"><a href="{% url 'projectimagerecipes'
project.id %}">Choose a recipe to build</a></p>
+ <h4>You haven't built any recipes yet</h4>
+ <p class="form-link"><a href="{% url 'projectimagerecipes' project.id
%}">Choose a recipe to build</a></p>
</div>
- <ul class="list-unstyled configuration-list" id="freq-build-list">
+ <ul class="list-unstyled lead" id="freq-build-list">
</ul>
<button class="btn btn-primary" id="freq-build-btn"
disabled="disabled">Build selected recipes</button>
</div>
@@ -104,44 +104,35 @@
<div class="col-md-6">
<div class="well well-transparent" id="layer-container">
- <h3>Layers <span class="muted counter">(<span
id="project-layers-count"></span>)</span>
- <i data-original-title="OpenEmbedded organises metadata into modules
called 'layers'. Layers allow you to isolate different types of customizations
from each other. <a
href='http://www.yoctoproject.org/docs/current/dev-manual/dev-manual.html#understanding-and-creating-layers'
target='_blank'>More on layers</a>" class="icon-question-sign get-help
heading-help" title=""></i>
+ <h3>Layers <span class="counter">(<span
id="project-layers-count"></span>)</span>
+ <span title="OpenEmbedded organises recipes and machines into thematic
groups called <strong>layers</strong>. Click on a layer name to see the recipes
and machines it includes." class="glyphicon glyphicon-question-sign
get-help"></span>
</h3>
- <div class="alert lead" id="no-layers-in-project" style="display:none">
- You need to add some layers. For that you can:
+ <div class="alert alert-warning" id="no-layers-in-project"
style="display:none">
+ <h4>This project has no layers</h4>
+ In order to build this project you need to add some layers first. For
that you can:
<ul>
- <li><a href="{% url 'projectlayers' project.id %}">View all layers
compatible with this project</a></li>
+ <li><a href="{% url 'projectlayers' project.id %}">Choose from the
layers compatible with this project</a></li>
<li><a href="{% url 'importlayer' project.id %}">Import a
layer</a></li>
<li><a
href="http://www.yoctoproject.org/docs/current/dev-manual/dev-manual.html#understanding-and-creating-layers";
target="_blank">Read about layers in the documentation</a></li>
+ <li>Or type a layer name below</li>
</ul>
- <p>Or type a layer name below.</p>
</div>
- <form style="margin-top:20px">
- <!--div class="control-group error"-->
-
- <div class="col-lg-ff6">
- <div class="input-append">
- <input id="layer-add-input" class="input-xlarge" autocomplete="off"
placeholder="Type a layer name" data-minlength="1" data-autocomplete="off"
data-provide="typeahead" data-source="" type="text">
- <button id="add-layer-btn" class="btn" disabled>Add</button>
- </div>
- </div>
-
- <div id="import-alert" class="alert alert-info" style="display:none;">
- Toaster does not know about this layer. Please <a href="#">import
it</a>
+ <form class="form-inline">
+ <div class="form-group">
+ <input id="layer-add-input" class="form-control" autocomplete="off"
placeholder="Type a layer name" data-minlength="1" data-autocomplete="off"
data-provide="typeahead" data-source="" type="text">
</div>
-
- <p>
+ <button id="add-layer-btn" class="btn btn-default" disabled>Add
layer</button>
+ <p class="form-link">
<a href="{% url 'projectlayers' project.id %}"
id="view-compatible-layers">View compatible layers</a>
- <i data-original-title="View all the layers you can build with the
release selected for this project, which is Yocto Project master"
class="icon-question-sign get-help" title=""></i>
- | <a href="{% url 'importlayer' project.id %}">Import layer</a>
+ <span class="text-muted">|</span>
+ <a href="{% url 'importlayer' project.id %}">Import layer</a>
</p>
</form>
- <ul class="list-unstyled configuration-list" id="layers-in-project-list">
+ <ul class="list-unstyled lead" id="layers-in-project-list">
</ul>
- </div>
</div>
</div>
{% endblock %}
diff --git a/bitbake/lib/toaster/toastergui/templates/projecttopbar.html
b/bitbake/lib/toaster/toastergui/templates/projecttopbar.html
index b662a6e..f8ee2d8 100644
--- a/bitbake/lib/toaster/toastergui/templates/projecttopbar.html
+++ b/bitbake/lib/toaster/toastergui/templates/projecttopbar.html
@@ -26,25 +26,24 @@
<h1 id="project-name-container">
<span id="project-name">{{project.name}}</span>
- <i class="icon-pencil" data-original-title=""
id="project-change-form-toggle" title=""></i>
+ <span class="glyphicon glyphicon-edit"
id="project-change-form-toggle"></i>
- {% if project.is_default %}
- <i class="icon-question-sign get-help heading-help" title=""
data-original-title="This project shows information about the builds you start
from the command line while Toaster is running"></i>
- {% endif %}
- </h1>
- <form id="project-name-change-form" style="margin-bottom: 0px; display:
none;">
- <div class="input-group" id="validate-project-name">
- <input class="huge input-xxlarge" type="text"
id="project-name-change-input" autocomplete="off" value="{{project.name}}">
- <button id="project-name-change-btn" class="btn btn-large"
type="button">Save</button>
- <a href="#" id="project-name-change-cancel" class="btn btn-lg
btn-link">Cancel</a>
- </div>
- <p class="help-block error" style="display: none;margin-top: 10px;"
id="hint-error-project-name">A project with this name exists. Project names
must be unique.</p>
- </form>
-</div>
+ {% if project.is_default %}
+ <span class="glyphicon glyphicon-question-sign get-help" title="This
project shows information about the builds you start from the command line
while Toaster is running"></span>
+ {% endif %}
+ </h1>
+ <form id="project-name-change-form" class="form-inline" style="display:
none;">
+ <div class="form-group">
+ <input class="form-control input-lg" type="text"
id="project-name-change-input" autocomplete="off" value="{{project.name}}">
+ </div>
+ <button id="project-name-change-btn" class="btn btn-default btn-lg"
type="button">Save</button>
+ <a href="#" id="project-name-change-cancel" class="btn btn-lg
btn-link">Cancel</a>
+ </form>
+ </div>
{% if not project.is_default %}
<div id="project-topbar">
- <ul class="nav nav-pills">
+ <ul class="nav nav-tabs">
<li id="topbar-configuration-tab">
<a href="{% url 'project' project.id %}">
Configuration
@@ -66,13 +65,13 @@
</a>
</li>
<li class="pull-right">
- <form class="form-inline" style="margin-bottom:0px;">
- <i class="icon-question-sign get-help heading-help"
data-placement="left" title="" data-original-title="Type the name of one or
more recipes you want to build, separated by a space. You can also specify a
task by appending a colon and a task name to the recipe name, like so:
<code>busybox:clean</code>"></i>
- <div class="input-append">
- <input id="build-input" type="text" class="huge build-target-input"
placeholder="Type the recipe you want to build" autocomplete="off" disabled>
- <button id="build-button" class="btn btn-primary btn-large
build-button" data-project-id="{{project.id}}" disabled>Build</button>
- </div>
- </form>
+ <form class="form-inline">
+ <div class="form-group">
+ <span class="glyphicon glyphicon-question-sign get-help"
data-placement="left" title="Type the name of one or more recipes you want to
build, separated by a space. You can also specify a task by appending a colon
and a task name to the recipe name, like so: <code>busybox:clean</code>"></span>
+ <input id="build-input" type="text" class="form-control input-lg"
placeholder="Type the recipe you want to build" autocomplete="off" disabled>
+ </div>
+ <button id="build-button" class="btn btn-primary btn-lg"
data-project-id="{{project.id}}" disabled>Build</button>
+ </form>
</li>
</ul>
</div>
--
1.9.1
--
_______________________________________________
toaster mailing list
[email protected]
https://lists.yoctoproject.org/listinfo/toaster
