浏览代码

HUE-1890 [oozie] Longer input fields in workflow editor

Improved length of fields
Restyled decision and fork forms
Enrico Berti 11 年之前
父节点
当前提交
8cec8cd

+ 21 - 17
apps/oozie/src/oozie/templates/editor/action_utils.mako

@@ -34,9 +34,13 @@
       </div>
 
       <div class="modal-content">
-        <fieldset class="span12">
-          ${ action_form_fields(action_form, node_type) }
-        </fieldset>
+        <div class="container-fluid">
+          <div class="row-fluid">
+            <fieldset class="span12">
+              ${ action_form_fields(action_form, node_type) }
+            </fieldset>
+          </div>
+        </div>
       </div>
 
       <div class="modal-footer">
@@ -55,7 +59,7 @@
 % if show_primary:
   % for field in action_form:
     % if field.html_name in ('name', 'description'):
-      ${ utils.render_field_with_error_js(field, field.name, extra_attrs={'data-bind': 'disable: $root.context().read_only, value: %s' % field.name}) }
+      ${ utils.render_field_with_error_js(field, field.name, extra_attrs={'class': 'input-xlarge', 'data-bind': 'disable: $root.context().read_only, value: %s' % field.name}) }
     % endif
   % endfor
 
@@ -157,9 +161,9 @@
 % for field in action_form:
   % if field.html_name not in ('name', 'description', 'node_type', 'job_xml'):
     % if field.html_name in ('capture_output', 'is_single', 'sub_workflow', 'propagate_configuration'):
-      ${ utils.render_field_with_error_js(field, field.name, extra_attrs={'data-bind': 'disable: $root.context().read_only, checked: %s' % field.name}) }
+      ${ utils.render_field_with_error_js(field, field.name, extra_attrs={'class': 'span11', 'data-bind': 'disable: $root.context().read_only, checked: %s' % field.name}) }
     % else:
-      ${ utils.render_field_with_error_js(field, field.name, extra_attrs={'data-bind': 'disable: $root.context().read_only, valueUpdate:"afterkeydown", value: %s' % field.name}) }
+      ${ utils.render_field_with_error_js(field, field.name, extra_attrs={'class': 'span11', 'data-bind': 'disable: $root.context().read_only, valueUpdate:"afterkeydown", value: %s' % field.name}) }
     % endif
   % endif
 % endfor
@@ -335,7 +339,7 @@
         <tbody data-bind="foreach: ${ javascript_attrs['name'] }">
           <tr>
             <td>
-              <input type="text" class="span5 required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: name, uniqueName: false" />
+              <input type="text" class="input-xxlarge required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: name, uniqueName: false" />
             </td>
             <td>
               % if 'remove' in javascript_attrs:
@@ -363,7 +367,7 @@
         <tbody data-bind="foreach: ${ javascript_attrs['name'] }">
           <tr>
             <td>
-              <input type="text" class="span5 required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: name, uniqueName: false" />
+              <input type="text" class="input-xxlarge required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: name, uniqueName: false" />
             </td>
             <td>
               % if 'remove' in javascript_attrs:
@@ -397,8 +401,8 @@
         </thead>
         <tbody data-bind="foreach: ${ javascript_attrs['name'] }">
           <tr>
-            <td><input type="text" class="span4 required propKey" data-bind="disable: $root.context().read_only, value: name, uniqueName: false" /></td>
-            <td><input type="text" class="span4 required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: value, uniqueName: false" /></td>
+            <td><input type="text" class="input-xlarge required propKey" data-bind="disable: $root.context().read_only, value: name, uniqueName: false" /></td>
+            <td><input type="text" class="input-xlarge required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: value, uniqueName: false" /></td>
             <td>
             % if 'remove' in javascript_attrs:
               <a class="btn" href="#" data-bind="disable: $root.context().read_only, click: ${ javascript_attrs['remove'] }">${ _('Delete') }</a>
@@ -431,8 +435,8 @@
         </thead>
         <tbody data-bind="foreach: ${ javascript_attrs['name'] }">
           <tr>
