Browse Source

HUE-8155 [metastore] Expand the description on click instead of entering edit mode

Johan Ahlen 7 years ago
parent
commit
e1fc1b7995

File diff suppressed because it is too large
+ 0 - 0
apps/metastore/src/metastore/static/metastore/css/metastore.css


+ 9 - 11
apps/metastore/src/metastore/static/metastore/less/metastore.less

@@ -245,6 +245,15 @@
     top: 2px;
   }
 
+  .editable-inline-empty {
+    cursor: pointer;
+    font-style: italic;
+    display: inline-block;
+    font-size: 13px;
+    color: @cui-gray-700;
+    margin-right: 4px;
+  }
+
   .metastore-description-col .editable-container,
   .hue-table-browser-desc .editable-container,
   .metastore-description-col .editable-input,
@@ -262,11 +271,7 @@
     }
 
     .editable-inline-empty {
-      font-style: italic;
-      display: inline-block;
       font-size: 13px;
-      color: @cui-gray-700;
-      margin-right: 4px;
     }
   }
 
@@ -285,13 +290,6 @@
 
   .metastore-description-col {
     position: relative;
-
-    .editable-inline-empty {
-      font-style: italic;
-      display: inline-block;
-      color: @cui-gray-700;
-      margin-right: 4px;
-    }
   }
 
   .metastore-property:first-child {

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

@@ -465,7 +465,7 @@ ${ components.menubar(is_embeddable) }
 <script type="text/html" id="metastore-td-description">
 % if has_write_access:
   <div data-bind="visibleOnHover: { selector: '.editable-inline-action' }">
-    <div class="toggle-editable" data-bind="editable: comment, editableOptions: {
+    <div data-bind="editable: comment, editableOptions: {
         mode: 'inline',
         enabled: true,
         type: 'textarea',
@@ -492,7 +492,7 @@ ${ components.menubar(is_embeddable) }
   <!-- ko if: $root.navigatorEnabled() -->
   <div class="hue-table-browser-desc-container" data-bind="visibleOnHover: { selector: '.editable-inline-action' }">
     <div class="hue-table-browser-desc">
-      <div class="toggle-editable" data-bind="editable: comment, editableOptions: {
+      <div data-bind="editable: comment, editableOptions: {
         mode: 'inline',
         enabled: true,
         type: 'textarea',

File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 16 - 7
desktop/core/src/desktop/static/desktop/js/ko.editable.js

@@ -63,9 +63,9 @@
         //taken directly from ko.bindingHandlers['options']
         function applyToObject(object, predicate, defaultValue) {
           var predicateType = typeof predicate;
-          if (predicateType == "function")    // Given a function; run it against the data value
+          if (predicateType === "function")    // Given a function; run it against the data value
             return predicate(object);
-          else if (predicateType == "string") // Given a string; treat it as a property name on the data value
+          else if (predicateType === "string") // Given a string; treat it as a property name on the data value
             return object[predicate];
           else                                // Given no optionsText arg; use the data value itself
             return defaultValue;
@@ -96,10 +96,21 @@
           if (editableOptions.inlineEditAction.editClass) {
             $editAction.addClass(editableOptions.inlineEditAction.editClass);
           }
+          $editAction.on('click', function () {
+            $editable.editable('toggle');
+          });
           $editAction.appendTo($container);
         }
       }
 
+      var addPlaceHolder = function ($container) {
+        if (editableOptions.placeholder) {
+          $('<div>').addClass('editable-inline-empty').text(editableOptions.placeholder).click(function () {
+            $editable.editable('toggle');
+          }).appendTo($container);
+        }
+      };
+
       var multiLineEllipsisHandler;
       if (editableOptions.multiLineEllipsis) {
         editableOptions.display = function (value) {
@@ -109,9 +120,7 @@
             }
             var $container = $(this);
             $container.empty();
-            if (editableOptions.placeholder) {
-              $('<div>').addClass('editable-inline-empty').text(editableOptions.placeholder).appendTo($container);
-            }
+            addPlaceHolder($container);
             if (onActionRender) {
               onActionRender($container);
             }
@@ -139,8 +148,8 @@
       } else if (onActionRender) {
         editableOptions.display = function (value) {
           var $container = $(this);
-          if (!value && editableOptions.placeholder) {
-            $('<div>').addClass('editable-inline-empty').text(editableOptions.placeholder).appendTo($container);
+          if (!value) {
+            addPlaceHolder($container);
           } else {
             $('<span>').html(value).appendTo($container);
           }

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

@@ -638,7 +638,12 @@
         textElement.textContent = self.fullText;
         if (self.expanded || self.element.offsetHeight < self.element.scrollHeight || self.element.offsetWidth < self.element.scrollWidth) {
           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>').click(function (e) {
+          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);
+          }
+          $expandLink.appendTo(self.$element);
+          $expandLink.add(textElement).click(function (e) {
             self.expanded = !self.expanded;
             self.updateOverflowHeight();
             if (self.expanded) {
@@ -647,12 +652,7 @@
             } else {
               self.resume();
             }
-            e.stopPropagation();
-          });
-          if (self.expandClass) {
-            $expandLink.addClass(self.expandClass);
-          }
-          $expandLink.appendTo(self.$element);
+          })
         }
       } else {
         textElement.textContent = self.fullText;

+ 1 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-nav-properties.less

@@ -24,6 +24,7 @@
   padding-left: 6px;
 
   .hue-nav-properties-empty {
+    cursor: pointer;
     overflow: hidden;
     font-style: italic;
     display: inline-block;

+ 3 - 2
desktop/core/src/desktop/static/desktop/less/components/hue-selectize.less

@@ -412,8 +412,9 @@
 }
 
 .selectize-no-tags {
-  color: @cui-gray-600;
-  margin-top: 4px;
+  cursor: pointer;
+  font-style: italic;
+  color: @cui-gray-700;
   margin-right: 4px;
 }
 

Some files were not shown because too many files changed in this diff