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

ui/widgets/nuxeo-user-tag.js

@@ -19,6 +19,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import '@nuxeo/nuxeo-elements/nuxeo-element.js';
 import '@polymer/polymer/lib/elements/dom-if.js';
+import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import { RoutingBehavior } from '../nuxeo-routing-behavior.js';
 import './nuxeo-tag.js';
 import './nuxeo-user-avatar.js';
@@ -36,7 +37,7 @@ import './nuxeo-tooltip.js';
    * @memberof Nuxeo
    * @demo demo/nuxeo-user-tag/index.html
    */
-  class UserTag extends mixinBehaviors([RoutingBehavior], Nuxeo.Element) {
+  class UserTag extends mixinBehaviors([RoutingBehavior, IronResizableBehavior], Nuxeo.Element) {
     static get template() {
       return html`
         <style>
@@ -64,6 +65,21 @@ import './nuxeo-tooltip.js';
             overflow: hidden;
             text-overflow: ellipsis;
           }
+
+          .user-tag-nowrap {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+          }
+          .user-tag-wrap {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            word-break: break-all;
+          }
         </style>
         <nuxeo-tag>
           <div class="tag" role="button">
@@ -75,11 +91,16 @@ import './nuxeo-tooltip.js';
               font-size="10"
               font-weight="500"
               fetch-avatar$="[[fetchAvatar]]"
+              class="user-avatar"
             >
             </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$="user_tag" on-click="_preventPropagation">
+                  <span class$="username-container {{_getUserTagClass(user)}}">
+                    [[_name(user)]]
+                  </span>
+                </a>
               </template>
             </dom-if>
             <dom-if if="[[!_hasLink(disabled, user)]]">
@@ -94,6 +115,13 @@ import './nuxeo-tooltip.js';
                 </nuxeo-tooltip>
               </template>
             </dom-if>
+            <dom-if if="[[!_isEntity(user)]]">
+              <template>
+                <nuxeo-tooltip position="top" offset="0" animation-delay="0">
+                  [[_id(user)]]<br />[[_email(user)]]
+                </nuxeo-tooltip>
+              </template>
+            </dom-if>
           </div>
         </nuxeo-tag>
       `;
@@ -177,6 +205,62 @@ 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';
+    }
+
+    _calculateElementWidth(element) {
+      const currrentElement = getComputedStyle(element);
+      const paddingX = parseFloat(currrentElement.paddingLeft) + parseFloat(currrentElement.paddingRight);
+      const borderX = parseFloat(currrentElement.borderLeftWidth) + parseFloat(currrentElement.borderRightWidth);
+      const scrollBarWidth = element.offsetWidth - element.clientWidth;
+      const elementWidth = element.offsetWidth - paddingX - borderX - scrollBarWidth;
+      return elementWidth;
+    }
+
+    _getHTMLRootNode(element) {
+      let currentElement = element;
+      while (currentElement.parentNode instanceof DocumentFragment) {
+        currentElement = currentElement.parentNode.host;
+      }
+      return currentElement.parentNode;
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener('dom-change', this._layout);
+      this.addEventListener('iron-resize', this._layout);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener('dom-change', this._layout);
+      this.removeEventListener('iron-resize', this._layout);
+    }
+
+    _layout() {
+      if (this && this.parentNode) {
+        const selectedElement = this;
+        const parentElement = this._getHTMLRootNode(selectedElement);
+        let elementWidth = this._calculateElementWidth(parentElement);
+        const childNodes = Array.from(parentElement.children);
+        const userAvatar = Array.from(selectedElement.shadowRoot.querySelectorAll('.user-avatar'));
+        const userAvatarWidth = userAvatar[0].offsetWidth;
+        const totalAvatarWidth = userAvatar.length * userAvatarWidth;
+        const otherElementWidth = childNodes.reduce((totalWidth, currentValue) => {
+          if (currentValue !== this && !currentValue.shadowRoot) {
+            totalWidth += this._calculateElementWidth(currentValue);
+          }
+          return totalWidth;
+        }, 0);
+        elementWidth -= otherElementWidth + totalAvatarWidth;
+        const userTagElement = this.shadowRoot.querySelector('.username-container');
+        if (userTagElement && elementWidth > 0) userTagElement.setAttribute('style', `max-width:${elementWidth}px`);
+      }
+    }
   }
 
   customElements.define(UserTag.is, UserTag);