瀏覽代碼

HUE-8155 [metastore] Move the edit description icon inline

This also replaces the "Show more/less" link with a double arrow icon
Johan Ahlen 7 年之前
父節點
當前提交
6e6146dced

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


+ 4 - 1
apps/metastore/src/metastore/static/metastore/less/metastore.less

@@ -257,8 +257,11 @@
     padding-right: 40px;
   }
 
+  .metastore-description-col .toggle-editable {
+    cursor: pointer;
+  }
+
   .metastore-description-col {
-    padding-left: 28px;
     position: relative;
   }
 

+ 6 - 8
apps/metastore/src/metastore/templates/metastore.mako

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

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


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

@@ -165,10 +165,10 @@
 
 .selectize-edit {
   opacity: 0;
-  font-size: 18px;
+  font-size: 16px;
   vertical-align: middle !important;
   margin-left: 5px;
-  color: #999;
+  color: #787878;
   transition: all 0.2s linear;
 }
 

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

@@ -88,6 +88,18 @@
         editableOptions.toggle = 'manual';
       }
 
+      var onActionRender = undefined;
+
+      if (editableOptions.inlineEditAction) {
+        onActionRender = function ($container) {
+          var $editAction = $('<a href="javascript:void(0);"><i class="fa fa-fw fa-pencil"></i></a>');
+          if (editableOptions.inlineEditAction.editClass) {
+            $editAction.addClass(editableOptions.inlineEditAction.editClass);
+          }
+          $editAction.appendTo($container);
+        }
+      }
+
       var multiLineEllipsisHandler;
       if (editableOptions.multiLineEllipsis) {
         editableOptions.display = function (value) {
@@ -97,7 +109,8 @@
               text: value,
               overflowHeight: editableOptions.multiLineEllipsis.overflowHeight,
               expandable: editableOptions.multiLineEllipsis,
-              expandClass: editableOptions.multiLineEllipsis.expandClass
+              expandClass: editableOptions.multiLineEllipsis.expandClass,
+              onActionRender: onActionRender
             });
 
             ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
@@ -107,6 +120,20 @@
             multiLineEllipsisHandler.setText(value);
           }
         }
+      } else if (onActionRender) {
+        editableOptions.display = function (value) {
+          var $container = $(this);
+          $('<span>').html(value).appendTo($container);
+          onActionRender($container);
+        };
+
+        onActionRender = function ($container) {
+          var $editAction = $('<a href="javascript:void(0);"><i class="fa fa-fw fa-pencil"></i></a>');
+          if (editableOptions.inlineEditAction.editClass) {
+            $editAction.addClass(editableOptions.inlineEditAction.editClass);
+          }
+          $editAction.appendTo($container);
+        }
       }
 
       //create editable

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

@@ -504,7 +504,7 @@
         });
 
         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 () {
             showEdit();
           });
@@ -582,6 +582,8 @@
       self.expandClass = options.expandClass;
       self.overflowing = options.overflowing;
 
+      self.onActionRender = options.onActionRender;
+
       self.lastKnownOffsetHeight;
       self.lastKnownOffsetWidth;
       self.isOverflowing;
@@ -629,13 +631,12 @@
     MultiLineEllipsisHandler.prototype.refresh = function () {
       var self = this;
       self.$element.empty();
-      var textElement = self.element;
+      var  textElement = $('<span>').appendTo(self.$element)[0];
       if (self.expandable) {
-        textElement = $('<span>').appendTo(self.$element)[0];
         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="javscript:void(0);">' + (self.expanded ? HUE_I18n.editable.showLess : HUE_I18n.editable.showMore) + '</a>').click(function (e) {
+          var $expandLink = $('<a href="javscript:void(0);"><i class="fa fa-fw ' + (self.expanded ? 'fa-angle-double-up' : 'fa-angle-double-down') + '"></i></a>').click(function (e) {
             self.expanded = !self.expanded;
             self.updateOverflowHeight();
             if (self.expanded) {
@@ -655,6 +656,10 @@
         textElement.textContent = self.fullText;
       }
 
+      if (self.onActionRender) {
+        self.onActionRender(self.$element);
+      }
+
       self.isOverflowing = false;
       while (self.element.offsetHeight < self.element.scrollHeight || self.element.offsetWidth < self.element.scrollWidth) {
         self.isOverflowing = true;

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

@@ -868,3 +868,10 @@ a:visited {
   width: 0;
   overflow: hidden;
 }
+
+.editable-inline-action {
+  opacity: 0;
+  font-size: 16px;
+  margin-left: 2px;
+  color: @cui-gray-700;
+}

+ 0 - 4
desktop/core/src/desktop/templates/global_js_constants.mako

@@ -117,10 +117,6 @@
       uploadCanceled: '${ _('The upload has been canceled') }',
       uploadSucceeded: '${ _('uploaded successfully') }'
     },
-    editable: {
-      showMore: '${ _('Show more') }',
-      showLess: '${ _('Show less') }',
-    },
     jHueHdfsTree: {
       GO_TO_COLUMN: '${_('Go to column:')}',
       PLACEHOLDER: '${_('column name...')}',

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