Browse Source

HUE-8155 [metastore] Unify description, tags and properties editing in the table browser

- Aligned placeholders and sizes
- Fix issue with removal of description
- Fixed issue with multiline ellipsis interval for the editable binding
- Unified edit styles
Johan Ahlen 7 years ago
parent
commit
6bc1163514

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


+ 14 - 2
apps/metastore/src/metastore/static/metastore/less/metastore.less

@@ -256,10 +256,22 @@
   .hue-table-browser-desc {
   .hue-table-browser-desc {
     width: 100%;
     width: 100%;
     margin: 5px 14px 14px 14px;
     margin: 5px 14px 14px 14px;
+
+    .editable:not(.editable-open) {
+      margin-left: 9px;
+    }
+
+    .editable-inline-empty {
+      font-style: italic;
+      display: inline-block;
+      font-size: 13px;
+      color: @cui-gray-700;
+      margin-right: 4px;
+    }
   }
   }
 
 
-  .hue-tags {
-    margin: 5px 7px 0 7px;
+  .metastore-nav-tags {
+    margin: 5px 0 0 14px;
   }
   }
 
 
   .metastore-description-col .control-group > div,
   .metastore-description-col .control-group > div,

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

@@ -521,7 +521,7 @@ ${ components.menubar(is_embeddable) }
 
 
 <script type="text/html" id="metastore-nav-tags">
 <script type="text/html" id="metastore-nav-tags">
   <!-- ko if: $root.navigatorEnabled()  -->
   <!-- ko if: $root.navigatorEnabled()  -->
-  <div data-bind="component: { name: 'nav-tags', params: { catalogEntry: catalogEntry }}"></div>
+  <div class="metastore-nav-tags" data-bind="component: { name: 'nav-tags', params: { catalogEntry: catalogEntry }}"></div>
   <!-- /ko -->
   <!-- /ko -->
 </script>
 </script>
 
 

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


+ 2 - 2
desktop/core/src/desktop/static/desktop/ext/css/selectize.css

@@ -408,7 +408,7 @@
 }
 }
 
 
 .selectize-no-tags {
 .selectize-no-tags {
-  color: #999;
-  margin-top: 4px;
+  font-style: italic;
+  color: #787878;
   margin-right: 4px;
   margin-right: 4px;
 }
 }

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

