Persona bar: Show page title on hover, show more of long page titles (#…

…3569) * Stop truncating page titlesOverflow is now controlled with CSS. * Put the page name into the title attribute.Most desktop browsers will show this on hover. * Tighten up the spacing a little
dnnsoftware · Feb 17, 2020 · 302d787 · 302d787
1 parent eab9498
commit 302d787
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 24 deletions.
diff --git a/...ide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/PersonaBarPageTreeview.jsx b/...ide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/PersonaBarPageTreeview.jsx
@@ -13,23 +13,6 @@ export class PersonaBarPageTreeview extends Component {
         this.state = {};
     }
 
-    trimName(item) {
-        if (item.name){
-            let tabPath = "";
-            if (item.tabpath) {
-                tabPath = item.tabpath;
-            }
-            let maxLength = 18;
-            let { name } = item;
-            let newLength = tabPath.split(/\//).length * 2 + 1;
-            newLength--;
-            let depth = (newLength < maxLength) ? newLength : 1;
-            return (name.length > maxLength - depth) ? `${item.name.slice(0, maxLength - depth)}...` : item.name;
-        } else {
-            return item.name;
-        }
-    }
-
     render_tree(item, childListItems) {
         const {
             draggedItem,
@@ -148,7 +131,6 @@ export class PersonaBarPageTreeview extends Component {
         let index = 0;
         let total = listItems.length;
         return listItems.map((item) => {
-            const name = this.trimName(item);
             const canManagePage = (e, item, fn) => {
                 const whenCanManage = () => e ? fn(e, item) : fn(item);
                 const whenCannotManage = () => this.props.setEmptyPageMessage(Localization.get("NoPermissionManagePage"));
@@ -158,10 +140,10 @@ export class PersonaBarPageTreeview extends Component {
             const onDragLeave = e => e.target.classList.remove("list-item-dragover");
             index++;
 
-            const style = item.canManagePage ? { "whiteSpace": "nowrap", height: "28px", lineHeight: "35px", marginLeft: "15px" } : { height: "28px", marginLeft: "15px" };
+            const style = item.canManagePage ? { "whiteSpace": "nowrap", height: "28px", lineHeight: "35px" } : { height: "28px" };
             const itemNameHidden = item.status === "Hidden" ? "item-name-hidden" : "";
             return (
-                <li key={"list-item-key-" + index} id={`list-item-${item.name}-${item.id}`}>
+                <li key={"list-item-key-" + index} id={`list-item-${item.name}-${item.id}`} title={item.name}>
                     <div className={item.onDragOverState && item.id !== draggedItem.id ? "dropZoneActive" : "dropZoneInactive"} >
                         {this.renderDropZone("before", item)}
                         <div
@@ -184,15 +166,16 @@ export class PersonaBarPageTreeview extends Component {
                             <PersonaBarPageIcon iconType={item.pageType} selected={item.selected || false} />
                             <span
                                 className={`item-name ${itemNameHidden}`}
-                                onClick={() => item.canManagePage ? onSelection(item) : onNoPermissionSelection(item)}>
+                                onClick={() => item.canManagePage ? onSelection(item) : onNoPermissionSelection(item)}
+                            >
                                 { (item.tabId === 0) || (item.selected && selectedPageDirty) ? 
                                     (
                                         <SingleLineInput 
                                             style={{ marginBottom: "0px", width:"80%", height:"100%"}}
                                             onChange={() => void(0)}
-                                            value={name}/>
+                                            value={item.name}/>
                                     ):
-                                    name
+                                    item.name
                                 }
                             </span>
                             <div className="draft-pencil">

diff --git a/...erience/ClientSide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/styles.less b/...erience/ClientSide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/styles.less
@@ -68,6 +68,13 @@
         top: -5px;
         font-weight: bold;
         margin-left: 5px;
+
+        display: inline-block;
+        width: 150px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
         p {
             display: inline;
         }
@@ -219,7 +226,7 @@
         margin: 0;
     }
     ul {
-        margin-left: 20px;
+        margin-left: 5px;
         padding: 0 0;
     }
     ul:first-child {