-            <td><input type="text" class="span3 required propKey" data-bind="disable: $root.context().read_only, fileChooser: $data, value: source, uniqueName: false" /></td>
-            <td><input type="text" class="span3 required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: destination, uniqueName: false" /></td>
+            <td><input type="text" class="input-xlarge required propKey" data-bind="disable: $root.context().read_only, fileChooser: $data, value: source, uniqueName: false" /></td>
+            <td><input type="text" class="input-xlarge required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: destination, uniqueName: false" /></td>
             <td>
             % if 'remove' in javascript_attrs:
               <a class="btn" href="#" data-bind="disable: $root.context().read_only, click: ${ javascript_attrs['remove'] }">${ _('Delete') }</a>
@@ -466,9 +470,9 @@
         </thead>
         <tbody data-bind="foreach: ${ javascript_attrs['name'] }">
           <tr>
-            <td><input type="text" class="span4 required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: path, uniqueName: false" /></td>
-            <td><input type="text" class="span2 required propKey" data-bind="disable: $root.context().read_only, value: permissions, uniqueName: false" /></td>
-            <td><input type="checkbox" class="span1 required" data-bind="disable: $root.context().read_only, checked: recursive, uniqueName: false" /></td>
+            <td><input type="text" class="input-xlarge required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: path, uniqueName: false" /></td>
+            <td><input type="text" class="input-xlarge required propKey" data-bind="disable: $root.context().read_only, value: permissions, uniqueName: false" /></td>
+            <td><input type="checkbox" class="input-medium required" data-bind="disable: $root.context().read_only, checked: recursive, uniqueName: false" /></td>
             <td>
             % if 'remove' in javascript_attrs:
               <a class="btn" href="#" data-bind="disable: $root.context().read_only, click: ${ javascript_attrs['remove'] }">${ _('Delete') }</a>
@@ -505,7 +509,7 @@
               <span class="span4 required" data-bind="text: type" />
             </td>
             <td>
-              <input type="text" class="input span4 required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: value, uniqueName: false" />
+              <input type="text" class="input-xxlarge required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: value, uniqueName: false" />
             </td>
             <td>
             % if 'remove' in javascript_attrs:
@@ -545,7 +549,7 @@
               <span class="span4 required" data-bind="text: type" />
             </td>
             <td>
-              <input type="text" class="input span4 required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: value, uniqueName: false" />
+              <input type="text" class="input-xxlarge required pathChooserKo" data-bind="disable: $root.context().read_only, fileChooser: $data, value: value, uniqueName: false" />
             </td>
             <td>
               % if 'remove' in javascript_attrs:

+ 28 - 20
apps/oozie/src/oozie/templates/editor/control_utils.mako

@@ -66,13 +66,17 @@
       </div>
 
       <div class="modal-content">
-        <fieldset class="span12">
-          % for field in form:
-            % if field.html_name in ('name', 'description'):
-              ${ utils.render_field_with_error_js(field, field.name, extra_attrs={'data-bind': 'disable: $root.context().read_only, value: %s' % field.name}) }
-            % endif
-          % endfor
-        </fieldset>
+        <div class="container-fluid">
+          <div class="row-fluid">
+            <fieldset class="span12">
+              % for field in form:
+                % if field.html_name in ('name', 'description'):
+                  ${ utils.render_field_with_error_js(field, field.name, extra_attrs={'class': 'input-xlarge', 'data-bind': 'disable: $root.context().read_only, value: %s' % field.name}) }
+                % endif
+              % endfor
+            </fieldset>
+          </div>
+        </div>
       </div>
 
       <div class="modal-footer">
@@ -101,18 +105,20 @@
       </div>
 
       <div class="modal-content">
-        <fieldset class="span12">
+        <div class="container-fluid">
+          <div class="row-fluid">
+            <fieldset class="span12">
           % for field in node_form:
             % if field.html_name in ('name', 'description'):
-              ${ utils.render_field_with_error_js(field, field.name, extra_attrs={'data-bind': 'disable: $root.context().read_only, value: %s' % field.name}) }
+              ${ utils.render_field_with_error_js(field, field.name, extra_attrs={'class': 'input-xlarge', 'data-bind': 'disable: $root.context().read_only, value: %s' % field.name}) }
             % endif
           % endfor
 
           <div class="control-group">
             <label class="control-label"></label>
             <div class="controls">
-              <div>${ _('Examples of predicates:') }</div>
-              <div class="well">
+              <div style="padding: 10px; background-color: #EEEEEE">
+                <strong>${ _('Examples of predicates:') }</strong><br/>
                 ${"${"} fs:fileSize(secondjobOutputDir) gt 10 * GB }
                 <br/>
                 ${"${"} hadoop:counters('secondjob')[RECORDS][REDUCE_OUT] lt 1000000 }
