Sfoglia il codice sorgente

HUE-3654 [editor] Ellipsis for the name of the query in Query History

Enrico Berti 9 anni fa
parent
commit
fc43dd9d68

+ 16 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -3851,4 +3851,20 @@
     }
   };
 
+  ko.bindingHandlers.ellipsis = {
+    update: function (element, valueAccessor, allBindingsAccessor) {
+      var value = ko.unwrap(valueAccessor());
+      var $element = $(element);
+      var chopLength = value.length ? value.length : 30;
+      var text = typeof value === 'object' ? value.data : value;
+      if (text.length > chopLength) {
+        $element.attr('title', text);
+        $element.text(text.substr(0, chopLength) + '...');
+      }
+      else {
+        $element.text(text);
+      }
+    }
+};
+
 }));

+ 1 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1050,7 +1050,7 @@ ${ hueIcons.symbols() }
                   <!-- /ko -->
                   <!-- /ko -->
                 </td>
-                <td style="width: 25px" class="muted" data-bind="text: name"></td>
+                <td style="width: 25px" class="muted" data-bind="ellipsis: {data: name, length: 30}"></td>
                 <td data-bind="style: {'border-top-width': $index() == 0 ? '0' : ''}"><div data-bind="highlight: query, flavor: $parent.type" class="history-item"></div></td>
               </tr>
             </tbody>