Style it for Bootstrap 3.
Signed-off-by: Belen Barros Pena <[email protected]>
---
.../lib/toaster/toastergui/static/css/default.css | 27 +++-
.../toaster/toastergui/static/js/importlayer.js | 8 +-
.../toaster/toastergui/templates/importlayer.html | 136 ++++++++++-----------
3 files changed, 92 insertions(+), 79 deletions(-)
diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css
b/bitbake/lib/toaster/toastergui/static/css/default.css
index 363e3ce..f9116e9 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -82,7 +82,7 @@ tbody > tr > td > .glyphicon-minus-sign { color: #a94442; }
/* Set the font size for icons inside headings and lead paragraphs */
h1 > .glyphicon-edit,
p.lead .glyphicon { font-size: 16px; }
-
+h2 > .glyphicon-question-sign,
h3 > .glyphicon-question-sign { font-size: 14px; }
/* Create a class for wells without background colour */
@@ -113,12 +113,15 @@ h3 > .glyphicon-question-sign { font-size: 14px; }
#freq-build-btn { margin-top: 10px; }
#no-most-built { margin-top: 20px; }
-/* Style the layers section in the project page */
+/* 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 { 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,
+#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; }
#layers-in-project-list .tooltip-inner { max-width: 600px; }
#no-layers-in-project { margin-top: 20px; }
#no-layers-in-project ul { margin-top: 10px; }
@@ -134,4 +137,16 @@ h2 { margin-bottom: 25px; }
.tt-suggestion { padding: 5px 10px; }
.tt-suggestion:hover,
.tt-suggestion:active { background-color: #f5f5f5; cursor: pointer; }
-
+
+/* Style the import layer form controls*/
+legend { border: none; }
+#layer-name-ctrl { margin-top: 20px; }
+#import-layer-name,
+#layer-subdir { width: 20%; }
+#layer-git-repo-url { width: 40%; }
+#layer-git-ref { width: 32%; }
+#layer-dependency { width: 16em; }
+#form-actions { margin-bottom: 30px; }
+#duplicate-layer-info dl { margin-top: 10px; }
+#duplicate-layer-info dd { margin-bottom: 10px; }
+.help-inline { color: #737373; margin-left: 10px; }
diff --git a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
index e193557..2f59567 100644
--- a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
+++ b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
@@ -46,7 +46,7 @@ function importLayerPageInit (ctx) {
currentLayerDepSelection = choice;
}
else {
- layerDepBtn.attr("disabled", "disabled");
+ layerDepBtn.attr("disabled","disabled");
currentLayerDepSelection = undefined;
}
});
@@ -70,7 +70,7 @@ function importLayerPageInit (ctx) {
layerDeps[currentLayerDepSelection.id] = currentLayerDepSelection;
/* 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=\"Remove\"></span></li>");
newLayerDep.data('layer-id', currentLayerDepSelection.id);
newLayerDep.children("span").tooltip();
@@ -263,7 +263,7 @@ function importLayerPageInit (ctx) {
layerNameInput.on('input', function() {
if ($(this).val() && !validLayerName.test($(this).val())){
- layerNameCtrl.addClass("error")
+ layerNameCtrl.addClass("has-error")
$("#invalid-layer-name-hint").show();
enable_import_btn(false);
return;
@@ -280,7 +280,7 @@ function importLayerPageInit (ctx) {
* reason.
*/
if (!duplicatedLayerName.is(":visible"))
- layerNameCtrl.removeClass("error")
+ layerNameCtrl.removeClass("has-error")
$("#invalid-layer-name-hint").hide();
check_form();
diff --git a/bitbake/lib/toaster/toastergui/templates/importlayer.html
b/bitbake/lib/toaster/toastergui/templates/importlayer.html
index 765106c..e7522d7 100644
--- a/bitbake/lib/toaster/toastergui/templates/importlayer.html
+++ b/bitbake/lib/toaster/toastergui/templates/importlayer.html
@@ -29,7 +29,7 @@
<form class="col-md-11">
<fieldset>
- <legend>Layer repository information</legend>
+ <h2>Layer repository information</h2>
<span class="help-block">The layer you are importing
must be compatible with <strong>{{project.release.description}}</strong>, which
is the release you are using in this project.</span>
<div class="alert alert-error" id="import-error"
style="display:none">
<button type="button" class="close"
data-dismiss="alert">×</button>
@@ -38,89 +38,87 @@
<ul></ul>
</div>
- <div class="control-group" id="layer-name-ctrl">
- <label class="control-label air"
for="import-layer-name">
+ <div class="form-group" id="layer-name-ctrl">
+ <label class="control-label" for="import-layer-name">
Layer name
- <span class="icon-question-sign get-help"
title="Something like 'meta-mylayer'. Your layer name must be unique and can
only include letters, numbers and dashes"></span>
+ <span class="glyphicon glyphicon-question-sign
get-help" title="Something like 'meta-mylayer'. Your layer name must be unique
and can only include letters, numbers and dashes"></span>
</label>
- <div class="controls">
- <input id="import-layer-name" type="text" required
autofocus data-autocomplete="off" data-provide="typeahead">
- <span class="help-inline" style="display: none;"
id="invalid-layer-name-hint">A valid layer name can only include letters,
numbers and dashes</span>
- <span class="help-inline" style="display: none;"
id="duplicated-layer-name-hint"></span>
- </div>
-
+ <input class="form-control" id="import-layer-name"
type="text" required autofocus data-autocomplete="off" data-provide="typeahead">
+ <span class="help-block" style="display: none;"
id="invalid-layer-name-hint">A valid layer name can only include letters,
numbers and dashes</span>
+ <span class="help-inline" style="display: none;"
id="duplicated-layer-name-hint"></span>
</div>
- <div id="duplicate-layer-info" style="display:none">
- <div class="alert warning">
- <h3>A layer called <a href=""
class="dup-layer-link"><span class="dup-layer-name"></span></a> already
exists</h3>
- <p>Layer names must be unqiue. Please use a
different layer name.</p>
- </div>
- <dl>
- <dt>
- The <span class="dup-layer-name"></span>
repository url is
- </dt>
- <dd>
- <span id="dup-layer-vcs-url"></span>
- </dd>
-
- <dt>
- The <span class="dup-layer-name"></span> revision
is
- </dt>
- <dd>
- <span id="dup-layer-revision"></span>
- </dd>
- </dl>
-
- <p><a href="" class="dup-layer-link">View the <span
class="dup-layer-name"></span> layer information</a></p>
+ <div id="duplicate-layer-info" style="display:none">
+ <div class="alert alert-warning">
+
<h3>A layer called <a href=""
class="dup-layer-link"><span class="dup-layer-name"></span></a> already
exists</h3>
+
<p>Layer names must be unqiue. Please use a different
layer name.</p>
+
<dl>
+
<dt>
+
The <span
class="dup-layer-name"></span> repository url is
+
</dt>
+
<dd>
+
<span id="dup-layer-vcs-url"></span>
+
</dd>
+
<dt>
+
The <span
class="dup-layer-name"></span> revision is
+
</dt>
+
<dd>
+
<span id="dup-layer-revision"></span>
+
</dd>
+
</dl>
+
<p><a href="" class="dup-layer-link">View the <span
class="dup-layer-name"></span> layer information</a></p>
+
</div>
</div>
<div class="fields-apart-from-layer-name">
- <label for="layer-git-repo-url" class="project-form">
- Git repository URL
- <span class="icon-question-sign get-help"
title="Fetch/clone URL of the repository. Currently, Toaster only supports Git
repositories." ></span>
- </label>
-
- <input type="text" id="layer-git-repo-url"
class="input-xxlarge" required>
- <label class="project-form" for="layer-subdir">
- Repository subdirectory
- <span class="muted">(optional)</span>
- <span 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)"></span>
- </label>
- <input type="text" id="layer-subdir">
-
- <div class="control-group" id="layer-revision-ctrl">
- <label class="control-label project-form"
for="layer-git-ref">Git revision
- <span class="icon-question-sign get-help"
title="You can provide a Git branch, a tag or a commit SHA as the
revision"></span>
- </label>
- <div class="controls">
- <input type="text" class="col-md-3"
id="layer-git-ref" required>
- <span class="help-inline" style="diaply:none;"
id="invalid-layer-revision-hint"></span>
- </div>
- </div>
+
<div class="form-group">
+
<label for="layer-git-repo-url">
+
Git repository URL
+
<span class="glyphicon glyphicon-question-sign
get-help" title="Fetch/clone URL of the repository. Currently, Toaster only
supports Git repositories." ></span>
+
</label>
+
+
<input type="text" id="layer-git-repo-url"
class="form-control" required>
+
</div>
+
<div class="form-group">
+
<label for="layer-subdir">
+
Repository subdirectory
+
<span class="text-muted">(optional)</span>
+
<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>
+
</label>
+
<input type="text" class="form-control"
id="layer-subdir">
+
</div>
+
<div class="form-group" id="layer-revision-ctrl">
+ <label for="layer-git-ref">Git revision
+
<span class="glyphicon glyphicon-question-sign
get-help" title="You can provide a Git branch, a tag or a commit SHA as the
revision"></span>
+ </label>
+ <input type="text" class="form-control"
id="layer-git-ref" required>
+ <span class="help-inline" style="diaply:none;"
id="invalid-layer-revision-hint"></span>
+ </div>
</div>
</fieldset>
<div class="fields-apart-from-layer-name">
- <fieldset class="air">
- <legend>
+ <fieldset>
+ <h2>
Layer dependencies
- <span class="muted">(optional)</span>
- <span class="icon-question-sign get-help
heading-help" title="Other layers this layer depends upon"></span>
- </legend>
- <ul class="list-unstyled configuration-list"
id="layer-deps-list">
+ <small class="text-muted">(optional)</small>
+ <span class="glyphicon glyphicon-question-sign
get-help heading-help" title="Other layers this layer depends upon"></span>
+ </h2>
+ <ul class="list-unstyled lead" id="layer-deps-list">
</ul>
- <div class="input-append">
- <input type="text" autocomplete="off"
data-minLength="1" data-autocomplete="off" data-provide="typeahead"
placeholder="Type a layer name" id="layer-dependency" class="input-xlarge">
- <a class="btn" id="add-layer-dependency-btn">
- Add layer
- </a>
- </div>
- <span class="help-inline">You can only add layers
Toaster knows about</span>
+ <div class="form-inline">
+
<div class="form-group">
+
<input type="text" autocomplete="off"
data-minLength="1" data-autocomplete="off" data-provide="typeahead"
placeholder="Type a layer name" id="layer-dependency" class="form-control">
+
</div>
+
<button class="btn btn-default"
id="add-layer-dependency-btn">
+
Add layer
+
</button>
+
<span class="help-inline">You can only add layers
Toaster knows about</span>
+
</div>
</fieldset>
- <div class="air" id="form-actions">
- <button class="btn btn-primary btn-large"
data-toggle="modal" id="import-and-add-btn" data-target="#dependencies-message"
disabled>Import and add to project</button>
+ <div class="top-air" id="form-actions">
+ <button class="btn btn-primary btn-lg"
data-toggle="modal" id="import-and-add-btn" data-target="#dependencies-message"
disabled>Import and add to project</button>
<span class="help-inline" id="import-and-add-hint"
style="vertical-align: middle;">To import a layer you need to enter a layer
name, a Git repository URL and a Git revision (branch, tag or commit)</span>
</div>
</div>
--
1.9.1
--
_______________________________________________
toaster mailing list
[email protected]
https://lists.yoctoproject.org/listinfo/toaster
