Jelajahi Sumber

HUE-8155 [metastore] Only show description expand link on hover

Johan Ahlen 7 tahun lalu
induk
melakukan
dd1a1c1

+ 3 - 3
apps/metastore/src/metastore/templates/metastore.mako

@@ -451,7 +451,7 @@ ${ components.menubar(is_embeddable) }
 
 <script type="text/html" id="metastore-td-description">
 % if has_write_access:
-  <div class="show-inactive-on-hover">
+  <div data-bind="visibleOnHover: { selector: '.inactive-action' }">
     <div class="edit-description-action"><a class="inactive-action pointer toggle-editable" title="${ _('Edit the description') }"><i class="fa fa-pencil"></i></a></div>
     <div class="toggle-editable" data-bind="editable: comment, editableOptions: {
         mode: 'inline',
@@ -465,7 +465,7 @@ ${ components.menubar(is_embeddable) }
         emptytext: '${ _ko('Add a description...') }',
         inputclass: 'hue-table-browser-desc-input',
         rows: 6,
-        multiLineEllipsis: { overflowHeight: '40px', expandable: true }
+        multiLineEllipsis: { overflowHeight: '40px', expandable: true, expandClass: 'inactive-action' }
       }">
       ${ _('Add a description...') }</div>
   </div>
@@ -493,7 +493,7 @@ ${ components.menubar(is_embeddable) }
         placeholder: '${ _ko('Add a description...') }',
         emptytext: '${ _ko('No description available') }',
         rows: 8,
-        multiLineEllipsis: { overflowHeight: '120px', expandable: true },
+        multiLineEllipsis: { overflowHeight: '120px', expandable: true, expandClass: 'inactive-action' },
       }" class="inline-block">
         ${ _('Add a description...') }
       </div>

+ 2 - 1
desktop/core/src/desktop/static/desktop/js/ko.editable.js

@@ -96,7 +96,8 @@
               element: this,
               text: value,
               overflowHeight: editableOptions.multiLineEllipsis.overflowHeight,
-              expandable: editableOptions.multiLineEllipsis
+              expandable: editableOptions.multiLineEllipsis,
+              expandClass: editableOptions.multiLineEllipsis.expandClass
             });
 
             ko.utils.domNodeDisposal.addDisposeCallback(element, function() {

+ 7 - 2
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -579,6 +579,7 @@
       self.$element = $(options.element);
       self.overflowHeight = options.overflowHeight;
       self.expandable = options.expandable;
+      self.expandClass = options.expandClass;
       self.overflowing = options.overflowing;
 
       self.lastKnownOffsetHeight;
@@ -634,7 +635,7 @@
         textElement.textContent = self.fullText;
         if (self.expanded || self.element.offsetHeight < self.element.scrollHeight || self.element.offsetWidth < self.element.scrollWidth) {
           self.$element.append('&nbsp;');
-          $('<a href="javscript:void(0);">' + (self.expanded ? HUE_I18n.editable.showLess : HUE_I18n.editable.showMore) + '</a>').click(function (e) {
+          var $expandLink = $('<a href="javscript:void(0);">' + (self.expanded ? HUE_I18n.editable.showLess : HUE_I18n.editable.showMore) + '</a>').click(function (e) {
             self.expanded = !self.expanded;
             self.updateOverflowHeight();
             if (self.expanded) {
@@ -644,7 +645,11 @@
               self.resume();
             }
             e.stopPropagation();
-          }).appendTo(self.$element);
+          });
+          if (self.expandClass) {
+            $expandLink.addClass(self.expandClass);
+          }
+          $expandLink.appendTo(self.$element);
         }
       } else {
         textElement.textContent = self.fullText;