@@ -103,6 +103,21 @@
       var multiLineEllipsisHandler;
       var multiLineEllipsisHandler;
       if (editableOptions.multiLineEllipsis) {
       if (editableOptions.multiLineEllipsis) {
         editableOptions.display = function (value) {
         editableOptions.display = function (value) {
+          if (!value) {
+            if (multiLineEllipsisHandler) {
+              multiLineEllipsisHandler.pause();
+            }
+            var $container = $(this);
+            $container.empty();
+            if (editableOptions.placeholder) {
+              $('<div>').addClass('editable-inline-empty').text(editableOptions.placeholder).appendTo($container);
+            }
+            if (onActionRender) {
+              onActionRender($container);
+            }
+            return;
+          }
+
           if (!multiLineEllipsisHandler) {
           if (!multiLineEllipsisHandler) {
             multiLineEllipsisHandler = new MultiLineEllipsisHandler({
             multiLineEllipsisHandler = new MultiLineEllipsisHandler({
               element: this,
               element: this,
@@ -118,12 +133,17 @@
             });
             });
           } else {
           } else {
             multiLineEllipsisHandler.setText(value);
             multiLineEllipsisHandler.setText(value);
+            multiLineEllipsisHandler.resume();
           }
           }
         }
         }
       } else if (onActionRender) {
       } else if (onActionRender) {
         editableOptions.display = function (value) {
         editableOptions.display = function (value) {
           var $container = $(this);
           var $container = $(this);
-          $('<span>').html(value).appendTo($container);
+          if (!value && editableOptions.placeholder) {
+            $('<div>').addClass('editable-inline-empty').text(editableOptions.placeholder).appendTo($container);
+          } else {
+            $('<span>').html(value).appendTo($container);
+          }
           onActionRender($container);
           onActionRender($container);
         };
         };
 
 
@@ -142,7 +162,7 @@
       if (editableOptions.multiLineEllipsis) {
       if (editableOptions.multiLineEllipsis) {
         $editable.off('.multiLine');
         $editable.off('.multiLine');
         $editable.on('hidden.multiLine', function () {
         $editable.on('hidden.multiLine', function () {
-          if (multiLineEllipsisHandler) {
+          if (multiLineEllipsisHandler && ko.unwrap(value)) {
             multiLineEllipsisHandler.resume();
             multiLineEllipsisHandler.resume();
           }
           }
         });
         });

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

@@ -550,11 +550,11 @@
           if (options.hasErrors()) {
           if (options.hasErrors()) {
             $('<span>').addClass('selectize-no-tags').text(options.errorMessage).appendTo($readOnlyInner);
             $('<span>').addClass('selectize-no-tags').text(options.errorMessage).appendTo($readOnlyInner);
           } else {
           } else {
-            $('<span>').addClass('selectize-no-tags').text(options.placeholder).appendTo($readOnlyInner);
+            $('<span>').addClass('selectize-no-tags').text(options.emptyPlaceholder).appendTo($readOnlyInner);
           }
           }
 
 
           if (! options.readOnly && !options.hasErrors()) {
           if (! options.readOnly && !options.hasErrors()) {
-            $('<i>').addClass('fa fa-edit selectize-edit pointer').attr('title', HUE_I18n.selectize.editTags).appendTo($readOnlyInner);
+            $('<i>').addClass('fa fa-pencil selectize-edit pointer').attr('title', HUE_I18n.selectize.editTags).appendTo($readOnlyInner);
             $readOnlyInner.click(function () {
             $readOnlyInner.click(function () {
               showEdit();
               showEdit();
             });
             });
@@ -594,7 +594,7 @@
       self.fullText = options.text;
       self.fullText = options.text;
       self.element.textContent = self.fullText;
       self.element.textContent = self.fullText;
 
 
-      window.setTimeout(function () {
+      self.delayedResumeTimeout = window.setTimeout(function () {
         self.resume();
         self.resume();
       }, 0);
       }, 0);
     }
     }
@@ -610,6 +610,7 @@
     MultiLineEllipsisHandler.prototype.resume = function () {
     MultiLineEllipsisHandler.prototype.resume = function () {
       var self = this;
       var self = this;
       self.refresh();
       self.refresh();
+      window.clearInterval(self.sizeCheckInterval);
       self.sizeCheckInterval = window.setInterval(function () {
       self.sizeCheckInterval = window.setInterval(function () {
         if (self.element.offsetWidth !== self.lastKnownOffsetWidth || self.element.offsetHeight !== self.lastKnownOffsetHeight) {
         if (self.element.offsetWidth !== self.lastKnownOffsetWidth || self.element.offsetHeight !== self.lastKnownOffsetHeight) {
           self.element.textContent = self.fullText;
           self.element.textContent = self.fullText;
@@ -620,12 +621,13 @@
 
 
     MultiLineEllipsisHandler.prototype.pause = function () {
     MultiLineEllipsisHandler.prototype.pause = function () {
       var self = this;
       var self = this;
+      window.clearTimeout(self.delayedResumeTimeout);
       window.clearInterval(self.sizeCheckInterval);
       window.clearInterval(self.sizeCheckInterval);
     };
     };
 
 
     MultiLineEllipsisHandler.prototype.dispose = function () {
     MultiLineEllipsisHandler.prototype.dispose = function () {
       var self = this;
       var self = this;
-      window.clearInterval(self.sizeCheckInterval);
+      self.pause();
     };
     };
 
 
     MultiLineEllipsisHandler.prototype.refresh = function () {
     MultiLineEllipsisHandler.prototype.refresh = function () {

+ 13 - 3
desktop/core/src/desktop/static/desktop/less/components/hue-nav-properties.less

@@ -18,9 +18,19 @@
 
 
 .hue-nav-properties {
 .hue-nav-properties {
   position: relative;
   position: relative;
-  margin: 5px 14px;
+  margin: 5px 0 5px 14px;
   font-size: 14px;
   font-size: 14px;
   line-height: 20px;
   line-height: 20px;
+  padding-left: 6px;
+
+  .hue-nav-properties-empty {
+    overflow: hidden;
+    font-style: italic;
+    display: inline-block;
+    font-size: 13px;
+    color: @cui-gray-700;
+    margin-left: 3px;
+  }
 
 
   &.hue-nav-properties-edit {
   &.hue-nav-properties-edit {
     padding-right: 40px;
     padding-right: 40px;
@@ -28,8 +38,8 @@
     .hue-nav-properties-edit-actions {
     .hue-nav-properties-edit-actions {
       position: absolute;
       position: absolute;
       font-size: 18px;
       font-size: 18px;
-      right: 0;
-      top: 0;
+      right: 2px;
+      top: 2px;
 
 
       a {
       a {
         color: @cui-gray-600;
         color: @cui-gray-600;

+ 12 - 0
desktop/core/src/desktop/static/desktop/less/hue4.less

@@ -873,5 +873,17 @@ a:visited {
   opacity: 0;
   opacity: 0;
   font-size: 16px;
   font-size: 16px;
   margin-left: 2px;
   margin-left: 2px;
+
   color: @cui-gray-700;
   color: @cui-gray-700;
+  :hover {
+    color: @hue-primary-color-dark;
+  }
+
+  a {
+    color: @cui-gray-700;
+
+    &:hover {
+      color: @hue-primary-color-dark;
+    }
+  }
 }
 }

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

@@ -48,7 +48,7 @@ from django.utils.translation import ugettext as _
 
 
      <div class="hue-nav-properties" data-bind="click: startEdit, visibleOnHover: { selector: '.editable-inline-action' }">
      <div class="hue-nav-properties" data-bind="click: startEdit, visibleOnHover: { selector: '.editable-inline-action' }">
        <!-- ko ifnot: properties().length -->
        <!-- ko ifnot: properties().length -->
-       ${ _("No properties") }
+       <div class="hue-nav-properties-empty">${ _("Add properties...") }</div>
        <!-- /ko -->
        <!-- /ko -->
        <!-- ko foreach: properties -->
        <!-- ko foreach: properties -->
        <div class="hue-nav-property"><div class="hue-nav-property-key" data-bind="text: key, attr: { 'title': key }"></div><div class="hue-nav-property-value" data-bind="text: value, attr: { 'title': value }"></div></div>
        <div class="hue-nav-property"><div class="hue-nav-property-key" data-bind="text: key, attr: { 'title': key }"></div><div class="hue-nav-property-value" data-bind="text: value, attr: { 'title': value }"></div></div>

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

@@ -29,7 +29,7 @@ from django.utils.translation import ugettext as _
      <!-- ko if: !loading() && (!readOnly || readOnly && currentTags().length) -->
      <!-- ko if: !loading() && (!readOnly || readOnly && currentTags().length) -->
      <div class="hue-tags" style="width: 100%" data-bind="ifnot: loading, css: { 'read-only-tags': readOnly }">
      <div class="hue-tags" style="width: 100%" data-bind="ifnot: loading, css: { 'read-only-tags': readOnly }">
        <textarea style="width: 100%" data-bind="tagEditor: {
        <textarea style="width: 100%" data-bind="tagEditor: {
-          placeholder: '${_ko('No tags')}',
+          emptyPlaceholder: '${_ko('Add tags...')}',
           readOnly: readOnly,
           readOnly: readOnly,
           hasErrors: hasErrors,
           hasErrors: hasErrors,
           errorMessage: '${_ko("Tags could not be loaded.")}',
           errorMessage: '${_ko("Tags could not be loaded.")}',

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