Selaa lähdekoodia

HUE-7917 [assist] Make it possible to expand the comment in the context popover

Johan Ahlen 7 vuotta sitten
vanhempi
commit
aabb5b394a

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

@@ -402,7 +402,7 @@ ${ components.menubar(is_embeddable) }
         inputclass: 'hue-table-browser-desc-input',
         rows: 6,
         inlineEditAction: { editClass: 'toggle-editable editable-inline-action' },
-        multiLineEllipsis: { overflowHeight: '40px', expandable: true, expandClass: 'editable-inline-action' }
+        multiLineEllipsis: { overflowHeight: '40px', expandable: true, expandActionClass: 'editable-inline-action' }
       }">
       ${ _('Add a description...') }</div>
   </div>
@@ -428,7 +428,7 @@ ${ components.menubar(is_embeddable) }
         emptytext: '${ _ko('No description available') }',
         rows: 8,
         inlineEditAction: { editClass: 'toggle-editable editable-inline-action' },
-        multiLineEllipsis: { overflowHeight: '120px', expandable: true, expandClass: 'editable-inline-action', inlineEditAction: true },
+        multiLineEllipsis: { overflowHeight: '120px', expandable: true, expandActionClass: 'editable-inline-action', inlineEditAction: true },
       }" class="inline-block">
         ${ _('Add a description...') }
       </div>

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


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

@@ -135,7 +135,7 @@
               text: value,
               overflowHeight: editableOptions.multiLineEllipsis.overflowHeight,
               expandable: editableOptions.multiLineEllipsis,
-              expandClass: editableOptions.multiLineEllipsis.expandClass,
+              expandActionClass: editableOptions.multiLineEllipsis.expandActionClass,
               linkify: true,
               onActionRender: onActionRender
             });

+ 29 - 11
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -568,6 +568,7 @@
       self.overflowHeight = options.overflowHeight;
       self.expandable = options.expandable;
       self.expandClass = options.expandClass;
+      self.expandActionClass = options.expandActionClass;
       self.overflowing = options.overflowing;
 
       self.onActionRender = options.onActionRender;
@@ -576,7 +577,7 @@
       self.lastKnownOffsetWidth;
       self.isOverflowing;
 
-      self.expanded = false;
+      self.expanded = options.expanded || ko.observable(false);
       self.updateOverflowHeight();
 
       self.contents = options.text;
@@ -601,8 +602,8 @@
     MultiLineEllipsisHandler.prototype.updateOverflowHeight = function () {
       var self = this;
       if (self.overflowHeight) {
-        self.$element.css('max-height', self.expanded ? '' : self.overflowHeight);
-        self.$element.css('overflow', self.expanded ? '' : 'hidden');
+        self.$element.css('max-height', self.expanded() ? '' : self.overflowHeight);
+        self.$element.css('overflow', self.expanded() ? '' : 'hidden');
       }
     };
 
