Make sure notifications for changes and creation of new projects and custom images display correctly with Boostrap 3. It also changes the notifications shown in the layer details pages, so that they use the same fixed positioned notifications we use everywhere else.
Signed-off-by: Belen Barros Pena <[email protected]> --- bitbake/lib/toaster/toastergui/static/css/default.css | 9 +++++++++ bitbake/lib/toaster/toastergui/static/js/layerdetails.js | 2 +- bitbake/lib/toaster/toastergui/static/js/libtoaster.js | 8 ++++---- bitbake/lib/toaster/toastergui/static/js/projectpage.js | 4 ++-- bitbake/lib/toaster/toastergui/templates/base.html | 2 +- bitbake/lib/toaster/toastergui/templates/customrecipe.html | 4 ++-- bitbake/lib/toaster/toastergui/templates/projecttopbar.html | 4 ++-- 7 files changed, 21 insertions(+), 12 deletions(-) diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css index 981abb1..7da8ce9 100644 --- a/bitbake/lib/toaster/toastergui/static/css/default.css +++ b/bitbake/lib/toaster/toastergui/static/css/default.css @@ -231,3 +231,12 @@ code { color: #333; background-color: transparent; } .modal-footer { text-align: left; } .date-filter-controls { margin-top: 10px; } .date-filter-controls span { margin: 0 10px; } + +/* Style the fixed positioned notifications */ +.loading-notification { position: fixed; z-index: 101; top: 3%; left: 40%; right: 40%; -webkit-box-shadow: 0 0 10px #c09853; -moz-box-shadow: 0 0 10px #c09853; box-shadow: 0 0 10px #c09853; } + +.change-notification { position: fixed; z-index: 1101; top: 4%; left: 30%; right: 30%; -webkit-box-shadow: 0 0 10px #3a87ad; -moz-box-shadow: 0 0 10px #3a87ad; box-shadow: 0 0 10px #3a87ad; } + +.alert-success.change-notification { -webkit-box-shadow: 0 0 10px #3c763d; -moz-box-shadow: 0 0 10px #3c763d; box-shadow: 0 0 10px #3c763d; } + + diff --git a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js index dbc6ba6..bf50477 100644 --- a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js +++ b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js @@ -297,7 +297,7 @@ function layerDetailsPageInit (ctx) { setLayerInCurrentPrj(add); - $("#alert-area").show(); + libtoaster.showChangeNotification(alertMsg); }); }); diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js index c00c5ab..a56e84a 100644 --- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js +++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js @@ -300,11 +300,11 @@ var libtoaster = (function () { var alertMsg; if (layerDepsList.length > 0 && add === true) { - alertMsg = $("<span>You have added <strong>"+(layerDepsList.length+1)+"</strong> layers to your project: <a id=\"layer-affected-name\"></a> and its dependencies </span>"); + alertMsg = $("<span>You have added <strong>"+(layerDepsList.length+1)+"</strong> layers to your project: <a class=\"alert-link\" id=\"layer-affected-name\"></a> and its dependencies </span>"); /* Build the layer deps list */ layerDepsList.map(function(layer, i){ - var link = $("<a></a>"); + var link = $("<a class=\"alert-link\"></a>"); link.attr("href", layer.layerdetailurl); link.text(layer.name); @@ -316,9 +316,9 @@ var libtoaster = (function () { alertMsg.append(link); }); } else if (layerDepsList.length === 0 && add === true) { - alertMsg = $("<span>You have added <strong>1</strong> layer to your project: <a id=\"layer-affected-name\"></a></span></span>"); + alertMsg = $("<span>You have added <strong>1</strong> layer to your project: <a class=\"alert-link\" id=\"layer-affected-name\"></a></span></span>"); } else if (add === false) { - alertMsg = $("<span>You have removed <strong>1</strong> layer from your project: <a id=\"layer-affected-name\"></a></span>"); + alertMsg = $("<span>You have removed <strong>1</strong> layer from your project: <a class=\"alert-link\" id=\"layer-affected-name\"></a></span>"); } alertMsg.children("#layer-affected-name").text(layer.name); diff --git a/bitbake/lib/toaster/toastergui/static/js/projectpage.js b/bitbake/lib/toaster/toastergui/static/js/projectpage.js index 9cbed2b..6d92490 100644 --- a/bitbake/lib/toaster/toastergui/static/js/projectpage.js +++ b/bitbake/lib/toaster/toastergui/static/js/projectpage.js @@ -75,7 +75,7 @@ function projectPageInit(ctx) { imported = JSON.parse(imported); if (imported.deps_added.length === 0) { - message = "You have imported <strong><a href=\""+imported.imported_layer.layerdetailurl+"\">"+imported.imported_layer.name+"</a></strong> and added it to your project."; + message = "You have imported <strong><a class=\"alert-link\" href=\""+imported.imported_layer.layerdetailurl+"\">"+imported.imported_layer.name+"</a></strong> and added it to your project."; } else { var links = "<a href=\""+imported.imported_layer.layerdetailurl+"\">"+imported.imported_layer.name+"</a>, "; @@ -285,7 +285,7 @@ function projectPageInit(ctx) { machineChangeCancel.click(); /* Show the alert message */ - var message = $('<span class="lead">You have changed the machine to: <strong><span id="notify-machine-name"></span></strong></span>'); + var message = $('<span>You have changed the machine to: <strong><span id="notify-machine-name"></span></strong></span>'); message.find("#notify-machine-name").text(currentMachineAddSelection); libtoaster.showChangeNotification(message); }, diff --git a/bitbake/lib/toaster/toastergui/templates/base.html b/bitbake/lib/toaster/toastergui/templates/base.html index 43a3cbd..f62b7db 100644 --- a/bitbake/lib/toaster/toastergui/templates/base.html +++ b/bitbake/lib/toaster/toastergui/templates/base.html @@ -66,7 +66,7 @@ Loading <i class="fa-pulse icon-spinner"></i> </div> - <div id="change-notification" class="alert lead alert-info" style="display:none"> + <div id="change-notification" class="alert alert-info change-notification" style="display:none"> <button type="button" class="close" id="hide-alert">×</button> <span id="change-notification-msg"></span> </div> diff --git a/bitbake/lib/toaster/toastergui/templates/customrecipe.html b/bitbake/lib/toaster/toastergui/templates/customrecipe.html index be63c56..3f034a2 100644 --- a/bitbake/lib/toaster/toastergui/templates/customrecipe.html +++ b/bitbake/lib/toaster/toastergui/templates/customrecipe.html @@ -87,9 +87,9 @@ </div><!-- /.modal --> <!-- end package dependencies modal --> -<div class="alert alert-success lead" id="image-created-notification" style="margin-top: 15px; display: none"> +<div class="alert alert-success change-notification" id="image-created-notification" style="display: none"> <button type="button" data-dismiss="alert" class="close">x</button> - Your custom image <strong>{{recipe.name}}</strong> has been created. You can now add or remove packages as needed. + <p>Your custom image <strong>{{recipe.name}}</strong> has been created. You can now add or remove packages as needed.</p> </div> <div class="page-header"> <h1> diff --git a/bitbake/lib/toaster/toastergui/templates/projecttopbar.html b/bitbake/lib/toaster/toastergui/templates/projecttopbar.html index f8ee2d8..78d124a 100644 --- a/bitbake/lib/toaster/toastergui/templates/projecttopbar.html +++ b/bitbake/lib/toaster/toastergui/templates/projecttopbar.html @@ -17,9 +17,9 @@ </script> <div class="col-md-12"> - <div class="alert alert-success lead" id="project-created-notification" style="margin-top:15px; display:none"> + <div class="alert alert-success change-notification" id="project-created-notification" style="display:none"> <button type="button" class="close" data-dismiss="alert">??</button> - Your project <strong>{{project.name}}</strong> has been created. You can now <a href="{% url 'projectmachines' project.id %}">select your target machine</a> and <a href="{% url 'projectimagerecipes' project.id %}">choose image recipes</a> to build. + <p>Your project <strong>{{project.name}}</strong> has been created. You can now <a class="alert-link" href="{% url 'projectmachines' project.id %}">select your target machine</a> and <a class="alert-link" href="{% url 'projectimagerecipes' project.id %}">choose image recipes</a> to build.</p> </div> <!-- project name --> <div class="page-header"> -- 1.9.1
-- _______________________________________________ toaster mailing list [email protected] https://lists.yoctoproject.org/listinfo/toaster
