summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBelen Barros <belen.barros.pena@intel.com>2014-11-11 12:22:46 +0000
committerRichard Purdie <richard.purdie@linuxfoundation.org>2014-11-12 17:04:50 +0000
commit76f1800f11cd424dcf4672886aae44a52722d5cf (patch)
tree8ec0f3e9fea1040929f5d4342945b9a0d0efb359
parent3a338a2be74764f6f36f28abd4f469d8514b62b6 (diff)
downloadpoky-76f1800f11cd424dcf4672886aae44a52722d5cf.tar.gz
bitbake: toastergui: Silly UI fixes
Small fixes to the UI of the project.html and targets.html templates. In project.html: * Remove some inline styles and replace them with declarations in default.css * Make sure that the 'add' and 'build' buttons in the project configuration areas have nice, rounded corners * Add some space between the machine name and the change icon * Remove the input-prepend class from the build form (we don't need it) * Apply the success class to target names in completed builds * Bold machine and project name in the change notifications to match all other notifications * There is a bug in Twitter Boostrap in tooltips inside buttons, so moving the tooltip in the 'build' button outside the button tag In targets.html, just add a missing space between the semicolon and the first layer name in the add layer notification. (Bitbake rev: 19113c4fe915be7db51ab06dfab5ea0797faea84) Signed-off-by: Belen Barros <belen.barros.pena@intel.com> Signed-off-by: Alexandru DAMIAN <alexandru.damian@intel.com> Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
-rw-r--r--bitbake/lib/toaster/toastergui/static/css/default.css2
-rw-r--r--bitbake/lib/toaster/toastergui/static/js/projectapp.js4
-rw-r--r--bitbake/lib/toaster/toastergui/templates/project.html31
-rw-r--r--bitbake/lib/toaster/toastergui/templates/targets.html2
4 files changed, 23 insertions, 16 deletions
diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index da9697c408..8e60fd8b56 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -15,6 +15,7 @@
15.get-help-yellow:hover { color: #B38942; cursor: pointer; } 15.get-help-yellow:hover { color: #B38942; cursor: pointer; }
16.get-help-red { color: #B94A48; font-size: 16px; padding-left: 2px; } 16.get-help-red { color: #B94A48; font-size: 16px; padding-left: 2px; }
17.get-help-red:hover { color: #943A38; cursor: pointer; } 17.get-help-red:hover { color: #943A38; cursor: pointer; }
18.build-form .get-help { margin-left: 5px; }
18.manual { margin: 11px 15px;} 19.manual { margin: 11px 15px;}
19.heading-help { font-size: 14px; } 20.heading-help { font-size: 14px; }
20 21
@@ -157,6 +158,7 @@ input.huge { font-size: 17.5px; padding: 11px 19px; }
157.build-form .input-append { margin-bottom: 0px; } 158.build-form .input-append { margin-bottom: 0px; }
158.build-form .btn-large { padding: 11px 35px; } 159.build-form .btn-large { padding: 11px 35px; }
159.build-form p { font-size:17.5px ;margin:12px 0 0 10px;} 160.build-form p { font-size:17.5px ;margin:12px 0 0 10px;}
161#layer-container form, #target-container form { margin-bottom: 0px; }
160.btn-primary .icon-question-sign, .btn-danger .icon-question-sign { color: #fff; } 162.btn-primary .icon-question-sign, .btn-danger .icon-question-sign { color: #fff; }
161.btn-primary .icon-question-sign:hover, .btn-danger .icon-question-sign:hover { color: #999; } 163.btn-primary .icon-question-sign:hover, .btn-danger .icon-question-sign:hover { color: #999; }
162a code { color: #0088CC; } 164a code { color: #0088CC; }
diff --git a/bitbake/lib/toaster/toastergui/static/js/projectapp.js b/bitbake/lib/toaster/toastergui/static/js/projectapp.js
index 356b92fc5a..f0569de04d 100644
--- a/bitbake/lib/toaster/toastergui/static/js/projectapp.js
+++ b/bitbake/lib/toaster/toastergui/static/js/projectapp.js
@@ -477,13 +477,13 @@ projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $loc
477 var oldLayers = []; 477 var oldLayers = [];
478 switch(elementid) { 478 switch(elementid) {
479 case '#select-machine': 479 case '#select-machine':
480 alertText = "You have changed the machine to: <b>" + $scope.machineName + "</b>"; 480 alertText = "You have changed the machine to: <strong>" + $scope.machineName + "</strong>";
481 alertZone = $scope.zone2alerts; 481 alertZone = $scope.zone2alerts;
482 data['machineName'] = $scope.machineName; 482 data['machineName'] = $scope.machineName;
483 break; 483 break;
484 case '#change-project-name': 484 case '#change-project-name':
485 data['projectName'] = $scope.projectName; 485 data['projectName'] = $scope.projectName;
486 alertText = "You have changed the project name to: <b>" + $scope.projectName + "</b>"; 486 alertText = "You have changed the project name to: <strong>" + $scope.projectName + "</strong>";
487 alertZone = $scope.zone3alerts; 487 alertZone = $scope.zone3alerts;
488 break; 488 break;
489 case '#change-project-version': 489 case '#change-project-version':
diff --git a/bitbake/lib/toaster/toastergui/templates/project.html b/bitbake/lib/toaster/toastergui/templates/project.html
index a8f2d6ad4f..38863a3ac6 100644
--- a/bitbake/lib/toaster/toastergui/templates/project.html
+++ b/bitbake/lib/toaster/toastergui/templates/project.html
@@ -88,15 +88,15 @@ vim: expandtab tabstop=2
88 <!-- build form --> 88 <!-- build form -->
89 <div class="well"> 89 <div class="well">
90 <form class="build-form" ng-submit="targetNamedBuild()"> 90 <form class="build-form" ng-submit="targetNamedBuild()">
91 <div class="input-append input-prepend controls"> 91 <div class="input-append controls">
92 <input type="text" class="huge span7 " placeholder="Type the target(s) you want to build" autocomplete="off" ng-model="targetName" typeahead="e.name for e in getSuggestions('targets', $viewValue)|filter:$viewValue" typeahead-template-url="suggestion_details" ng-disabled="!layers.length"/> 92 <input type="text" class="huge span7" placeholder="Type the target(s) you want to build" autocomplete="off" ng-model="targetName" typeahead="e.name for e in getSuggestions('targets', $viewValue)|filter:$viewValue" typeahead-template-url="suggestion_details" ng-disabled="!layers.length"/>
93 <button type="submit" id="build-button" class="btn btn-large btn-primary" ng-disabled="!targetName.length"> 93 <button type="submit" id="build-button" class="btn btn-large btn-primary" ng-disabled="!targetName.length">
94 Build 94 Build
95 <i class="icon-question-sign get-help heading-help" style="margin-left: 5px;" data-toggle="tooltip" title="Type the name of one or more targets you want to build, separated by a space. You can also specify a task by appending a semicolon and a task name to a target name, like so: <code>core-image-minimal:do_build</code>"></i>
96 </button> 95 </button>
97 </div> 96 </div>
97 <i class="icon-question-sign get-help get-help-blue" title="Type the name of one or more targets you want to build, separated by a space. You can also specify a task by appending a semicolon and a task name to a target name, like so: <code>core-image-minimal:do_build</code>"></i>
98 <p> 98 <p>
99 <a href="{% url 'targets' %}" style="padding-right: 5px;"> 99 <a href="{% url 'targets' %}">
100 View all targets 100 View all targets
101 </a> 101 </a>
102 {% if completedbuilds.count %} 102 {% if completedbuilds.count %}
@@ -167,7 +167,7 @@ vim: expandtab tabstop=2
167 167
168 168
169 <case ng-switch-when="completed"> 169 <case ng-switch-when="completed">
170 <div class="lead span3"><a href="{[b.build[0].build_page_url]}"><span ng-repeat="t in b.targets" ng-include src="'target_display'"></span></a></div> 170 <div class="lead span3"><a class="success" href="{[b.build[0].build_page_url]}"><span ng-repeat="t in b.targets" ng-include src="'target_display'"></span></a></div>
171 <div class="span2 lead"> 171 <div class="span2 lead">
172 <ngif ng-if="b.build[0].completed_on - todaydate > 0"> 172 <ngif ng-if="b.build[0].completed_on - todaydate > 0">
173 {[b.build[0].completed_on|date:'HH:mm']} 173 {[b.build[0].completed_on|date:'HH:mm']}
@@ -224,10 +224,12 @@ vim: expandtab tabstop=2
224 Or type a layer name below. 224 Or type a layer name below.
225 </p> 225 </p>
226 </div> 226 </div>
227 <form class="input-append" ng-submit="layerAdd()"> 227 <form ng-submit="layerAdd()">
228 <div class="input-append">
228 <input type="text" class="input-xlarge" id="layer" autocomplete="off" placeholder="Type a layer name" data-minLength="1" ng-model="layerAddName" typeahead="e.name for e in getSuggestions('layers', $viewValue)|filter:$viewValue" typeahead-template-url="suggestion_details" typeahead-on-select="onLayerSelect($item, $model, $label)" typeahead-editable="false" ng-class="{ 'has-error': layerAddName.$invalid }" /> 229 <input type="text" class="input-xlarge" id="layer" autocomplete="off" placeholder="Type a layer name" data-minLength="1" ng-model="layerAddName" typeahead="e.name for e in getSuggestions('layers', $viewValue)|filter:$viewValue" typeahead-template-url="suggestion_details" typeahead-on-select="onLayerSelect($item, $model, $label)" typeahead-editable="false" ng-class="{ 'has-error': layerAddName.$invalid }" />
229 <input type="submit" id="add-layer" class="btn" value="Add" ng-disabled="!layerAddName.length"/> 230 <input type="submit" id="add-layer" class="btn" value="Add" ng-disabled="!layerAddName.length"/>
230 {% csrf_token %} 231 </div>
232 {% csrf_token %}
231 </form> 233 </form>
232 <p><a href="{% url 'layers' %}">View all layers</a> | <a href="{% url 'importlayer' %}">Import layer</a></p> 234 <p><a href="{% url 'layers' %}">View all layers</a> | <a href="{% url 'importlayer' %}">Import layer</a></p>
233 <ul class="unstyled configuration-list"> 235 <ul class="unstyled configuration-list">
@@ -245,15 +247,17 @@ vim: expandtab tabstop=2
245 Targets 247 Targets
246 <i class="icon-question-sign get-help heading-help" title="What you build, often a recipe producing a root file system file (an image). Something like <code>core-image-minimal</code> or <code>core-image-sato</code>"></i> 248 <i class="icon-question-sign get-help heading-help" title="What you build, often a recipe producing a root file system file (an image). Something like <code>core-image-minimal</code> or <code>core-image-sato</code>"></i>
247 </h3> 249 </h3>
248 <form ng-submit="targetNamedBuild()" class="input-append"> 250 <form ng-submit="targetNamedBuild()">
249 <input type="text" class="input-xlarge" placeholder="Type the target(s) you want to build" autocomplete="off" data-minLength="1" ng-model="targetName1" typeahead="e.name for e in getSuggestions('targets', $viewValue)|filter:$viewValue" typeahead-template-url="suggestion_details" ng-disabled="!layers.length"> 251 <div class="input-append">
250 <button type="submit" id="build-button" class="btn btn-primary" ng-disabled="!targetName1.length"> 252 <input type="text" class="input-xlarge" placeholder="Type the target(s) you want to build" autocomplete="off" data-minLength="1" ng-model="targetName1" typeahead="e.name for e in getSuggestions('targets', $viewValue)|filter:$viewValue" typeahead-template-url="suggestion_details" ng-disabled="!layers.length">
251 Build </button> 253 <button type="submit" id="build-button" class="btn btn-primary" ng-disabled="!targetName1.length">
254 Build </button>
255 </div>
252 {% csrf_token %} 256 {% csrf_token %}
253 </form> 257 </form>
254 <p><a href="{% url 'targets' %}">View all targets</a></p> 258 <p><a href="{% url 'targets' %}">View all targets</a></p>
255 <div ng-if="frequenttargets.length"> 259 <div ng-if="frequenttargets.length">
256 <h4> 260 <h4 class="air">
257 Most built targets 261 Most built targets
258 </h4> 262 </h4>
259 <ul class="unstyled configuration-list"> 263 <ul class="unstyled configuration-list">
@@ -274,7 +278,8 @@ vim: expandtab tabstop=2
274 <i class="icon-question-sign get-help heading-help" title="The machine is the hardware for which you want to build. You can only set one machine per project"></i> 278 <i class="icon-question-sign get-help heading-help" title="The machine is the hardware for which you want to build. You can only set one machine per project"></i>
275 </h3> 279 </h3>
276 <p class="lead" id="select-machine-opposite"> 280 <p class="lead" id="select-machine-opposite">
277 {[machine.name]}<i id="change-machine" class="icon-pencil" ng-click="toggle('#select-machine')" tooltip="Change"></i> 281 <span>{[machine.name]}</span>
282 <i id="change-machine" class="icon-pencil" ng-click="toggle('#select-machine')" tooltip="Change"></i>
278 </p> 283 </p>
279 <div id="select-machine" style="display: none"> 284 <div id="select-machine" style="display: none">
280 <div class="alert alert-info"> 285 <div class="alert alert-info">
diff --git a/bitbake/lib/toaster/toastergui/templates/targets.html b/bitbake/lib/toaster/toastergui/templates/targets.html
index 8776a5d548..1f938aad2f 100644
--- a/bitbake/lib/toaster/toastergui/templates/targets.html
+++ b/bitbake/lib/toaster/toastergui/templates/targets.html
@@ -174,7 +174,7 @@ function show_dependencies_modal(layerId, layerName, layerURL, dependencies) {
174 174
175 {% if project %} 175 {% if project %}
176 _makeXHREditCall({ 'layerAdd': selected.join(",") }, function onXHRSuccess() { 176 _makeXHREditCall({ 'layerAdd': selected.join(",") }, function onXHRSuccess() {
177 show_alert("You have added <strong>"+selected.length+"</strong> layer(s) to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>:" + layer_link_list); 177 show_alert("You have added <strong>"+selected.length+"</strong> layer(s) to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: " + layer_link_list);
178 }); 178 });
179 {% endif %} 179 {% endif %}
180 180