فهرست منبع

HUE-3282 [editor] Combo buttong with Clear, Explain, Format

Enrico Berti 9 سال پیش
والد
کامیت
b54df8f

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

@@ -2514,3 +2514,7 @@ body {
 .hue-scrollbar-x:hover {
   background-color: #999;
 }
+
+.dropdown-menu.less-padding > li > a {
+  padding-left: 6px
+}

+ 10 - 0
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -585,6 +585,16 @@
       logGA('format');
     };
 
+    self.clear = function () {
+      self.ace().setValue('', 1);
+      logGA('clear');
+    };
+
+    self.explain = function () {
+      console.log('Explain call here.');
+      logGA('explain');
+    }
+
     self.fetchResult = function (rows, startOver) {
       if (typeof startOver == "undefined") {
         startOver = true;

+ 28 - 3
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -968,9 +968,34 @@ ${ require.config() }
     <a class="snippet-side-btn" data-bind="click: execute, visible: status() != 'running' && status() != 'loading', css: {'blue': $parent.history().length == 0 || $root.editorMode, 'disabled': statement() === '' }" title="${ _('Execute or CTRL + ENTER') }">
       <i class="fa fa-fw fa-play"></i>
     </a>
-    <a class="snippet-side-btn" data-bind="click: format, visible: status() != 'running' && status() != 'loading', css: {'disabled': statement() === '' }" title="${ _('Format the current SQL query') }">
-      <i class="fa fa-fw fa-indent"></i>
-    </a>
+    <div class="dropdown">
+      <a class="snippet-side-btn" style="padding-right:0" href="javascript: void(0)" data-bind="click: clear, visible: status() != 'running' && status() != 'loading', css: {'disabled': statement() === '' }" title="${ _('Clear the current editor') }">
+        <i class="fa fa-fw fa-eraser"></i>
+      </a>
+      <!-- ko if: isSqlDialect -->
+      <a class="dropdown-toggle snippet-side-btn" style="padding:0" data-toggle="dropdown" href="javascript: void(0)" data-bind="css: {'disabled': statement() === '' }">
+        <i class="fa fa-caret-down"></i>
+      </a>
+
+      <ul class="dropdown-menu less-padding">
+        <li>
+          <a href="javascript:void(0)" data-bind="click: clear" title="${ _('Clear the current editor') }">
+            <i class="fa fa-fw fa-eraser"></i> ${_('Clear')}
+          </a>
+        </li>
+        <li>
+          <a href="javascript:void(0)" data-bind="click: format, visible: status() != 'running' && status() != 'loading', css: {'disabled': statement() === '' }" title="${ _('Format the current SQL query') }">
+            <i class="fa fa-fw fa-indent"></i> ${_('Format')}
+          </a>
+        </li>
+        <li>
+          <a href="javascript:void(0)" data-bind="click: explain" title="${ _('Explain the current SQL query') }">
+            <i class="fa fa-fw fa-code-fork fa-rotate-90"></i> ${_('Explain')}
+          </a>
+        </li>
+      </ul>
+      <!-- /ko -->
+    </div>
     <!-- ko if: $root.editorMode -->
       <a class="snippet-side-btn" data-bind="click: function() { hideFixedHeaders(); $parent.showHistory(!$parent.showHistory()); }, css: {'blue': $parent.showHistory() }" title="${ _('Show query history') }">
         <i class="fa fa-fw fa-history"></i>