ソースを参照

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 年 前
コミット
b3e47424ef

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

@@ -879,10 +879,10 @@ ${ components.menubar(is_embeddable) }
   <div class="clearfix"></div>
   <div class="clearfix"></div>
 
 
   % if has_write_access:
   % 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...') }
         ${ _('Add a description...') }
       </div>
       </div>
     </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 = {
   ko.bindingHandlers.toggleOverflow = {
     render: function ($element, options) {
     render: function ($element, options) {
       if (hueUtils.isOverflowing($element.find('.toggle-overflow'))) {
       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 () {
         $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.find('.toggle-overflow').css('height', '');
             $element.css('cursor', 'n-resize');
             $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) {
             if (options.height) {
               $element.find('.toggle-overflow').height(options.height);
               $element.find('.toggle-overflow').height(options.height);
             }
             }
             $element.css('cursor', 's-resize');
             $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) {
     init: function (element, valueAccessor) {
       var $element = $(element);
       var $element = $(element);
       var options = valueAccessor() || {};
       var options = valueAccessor() || {};
@@ -493,6 +493,7 @@
         $element.find('.toggle-overflow').width(options.width);
         $element.find('.toggle-overflow').width(options.width);
       }
       }
     },
     },
+
     update: function (element, valueAccessor) {
     update: function (element, valueAccessor) {
       var $element = $(element);
       var $element = $(element);
       var options = valueAccessor() || {};
       var options = valueAccessor() || {};

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

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

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません