From 79bb03ad5ab239d43dde09d098c1792571325bc0 Mon Sep 17 00:00:00 2001
From: Tauqeer Haider <tauqeer.haider@aurea.com>
Date: Mon, 7 Sep 2020 19:55:50 +0000
Subject: [PATCH] pencil icon moved to the right ... menu (#4022)

* pencil icon moved to the right ... menu

* override the style
---
 .../src/PersonaBarPageTreeMenu.jsx              |  4 +++-
 .../src/PersonaBarPageTreeview.jsx              |  4 ----
 .../src/styles.less                             | 17 +++++++++++++++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/PersonaBarPageTreeMenu.jsx b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/PersonaBarPageTreeMenu.jsx
index 2fd4228d4c5..19820cb181b 100644
--- a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/PersonaBarPageTreeMenu.jsx
+++ b/Dnn.AdminExperience/ClientSide/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/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/PersonaBarPageTreeview.jsx b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/PersonaBarPageTreeview.jsx
index 6f62f3b1e01..0292ea2c194 100644
--- a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/PersonaBarPageTreeview.jsx
+++ b/Dnn.AdminExperience/ClientSide/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/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/styles.less b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/styles.less
index fa20f35691e..375ec391e93 100644
--- a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/dnn-persona-bar-page-treeview/src/styles.less
+++ b/Dnn.AdminExperience/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;
     }