소스 검색

HUE-6882 [metastore] Fix issues with the description overflow toggle

It's now shows the description inline with the edit button, it doesn't cut the text when shorter than the window width and editable works again.
Johan Ahlen 8 년 전
부모
커밋
b3e4742

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

@@ -879,10 +879,10 @@ ${ components.menubar(is_embeddable) }
   <div class="clearfix"></div>
 
   % if has_write_access:
-  <div class="show-inactive-on-hover">
-    <a class="inactive-action pointer toggle-editable" title="${ _('Edit the description') }"><i class="fa fa-pencil vertical-align-top"></i></a>
-    <div data-bind="toggleOverflow: {height: 24}">
-      <div data-bind="editable: comment, editableOptions: {enabled: true, type: 'wysihtml5', toggle: 'manual', toggleElement: '.toggle-editable', placement: 'bottom', placeholder: '${ _ko('Add a description...') }', emptytext: '${ _ko('No description available') }', inputclass:'input-xlarge', rows: 10 }" class="inline-block margin-left-5">
+  <div style="position: relative;" class="show-inactive-on-hover">
+    <div style="position:absolute; left: 10px; top: 2px;"><a class="inactive-action pointer toggle-editable" title="${ _('Edit the description') }"><i class="fa fa-pencil vertical-align-top"></i></a></div>
+    <div style="margin-left: 25px;" data-bind="toggleOverflow: { height: 24 }">
+      <div style="height: inherit" data-bind="editable: comment, editableOptions: { enabled: true, type: 'wysihtml5', toggle: 'manual', toggleElement: '.toggle-editable', placement: 'bottom', forcePlacement: true, placeholder: '${ _ko('Add a description...') }', emptytext: '${ _ko('No description available') }', inputclass:'input-xlarge', rows: 10 }" class="inline-block">
         ${ _('Add a description...') }
       </div>
     </div>

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
desktop/core/src/desktop/static/desktop/ext/js/bootstrap-editable.min.js


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

@@ -463,25 +463,25 @@
   ko.bindingHandlers.toggleOverflow = {
     render: function ($element, options) {
       if (hueUtils.isOverflowing($element.find('.toggle-overflow'))) {
-        $('<div>').addClass('toggle-overflow-gradient').html('<i class="fa fa-caret-down muted"></i>').appendTo($element);
+        $('<div>').addClass('toggle-overflow-toggle').html('<i class="fa fa-caret-down muted"></i>').appendTo($element);
         $element.on('click', function () {
-          if ($element.find('.toggle-overflow-gradient i').hasClass('fa-caret-down')){
+          if ($element.find('.toggle-overflow-toggle i').hasClass('fa-caret-down')){
             $element.find('.toggle-overflow').css('height', '');
             $element.css('cursor', 'n-resize');
-            $element.find('.toggle-overflow-gradient').css('cursor', 'n-resize');
-            $element.find('.toggle-overflow-gradient i').removeClass('fa-caret-down').addClass('fa-caret-up');
-          }
-          else {
+            $element.find('.toggle-overflow-toggle').removeClass('toggle-hidden').css('cursor', 'n-resize');
+            $element.find('.toggle-overflow-toggle i').removeClass('fa-caret-down').addClass('fa-caret-up');
+          } else {
             if (options.height) {
               $element.find('.toggle-overflow').height(options.height);
             }
             $element.css('cursor', 's-resize');
-            $element.find('.toggle-overflow-gradient').css('cursor', 's-resize');
-            $element.find('.toggle-overflow-gradient i').removeClass('fa-caret-up').addClass('fa-caret-down');
+            $element.find('.toggle-overflow-toggle').addClass('toggle-hidden').css('cursor', 's-resize');
+            $element.find('.toggle-overflow-toggle i').removeClass('fa-caret-up').addClass('fa-caret-down');
           }
         });
       }
     },
+
     init: function (element, valueAccessor) {
       var $element = $(element);
       var options = valueAccessor() || {};
@@ -493,6 +493,7 @@
         $element.find('.toggle-overflow').width(options.width);
       }
     },
+
     update: function (element, valueAccessor) {
       var $element = $(element);
       var options = valueAccessor() || {};

+ 18 - 3
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -461,10 +461,17 @@ ul.errorlist {
   overflow: hidden;
 }
 
-.toggle-overflow-gradient {
+.toggle-overflow .editable {
+  padding: 0 5px;
+}
+
+.toggle-overflow .editable-click {
+  border-bottom: none !important;
+}
+
+.toggle-overflow-toggle {
   position: relative;
   z-index: 2;
-  top: -10px;
   height: 10px;
   line-height: 10px;
   background-color: @cui-gray-050;
@@ -472,7 +479,15 @@ ul.errorlist {
   text-align: center;
 }
 
-.toggle-overflow-gradient:hover {
+.toggle-overflow-toggle.toggle-hidden {
+  margin-top: -5px;
+}
+
+.toggle-overflow-toggle > i {
+  line-height: 10px;
+}
+
+.toggle-overflow-toggle:hover {
   background-color: @cui-gray-100;
 }
 

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.