浏览代码

HUE-7 [importer] Better vertical alignment of selectize components and restyle of Index fields

Enrico Berti 8 年之前
父节点
当前提交
a097496
共有 1 个文件被更改,包括 33 次插入12 次删除
  1. 33 12
      desktop/libs/indexer/src/indexer/templates/importer.mako

+ 33 - 12
desktop/libs/indexer/src/indexer/templates/importer.mako

@@ -90,13 +90,22 @@ ${ assist.assistPanel() }
     text-align: right;
     text-align: right;
     padding-right: 8px;
     padding-right: 8px;
     display: inline-block;
     display: inline-block;
-    vertical-align: middle;
+    vertical-align: top;
+    padding-top: 6px;
   }
   }
 
 
   .step label.checkbox {
   .step label.checkbox {
     margin-left: 130px;
     margin-left: 130px;
   }
   }
 
 
+  .step .index-field label.checkbox {
+    margin-left: 5px;
+  }
+
+  .step .index-field label > div:first-child {
+    width: initial;
+  }
+
   .step .field-properties label.checkbox {
   .step .field-properties label.checkbox {
     margin-left: 10px;
     margin-left: 10px;
   }
   }
@@ -128,6 +137,14 @@ ${ assist.assistPanel() }
     vertical-align: -12px;
     vertical-align: -12px;
   }
   }
 
 
+  .step .selectize-input {
+    max-height: 31px;
+  }
+
+  .step .selectize-control.multi .selectize-input {
+    padding-top: 3px!important;
+  }
+
   .step .show-edit-on-hover i {
   .step .show-edit-on-hover i {
     opacity: 0;
     opacity: 0;
     -webkit-transition: opacity 0.2s linear;
     -webkit-transition: opacity 0.2s linear;
@@ -146,6 +163,10 @@ ${ assist.assistPanel() }
     vertical-align: middle;
     vertical-align: middle;
   }
   }
 
 
