Преглед изворни кода

HUE-5107 [oozie] Restyle document autocomplete to look more like a dropdown

Enrico Berti пре 9 година
родитељ
комит
9c02273

+ 5 - 0
apps/oozie/src/oozie/templates/editor2/common_workflow.mako

@@ -625,6 +625,7 @@
     <div data-bind="visible: $root.isEditing">
       <div data-bind="visible: ! $parent.ooziePropertiesExpanded()" class="nowrap">
         <!-- ko if: associatedDocument -->
+          <div class="select-like">
           <input placeholder="${ _('Search your documents...') }" type="text" data-bind="autocomplete: {
               source: $root.documentsAutocompleteSource,
               showOnFocus: true,
@@ -636,6 +637,10 @@
               change: function (event, ui) { this.value = ko.dataFor(event.target).associatedDocument().name(); return false;},
               itemTemplate: 'doc-search-autocomp-item'
             }, valueUpdate: 'afterkeydown'">
+            <span class="inactive-action">
+                <i class="fa fa-sort"></i>
+              </span>
+          </div>
           <a href="#" data-bind="attr: { href: associatedDocument().absoluteUrl() }" target="_blank" title="${ _('Open') }">
             <i class="fa fa-external-link-square"></i>
           </a>

+ 16 - 11
apps/oozie/src/oozie/templates/editor2/workflow_editor.mako

@@ -334,17 +334,22 @@ ${ workflow.render() }
           <select data-bind="options: $root.subworkflows, optionsText: 'name', optionsValue: 'value', value: value"></select>
           <!-- /ko -->
           <!-- ko if: ['hive', 'java', 'spark', 'pig', 'sqoop', 'distcp-doc', 'shell-doc', 'mapreduce-doc'].indexOf(type()) != -1 -->
-          <input placeholder="${ _('Search your documents...') }" type="text" data-bind="autocomplete: {
-            source: $root.documentsAutocompleteSource,
-            minLength: 0,
-            showOnFocus: true,
-            blurOnEnter: true,
-            type: type,
-            select: function (event, ui) { ko.dataFor(event.target).value(ui.item.value); this.value = ui.item.label; $(event.target).data('prevLabel', ui.item.label); return false;},
-            focus: function (event, ui) { this.value = ui.item.label; return false;},
-            change: function (event, ui) { if(!ui.item){ ko.dataFor(event.target).value() != '' ? this.value = $(event.target).data('prevLabel') : this.value = ''; }},
-            itemTemplate: 'doc-search-autocomp-item'
-          }, valueUpdate: 'afterkeydown'">
+          <div class="select-like">
+            <input placeholder="${ _('Search your documents...') }" type="text" data-bind="autocomplete: {
+              source: $root.documentsAutocompleteSource,
+              minLength: 0,
+              showOnFocus: true,
+              blurOnEnter: true,
+              type: type,
+              select: function (event, ui) { ko.dataFor(event.target).value(ui.item.value); this.value = ui.item.label; $(event.target).data('prevLabel', ui.item.label); return false;},
+              focus: function (event, ui) { this.value = ui.item.label; return false;},
+              change: function (event, ui) { if(!ui.item){ ko.dataFor(event.target).value() != '' ? this.value = $(event.target).data('prevLabel') : this.value = ''; }},
+              itemTemplate: 'doc-search-autocomp-item'
+            }, valueUpdate: 'afterkeydown'">
+              <span class="inactive-action">
+                <i class="fa fa-sort"></i>
+              </span>
+          </div>
           <!-- ko if: $root.getDocumentById(type(), value()) -->
             <!-- ko with: $root.getDocumentById(type(), value()) -->
               <a href="#" data-bind="attr: { href: $data.absoluteUrl() }" target="_blank" title="${ _('Open') }">

+ 20 - 1
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -3222,4 +3222,23 @@ input[type='password']::-ms-reveal {
 .ui-state-active a:visited {
   color: #ffffff;
   text-decoration: none;
-}
+}
+
+.select-like {
+  display: inline-block;
+  position: relative;
+}
+
+.select-like input {
+  transition: none!important;
+  box-shadow: none!important;
+  border-radius: 4px!important;
+  cursor: pointer!important;
+}
+
+.select-like .fa {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 15px;
+}