فهرست منبع

HUE-2451 [dashboard] Enable placeholder for the simple ace editor component

Johan Ahlen 8 سال پیش
والد
کامیت
db2332e

+ 25 - 1
desktop/core/src/desktop/templates/ko_components/ko_simple_ace_editor.mako

@@ -646,7 +646,6 @@ from desktop.views import _ko
 
           if (parseResult.suggestValues) {
             var fieldName = parseResult.suggestValues.field;
-            console.log(parseResult.suggestValues.quotePresent);
             var hasField = self.collection.template.fieldsAttributes().some(function (field) {
               return field.name() === fieldName;
             });
@@ -795,6 +794,31 @@ from desktop.views import _ko
           editor.clearSelection();
         }
 
+        if (params.placeHolder && ko.unwrap(params.placeHolder)) {
+          var placeHolderVisible = false;
+
+          var $placeHolder = $("<div>").text(ko.unwrap(params.placeHolder)).addClass("ace_invisible ace_emptyMessage");
+
+          if (editor.getValue().length == 0) {
+            $placeHolder.appendTo(editor.renderer.scroller);
+            placeHolderVisible = true;
+          }
+
+          var inputListener = editor.on('input', function () {
+            if (editor.getValue().length > 0 && placeHolderVisible) {
+              $placeHolder.remove();
+              placeHolderVisible = false;
+            } else if (editor.getValue().length === 0 && !placeHolderVisible) {
+              $placeHolder.appendTo(editor.renderer.scroller);
+              placeHolderVisible = true;
+            }
+          });
+
+          self.disposeFunctions.push(function () {
+            editor.off('input', inputListener);
+          });
+        }
+
         if (params.autocomplete) {
           var AceAutocomplete = ace.require("ace/autocomplete").Autocomplete;
 

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/search.css


+ 5 - 1
desktop/libs/dashboard/src/dashboard/static/dashboard/less/search.less

@@ -99,7 +99,11 @@
             border-radius: 0 4px 4px 0;
 
             .ace-editor {
-              margin-top: 2px;
+              margin-top: 3px;
+
+              .ace_emptyMessage {
+                padding-left:4px;
+              }
             }
           }
         }

+ 1 - 1
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -105,7 +105,7 @@ from dashboard.conf import USE_GRIDSTER, HAS_REPORT_ENABLED
           </div>
           <div class="search-bar-query" data-bind="foreach: query.qs">
 
-            <div data-bind="component: { name: 'hue-simple-ace-editor', params: { value: q, autocomplete: { type: 'solrQuery', support: { collection: $root.collection } }, singleLine: true } }"></div>
+            <div data-bind="component: { name: 'hue-simple-ace-editor', params: { value: q, placeHolder: '${ _ko('Example: field:value, or press CTRL + space') }', autocomplete: { type: 'solrQuery', support: { collection: $root.collection } }, singleLine: true } }"></div>
 ##             <input data-bind="clearable: q, valueUpdate:'afterkeydown', typeahead: { target: q, nonBindableSource: queryTypeahead, multipleValues: true, multipleValuesSeparator: ':', extraKeywords: 'AND OR TO', completeSolrRanges: true }, css: {'input-small': $root.query.qs().length > 1, 'flat-left': $index() === 0, 'input-xlarge': $root.collection.supportAnalytics()}" maxlength="4096" type="text" class="search-query">
             <!-- ko if: $index() >= 1 -->
               <a class="btn flat-left" href="javascript:void(0)" data-bind="click: $root.query.removeQ"><i class="fa fa-minus"></i></a>

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است