浏览代码

HUE-1768 [oozie] Apply the new minimal style of the graph to the editor

New style for the nodes
Fixed icon move for node draggables and centered it on the page
Enrico Berti 12 年之前
父节点
当前提交
0db17d461e

+ 74 - 68
apps/oozie/src/oozie/templates/editor/edit_workflow.mako

@@ -260,79 +260,79 @@ ${ layout.menubar(section='workflows') }
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="mapreduce"
           <a data-node-type="mapreduce"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> MapReduce
+            <i class="fa fa-arrows"></i> MapReduce
           </a>
           </a>
         </div>
         </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="streaming"
           <a data-node-type="streaming"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> Streaming
+            <i class="fa fa-arrows"></i> Streaming
           </a>
           </a>
         </div>
         </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="java"
           <a data-node-type="java"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> Java
+            <i class="fa fa-arrows"></i> Java
           </a>
           </a>
          </div>
          </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="pig"
           <a data-node-type="pig"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> Pig
+            <i class="fa fa-arrows"></i> Pig
           </a>
           </a>
         </div>
         </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="hive"
           <a data-node-type="hive"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> Hive
+            <i class="fa fa-arrows"></i> Hive
           </a>
           </a>
         </div>
         </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="sqoop"
           <a data-node-type="sqoop"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> Sqoop
+            <i class="fa fa-arrows"></i> Sqoop
           </a>
           </a>
         </div>
         </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="shell"
           <a data-node-type="shell"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> Shell
+            <i class="fa fa-arrows"></i> Shell
           </a>
           </a>
         </div>
         </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="ssh"
           <a data-node-type="ssh"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> Ssh
+            <i class="fa fa-arrows"></i> Ssh
           </a>
           </a>
         </div>
         </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="distcp"
           <a data-node-type="distcp"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> DistCp
+            <i class="fa fa-arrows"></i> DistCp
           </a>
           </a>
         </div>
         </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="fs"
           <a data-node-type="fs"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> Fs
+            <i class="fa fa-arrows"></i> Fs
           </a>
           </a>
         </div>
         </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="email"
           <a data-node-type="email"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> Email
+            <i class="fa fa-arrows"></i> Email
           </a>
           </a>
         </div>
         </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="subworkflow"
           <a data-node-type="subworkflow"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> Sub-workflow
+            <i class="fa fa-arrows"></i> Sub-workflow
           </a>
           </a>
         </div>
         </div>
         <div class="draggable-button">
         <div class="draggable-button">
           <a data-node-type="generic"
           <a data-node-type="generic"
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
              title="${ _('Drag and drop this action on the workflow') }" class="btn new-node-link">
-            <i class="fa fa-move"></i> Generic
+            <i class="fa fa-arrows"></i> Generic
           </a>
           </a>
         </div>
         </div>
       </div>
       </div>
