Procházet zdrojové kódy

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 před 8 roky
rodič
revize
b3e47424ef

+ 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>

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 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;
 }
 

Některé soubory nejsou zobrazeny, neboť je v těchto rozdílových datech změněno mnoho souborů