ELEMENTS-1731: Fix display of long username under activity section

nuxeo · Apr 4, 2024 · 43d0855 · 43d0855
1 parent f9b15a1
commit 43d0855
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/ui/nuxeo-document-comments/nuxeo-document-comment.js b/ui/nuxeo-document-comments/nuxeo-document-comment.js
@@ -127,6 +127,21 @@ import '../nuxeo-button-styles.js';
               outline: auto;
             }
           }
+          .user-tag-nowrap {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 100px;
+          }
+
+          .user-tag-wrap {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 100px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+          }
         </style>
 
         <nuxeo-connection id="nxcon" user="{{currentUser}}"></nuxeo-connection>
@@ -159,7 +174,10 @@ import '../nuxeo-button-styles.js';
               <div class="info">
                 <div id="body">
                   <div id="header" class="horizontal">
-                    <span class="author">[[comment.author]]</span>
+                    <span class$="author {{_getUserTagClass(comment.author)}}" class="author">[[comment.author]]</span>
+                    <nuxeo-tooltip position="top" offset="0" animation-delay="0">
+                      [[comment.author]]
+                    </nuxeo-tooltip>
                     <span class="smaller opaque"
                       >[[_computeDateLabel(comment, comment.creationDate, comment.modificationDate, i18n)]]</span
                     >
@@ -566,6 +584,11 @@ import '../nuxeo-button-styles.js';
     _isSummaryVisible(expanded, total) {
       return !expanded && total > 0;
     }
+
+    _getUserTagClass(user) {
+      const nameContainsWhiteSpace = /\s/.test(user);
+      return nameContainsWhiteSpace ? 'user-tag-wrap' : 'user-tag-nowrap';
+    }
   }
 
   customElements.define(DocumentComment.is, DocumentComment);

diff --git a/ui/widgets/nuxeo-user-avatar.js b/ui/widgets/nuxeo-user-avatar.js
@@ -62,12 +62,18 @@ import '../nuxeo-icons.js';
             width: 12px;
             fill: white;
           }
+
+          .user-initial {
+            white-space: nowrap;
+            overflow: hidden;
+            max-width: 15px;
+          }
         </style>
 
         <nuxeo-resource id="getUserProfile" enrichers="userprofile" enrichers-entity="user"></nuxeo-resource>
 
         <div id="container" aria-hidden="true">
-          <span id="character" hidden$="[[!_isInTheAlphabet]]">{{_output}}</span>
+          <span id="character" hidden$="[[!_isInTheAlphabet]]" class="user-initial">{{_output}}</span>
           <iron-icon hidden$="[[_isInTheAlphabet]]" icon="nuxeo:user"></iron-icon>
         </div>
       `;

diff --git a/ui/widgets/nuxeo-user-tag.js b/ui/widgets/nuxeo-user-tag.js
@@ -59,10 +59,20 @@ import './nuxeo-tooltip.js';
             @apply --nuxeo-link-hover;
           }
 
-          .user-tag {
+          .user-tag-nowrap {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            max-width: 100px;
+          }
+
+          .user-tag-wrap {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 100px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
           }
         </style>
         <nuxeo-tag>
@@ -79,7 +89,12 @@ import './nuxeo-tooltip.js';
             </nuxeo-user-avatar>
             <dom-if if="[[_hasLink(disabled, user)]]">
               <template>
-                <a href$="[[_href(user)]]" class="user-tag" on-click="_preventPropagation">[[_name(user)]]</a>
+                <a href$="[[_href(user)]]" class$="{{_getUserTagClass(user)}}" on-click="_preventPropagation"
+                  >[[_name(user)]]</a
+                >
+                <nuxeo-tooltip position="top" offset="0" animation-delay="0">
+                  [[_name(user)]]
+                </nuxeo-tooltip>
               </template>
             </dom-if>
             <dom-if if="[[!_hasLink(disabled, user)]]">
@@ -177,6 +192,12 @@ import './nuxeo-tooltip.js';
     _preventPropagation(e) {
       e.stopPropagation();
     }
+
+    _getUserTagClass(user) {
+      const userFullName = this._name(user);
+      const nameContainsWhiteSpace = /\s/.test(userFullName);
+      return nameContainsWhiteSpace ? 'user-tag-wrap' : 'user-tag-nowrap';
+    }
   }
 
   customElements.define(UserTag.is, UserTag);