@@ -638,20 +639,27 @@
       var textElement = $('<span>').appendTo(self.$element)[0];
       if (self.expandable) {
         textElement.innerHTML = self.renderContents ? self.renderContents(self.contents) : self.contents;
-        if (self.expanded || checkOverflow(self.element)) {
+        if (self.expanded() || checkOverflow(self.element)) {
           self.$element.append('&nbsp;');
-          var $expandLink = $('<a href="javascript:void(0);"><i class="fa fa-fw ' + (self.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down') + '"></i></a>');
-          if (self.expandClass) {
-            $expandLink.addClass(self.expandClass);
+          var $expandLink = $('<a href="javascript:void(0);"><i class="fa fa-fw ' + (self.expanded() ? 'fa-angle-double-up' : 'fa-angle-double-down') + '"></i></a>');
+          if (self.expandActionClass) {
+            $expandLink.addClass(self.expandActionClass);
           }
           $expandLink.appendTo(self.$element);
           $expandLink.add(textElement).click(function (e) {
-            self.expanded = !self.expanded;
+            self.expanded(!self.expanded());
+            console.log(self.expanded());
             self.updateOverflowHeight();
-            if (self.expanded) {
+            if (self.expanded()) {
+              if (self.expandClass) {
+                self.$element.addClass(self.expandClass);
+              }
               self.refresh();
               self.pause();
             } else {
+              if (self.expandClass) {
+                self.$element.removeClass(self.expandClass);
+              }
               self.resume();
             }
           })
@@ -705,11 +713,21 @@
     after: ['text', 'value'],
     init: function (element, valueAccessor) { },
     update: function (element, valueAccessor) {
+      var options = {};
+      if (valueAccessor && ko.isObservable(valueAccessor())) {
+        options.overflowing = valueAccessor();
+      } else if (valueAccessor) {
+        options = valueAccessor() || {};
+      }
       var multiLineEllipsisHandler = new MultiLineEllipsisHandler({
         element: element,
         text: element.textContent,
-        overflowing: valueAccessor(),
-        linkify: true
+        overflowing: options.overflowing,
+        linkify: true,
+        expandable: options.expandable,
+        expanded: options.expanded,
+        expandActionClass: options.expandActionClass,
+        expandClass: options.expandClass
       });
 
       ko.utils.domNodeDisposal.addDisposeCallback(element, function() {

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

@@ -382,6 +382,12 @@
   margin-bottom: 8px;
   padding-left: 4px;
   overflow: hidden;
+
+  &.context-popover-comment-expanded {
+    .flex(1 1 100%);
+    white-space: pre-wrap;
+    margin-bottom: 2px;
+  }
 }
 
 .context-popover-sql {

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

@@ -40,7 +40,7 @@ from desktop.views import _ko
           rows: 6,
           save: saveComment,
           inlineEditAction: { editClass: 'toggle-editable editable-inline-action' },
-          multiLineEllipsis: { overflowHeight: '40px', expandable: true, expandClass: 'editable-inline-action' }
+          multiLineEllipsis: { overflowHeight: '40px', expandable: true, expandActionClass: 'editable-inline-action' }
         }">${ _('Add a description...') }</div>
       </div>
     <!-- /ko -->

+ 17 - 15
desktop/core/src/desktop/templates/ko_components/ko_context_popover.mako

@@ -333,25 +333,26 @@ from metadata.conf import has_navigator
       <div class="context-popover-flex-fill" data-bind="with: catalogEntry">
         <div class="context-popover-inner-content">
           <!-- ko if: $parent.comment() -->
-          <div class="context-popover-comment" data-bind="attr: { 'title': $parent.comment }, multiLineEllipsis, text: $parent.comment"></div>
+          <div class="context-popover-comment" data-bind="attr: { 'title': $parent.comment }, multiLineEllipsis: { expanded: $parent.commentExpanded, expandable: true, expandClass: 'context-popover-comment-expanded' }, text: $parent.comment"></div>
           <!-- /ko -->
 
-          %if has_navigator(user):
-            <!-- ko if: getSourceType() === 'hive' || getSourceType() === 'impala' -->
-            <div data-bind="component: { name: 'nav-tags', params: { catalogEntry: $data, readOnly: true, overflowEllipsis: true } }"></div>
-            <!-- /ko -->
-          %endif
+          <!-- ko ifnot: $parent.commentExpanded -->
+            %if has_navigator(user):
+              <!-- ko if: getSourceType() === 'hive' || getSourceType() === 'impala' -->
+              <div data-bind="component: { name: 'nav-tags', params: { catalogEntry: $data, readOnly: true, overflowEllipsis: true } }"></div>
+              <!-- /ko -->
+            %endif
 
-          <!-- ko if: isView() && $parent.viewSql() -->
-          <a href="javascript:void(0);" style="text-align: right; margin-bottom: 5px;" data-bind="toggle: $parent.viewSqlVisible, text: $parent.viewSqlVisible() ? '${ _ko('Show columns')}' : '${ _ko('Show view SQL')}'"></a>
-          <!-- /ko -->
+            <!-- ko if: isView() && $parent.viewSql() -->
+            <a href="javascript:void(0);" style="text-align: right; margin-bottom: 5px;" data-bind="toggle: $parent.viewSqlVisible, text: $parent.viewSqlVisible() ? '${ _ko('Show columns')}' : '${ _ko('Show view SQL')}'"></a>
+            <!-- /ko -->
 
-          <!-- ko if: $parent.viewSqlVisible -->
-          <div class="context-popover-sql" data-bind="highlight: { value: $parent.viewSql, formatted: true, dialect: getSourceType() }">
-          </div>
-          <!-- /ko -->
-          <!-- ko ifnot: $parent.viewSqlVisible -->
-          <!-- ko component: { name: 'catalog-entries-list', params: { catalogEntry: $data, onClick: $parent.catalogEntry } } --><!-- /ko -->
+            <!-- ko if: $parent.viewSqlVisible -->
+            <div class="context-popover-sql" data-bind="highlight: { value: $parent.viewSql, formatted: true, dialect: getSourceType() }"></div>
+            <!-- /ko -->
+            <!-- ko ifnot: $parent.viewSqlVisible -->
+            <!-- ko component: { name: 'catalog-entries-list', params: { catalogEntry: $data, onClick: $parent.catalogEntry } } --><!-- /ko -->
+            <!-- /ko -->
           <!-- /ko -->
         </div>
       </div>
@@ -410,6 +411,7 @@ from metadata.conf import has_navigator
 
         self.analysis = ko.observable();
         self.comment = ko.observable();
+        self.commentExpanded = ko.observable(false);
         self.viewSql = ko.observable();
         self.viewSqlVisible = ko.observable(false);
 

Kaikkia tiedostoja ei voida näyttää, sillä liian monta tiedostoa muuttui tässä diffissä