+  .step .fa-padding-top {
+    padding-top: 8px;
+  }
+
   .kudu-partitions li {
   .kudu-partitions li {
     width: 578px !important;
     width: 578px !important;
     padding: 5px;
     padding: 5px;
@@ -526,7 +547,7 @@ ${ assist.assistPanel() }
             <div class="control-group">
             <div class="control-group">
               <label class="control-label"><div>${ _('Extras') }</div>
               <label class="control-label"><div>${ _('Extras') }</div>
                 <a href="javascript:void(0)" data-bind="css: {'inactive-action': !showProperties()}, click: function() {showProperties(!showProperties()) }" title="${ _('Show extra properties') }">
                 <a href="javascript:void(0)" data-bind="css: {'inactive-action': !showProperties()}, click: function() {showProperties(!showProperties()) }" title="${ _('Show extra properties') }">
-                  <i class="fa fa-sliders"></i>
+                  <i class="fa fa-sliders fa-padding-top"></i>
                 </a>
                 </a>
               </label>
               </label>
             </div>
             </div>
@@ -581,7 +602,7 @@ ${ assist.assistPanel() }
                   <div data-bind="template: { name: 'table-field-template', data: $data }" class="margin-top-10 field inline-block"></div>
                   <div data-bind="template: { name: 'table-field-template', data: $data }" class="margin-top-10 field inline-block"></div>
                   <div class="clearfix"></div>
                   <div class="clearfix"></div>
                 </div>
                 </div>
-                <a data-bind="click: function() { partitionColumns.push($root.loadDefaultField({isPartition: true})); }" class="pointer" title="${_('Add Partition')}"><i class="fa fa-plus"></i> ${_('Add partition')}</a>
+                <a data-bind="click: function() { partitionColumns.push($root.loadDefaultField({isPartition: true})); }" class="pointer" title="${_('Add Partition')}"><i class="fa fa-plus fa-padding-top"></i> ${_('Add partition')}</a>
               </div>
               </div>
               <!-- /ko -->
               <!-- /ko -->
 
 
@@ -651,7 +672,7 @@ ${ assist.assistPanel() }
                 <!-- /ko -->
                 <!-- /ko -->
 
 
                 <!-- ko if: $parent.outputFormat() == 'index' -->
                 <!-- ko if: $parent.outputFormat() == 'index' -->
-                  <div data-bind="template: { name: 'index-field-template', data: $data }" class="margin-top-10 field inline-block"></div>
+                  <div data-bind="template: { name: 'index-field-template', data: $data }" class="margin-top-10 field inline-block index-field"></div>
                   <div class="clearfix"></div>
                   <div class="clearfix"></div>
                 <!-- /ko -->
                 <!-- /ko -->
               </form>
               </form>
@@ -746,11 +767,11 @@ ${ assist.assistPanel() }
 
 
 <script type="text/html" id="table-field-template">
 <script type="text/html" id="table-field-template">
   <div>
   <div>
-    <label data-bind="visible: level() == 0 || ($parent.type() != 'array' && $parent.type() != 'map')">${ _('Name') }
+    <label data-bind="visible: level() == 0 || ($parent.type() != 'array' && $parent.type() != 'map')">${ _('Name') }&nbsp;
       <input type="text" class="input-large" placeholder="${ _('Field name') }" required data-bind="textInput: name">
       <input type="text" class="input-large" placeholder="${ _('Field name') }" required data-bind="textInput: name">
     </label>
     </label>
 
 
-    <label>${ _('Type') }
+    <label class="margin-left-5">${ _('Type') }&nbsp;
     <!-- ko if: ! (level() > 0 && $parent.type() == 'map') -->
     <!-- ko if: ! (level() > 0 && $parent.type() == 'map') -->
       <select class="input-small" data-bind="selectize: $root.createWizard.hiveFieldTypes, value: type"></select>
       <select class="input-small" data-bind="selectize: $root.createWizard.hiveFieldTypes, value: type"></select>
     <!-- /ko -->
     <!-- /ko -->
@@ -787,10 +808,10 @@ ${ assist.assistPanel() }
 
 
 
 
 <script type="text/html" id="index-field-template">
 <script type="text/html" id="index-field-template">
-  <label>${ _('Name') }
+  <label>${ _('Name') }&nbsp;
     <input type="text" class="input-large" placeholder="${ _('Field name') }" data-bind="value: name">
     <input type="text" class="input-large" placeholder="${ _('Field name') }" data-bind="value: name">
   </label>
   </label>
-  <label>${ _('Type') }
+  <label class="margin-left-5">${ _('Type') }&nbsp;
     <select class="input-small" data-bind="selectize: $root.createWizard.fieldTypes, value: type"></select>
     <select class="input-small" data-bind="selectize: $root.createWizard.fieldTypes, value: type"></select>
   </label>
   </label>
   <a href="javascript:void(0)" title="${ _('Show field properties') }" data-bind="css: {'inactive-action': !showProperties()}, click: function() {showProperties(!showProperties()) }"><i class="fa fa-sliders"></i></a>
   <a href="javascript:void(0)" title="${ _('Show field properties') }" data-bind="css: {'inactive-action': !showProperties()}, click: function() {showProperties(!showProperties()) }"><i class="fa fa-sliders"></i></a>
@@ -825,13 +846,13 @@ ${ assist.assistPanel() }
     <select data-bind="selectize: $root.createWizard.operationTypes.map(function(o){return o.name}), value: operation.type"></select>
     <select data-bind="selectize: $root.createWizard.operationTypes.map(function(o){return o.name}), value: operation.type"></select>
     <!-- ko template: "args-template" --><!-- /ko -->
     <!-- ko template: "args-template" --><!-- /ko -->
     <!-- ko if: operation.settings().outputType() == "custom_fields" -->
     <!-- ko if: operation.settings().outputType() == "custom_fields" -->
-      <label> ${ _('Number of expected fields') }
+      <label class="margin-left-5">${ _('Number of expected fields') }
       <input type="number" class="input-mini" data-bind="value: operation.numExpectedFields">
       <input type="number" class="input-mini" data-bind="value: operation.numExpectedFields">
       </label>
       </label>
     <!-- /ko -->
     <!-- /ko -->
     <a class="pointer margin-left-20" data-bind="click: function(){$root.createWizard.removeOperation(operation, list)}" title="${ _('Remove') }"><i class="fa fa-times"></i></a>
     <a class="pointer margin-left-20" data-bind="click: function(){$root.createWizard.removeOperation(operation, list)}" title="${ _('Remove') }"><i class="fa fa-times"></i></a>
     <div class="margin-left-20" data-bind="foreach: operation.fields">
     <div class="margin-left-20" data-bind="foreach: operation.fields">
-      <div data-bind="template: { name:'index-field-template', data:$data }" class="margin-top-10 field"></div>
+      <div data-bind="template: { name:'index-field-template', data:$data }" class="margin-top-10 field index-field"></div>
     </div>
     </div>
   </div>
   </div>
 </script>
 </script>
@@ -845,7 +866,7 @@ ${ assist.assistPanel() }
 <script type="text/html" id="arg-text">
 <script type="text/html" id="arg-text">
   <label>
   <label>
     <div data-bind="text: description"></div>
     <div data-bind="text: description"></div>
-    <input type="text" class="input-small" data-bind="attr: {placeholder: description}, value: value">
+    <input type="text" class="input" data-bind="attr: {placeholder: description}, value: value">
   </label>
   </label>
 </script>
 </script>
 
 
@@ -859,7 +880,7 @@ ${ assist.assistPanel() }
 <script type="text/html" id="arg-checkbox">
 <script type="text/html" id="arg-checkbox">
   <label class="checkbox">
   <label class="checkbox">
     <input type="checkbox" data-bind="checked: value">
     <input type="checkbox" data-bind="checked: value">
-    <div data-bind="text: description"></div>
+    <span data-bind="text: description"></span>
   </label>
   </label>
 </script>
 </script>