瀏覽代碼

HUE-9143 [frontend] Improve layout in the quick query component

Johan Ahlen 5 年之前
父節點
當前提交
057f5e580a

+ 20 - 14
desktop/core/src/desktop/js/ko/components/contextPopover/ko.quickQueryContext.js

@@ -16,10 +16,10 @@
 
 
 import * as ko from 'knockout';
 import * as ko from 'knockout';
 
 
-import 'ko/components/simpleAceEditor/ko.simpleAceEditor';
-import 'ko/components/ko.contextSelector';
-import 'ko/components/ko.dropDown';
-import 'apps/notebook2/components/ko.executableActions';
+import { MULTI_NAME as SIMPLE_ACE_MULTI } from 'ko/components/simpleAceEditor/ko.simpleAceEditor';
+import { NAME as CONTEXT_SELECTOR } from 'ko/components/ko.contextSelector';
+import { NAME as DROP_DOWN } from 'ko/components/ko.dropDown';
+import { NAME as EXECUTABLE_ACTIONS } from 'apps/notebook2/components/ko.executableActions';
 
 
 import componentUtils from 'ko/components/componentUtils';
 import componentUtils from 'ko/components/componentUtils';
 import DisposableComponent from 'ko/components/DisposableComponent';
 import DisposableComponent from 'ko/components/DisposableComponent';
@@ -36,8 +36,9 @@ const TEMPLATE = `
 <div class="context-popover-flex-fill" style="overflow: auto;">
 <div class="context-popover-flex-fill" style="overflow: auto;">
   <!-- ko hueSpinner: { spin: loadingConfig, center: true, size: 'xlarge' } --><!-- /ko -->
   <!-- ko hueSpinner: { spin: loadingConfig, center: true, size: 'xlarge' } --><!-- /ko -->
   <!-- ko ifnot: loadingConfig -->
   <!-- ko ifnot: loadingConfig -->
-    <div style="display: inline-block" data-bind="component: { 
-        name: 'hue-drop-down',
+    <div style="display: inline-block" data-bind="
+      component: { 
+        name: '${ DROP_DOWN }',
         params: {
         params: {
           value: interpreter,
           value: interpreter,
           labelAttribute: 'displayName',
           labelAttribute: 'displayName',
@@ -47,8 +48,9 @@ const TEMPLATE = `
       }
       }
     "></div>
     "></div>
     <!-- ko if: interpreter() -->
     <!-- ko if: interpreter() -->
-      <div class="margin-left-10" style="display: inline-block" data-bind="component: {
-          name: 'hue-context-selector',
+      <div class="margin-left-10" style="display: inline-block" data-bind="
+        component: {
+          name: '${ CONTEXT_SELECTOR }',
           params: {
           params: {
             sourceType: interpreter().type,
             sourceType: interpreter().type,
             compute: compute,
             compute: compute,
@@ -64,14 +66,14 @@ const TEMPLATE = `
       <!-- ko with: interpreter -->
       <!-- ko with: interpreter -->
         <div style="margin: 10px;" data-bind="
         <div style="margin: 10px;" data-bind="
           component: { 
           component: { 
-            name: 'hue-simple-ace-editor-multi',
+            name: '${ SIMPLE_ACE_MULTI }',
             params: {
             params: {
               autocomplete: $parent.autocomplete,
               autocomplete: $parent.autocomplete,
               value: $parent.statement,
               value: $parent.statement,
-              lines: 5,
+              lines: 3,
               aceOptions: {
               aceOptions: {
-                minLines: 10,
-                maxLines: 25
+                minLines: 3,
+                maxLines: 5
               },
               },
               mode: dialect,
               mode: dialect,
               database: $parent.database,
               database: $parent.database,
@@ -82,8 +84,12 @@ const TEMPLATE = `
             }
             }
           }
           }
         "></div>
         "></div>
-        <div data-bind="component: { name: 'executable-actions', params: { activeExecutable: activeExecutable } }"></div>
-        
+        <div data-bind="
+          component: {
+            name: '${ EXECUTABLE_ACTIONS }',
+            params: { activeExecutable: $parent.activeExecutable } 
+          }
+        "></div>
       <!-- /ko -->
       <!-- /ko -->
     <!-- /ko -->
     <!-- /ko -->
   <!-- /ko -->
   <!-- /ko -->

+ 5 - 2
desktop/core/src/desktop/js/ko/components/simpleAceEditor/ko.simpleAceEditor.js

@@ -26,6 +26,9 @@ import SqlAutocompleter from 'sql/sqlAutocompleter';
 import sqlWorkerHandler from 'sql/sqlWorkerHandler';
 import sqlWorkerHandler from 'sql/sqlWorkerHandler';
 import AceGutterHandler from 'ko/bindings/ace/aceGutterHandler';
 import AceGutterHandler from 'ko/bindings/ace/aceGutterHandler';
 
 
+export const NAME = 'hue-simple-ace-editor';
+export const MULTI_NAME = 'hue-simple-ace-editor-multi';
+
 const SIMPLE_ACE_TEMPLATE = `
 const SIMPLE_ACE_TEMPLATE = `
   <div class="simple-ace-single-line">
   <div class="simple-ace-single-line">
     <div class="ace-clearable" data-bind="css: { 'visible': value() !== '' }, click: clear"><i class="fa fa-times-circle"></i></div>
     <div class="ace-clearable" data-bind="css: { 'visible': value() !== '' }, click: clear"><i class="fa fa-times-circle"></i></div>
@@ -342,7 +345,7 @@ class SimpleAceEditor {
 
 
 // Ace requires that the child to clone is first child, so we need separate components for single line & multi line
 // Ace requires that the child to clone is first child, so we need separate components for single line & multi line
 componentUtils.registerComponent(
 componentUtils.registerComponent(
-  'hue-simple-ace-editor',
+  NAME,
   {
   {
     createViewModel: function(params, componentInfo) {
     createViewModel: function(params, componentInfo) {
       return new SimpleAceEditor(params, componentInfo.element);
       return new SimpleAceEditor(params, componentInfo.element);
@@ -352,7 +355,7 @@ componentUtils.registerComponent(
 );
 );
 
 
 componentUtils.registerComponent(
 componentUtils.registerComponent(
-  'hue-simple-ace-editor-multi',
+  MULTI_NAME,
   {
   {
     createViewModel: function(params, componentInfo) {
     createViewModel: function(params, componentInfo) {
       return new SimpleAceEditor(params, componentInfo.element);
       return new SimpleAceEditor(params, componentInfo.element);