christofsteel/warped
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improved enabling and disabling of arguments

Browse source
This commit is contained in:
Christoph Stahl 2017-05-07 20:46:56 +02:00
parent 167505eb22
commit 2b45e00347
2 changed files with 58 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
warp/static/css/app.css
View file

@ -14,6 +14,10 @@ ul {
margin: 0px; margin: 0px;
} }
li.action{
position: relative;
}
#arguments { #arguments {
padding: 0px; padding: 0px;
} }
@ -42,6 +46,28 @@ ul {
z-index: 2; z-index: 2;
} }
html, body {
background: #FAFAFA; }
.action label {
margin-bottom:0px;
}
li.action {
padding: 1rem 1rem 1rem 1rem;
}
.unlock-button {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.5;
transition: width 0.5s;
}
html, body { html, body {
background: #FAFAFA; } background: #FAFAFA; }

48
warp/static/js/app.js
View file

@ -117,19 +117,47 @@ function createInputAction(action) {
} }
} }
function disableAction(action) {
return function () {
console.log("disable");
thisli = $('#action-' + action['uuid']);
thisli.prop('disabled', true).addClass('disabled');
delbutton = $('#action-' + action['uuid' + "button"]);
delbutton.prop('disabled', true).addClass('disabled');
$("#action-" + action['uuid'] + " .unlock-button").css('width', "100%");
$("#action-" + action['uuid'] + " input").prop('disabled', true).addClass('disabled');
$("#action-" + action['uuid'] + " .addbutton").addClass('disabled').prop('disabled', true);
$("#action-" + action['uuid'] + " .rembutton").addClass('disabled').prop('disabled', true);
};
}
function enableAction(action) {
return function() {
console.log("enable");
thisli = $('#action-' + action['uuid']);
thisli.prop('disabled', false).removeClass('disabled');
delbutton = $('#action-' + action['uuid' + "button"]);
delbutton.prop('disabled', false).removeClass('disabled');
$("#action-" + action['uuid'] + " .unlock-button").css('width', 0);
$("#action-" + action['uuid'] + " input").prop('disabled', false).removeClass("disabled");
$("#action-" + action['uuid'] + " .addbutton").removeClass('disabled').prop('disabled', false);
$("#action-" + action['uuid'] + " .rembutton").removeClass('disabled').prop('disabled', false);
};
}
function createAction(action) { function createAction(action) {
if('choices' in action) { if('choices' in action) {
return createSubparserAction(action) return createSubparserAction(action)
} else { } else {
var li = $("<li/>",{'id': 'action-' + action['uuid']}).addClass("action"); var li = $("<li/>",{'id': 'action-' + action['uuid']}).addClass("action");
var row = $("<div/>").addClass("row").appendTo(li); var row = $("<div/>").addClass("row").appendTo(li);
var helpdiv = $("<div/>").addClass("columns small-2").appendTo(row);
var labeldiv = $("<div/>").addClass("columns small-3").appendTo(row); var labeldiv = $("<div/>").addClass("columns small-3").appendTo(row);
var label = $("<label/>", {for: action['uuid']}).addClass("middle").appendTo(labeldiv); var label = $("<label/>", {for: action['uuid']}).addClass("middle").appendTo(labeldiv);
var header = $("<b/>").text(action["dest"].toUpperCase()).appendTo(label); var header = $("<b/>").text(action["dest"].toUpperCase()).appendTo(label);
var inputdiv = $("<div/>").addClass("columns small-5").appendTo(row) var inputdiv = $("<div/>").addClass("columns small-5").appendTo(row)
var deldiv = $("<div/>").addClass("columns small-2").appendTo(row); var deldiv = $("<div/>").addClass("columns small-2").appendTo(row);
var helpdiv = $("<div/>").addClass("columns small-2").appendTo(row);
if(action['is_const']) { if(action['is_const']) {
var input = createCheckboxAction(action).addClass("float-right").appendTo(inputdiv); var input = createCheckboxAction(action).addClass("float-right").appendTo(inputdiv);
} else { } else {
@ -152,21 +180,9 @@ function createAction(action) {
input.find('.addbutton').prop('disabled', true).addClass('disabled'); input.find('.addbutton').prop('disabled', true).addClass('disabled');
input.find('.rembutton').prop('disabled', true).addClass('disabled'); input.find('.rembutton').prop('disabled', true).addClass('disabled');
var del = $("<button/>").attr("type", "button").addClass("button delbutton alert").html("&times;").appendTo(deldiv); var del = $("<button/>").attr("type", "button").addClass("button delbutton alert").html("&times;").appendTo(deldiv);
del.click(function() { var unlock_button = $("<div/>").addClass('unlock-button').appendTo(li);
thisli = $('#action-' + action['uuid']); unlock_button.click(enableAction(action));
if(thisli.prop('disabled')) { del.click(disableAction(action));
console.log('tock');
thisli.prop('disabled', false).removeClass('disabled');
$("#action-" + action['uuid'] + " input").prop('disabled', false).removeClass("disabled");
$("#action-" + action['uuid'] + " .addbutton").removeClass('disabled').prop('disabled', false);
$("#action-" + action['uuid'] + " .rembutton").removeClass('disabled').prop('disabled', false);
} else {
thisli.prop('disabled', true).addClass('disabled');
$("#action-" + action['uuid'] + " input").prop('disabled', true).addClass('disabled');
$("#action-" + action['uuid'] + " .addbutton").addClass('disabled').prop('disabled', true);
$("#action-" + action['uuid'] + " .rembutton").addClass('disabled').prop('disabled', true);
}
})
} else { } else {
var del = $("<button/>").attr("type", "button").addClass("button disabled alert").html("&times;").appendTo(deldiv); var del = $("<button/>").attr("type", "button").addClass("button disabled alert").html("&times;").appendTo(deldiv);
} }