From 2a925e1f190c76ee7928963b4d976595b9e91a43 Mon Sep 17 00:00:00 2001
From: Marco Crespi <mrc@flxlabs.com>
Date: Mon, 4 Dec 2017 15:53:32 +0100
Subject: [PATCH] fix(gridfield): Improve context menu styling

---
 css/GridFieldPageSectionsExtension.css       | 50 ++++++++++----------
 javascript/GridFieldPageSectionsExtension.js |  5 +-
 templates/GridFieldPageElement.ss            |  2 +-
 3 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/css/GridFieldPageSectionsExtension.css b/css/GridFieldPageSectionsExtension.css
index 4fa599c..a031998 100644
--- a/css/GridFieldPageSectionsExtension.css
+++ b/css/GridFieldPageSectionsExtension.css
@@ -2,42 +2,42 @@
  * Tree Nav
  */
 
- .treenav-menu {
-    display: none;
-    z-index: 1000;
-    position: fixed;
-    overflow: hidden;
-    border: 1px solid #CCC;
-    white-space: nowrap;
-    font-family: sans-serif;
-    background: #FFF;
-    color: #333;
-    border-radius: 5px;
-    padding: 0;
+.treenav-menu {
+	display: none;
+	z-index: 1000;
+	position: fixed;
+	overflow: hidden;
+	border: 1px solid #CCC;
+	white-space: nowrap;
+	font-family: sans-serif;
+	background: #FFF;
+	color: #333;
+	border-radius: 5px;
+	padding: 0;
 }
 
 .treenav-menu li {
-    padding: 8px 12px;
-    cursor: pointer;
-    list-style-type: none;
-    transition: all .3s ease;
+	padding: 8px 12px 8px 2em;
+	cursor: pointer;
+	list-style-type: none;
+	transition: all .3s ease;
 }
-
 .treenav-menu li:hover {
-    background-color: #FEFAD5;
-}
-
-.treenav-menu li.header:hover {
-    background-color: none;
+	background-color: #FEFAD5;
 }
 
 .treenav-menu li.header {
 	font-weight: bolder;
 	cursor: default;
+	border-bottom: 1px solid #CCC;
+	padding-left: 8px;
 }
-
 .treenav-menu li.header:hover {
-    background: none;
+	background: none;
+}
+
+.treenav-menu li.options {
+	border-top: 1px solid #CCC;
 }
 
 
@@ -91,7 +91,7 @@
 .ss-gridfield-pagesections .col-treenav > button > span {
 	margin-right: 30px !important;
 	text-overflow: ellipsis;
-  	white-space: nowrap;
+	white-space: nowrap;
 	overflow-x: hidden;
 }
 
diff --git a/javascript/GridFieldPageSectionsExtension.js b/javascript/GridFieldPageSectionsExtension.js
index ae4346e..a1b2acb 100644
--- a/javascript/GridFieldPageSectionsExtension.js
+++ b/javascript/GridFieldPageSectionsExtension.js
@@ -90,8 +90,9 @@
 				$.each(elems, function(key, value) {
 					$menu.append("<li data-type='" + key + "'>" + value  + "</li>");
 				});
-				$menu.append("<li class='header'>--------------------</li>");
-				$menu.append("<li data-type='__REMOVE__'>Remove</li>");
+				$menu.append("<li class='header options'>Options</li>");
+				$menu.append("<li data-type='__REMOVE__'>Remove from " + 
+					(parentId ? parentName : "page") + "</li>");
 				$menu.append("<li data-type='__DELETE__'>Delete</li>");
 				$menu.show();
 			},
diff --git a/templates/GridFieldPageElement.ss b/templates/GridFieldPageElement.ss
index ab0da70..471c3b8 100644
--- a/templates/GridFieldPageElement.ss
+++ b/templates/GridFieldPageElement.ss
@@ -1 +1 @@
-$ButtonField $Title
+$ButtonField <span>$Title</span>