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>

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 @@
 .get-help-yellow:hover { color: #B38942; cursor: pointer; }
 .get-help-red { color: #B94A48; font-size: 16px; padding-left: 2px; }
 .get-help-red:hover { color: #943A38; cursor: pointer; }
+.build-form .get-help { margin-left: 5px; }
 .manual { margin: 11px 15px;}
 .heading-help { font-size: 14px; }
 
@@ -157,6 +158,7 @@ input.huge { font-size: 17.5px; padding: 11px 19px; }
 .build-form .input-append { margin-bottom: 0px; }
 .build-form .btn-large { padding: 11px 35px; }
 .build-form p { font-size:17.5px ;margin:12px 0 0 10px;}
+#layer-container form, #target-container form { margin-bottom: 0px; }
 .btn-primary .icon-question-sign, .btn-danger .icon-question-sign { color: #fff; }
 .btn-primary .icon-question-sign:hover, .btn-danger .icon-question-sign:hover { color: #999; }
 a 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
         var oldLayers = [];
         switch(elementid) {
             case '#select-machine':
-                alertText = "You have changed the machine to: <b>" + $scope.machineName + "</b>";
+                alertText = "You have changed the machine to: <strong>" + $scope.machineName + "</strong>";
                 alertZone = $scope.zone2alerts;
                 data['machineName'] = $scope.machineName;
                 break;
             case '#change-project-name':
                 data['projectName'] = $scope.projectName;
-                alertText = "You have changed the project name to: <b>" + $scope.projectName + "</b>";
+                alertText = "You have changed the project name to: <strong>" + $scope.projectName + "</strong>";
                 alertZone = $scope.zone3alerts;
                 break;
             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
   <!-- build form -->
   <div class="well">
     <form class="build-form" ng-submit="targetNamedBuild()">
-      <div class="input-append input-prepend controls">
-        <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"/>
+      <div class="input-append controls">
+        <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"/>
         <button type="submit" id="build-button" class="btn btn-large btn-primary" ng-disabled="!targetName.length">
         Build
-        <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>
         </button>
       </div>
+      <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>
       <p>
-        <a href="{% url 'targets' %}" style="padding-right: 5px;">
+        <a href="{% url 'targets' %}">
           View all targets
         </a>
         {% if completedbuilds.count %}
@@ -167,7 +167,7 @@ vim: expandtab tabstop=2
 
 
           <case ng-switch-when="completed">
-            <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>
+            <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>
             <div class="span2 lead">
               <ngif ng-if="b.build[0].completed_on - todaydate > 0">
                  {[b.build[0].completed_on|date:'HH:mm']}
@@ -224,10 +224,12 @@ vim: expandtab tabstop=2
         Or type a layer name below.
         </p>
       </div>
-      <form class="input-append" ng-submit="layerAdd()">
+      <form ng-submit="layerAdd()">
+        <div class="input-append">
           <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 }" />
           <input type="submit" id="add-layer" class="btn" value="Add" ng-disabled="!layerAddName.length"/>
-          {% csrf_token %}
+        </div>
+        {% csrf_token %}
       </form>
       <p><a href="{% url 'layers' %}">View all layers</a> | <a href="{% url 'importlayer' %}">Import layer</a></p>
       <ul class="unstyled configuration-list">
@@ -245,15 +247,17 @@ vim: expandtab tabstop=2
         Targets
         <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>
       </h3>
-        <form ng-submit="targetNamedBuild()" class="input-append">
-          <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">
-          <button type="submit" id="build-button" class="btn btn-primary" ng-disabled="!targetName1.length">
-            Build </button>
+        <form ng-submit="targetNamedBuild()">
+          <div class="input-append">
+            <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">
+            <button type="submit" id="build-button" class="btn btn-primary" ng-disabled="!targetName1.length">
+              Build </button>
+          </div>
           {% csrf_token %}
         </form>
         <p><a href="{% url 'targets' %}">View all targets</a></p>
         <div ng-if="frequenttargets.length">
-        <h4>
+        <h4 class="air">
             Most built targets
         </h4>
         <ul class="unstyled configuration-list">
@@ -274,7 +278,8 @@ vim: expandtab tabstop=2
         <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>
       </h3>
       <p class="lead" id="select-machine-opposite">
-        {[machine.name]}<i id="change-machine" class="icon-pencil" ng-click="toggle('#select-machine')" tooltip="Change"></i>
+        <span>{[machine.name]}</span>
+        <i id="change-machine" class="icon-pencil" ng-click="toggle('#select-machine')" tooltip="Change"></i>
       </p>
       <div id="select-machine" style="display: none">
         <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) {
 
     {% if project %}
         _makeXHREditCall({ 'layerAdd': selected.join(",") }, function onXHRSuccess() {
-            show_alert("You have added <strong>"+selected.length+"</strong> layer(s) to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>:" + layer_link_list);
+            show_alert("You have added <strong>"+selected.length+"</strong> layer(s) to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: " + layer_link_list);
         });
     {% endif %}