pencil icon moved to the right ... menu (#4022)

* pencil icon moved to the right ... menu * override the style
dnnsoftware · Sep 7, 2020 · 79bb03a · 79bb03a
1 parent f80d555
commit 79bb03a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/...ide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/PersonaBarPageTreeMenu.jsx b/...ide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/PersonaBarPageTreeMenu.jsx
@@ -3,6 +3,7 @@ import { PropTypes } from "prop-types";
 import "./styles.less";
 import PersonaBarSelectionArrow from "./_PersonaBarSelectionArrow";
 import PersonaBarExpandCollapseIcon from "./_PersonaBarExpandCollapseIcon";
+import PersonaBarDraftPencilIcon from "./_PersonaBarDraftPencilIcon";
 
 export class PersonaBarPageTreeMenu extends Component {
 
@@ -47,11 +48,12 @@ export class PersonaBarPageTreeMenu extends Component {
 
         return listItems.map((item, index) => {
             return (
-                <li key={"pageTreeListItem" + index} className="list-item-menu">
+                <li key={"pageTreeListItem" + index} className="list-item-menu-right">
                     <div
                         className={(item.selected) ? "list-item-highlight" : null}
                         style={{ height: "28px", lineHeight: "35px" }}>
                         <div className="draft-pencil">
+                            <PersonaBarDraftPencilIcon display={item.hasUnpublishedChanges} />
                             {item.canViewPage && <PersonaBarSelectionArrow
                                 CallCustomAction={this.props.CallCustomAction}
                                 onAddPage={this.props.onAddPage}

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
@@ -4,7 +4,6 @@ import utils from "utils";
 import "./styles.less";
 import { SingleLineInput } from "@dnnsoftware/dnn-react-common";
 import PersonaBarPageIcon from "./_PersonaBarPageIcon";
-import PersonaBarDraftPencilIcon from "./_PersonaBarDraftPencilIcon";
 
 export class PersonaBarPageTreeview extends Component {
 
@@ -178,9 +177,6 @@ export class PersonaBarPageTreeview extends Component {
                                     item.name
                                 }
                             </span>
-                            <div className="draft-pencil">
-                                <PersonaBarDraftPencilIcon display={item.hasUnpublishedChanges} />
-                            </div>
                         </div>
                         {((item.childListItems && !item.isOpen) || !item.childListItems) && index === total && this.renderDropZone("after", item)}
                     </div>

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
@@ -30,6 +30,23 @@
             }
         }
     }
+    .list-item-menu-right {
+        width: 70px;
+        .draft-pencil {
+            width: auto;
+            display: inline-block;
+            svg:hover {
+                fill: @alto;
+            }
+            .dnn-persona-bar-draft-icon {
+                display: inline-block;
+                width: 20px;
+            }
+            .selection-arrow {
+                width: 50px;
+            }
+        }
+    }
     .tree-menu-ul ul {
         padding: 0;
     }