fix(gridfield): Improve context menu styling

flxlabs · Dec 4, 2017 · 2a925e1 · 2a925e1
1 parent 1ee894d
commit 2a925e1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 28 deletions.
diff --git 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
@@ -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
@@ -1 +1 @@
-$ButtonField $Title
+$ButtonField <span>$Title</span>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		$ButtonField $Title
		$ButtonField <span>$Title</span>