bitbake: toaster: Migrate project configuration from bootstrap 2 to bootstrap 3

Convert all the HTML templates, JS and CSS in the project parts of
toaster to use bootstrap 3.

(Bitbake rev: 69527a731eada699d3f604ff8f3ae9410981ba9b)

Signed-off-by: Belen Barros Pena <belen.barros.pena@linux.intel.com>
Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

1 files changed, 39 insertions, 28 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
index d545406262..a56087b738 100644
--- a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
+++ b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
@@ -18,6 +18,13 @@ function layerDetailsPageInit (ctx) {
     layerDepBtn.removeAttr("disabled");
   });
 
+  /* disable the add layer button if its input field is empty */
+  layerDepInput.on("keyup",function(){
+    if ($(this).val().length === 0) {
+      layerDepBtn.attr("disabled", "disabled");
+    }
+  });
+
   $(window).on('hashchange', function(e){
     switch(window.location.hash){
       case '#machines':
@@ -76,7 +83,7 @@ function layerDetailsPageInit (ctx) {
 
     addRemoveDep(currentLayerDepSelection.id, true, function(){
       /* 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=\"Delete\"></span></li>");
 
       newLayerDep.data('layer-id', currentLayerDepSelection.id);
       newLayerDep.children("span").tooltip();
@@ -94,11 +101,11 @@ function layerDetailsPageInit (ctx) {
       /* Clear the current selection */
       layerDepInput.val("");
       currentLayerDepSelection = undefined;
-      layerDepBtn.attr("disabled","disabled");
+      layerDepBtn.attr("disabled", "disabled");
     });
   });
 
-  $(".icon-pencil").click(function (){
+  $(".glyphicon-edit").click(function (){
     var mParent = $(this).parent("dd");
     mParent.prev().css("margin-top", "10px");
     mParent.children("form").slideDown();
@@ -106,8 +113,12 @@ function layerDetailsPageInit (ctx) {
     currentVal.hide();
     /* Set the current value to the input field */
     mParent.find("textarea,input").val(currentVal.text());
+    /* If the input field is empty, disable the submit button */
+    if ( mParent.find("textarea,input").val().length == 0 ) {
+      mParent.find(".change-btn").attr("disabled", "disabled");
+    }
     /* Hides the "Not set" text */
-    mParent.children(".muted").hide();
+    mParent.children(".text-muted").hide();
     /* We're editing so hide the delete icon */
     mParent.children(".delete-current-value").hide();
     mParent.find(".cancel").show();
@@ -128,21 +139,21 @@ function layerDetailsPageInit (ctx) {
       mParent.children(".current-value").show();
       /* Show the "Not set" text if we ended up with no value */
       if (!mParent.children(".current-value").html()){
-        mParent.children(".muted").fadeIn();
+        mParent.children(".text-muted").fadeIn();
         mParent.children(".delete-current-value").hide();
       } else {
         mParent.children(".delete-current-value").show();
       }
 
-      mParent.children(".icon-pencil").show();
-      mParent.prev().css("margin-top", "0px");
+      mParent.children(".glyphicon-edit").show();
+      mParent.prev().css("margin-top", "0");
     });
   });
 
   function defaultAddBtnText(){
       var text = " Add the "+ctx.layerVersion.name+" layer to your project";
       addRmLayerBtn.text(text);
-      addRmLayerBtn.prepend("<span class=\"icon-plus\"></span>");
+      addRmLayerBtn.prepend("<span class=\"glyphicon glyphicon-plus\"></span>");
       addRmLayerBtn.removeClass("btn-danger");
   }
 
@@ -159,7 +170,7 @@ function layerDetailsPageInit (ctx) {
         var text = " Add the "+ctx.layerVersion.name+" layer to your project "+
           "to enable these recipes";
         addRmLayerBtn.text(text);
-        addRmLayerBtn.prepend("<span class=\"icon-plus\"></span>");
+        addRmLayerBtn.prepend("<span class=\"glyphicon glyphicon-plus\"></span>");
       } else {
         defaultAddBtnText();
       }
@@ -177,7 +188,7 @@ function layerDetailsPageInit (ctx) {
       $("#no-recipes-yet").hide();
     }
 
-    targetTab.removeClass("muted");
+    targetTab.removeClass("text-muted");
     if (window.location.hash === "#recipes"){
       /* re run the machinesTabShow to update the text */
       targetsTabShow();
@@ -192,20 +203,20 @@ function layerDetailsPageInit (ctx) {
     else
       $("#no-machines-yet").hide();
 
-    machineTab.removeClass("muted");
+    machineTab.removeClass("text-muted");
     if (window.location.hash === "#machines"){
       /* re run the machinesTabShow to update the text */
       machinesTabShow();
     }
 
     $(".select-machine-btn").click(function(e){
-      if ($(this).attr("disabled") === "disabled")
+      if ($(this).hasClass("disabled"))
         e.preventDefault();
     });
 
   });
 
-  targetTab.on('show', targetsTabShow);
+  targetTab.on('show.bs.tab', targetsTabShow);
 
   function machinesTabShow(){
     if (!ctx.layerVersion.inCurrentPrj) {
@@ -213,7 +224,7 @@ function layerDetailsPageInit (ctx) {
         var text = " Add the "+ctx.layerVersion.name+" layer to your project " +
           "to enable these machines";
         addRmLayerBtn.text(text);
-        addRmLayerBtn.prepend("<span class=\"icon-plus\"></span>");
+        addRmLayerBtn.prepend("<span class=\"glyphicon glyphicon-plus\"></span>");
       } else {
         defaultAddBtnText();
       }
@@ -222,7 +233,7 @@ function layerDetailsPageInit (ctx) {
     window.location.hash = "machines";
   }
 
-  machineTab.on('show', machinesTabShow);
+  machineTab.on('show.bs.tab', machinesTabShow);
 
   $(".pagesize").change(function(){
     var search = libtoaster.parseUrlParams();
@@ -239,17 +250,17 @@ function layerDetailsPageInit (ctx) {
 
     if (added){
       /* enable and switch all the button states */
-      $(".build-recipe-btn").removeAttr("disabled");
-      $(".select-machine-btn").removeAttr("disabled");
+      $(".build-recipe-btn").removeClass("disabled");
+      $(".select-machine-btn").removeClass("disabled");
       addRmLayerBtn.addClass("btn-danger");
       addRmLayerBtn.data('directive', "remove");
       addRmLayerBtn.text(" Remove the "+ctx.layerVersion.name+" layer from your project");
-      addRmLayerBtn.prepend("<span class=\"icon-trash\"></span>");
+      addRmLayerBtn.prepend("<span class=\"glyphicon glyphicon-trash\"></span>");
 
     } else {
       /* disable and switch all the button states */
-      $(".build-recipe-btn").attr("disabled","disabled");
-      $(".select-machine-btn").attr("disabled", "disabled");
+      $(".build-recipe-btn").addClass("disabled");
+      $(".select-machine-btn").addClass("disabled");
       addRmLayerBtn.removeClass("btn-danger");
       addRmLayerBtn.data('directive', "add");
 
@@ -257,7 +268,7 @@ function layerDetailsPageInit (ctx) {
        * on which tab is currently visible. Unfortunately we can't just call
        * tab('show') as if it's already visible it doesn't run the event.
        */
-      switch ($(".nav-pills .active a").prop('id')){
+      switch ($(".nav-tabs .active a").prop('id')){
         case 'machines-tab':
           machinesTabShow();
           break;
@@ -286,7 +297,7 @@ function layerDetailsPageInit (ctx) {
 
       setLayerInCurrentPrj(add);
 
-      $("#alert-area").show();
+      libtoaster.showChangeNotification(alertMsg);
     });
   });
 
@@ -325,7 +336,7 @@ function layerDetailsPageInit (ctx) {
             text = entryElement.val();
 
             /* Hide the "Not set" text if it's visible */
-            inputArea.find(".muted").hide();
+            inputArea.find(".text-muted").hide();
             inputArea.find(".current-value").text(text);
             /* Same behaviour as cancel in that we hide the form/show current
              * value.
@@ -343,9 +354,9 @@ function layerDetailsPageInit (ctx) {
   /* Disable the change button when we have no data in the input */
   $("dl input, dl textarea").on("input",function() {
     if ($(this).val().length === 0)
-      $(this).parent().children(".change-btn").attr("disabled", "disabled");
+      $(this).parent().next(".change-btn").attr("disabled", "disabled");
     else
-      $(this).parent().children(".change-btn").removeAttr("disabled");
+      $(this).parent().next(".change-btn").removeAttr("disabled");
   });
 
   /* This checks to see if the dt's dd has data in it or if the change data
@@ -359,7 +370,7 @@ function layerDetailsPageInit (ctx) {
         /* There's no current value and the layer is editable
          * so show the "Not set" and hide the delete icon
          */
-        dd.find(".muted").show();
+        dd.find(".text-muted").show();
         dd.find(".delete-current-value").hide();
         } else {
           /* We're not viewing an editable layer so hide the empty dd/dl pair */
@@ -387,9 +398,9 @@ function layerDetailsPageInit (ctx) {
   });
 
 
-  layerDepsList.find(".icon-trash").click(layerDepRemoveClick);
+  layerDepsList.find(".glyphicon-trash").click(layerDepRemoveClick);
   layerDepsList.find("a").tooltip();
-  $(".icon-trash").tooltip();
+  $(".glyphicon-trash").tooltip();
   $(".commit").tooltip();
 
 }