Pārlūkot izejas kodu

HUE-8142 [assist] Limit the tags to two rows in the context popover

Johan Ahlen 7 gadi atpakaļ
vecāks
revīzija
b8a7a35

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 62 - 12
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -463,7 +463,14 @@
         }
       };
 
+      var sizeCheckInterval = -1;
+
+      ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
+        window.clearInterval(sizeCheckInterval);
+      });
+
       var showEdit = function () {
+        window.clearInterval(sizeCheckInterval);
         optionsBeforeEdit = options.setTags().concat();
         options.options = $.map(options.setTags(), function (value) { return { value: value, text: value } });
         currentSelectize = $element.selectize(options)[0].selectize;
@@ -486,7 +493,41 @@
         }, 0);
       };
 
+      var lastKnownOffsetWidth = -1;
+      var lastKnownOffsetHeight = -1;
+
+      var addReadOnlyTagsTillOverflow = function ($readOnlyInner) {
+        $readOnlyInner.empty();
+        var tagElements = [];
+        options.setTags().forEach(function (tag) {
+          tagElements.push($('<div>').text(tag).appendTo($readOnlyInner));
+        });
+
+        if (! options.readOnly && !options.hasErrors()) {
+          $('<i>').addClass('fa fa-edit selectize-edit pointer').attr('title', HUE_I18n.selectize.editTags).appendTo($readOnlyInner);
+          $readOnlyInner.click(function () {
+            showEdit();
+          });
+        }
+
+        if (!options.overflowEllipsis) {
+          return;
+        }
+
+        if ($readOnlyInner[0].offsetHeight < $readOnlyInner[0].scrollHeight || $readOnlyInner[0].offsetWidth < $readOnlyInner[0].scrollWidth && tagElements.length) {
+          tagElements[tagElements.length - 1].after($('<div>').addClass('hue-tag-overflow').text('...'));
+        }
+
+        while (tagElements.length && ($readOnlyInner[0].offsetHeight < $readOnlyInner[0].scrollHeight || $readOnlyInner[0].offsetWidth < $readOnlyInner[0].scrollWidth)) {
+          tagElements.pop().remove();
+        }
+
+        lastKnownOffsetWidth = $readOnlyInner[0].offsetWidth;
+        lastKnownOffsetHeight = $readOnlyInner[0].offsetHeight;
+      };
+
       var showReadOnly = function () {
+        window.clearInterval(sizeCheckInterval);
         $(document).off('click', saveOnClickOutside);
         $(document).off('keyup', hideOnEscape);
         if (currentSelectize) {
@@ -497,22 +538,31 @@
         $readOnlyContainer.empty();
         var $readOnlyInner = $('<div>').addClass('selectize-input items not-full has-options has-items').appendTo($readOnlyContainer);
         if (options.setTags().length > 0) {
-          options.setTags().forEach(function (tag) {
-            $('<div>').text(tag).appendTo($readOnlyInner);
-          });
-        } else if (options.hasErrors()) {
-          $('<span>').addClass('selectize-no-tags').text(options.errorMessage).appendTo($readOnlyInner);
+          addReadOnlyTagsTillOverflow($readOnlyInner);
+          if (options.overflowEllipsis) {
+            sizeCheckInterval = window.setInterval(function () {
+              if ($readOnlyInner[0].offsetWidth !== lastKnownOffsetWidth || $readOnlyInner[0].offsetHeight !== lastKnownOffsetHeight) {
+                addReadOnlyTagsTillOverflow($readOnlyInner);
+              }
+            }, 500);
+          }
         } else {
-          $('<span>').addClass('selectize-no-tags').text(options.placeholder).appendTo($readOnlyInner);
-        }
+          if (options.hasErrors()) {
+            $('<span>').addClass('selectize-no-tags').text(options.errorMessage).appendTo($readOnlyInner);
+          } else {
+            $('<span>').addClass('selectize-no-tags').text(options.placeholder).appendTo($readOnlyInner);
+          }
 
-        if (! options.readOnly && !options.hasErrors()) {
-          $('<i>').addClass('fa fa-edit selectize-edit pointer').appendTo($readOnlyInner);
-          $readOnlyInner.click(function () {
-            showEdit();
-          });
+          if (! options.readOnly && !options.hasErrors()) {
+            $('<i>').addClass('fa fa-edit selectize-edit pointer').attr('title', HUE_I18n.selectize.editTags).appendTo($readOnlyInner);
+            $readOnlyInner.click(function () {
+              showEdit();
+            });
+          }
         }
 
+        $readOnlyContainer.attr('title', options.setTags().join(', '));
+
         $readOnlyContainer.show();
       };
 

+ 5 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-popover.less

@@ -442,6 +442,11 @@
 
   .hue-tags {
     margin-top: 2px;
+
+    .selectize-read-only > .selectize-input {
+      max-height: 35px;
+      overflow: hidden;
+    }
   }
 }
 

+ 4 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-selectize.less

@@ -66,6 +66,10 @@
   color: @cui-gray-700;
 }
 
+.hue-tag-overflow {
+  background: none !important;
+}
+
 div.selectize-input {
   padding: 6px;
 }

+ 2 - 1
desktop/core/src/desktop/templates/global_js_constants.mako

@@ -145,7 +145,8 @@
       errorRefreshingTableStats: '${_('An error occurred refreshing the table stats. Please try again.')}'
     },
     selectize: {
-      choose: "${ _('Choose...') }"
+      choose: "${ _('Choose...') }",
+      editTags: "${ _('Edit tags') }"
     },
     syntaxChecker: {
       didYouMean: '${_('Did you mean')}',

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

@@ -338,7 +338,7 @@ from metadata.conf import has_navigator
 
           %if has_navigator(user):
             <!-- ko if: getSourceType() === 'hive' || getSourceType() === 'impala' -->
-            <div data-bind="component: { name: 'nav-tags', params: { catalogEntry: $data, readOnly: true } }"></div>
+            <div data-bind="component: { name: 'nav-tags', params: { catalogEntry: $data, readOnly: true, overflowEllipsis: true } }"></div>
             <!-- /ko -->
           %endif
 

+ 2 - 0
desktop/core/src/desktop/templates/ko_components/ko_nav_tags.mako

@@ -34,6 +34,7 @@ from django.utils.translation import ugettext as _
           hasErrors: hasErrors,
           errorMessage: '${_ko("Tags could not be loaded.")}',
           setTags: currentTags,
+          overflowEllipsis: overflowEllipsis,
           onSave: saveTags.bind($data),
           validRegExp: '^[a-zA-z0-9_\-]{1,50}$',
           invalidMessage: '${_ko("Tags can only contain 1 to 50 alphanumeric characters, '_' or '-'.")}',
@@ -63,6 +64,7 @@ from django.utils.translation import ugettext as _
         self.allTags = ko.observableArray();
 
         self.catalogEntry = params.catalogEntry;
+        self.overflowEllipsis = params.overflowEllipsis;
         self.readOnly = '${ not user.has_hue_permission(action="write", app="metadata") }' === 'True' || !!params.readOnly;
 
         self.getSelectizeTags = function (query, callback) {

Daži faili netika attēloti, jo izmaiņu fails ir pārāk liels