Browse Source

[oozie] Improved arrows display

Enrico Berti 11 years ago
parent
commit
4875eea

+ 14 - 6
apps/oozie/src/oozie/templates/editor/workflow_editor.mako

@@ -155,7 +155,7 @@ ${ commonheader(_("Workflow Editor"), "Oozie", user) | n,unicode }
   </div>
 </div>
 
-<div data-bind="css: {'dashboard': true, 'with-top-margin': isEditing()}">
+<div data-bind="css: {'dashboard': true, 'with-top-margin': isEditing(), 'readonly': ! isEditing()}">
   <div class="container-fluid">
     <div class="row-fluid" data-bind="template: { name: 'column-template', foreach: columns}">
     </div>
@@ -213,7 +213,7 @@ ${ commonheader(_("Workflow Editor"), "Oozie", user) | n,unicode }
 
 <script type="text/html" id="internal-row-template">
   <div class="container-fluid">
-    <div class="row-fluid" data-bind="visible: $index() > 0" style="margin-bottom: 10px">
+    <div class="row-fluid" data-bind="visible: $index() > 0 && $root.isEditing()" style="margin-bottom: 10px">
       <div data-bind="css: {'span1': true, 'readonly': ! $root.isEditing()}"></div>
       <div data-bind="css: {'span10': true, 'readonly': ! $root.isEditing()}">
         <div data-bind="visible: $root.isEditing(), css: {'drop-target': true, 'is-editing': $root.isEditing}, droppable: {enabled: $root.isEditing, onDrop: function(){ var _w = $root.addDraggedWidget($data, true); widgetDraggedAdditionalHandler(_w); } }"></div>
@@ -232,7 +232,7 @@ ${ commonheader(_("Workflow Editor"), "Oozie", user) | n,unicode }
               'helper': function(event){lastWindowScrollPosition = $(window).scrollTop();  var _par = $('<div>');_par.addClass('card card-widget');var _title = $('<h2>');_title.addClass('card-heading simple');_title.text($(event.toElement).text());_title.appendTo(_par);_par.height(80);_par.width(180);return _par;}},
               dragged: function(widget){widgetDraggedAdditionalHandler(widget)}}">
         </div>
-        <div class="container-fluid" data-bind="visible: columns().length > 0" style="border: 1px solid #e5e5e5; border-top: none; background-color: #F3F3F3;">
+        <div class="container-fluid" data-bind="visible: columns().length > 0">
           <div data-bind="css: {'row-fluid': true, 'row-container':true, 'is-editing': $root.isEditing}">
             <div data-bind="template: { name: 'internal-column-template', foreach: columns}">
             </div>
@@ -798,12 +798,12 @@ ${ dashboard.import_bindings() }
 
     var _fromCenter = {
       x: _from.position().left + _from.outerWidth() / 2,
-      y: _from.position().top + _from.outerHeight()
+      y: _from.position().top + _from.outerHeight() + 3
     }
 
     var _toCenter = {
       x: _to.position().left + _to.outerWidth() / 2,
-      y: _to.position().top
+      y: _to.position().top - 5
     }
 
     var _curveCoords = {};
@@ -813,6 +813,14 @@ ${ dashboard.import_bindings() }
       _curveCoords.y = _fromCenter.y + (_toCenter.y - _fromCenter.y) / 2;
     }
     else {
+      if (_fromCenter.x > _toCenter.x) {
+        _fromCenter.x = _fromCenter.x - 5;
+        _toCenter.x = _toCenter.x + 5;
+      }
+      else {
+        _fromCenter.x = _fromCenter.x + 5;
+        _toCenter.x = _toCenter.x - 5;
+      }
       _curveCoords.x = _fromCenter.x - (_fromCenter.x - _toCenter.x) / 4;
       _curveCoords.y = _fromCenter.y + (_toCenter.y - _fromCenter.y) / 2;
     }
@@ -826,7 +834,7 @@ ${ dashboard.import_bindings() }
       p2y: _toCenter.y,
       lineWidth: 2,
       size: 10,
-      strokeStyle: '#CCCCCC'
+      strokeStyle: '#e5e5e5'
     });
 
   }

+ 4 - 0
apps/oozie/static/css/workflow-editor.css

@@ -323,4 +323,8 @@ em {
 
 .dashboard .row-fluid .span1.readonly {
   width: 0;
+}
+
+.readonly .card-widget {
+  border: 1px solid #d8d8d8!important;
 }