GCI task pull request (#474)

* GCI task commit

* GCI task commit

* Cleaned up the code

* Added the css to demo.css file

* Final cleanup and shortened code

* Code compacting

* All beautify changes reverted

* Spacing corrected

examples/demo.css

@@ -158,3 +158,17 @@ h1 {
     opacity:0.5;
     color:#BABABA;
 }
+
+#stepRemovedNotification{
+  background-color: #808b96;
+    padding:4px;
+    color:white;
+    border-radius:3px;
+    font-size:2rem;
+    position:fixed;
+    bottom:8px;
+    left:45%;
+    min-width:14rem;
+    text-align:center;
+    display:none;
+}

examples/lib/defaultHtmlStepUi.js

@@ -7,6 +7,17 @@
 // The variable 'step' stores useful data like input and
 // output values, step information.
 // See documetation for more details.
+function stepRemovedNotify() {
+  if ($('#stepRemovedNotification').length == 0) {
+    var notification = document.createElement('span');
+    notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> Step Removed ';
+    notification.id = 'stepRemovedNotification';
+
+    $('body').append(notification);
+  }
+
+  $('#stepRemovedNotification').DOMNotification.fadeIn(500).delay(200).fadeOut(500);
+}
 function DefaultHtmlStepUi(_sequencer, options) {
 
   options = options || {};
@@ -37,7 +48,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     var tools =
       '<div class="tools btn-group">\
-       <button confirm="Are you sure?" class="remove btn btn btn-default">\
+       <button confirm="Are you sure?" onclick="stepRemovedNotify()" class="remove btn btn btn-default">\
          <i class="fa fa-trash"></i>\
        </button>\
     </div>';