Fix alignment and truncate of very longer text

ManageIQ · Jun 14, 2023 · 5a86283 · 5a86283
1 parent 5d7147d
commit 5a86283
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 21 deletions.
diff --git a/app/javascript/components/miq-data-table/miq-table-cell.jsx b/app/javascript/components/miq-data-table/miq-table-cell.jsx
@@ -12,12 +12,15 @@ import {
 const MiqTableCell = ({
   cell, onCellClick, row, truncate,
 }) => {
-  const canTruncate = ((cell.value).length > 40) && truncate;
-  const truncateClass = canTruncate ? 'truncate_cell' : '';
-  const wrapClass = canTruncate ? 'white_space_normal' : '';
+  const longText = truncate && ((cell.value).length > 40);
+  const veryLongText = truncate && ((cell.value).length > 300);
+
+  const truncateClass = longText ? 'truncate_cell' : '';
+  const wrapClass = longText ? 'white_space_normal' : '';
+  const longerTextClass = veryLongText ? 'truncate_longer_text' : '';
 
   const truncateText = (
-    <span title={cell.value} className={classNames('bx--front-line', wrapClass)}>
+    <span title={cell.value} className={classNames('bx--front-line', wrapClass, longerTextClass)}>
       {cell.value}
     </span>
   );
@@ -67,16 +70,21 @@ const MiqTableCell = ({
   };
 
   /** Fuction to render icon(s) in cell. */
-  const renderIcon = (icon, style, showText) => (
-    <div className={cellClass}>
-      {
-        typeof (icon) === 'string'
-          ? <i className={classNames('fa-lg', 'icon', icon)} style={style} />
-          : icon.map((i, index) => <i className={classNames('fa-lg', 'icon', i)} key={index.toString()} />)
-      }
-      {showText && truncateText}
-    </div>
-  );
+  const renderIcon = (icon, style, showText) => {
+    const hasBackground = Object.keys(style).includes('background');
+    const styledIconClass = hasBackground ? 'styled_icon' : '';
+    const longerTextClass = hasBackground && veryLongText ? 'styled_icon_margin' : '';
+    return (
+      <div className={cellClass}>
+        {
+          typeof (icon) === 'string'
+            ? <i className={classNames('fa-lg', 'icon', icon, styledIconClass, longerTextClass)} style={style} />
+            : icon.map((i, index) => <i className={classNames('fa-lg', 'icon', i)} key={index.toString()} />)
+        }
+        {showText && truncateText}
+      </div>
+    );
+  };
 
   /** Fuction to render an icon in cell based on the 'type' in 'item'. */
   const cellIcon = (item, showText) => {

diff --git a/app/stylesheet/miq-data-table.scss b/app/stylesheet/miq-data-table.scss
@@ -57,7 +57,7 @@
 
     .cell {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       justify-content: flex-start;
 
       &.truncate_cell {
@@ -76,18 +76,32 @@
       }
 
       .image {
-        width: 30px;
-        height: 30px;
-        margin-right: 5px;
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
+        margin-top: 4px;
       }
 
       .icon {
         min-width: 30px;
         height: 30px;
         display: flex;
         align-items: center;
-        justify-content: center;
-        margin-right: 5px;
+        justify-content: flex-start;
+        margin-top: 3px;
+
+        &.styled_icon {
+          min-width: 20px;
+          height: 20px;
+          justify-content: center;
+          margin-right: 5px;
+          margin-top: 5px;
+          font-size: 14px;
+        }
+
+        &.styled_icon_margin {
+          margin-top: 9px;
+        }
       }
 
       .icon.fa-ruby {
@@ -114,21 +128,39 @@
       }
     }
 
+    td {
+      vertical-align: top;
+    }
+
     td.no_text {
       width: 50px;
     }
 
+    td .bx--checkbox--inline {
+      margin-top: 4px;
+    }
+
     td .bx--front-line {
       width: 100%;
       display: inline-block;
       overflow: hidden;
       white-space: nowrap;
+      margin-top: 5px;
 
       &.white_space_normal {
         white-space: normal !important;
-        margin: 15px 0 15px 0;
         text-align: justify;
       }
+
+      &.truncate_longer_text {
+        max-height: 300px;
+        display: -webkit-box;
+        max-width: 200px;
+        -webkit-line-clamp: 15;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        margin-bottom: 8px;
+      }
     }
   }
 }
@@ -192,6 +224,8 @@
     }
 
     thead tr th {  
+      vertical-align: middle;
+
       .bx--table-header-label {
         min-width: fit-content;
       }