frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add spinner to deploy button

Browse Source
This commit is contained in:
Nick O'Leary 2016-10-20 13:11:12 +01:00
parent 67d5b39c96
commit 97fa28fb10
2 changed files with 42 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
editor/js/ui/deploy.js
View File

@ -32,7 +32,7 @@ RED.deploy = (function() {
function changeDeploymentType(type) { function changeDeploymentType(type) {
deploymentType = type; deploymentType = type;
$("#btn-deploy img").attr("src",deploymentTypes[type].img); $("#btn-deploy-icon").attr("src",deploymentTypes[type].img);
} }
var currentDiff = null; var currentDiff = null;
@ -50,7 +50,15 @@ RED.deploy = (function() {
if (type == "default") { if (type == "default") {
$('<li><span class="deploy-button-group button-group">'+ $('<li><span class="deploy-button-group button-group">'+
'<a id="btn-deploy" class="deploy-button disabled" href="#"><img id="btn-deploy-icon" src="red/images/deploy-full-o.png"> <span>'+RED._("deploy.deploy")+'</span></a>'+ '<a id="btn-deploy" class="deploy-button disabled" href="#">'+
'<span class="deploy-button-content">'+
'<img id="btn-deploy-icon" src="red/images/deploy-full-o.png"> '+
'<span>'+RED._("deploy.deploy")+'</span>'+
'</span>'+
'<span class="deploy-button-spinner hide">'+
'<img src="red/images/spin.svg"/>'+
'</span>'+
'</a>'+
'<a id="btn-deploy-options" data-toggle="dropdown" class="deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+ '<a id="btn-deploy-options" data-toggle="dropdown" class="deploy-button" href="#"><i class="fa fa-caret-down"></i></a>'+
'</span></li>').prependTo(".header-toolbar"); '</span></li>').prependTo(".header-toolbar");
RED.menu.init({id:"btn-deploy-options", RED.menu.init({id:"btn-deploy-options",
@ -69,8 +77,14 @@ RED.deploy = (function() {
$('<li><span class="deploy-button-group button-group">'+ $('<li><span class="deploy-button-group button-group">'+
'<a id="btn-deploy" class="deploy-button disabled" href="#">'+ '<a id="btn-deploy" class="deploy-button disabled" href="#">'+
'<span class="deploy-button-content">'+
(icon?'<img id="btn-deploy-icon" src="'+icon+'"> ':'')+ (icon?'<img id="btn-deploy-icon" src="'+icon+'"> ':'')+
'<span>'+label+'</span></a>'+ '<span>'+label+'</span>'+
'</span>'+
'<span class="deploy-button-spinner hide">'+
'<img src="red/images/spin.svg"/>'+
'</span>'+
'</a>'+
'</span></li>').prependTo(".header-toolbar"); '</span></li>').prependTo(".header-toolbar");
} }
@ -519,9 +533,7 @@ RED.deploy = (function() {
function save(skipValidation,force) { function save(skipValidation,force) {
if (RED.nodes.dirty()) { if (!$("#btn-deploy").hasClass("disabled")) {
//$("#debug-tab-clear").click(); // uncomment this to auto clear debug on deploy
if (!skipValidation) { if (!skipValidation) {
var hasUnknown = false; var hasUnknown = false;
var hasInvalid = false; var hasInvalid = false;
@ -590,8 +602,9 @@ RED.deploy = (function() {
var nns = RED.nodes.createCompleteNodeSet(); var nns = RED.nodes.createCompleteNodeSet();
$("#btn-deploy-icon").removeClass('fa-download'); $(".deploy-button-content").css('opacity',0);
$("#btn-deploy-icon").addClass('spinner'); $(".deploy-button-spinner").show();
$("#btn-deploy").addClass("disabled");
var data = {flows:nns}; var data = {flows:nns};
@ -641,6 +654,7 @@ RED.deploy = (function() {
RED.events.emit("deploy"); RED.events.emit("deploy");
}).fail(function(xhr,textStatus,err) { }).fail(function(xhr,textStatus,err) {
RED.nodes.dirty(true); RED.nodes.dirty(true);
$("#btn-deploy").removeClass("disabled");
if (xhr.status === 401) { if (xhr.status === 401) {
RED.notify(RED._("deploy.deployFailed",{message:RED._("user.notAuthorized")}),"error"); RED.notify(RED._("deploy.deployFailed",{message:RED._("user.notAuthorized")}),"error");
} else if (xhr.status === 409) { } else if (xhr.status === 409) {
@ -651,8 +665,8 @@ RED.deploy = (function() {
RED.notify(RED._("deploy.deployFailed",{message:RED._("deploy.errors.noResponse")}),"error"); RED.notify(RED._("deploy.deployFailed",{message:RED._("deploy.errors.noResponse")}),"error");
} }
}).always(function() { }).always(function() {
$("#btn-deploy-icon").removeClass('spinner'); $(".deploy-button-content").css('opacity',1);
$("#btn-deploy-icon").addClass('fa-download'); $(".deploy-button-spinner").hide();
}); });
} }
} }

19
editor/sass/header.scss
View File

@ -111,6 +111,7 @@ span.logo {
} }
#header .button-group > a { #header .button-group > a {
display: inline-block; display: inline-block;
position: relative;
float: left; float: left;
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
@ -133,6 +134,20 @@ span.logo {
} }
} }
.deploy-button-spinner {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
img {
opacity: 0.8;
height: 100%;
}
}
#btn-deploy { #btn-deploy {
padding: 4px 12px; padding: 4px 12px;
@ -142,7 +157,7 @@ span.logo {
background: $deployDisabledButton; background: $deployDisabledButton;
color: #999 !important; color: #999 !important;
img { .deploy-button-content>img {
opacity: 0.3; opacity: 0.3;
} }
@ -158,7 +173,7 @@ span.logo {
} }
} }
img { .deploy-button-content>img {
margin-right: 8px; margin-right: 8px;
} }
} }