@@ -134,13 +140,13 @@
               <!-- ko foreach: links() -->
               <tr>
                 <td>
-                  ${ utils.render_field(link_form['comment'], extra_attrs={'data-bind': 'value: comment'}) }
+                  ${ utils.render_field(link_form['comment'], extra_attrs={'class': 'input-xxlarge', 'data-bind': 'value: comment'}, control_extra='style=margin-bottom:0') }
                 </td>
-                <td class="center">
+                <td class="center" style="vertical-align: middle">
                   ${ _('go to') }
                 </td>
-                <td class="right">
-                  <a class="span3 edit-node-link" data-bind="text: $parent.registry.get(child()).name()"></a>
+                <td style="vertical-align: middle">
+                  <a class="edit-node-link" data-bind="text: $parent.registry.get(child()).name()"></a>
                 </td>
               </tr>
               <!-- /ko -->
@@ -149,18 +155,18 @@
                 <!-- ko if: $data.name() == 'default' -->
                 <tr>
                   <td>
-                   <div class="control-group">
+                   <div class="control-group" style="margin-bottom: 0">
                       <label class="control-label"></label>
                       <div class="controls">
                         <div>${ _('default') }</div>
                       </div>
                     </div>
                   </td>
-                  <td class="center nowrap">
+                  <td class="center nowrap" style="vertical-align: middle">
                     ${ _('go to') }
                   </td>
-                  <td class="right">
-                    ${ utils.render_field(default_link_form['child'], extra_attrs={'data-bind': 'value: child'}) }
+                  <td>
+                    ${ utils.render_field(default_link_form['child'], extra_attrs={'class': 'input-xxlarge', 'data-bind': 'value: child'}, control_extra='style=margin-bottom:0', show_label=False) }
                   </td>
                 </tr>
                 <!-- /ko -->
@@ -169,6 +175,8 @@
           </table>
 
         </fieldset>
+          </div>
+        </div>
       </div>
 
       <div class="modal-footer">
@@ -205,7 +213,7 @@
               <span class="span4 required" data-bind="text: type" />
             </td>
             <td>
-              <input type="text" class="input span4 required" data-bind="fileChooser: $data, value: value, uniqueName: false" />
+              <input type="text" class="input-xxlarge required" data-bind="fileChooser: $data, value: value, uniqueName: false" />
             </td>
             <td>
             % if 'remove' in javascript_attrs:

+ 7 - 3
apps/oozie/src/oozie/templates/utils.inc.mako

@@ -200,15 +200,19 @@
 </%def>
 
 
-<%def name="render_field(field, show_label=True, extra_attrs={})">
+<%def name="render_field(field, show_label=True, extra_attrs={}, control_extra='')">
   % if not field.is_hidden:
     <% group_class = field.errors and "error" or "" %>
     <div class="control-group ${group_class}"
-      rel="popover" data-original-title="${ field.label }" data-content="${ field.help_text }">
+      rel="popover" data-original-title="${ field.label }" data-content="${ field.help_text }" ${control_extra}>
       % if show_label:
         <label class="control-label">${ field.label }</label>
       % endif
-      <div class="controls">
+      <div class="controls"
+      % if not show_label:
+        style="margin-left: 0"
+      % endif
+              >
         <% field.field.widget.attrs.update(extra_attrs) %>
         ${ field | n,unicode }
         % if field.errors:

+ 18 - 1
apps/oozie/static/css/workflow.css

@@ -145,9 +145,22 @@ ul {
 }
 
 .draggable-button a {
-  padding: 8px;
+  padding: 7px;
 }
 
+@media (max-width: 1365px) {
+  .draggable-button a {
+    padding: 4px;
+  }
+}
+
+@media (max-width: 1260px) {
+  .draggable-button a {
+    padding: 1px;
+  }
+}
+
+
 .typeahead {
   z-index: 2000;
 }
@@ -216,4 +229,8 @@ ul {
   padding:10px;
   border:1px solid #DDD!important;
   border-top:0!important;
+}
+
+.fileChooserBtn {
+  height: 30px;
 }

+ 4 - 0
desktop/core/static/css/hue3.css

@@ -1575,4 +1575,8 @@ a, a:hover, a:active, a:focus {
 
 .side-labels .feedback:hover {
   border-top-color: #338BB8;
+}
+
+body.modal-open {
+    overflow: hidden;
 }