소스 검색

HUE-9141 [frontend] Improve description rendering in the document context popover

Johan Ahlen 5 년 전
부모
커밋
809adb5e11

+ 2 - 5
desktop/core/src/desktop/js/ko/bindings/ko.toggleOverflow.js

@@ -28,7 +28,7 @@ ko.bindingHandlers.toggleOverflow = {
         .appendTo($element);
       $element.on('click', () => {
         if ($element.find('.toggle-overflow-toggle i').hasClass('fa-caret-down')) {
-          $element.find('.toggle-overflow').css('height', '');
+          $element.find('.toggle-overflow').css('max-height', '');
           $element.css('cursor', 'n-resize');
           $element
             .find('.toggle-overflow-toggle')
@@ -61,10 +61,7 @@ ko.bindingHandlers.toggleOverflow = {
     const options = valueAccessor() || {};
     $element.wrapInner('<div class="toggle-overflow"></div>');
     if (options.height) {
-      $element.find('.toggle-overflow').height(options.height);
-    }
-    if (options.width) {
-      $element.find('.toggle-overflow').width(options.width);
+      $element.find('.toggle-overflow').css('max-height', options.height + 'px');
     }
   },
 

+ 1 - 1
desktop/core/src/desktop/js/ko/components/contextPopover/ko.contextPopover.js

@@ -230,7 +230,7 @@ const SUPPORT_TEMPLATES = `
         <!-- ko with: details -->
         <div class="context-popover-doc-header-link" ><a href="javascript:void(0)" data-bind="hueLink: link, click: function () { $parents[1].close(); }"><!-- ko template: { name: 'document-icon-template', data: { document: $data, showShareAddon: false } } --><!-- /ko --> <span data-bind="text:name"></span></a></div>
         <!-- ko if: description -->
-        <div class="context-popover-doc-description" data-bind="html: description"></div>
+        <div class="context-popover-doc-description" data-bind="toggleOverflow: { height: 60 }"><div data-bind="html: description"></div></div>
         <!-- /ko -->
         <!-- /ko -->
         <!-- ko with: documentContents -->

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


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


+ 2 - 1
desktop/core/src/desktop/static/desktop/less/components/hue-popover.less

@@ -286,8 +286,9 @@
 
 .context-popover-doc-description {
   .flex(1);
-
+  font-size: 13px;
   margin-top: 5px;
+  white-space: pre-wrap;
 
   > em {
     font-style: normal;

+ 1 - 2
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -680,7 +680,6 @@ ul.errorlist {
   z-index: 2;
   height: 10px;
   line-height: 10px;
-  background-color: @cui-gray-050;
   cursor: s-resize;
   text-align: center;
 }
@@ -694,7 +693,7 @@ ul.errorlist {
 }
 
 .toggle-overflow-toggle:hover {
-  background-color: @cui-gray-100;
+  background-color: @cui-gray-050;
 }
 
 .datepicker {

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