@@ -451,47 +451,51 @@ ${ controls.decision_form(node_form, link_form, default_link_form, 'decision', T
 <script type="text/html" id="emptyTemplate"></script>
 <script type="text/html" id="emptyTemplate"></script>
 
 
 <script type="text/html" id="disabledNodeTemplate">
 <script type="text/html" id="disabledNodeTemplate">
-  <div class="node node-control row-fluid">
-    <div class="action span12">
+  <div class="node node-control action row-fluid">
+    <!-- ko if: node_type() == 'start' -->
+      <ul class="nav nav-tabs" style="margin-bottom:0">
+        <li class="active"><a data-toggle="tab" style="line-height:10px;background-color: #F9F9F9;"><i style="color:#DDD" class="fa fa-thumbs-up"></i> &nbsp;
+          <strong style="color:#999" data-bind="text: node_type"></strong></a>
+        </li>
+      </ul>
       <div class="row-fluid">
       <div class="row-fluid">
-        <div class="span12">
-          <h4 data-bind="text: (name()) ? name() : node_type() + '-' + id()"></h4>
-          <span data-bind="text: node_type" class="muted"></span>
-          <div class="node-description" data-bind="text: description"></div>
-        </div>
+        <div class="span12 gradient" style="border:0"></div>
       </div>
       </div>
-
-      <div class="row-fluid node-action-bar">
-        <div class="span12" style="text-align:right">
-          &nbsp;
-        </div>
+    <!-- /ko -->
+    <!-- ko if: node_type() == 'end' -->
+      <div class="row-fluid">
+        <div class="span12 inverse_gradient" style="border:0"></div>
       </div>
       </div>
-    </div>
+      <div class="tabbable tabs-below">
+        <ul class="nav nav-tabs" style="margin-bottom:0">
+          <li class="active"><a data-toggle="tab" style="line-height:10px;background-color: #F9F9F9;"><i style="color:#DDD" class="fa fa-dot-circle-o"></i> &nbsp;
+            <strong style="color:#999" data-bind="text: node_type"></strong></a>
+          </li>
+        </ul>
+      </div>
+    <!-- /ko -->
+    <!-- ko if: links -->
+      <div class="row-fluid" data-bind="template: { name: 'linkTemplate', foreach: links }"></div>
+    <!-- /ko -->
   </div>
   </div>
-
-  <!-- ko if: links -->
-    <div class="row-fluid" data-bind="template: { name: 'linkTemplate', foreach: links }"></div>
-  <!-- /ko -->
 </script>
 </script>
 
 
 <script type="text/html" id="nodeTemplate">
 <script type="text/html" id="nodeTemplate">
-  <div class="node node-action row-fluid">
-    <div class="action span12">
-      <div class="row-fluid">
-        <div class="span12">
-          <h4 data-bind="text: (name()) ? name() : node_type() + '-' + id()"></h4>
-          <span data-bind="text: node_type" class="muted"></span>
-          <div class="node-description" data-bind="text: description"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid node-action-bar">
-        <div class="span12" style="text-align:right">
-          <a class="btn btn-mini edit-node-link" title="${ _('Edit') }" relz="tooltip" data-bind="attr: { 'data-node-type': node_type() }"><i class="fa fa-pencil"></i></a>
-          <a class="btn btn-mini clone-node-btn" title="${ _('Copy') }" relz="tooltip"><i class="fa fa-files-o"></i></a>
-          <a class="btn btn-mini delete-node-btn" title="${ _('Delete') }" relz="tooltip"><i class="fa fa-trash-o"></i></a>
-          &nbsp;
-        </div>
+  <div class="node node-action row-fluid action">
+    <ul class="nav nav-tabs" style="margin-bottom:0">
+      <li class="active"><a data-toggle="tab" style="line-height:10px;background-color: #F9F9F9;"><i style="color:#DDD" class="fa fa-cogs"></i> &nbsp;
+        <strong style="color:#999" data-bind="text: node_type"></strong>
+        &nbsp;&nbsp;
+        <button type="button" class="btn btn-mini clone-node-btn" title="${ _('Copy') }" relz="tooltip"><i class="fa fa-files-o"></i></button>
+        <button type="button" class="btn btn-mini delete-node-btn" title="${ _('Delete') }" relz="tooltip"><i class="fa fa-trash-o"></i></button>
+      </a>
+      </li>
+    </ul>
+    <div class="row-fluid">
+      <div class="span12" style="text-align:left; padding:10px;border:1px solid #DDD; border-top:0">
+        <div class="pull-right" style="font-size: 30px; margin-top:14px; cursor:pointer"><a class="edit-node-link" title="${ _('Edit') }" relz="tooltip" data-bind="attr: { 'data-node-type': node_type() }"><i class="fa fa-pencil"></i></a></div>
+        <h4 data-bind="text: (name()) ? name() : node_type() + '-' + id()"></h4>
+        <div class="node-description muted" data-bind="text: description()"></div>
       </div>
       </div>
     </div>
     </div>
   </div>
   </div>
@@ -502,19 +506,20 @@ ${ controls.decision_form(node_form, link_form, default_link_form, 'decision', T
 <script type="text/html" id="forkTemplate">
 <script type="text/html" id="forkTemplate">
   <div class="node node-fork row-fluid">
   <div class="node node-fork row-fluid">
     <div class="action span12">
     <div class="action span12">
+      <ul class="nav nav-tabs" style="margin-bottom:0">
+        <li class="active">
+          <a class="action-link" data-toggle="tab" style="line-height:10px;background-color: #F9F9F9;">
+            <i style="color:#DDD" class="fa fa-sitemap"></i> &nbsp; <strong style="color:#999" data-bind="text: node_type"></strong>
+            &nbsp;&nbsp;
+            <button type="button" class="btn btn-mini edit-node-link" title="${ _('Edit') }" relz="tooltip" data-bind="attr: { 'data-node-type': node_type() }"><i class="fa fa-pencil"></i></button>
+            <button type="button" class="btn btn-mini convert-node-link" title="${ _('Convert to Decision') }" data-bind="attr: { 'data-node-type': node_type() }" relz="tooltip"><i class="fa fa-magic"></i></button>
+          </a>
+        </li>
+      </ul>
       <div class="row-fluid">
       <div class="row-fluid">
-        <div class="span12 action-link" title="Edit">
+        <div class="span12 action-link" style="text-align:left; padding:10px;border:1px solid #DDD; border-top:0">
           <h4 data-bind="text: (name()) ? name() : node_type() + '-' + id()"></h4>
           <h4 data-bind="text: (name()) ? name() : node_type() + '-' + id()"></h4>
-          <span data-bind="text: node_type" class="muted"></span>
-          <div class="node-description" data-bind="text: description()"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid node-action-bar">
-        <div class="span12" style="text-align:right">
-          <a class="btn btn-mini edit-node-link" title="${ _('Edit') }" relz="tooltip" data-bind="attr: { 'data-node-type': node_type() }"><i class="fa fa-pencil"></i></a>
-          <a class="btn btn-mini convert-node-link" title="${ _('Convert to Decision') }" data-bind="attr: { 'data-node-type': node_type() }" relz="tooltip"><i class="fa fa-wrench"></i></a>
-          &nbsp;
+          <div class="node-description muted" data-bind="text: description()"></div>
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
@@ -537,18 +542,19 @@ ${ controls.decision_form(node_form, link_form, default_link_form, 'decision', T
 <script type="text/html" id="decisionTemplate">
 <script type="text/html" id="decisionTemplate">
   <div class="node node-decision row-fluid">
   <div class="node node-decision row-fluid">
     <div class="action span12">
     <div class="action span12">
+      <ul class="nav nav-tabs" style="margin-bottom:0">
+        <li class="active">
+          <a class="action-link" data-toggle="tab" style="line-height:10px;background-color: #F9F9F9;">
+            <i style="color:#DDD" class="fa fa-magic"></i> &nbsp; <strong style="color:#999" data-bind="text: node_type"></strong>
+            &nbsp;&nbsp;
+            <button type="button" class="btn btn-mini edit-node-link" title="${ _('Edit') }" data-bind="attr: { 'data-node-type': node_type() }" relz="tooltip"><i class="fa fa-pencil"></i></button>
+          </a>
+        </li>
+      </ul>
       <div class="row-fluid">
       <div class="row-fluid">
-        <div class="span12 action-link">
+        <div class="span12 action-link" style="text-align:left; padding:10px;border:1px solid #DDD; border-top:0">
           <h4 data-bind="text: (name()) ? name() : node_type() + '-' + id()"></h4>
           <h4 data-bind="text: (name()) ? name() : node_type() + '-' + id()"></h4>
-          <span data-bind="text: node_type" class="muted"></span>
-          <div class="node-description" data-bind="text: description()"></div>
-        </div>
-      </div>
-
-      <div class="row-fluid node-action-bar">
-        <div class="span12" style="text-align:right">
-          <a class="btn btn-mini edit-node-link" title="${ _('Edit') }" data-bind="attr: { 'data-node-type': node_type() }" relz="tooltip"><i class="fa fa-pencil"></i></a>
-          &nbsp;
+          <div class="node-description muted" data-bind="text: description()"></div>
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>

+ 10 - 20
apps/oozie/static/css/workflow.css

@@ -53,26 +53,6 @@ ul {
   margin-bottom: 1px;
   margin-bottom: 1px;
 }
 }
 
 
-.node-action {
-  background: #FFF url(/oozie/static/art/action.png) no-repeat 10px 10px;
-}
-
-.node-fork {
-  background: #FFF url(/oozie/static/art/fork.png) no-repeat 10px 10px;
-}
-
-.node-join {
-  background: #FFF url(/oozie/static/art/join.png) no-repeat 10px 10px;
-}
-
-.node-decision {
-  background: #FFF url(/oozie/static/art/decision.png) no-repeat 10px 10px;
-}
-
-.node-decisionend {
-  background: #FFF url(/oozie/static/art/decision_end.png) no-repeat 10px 10px;
-}
-
 .node-link {
 .node-link {
   border: 1px dashed #DDD;
   border: 1px dashed #DDD;
   margin: 10px;
   margin: 10px;
@@ -91,6 +71,10 @@ ul {
   box-shadow: inset 0 3px 5px 0 #DDD;
   box-shadow: inset 0 3px 5px 0 #DDD;
 }
 }
 
 
+#graph {
+  margin-top: 20px;
+}
+
 #graph, #new-node {
 #graph, #new-node {
   text-align: center;
   text-align: center;
 }
 }
@@ -129,6 +113,8 @@ ul {
   z-index: 1000;
   z-index: 1000;
   padding: 4px;
   padding: 4px;
   padding-bottom: 8px;
   padding-bottom: 8px;
+  background-color: #FFF;
+  text-align: center;
 }
 }
 
 
 #actionToolbar.shadowed {
 #actionToolbar.shadowed {
@@ -184,6 +170,10 @@ ul {
     text-align:center;
     text-align:center;
 }
 }
 
 
+.action .btn-mini i {
+  line-height: 18px!important;
+}
+
 .gradient {
 .gradient {
   background: #f9f9f9; /* Old browsers */
   background: #f9f9f9; /* Old browsers */
   /* IE9 SVG, needs conditional override of 'filter' to 'none' */
   /* IE9 SVG, needs conditional override of 'filter' to 'none' */

+ 1 - 0
apps/oozie/static/js/workflow.js

@@ -811,6 +811,7 @@ var WorkflowModule = function($, NodeModelChooser, Node, ForkNode, DecisionNode,
 
 
       self.el.find('.node-action').each(function(index, el) {
       self.el.find('.node-action').each(function(index, el) {
         if (!$(el).hasClass('ui-draggable')) {
         if (!$(el).hasClass('ui-draggable')) {
+          $(el).find('ul li a').eq(0).css('cursor', 'move');
           $(el).find('.row-fluid').eq(0).css('cursor', 'move');
           $(el).find('.row-fluid').eq(0).css('cursor', 'move');
           $(el).draggable({
           $(el).draggable({
             containment: [ self.el.offset().left - 10, self.el.offset().top - 10,
             containment: [ self.el.offset().left - 10, self.el.offset().top - 10,

+ 1 - 1
apps/search/src/search/templates/admin_collection_facets.mako

@@ -232,7 +232,7 @@ ${ commonheader(_('Search'), "search", user, "29px") | n,unicode }
         </div>
         </div>
         <div data-bind="sortable: sortableFacets, afterMove: isSaveBtnVisible(true)">
         <div data-bind="sortable: sortableFacets, afterMove: isSaveBtnVisible(true)">
           <div class="bubble" style="float: none;cursor: move">
           <div class="bubble" style="float: none;cursor: move">
-            <i class="fa fa-move"></i>
+            <i class="fa fa-arrows"></i>
             <strong><span data-bind="text: label"></span></strong>
             <strong><span data-bind="text: label"></span></strong>
             <span style="color:#666;font-size: 12px">(<span data-bind="text: field"></span>)</span>
             <span style="color:#666;font-size: 12px">(<span data-bind="text: field"></span>)</span>
           </div>
           </div>

+ 1 - 1
apps/search/src/search/templates/admin_collection_sorting.mako

@@ -61,7 +61,7 @@ ${ commonheader(_('Search'), "search", user, "29px") | n,unicode }
         </div>
         </div>
         <div data-bind="sortable: sortingFields">
         <div data-bind="sortable: sortingFields">
           <div class="bubble" style="cursor: move">
           <div class="bubble" style="cursor: move">
-            <i class="fa fa-move"></i>
+            <i class="fa fa-arrows"></i>
             <strong><span data-bind="editable: label"></span></strong>
             <strong><span data-bind="editable: label"></span></strong>
             <span style="color:#666;font-size: 12px">
             <span style="color:#666;font-size: 12px">
               (<span data-bind="text: field"></span> <i class="fa fa-arrow-up" data-bind="visible: asc() == true"></i><i class="fa fa-arrow-down" data-bind="visible: asc() == false"></i> <span data-bind="editable: order"></span>, <input type="checkbox" data-bind="checked: include" style="margin-top:0" /> ${_('Default sorting')} )
               (<span data-bind="text: field"></span> <i class="fa fa-arrow-up" data-bind="visible: asc() == true"></i><i class="fa fa-arrow-down" data-bind="visible: asc() == false"></i> <span data-bind="editable: order"></span>, <input type="checkbox" data-bind="checked: include" style="margin-top:0" /> ${_('Default sorting')} )