Commit 5c629c87 authored by Joseph Walton-Rivers's avatar Joseph Walton-Rivers 🐦

provide hint about rule dragging when empty

parent 89f53993
......@@ -30,10 +30,6 @@ body { padding-top: 70px; }
margin-top:20px;
}
.agentSide ul:empty{
background-color: #eee;
border-style: dashed;
}
.agentSide h2{
float:left;
......@@ -51,6 +47,19 @@ ul li.list-group-item button.btn-info{
margin-top:-8px;
}
/**
* Code to deal with UX for dragging
*/
.agentSide ul.empty{
background-color: #eee;
border-style: dashed;
}
.agentSide li.message {
border: 0px;
background-color: transparent;
}
/*
Rule CSS
*/
......
......@@ -39,8 +39,9 @@
</div>
<div class="row">
<div class="col-md-6 agentSide">
<ul class="list-group connectedRules" style="min-height: 200px" id="agent"></ul>
<ul class="list-group connectedRules empty" style="min-height: 200px" id="agent">
<li class="list-group-item message"><div class="text-muted" style="height: 200px">Drag rules here to build your agent</div></li>
</ul>
<div id="graph"></div>
</div>
<div class="col-md-6">
......@@ -73,8 +74,22 @@
$( function() {
$( "#agent, #ruleset" ).sortable({
connectWith: ".connectedRules"
connectWith: ".connectedRules",
items: "li:not(.message)",
receive: function(event, ui) {
$('li.message', this).hide();
if($('li:not(.message)', ui.sender).length == 0){
$('li.message', ui.sender).show();
$(ui.sender).addClass('empty');
console.log($(ui.sender));
} else {
$('li.message', ui.sender).hide();
$(this).removeClass('empty');
}
}
}).disableSelection();
} );
function buildAgent() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment