浏览代码

HUE-6345 [home] Fix layout issues from the addition of description

The right-hand columns in the document browser has to have a defined and fixed width.
Johan Ahlen 8 年之前
父节点
当前提交
4eebbaa

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/home.css


+ 14 - 9
desktop/core/src/desktop/static/desktop/less/home.less

@@ -171,13 +171,10 @@
 }
 
 .doc-browser-primary-col {
-  .flex(2);
+  .flex(1);
+  .nowrap-ellipsis();
   vertical-align: middle;
   padding-left: 8px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  padding-right: 20px;
 }
 
 .doc-browser-header .doc-browser-primary-col {
@@ -194,7 +191,7 @@
 }
 
 .doc-browser-attr-group {
-  .flex(1);
+  .flex(0 0 770px);
   white-space: nowrap;
   float: right;
   display: inline-block;
@@ -225,16 +222,24 @@
   color: @hue-primary-color-dark !important;
 }
 
+.doc-browser-description {
+  .nowrap-ellipsis();
+  width: 300px;
+}
+
 .doc-browser-type {
-  width: 140px;
+  .nowrap-ellipsis();
+  width: 130px;
 }
 
 .doc-browser-owner {
-  width: 170px;
+  .nowrap-ellipsis();
+  width: 130px;
 }
 
 .doc-browser-modified {
-  width: 150px;
+  .nowrap-ellipsis();
+  width: 130px;
 }
 
 .doc-browser-drag-container {

+ 6 - 0
desktop/core/src/desktop/static/desktop/less/hue-mixins.less

@@ -41,6 +41,12 @@
   -o-transform: @transform;
 }
 
+.nowrap-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-x: hidden;
+}
+
 .hue-linear-transition(@attributes) {
   -webkit-transition: @attributes 0.2s linear;
   -moz-transition: @attributes 0.2s linear;

+ 2 - 2
desktop/core/src/desktop/templates/document_browser.mako

@@ -429,7 +429,7 @@ from desktop.views import _ko
       <div class="doc-browser-header">
         <div class="doc-browser-primary-col" data-bind="click: function () { setSort('name') }, css: { 'sorting_asc' : activeSort() === 'nameAsc', 'sorting_desc' : activeSort() === 'nameDesc', 'sorting' : activeSort().indexOf('name') !== 0 }">${ _('Name') }</div>
         <div class="doc-browser-attr-group">
-          <div class="doc-browser-attr-col" data-bind="click: function () { setSort('description') }, css: { 'sorting_asc' : activeSort() === 'descriptionAsc', 'sorting_desc' : activeSort() === 'descriptionDesc', 'sorting' : activeSort().indexOf('description') !== 0 }">${ _('Description') }</div>
+          <div class="doc-browser-attr-col doc-browser-description" data-bind="click: function () { setSort('description') }, css: { 'sorting_asc' : activeSort() === 'descriptionAsc', 'sorting_desc' : activeSort() === 'descriptionDesc', 'sorting' : activeSort().indexOf('description') !== 0 }">${ _('Description') }</div>
           <div class="doc-browser-attr-col doc-browser-type" data-bind="click: function () { setSort('type') }, css: { 'sorting_asc' : activeSort() === 'typeAsc', 'sorting_desc' : activeSort() === 'typeDesc', 'sorting' : activeSort().indexOf('type') !== 0 }">${ _('Type') }</div>
           <div class="doc-browser-attr-col doc-browser-owner" data-bind="click: function () { setSort('owner') }, css: { 'sorting_asc' : activeSort() === 'ownerAsc', 'sorting_desc' : activeSort() === 'ownerDesc', 'sorting' : activeSort().indexOf('owner') !== 0 }">${ _('Owner') }</div>
           <div class="doc-browser-attr-col doc-browser-modified" data-bind="click: function () { setSort('lastModified') }, css: { 'sorting_asc' : activeSort() === 'lastModifiedAsc', 'sorting_desc' : activeSort() === 'lastModifiedDesc', 'sorting' : activeSort().indexOf('lastModified') !== 0 }">${ _('Last Modified') }</div>
@@ -482,7 +482,7 @@ from desktop.views import _ko
               </div>
               <div class="doc-browser-attr-group">
                 <!-- ko with: definition -->
-                <div class="doc-browser-attr-col doc-browser-description" data-bind="text: description, attr: { 'title': description }"></div>
+                <div class="doc-browser-attr-col doc-browser-description" data-bind="text: description, attr: { 'title': description }, tooltip: { placement: 'bottom' }"></div>
                 <div class="doc-browser-attr-col doc-browser-type">
                   <!-- ko switch: type -->
                   <!-- ko case: 'directory' -->${ _('Directory') }<!-- /ko -->

部分文件因为文件数量过多而无法显示