浏览代码

HUE-8136 [assist] Limit the description to two lines in the context popover

Johan Ahlen 7 年之前
父节点
当前提交
54c8eae

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


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

@@ -520,6 +520,52 @@
     }
   };
 
+  ko.bindingHandlers.multiLineEllipsis = {
+    after: ['text', 'value'],
+    init: function (element, valueAccessor) { },
+    update: function (element, valueAccessor) {
+      var originalContent;
+      var lastKnownOffsetHeight;
+      var lastKnownOffsetWidth;
+
+      var checkOverflow = function () {
+        if (!originalContent) {
+          originalContent = element.textContent;
+        }
+
+        lastKnownOffsetHeight = element.offsetHeight;
+        lastKnownOffsetWidth = element.offsetWidth;
+
+        var overflowing = false;
+        while (element.offsetHeight < element.scrollHeight || element.offsetWidth < element.scrollWidth) {
+          overflowing = true;
+          var lastSpaceIndex = element.textContent.lastIndexOf(' ');
+          if (lastSpaceIndex !== -1) {
+            element.textContent = element.textContent.substring(0, lastSpaceIndex) + '...';
+          } else {
+            break;
+          }
+        }
+        if (typeof valueAccessor() === 'function') {
+          valueAccessor()(overflowing);
+        }
+      };
+
+      window.setTimeout(checkOverflow, 0);
+
+      var sizeCheckInterval = window.setInterval(function () {
+        if (element.offsetWidth !== lastKnownOffsetWidth || element.offsetHeight !== lastKnownOffsetHeight) {
+          element.textContent = originalContent;
+          checkOverflow();
+        }
+      }, 500);
+
+      ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
+        window.clearInterval(sizeCheckInterval);
+      });
+    }
+  };
+
   ko.bindingHandlers.toggleOverflow = {
     render: function ($element, options) {
       if (hueUtils.isOverflowing($element.find('.toggle-overflow'))) {

+ 2 - 1
desktop/core/src/desktop/static/desktop/less/components/hue-popover.less

@@ -377,10 +377,11 @@
 }
 
 .context-popover-comment {
-  .flex(1);
+  .flex(0 1 40px);
   margin-top: 2px;
   margin-bottom: 8px;
   padding-left: 4px;
+  overflow: hidden;
 }
 
 .context-popover-sql {

+ 2 - 1
desktop/core/src/desktop/templates/ko_components/ko_context_popover.mako

@@ -333,7 +333,7 @@ from metadata.conf import has_navigator
       <div class="context-popover-flex-fill" data-bind="with: catalogEntry, niceScroll">
         <div class="context-popover-inner-content">
           <!-- ko if: $parent.comment() -->
-          <div class="context-popover-comment" data-bind="text: $parent.comment"></div>
+          <div class="context-popover-comment" data-bind="attr: { 'title': $parent.comment }, multiLineEllipsis: $parent.commentOverflowing, style: { 'min-height': $parent.commentOverflowing() ? '40px' : null }, text: $parent.comment"></div>
           <!-- /ko -->
 
           %if has_navigator(user):
@@ -410,6 +410,7 @@ from metadata.conf import has_navigator
 
         self.analysis = ko.observable();
         self.comment = ko.observable();
+        self.commentOverflowing = ko.observable();
         self.viewSql = ko.observable();
         self.viewSqlVisible = ko.observable(false);
 

部分文件因为文件数量过多而无法显示