fix(ui): WIP enhance tree icons, enhance sorting visual feedback

flxlabs · Feb 28, 2018 · 1a98fca · 1a98fca
1 parent 9720845
commit 1a98fca
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 75 deletions.
diff --git a/code/GridFieldPageSectionsExtension.php b/code/GridFieldPageSectionsExtension.php
@@ -158,10 +158,10 @@ public function getColumnContent($gridField, $record, $columnName) {
 			$field = null;
 
 			if ($record->Children() && $record->Children()->Count() > 0) {
-				$icon = ($open === true ? '<span class="is-open">▼</span>'
-					: '<span class="is-closed">▶</span>');
+				$icon = ($open === true ? '<svg width="9" height="7" xmlns="http://www.w3.org/2000/svg"><path d="M1.907.678h5.5a1 1 0 0 1 .817 1.576l-2.75 3.9a1 1 0 0 1-1.634 0l-2.75-3.9A1 1 0 0 1 1.907.678z" fill="#4A4A4A" fill-rule="evenodd"/></svg>'
+					: '<svg width="7" height="9" xmlns="http://www.w3.org/2000/svg"><path d="M.428 7.406V1.907a1 1 0 0 1 1.576-.817l3.9 2.75a1 1 0 0 1 0 1.634l-3.9 2.75a1 1 0 0 1-1.576-.818z" fill="#4A4A4A" fill-rule="evenodd"/></svg>');
 			} else {
-				$icon = '<span class="is-end">◼</span>';
+				$icon = '<svg width="6" height="6" xmlns="http://www.w3.org/2000/svg"><circle fill="#4A4A4A" cx="3" cy="3" r="3" fill-rule="evenodd"/></svg>';
 			}
 
 			$field = GridField_FormAction::create(

diff --git a/css/GridFieldPageSectionsExtension.css b/css/GridFieldPageSectionsExtension.css
@@ -40,92 +40,103 @@
 	border-top: 1px solid #CCC;
 }
 
-
-.ss-gridfield-pagesections .col-treenav {
+/* hierarchical gridfield */
+.cms table.ss-gridfield-table tr {
 	height: 100%;
-	padding: 0 !important;
 }
 
-.ss-gridfield-pagesections .col-treenav > button {
-	//width: 100% !important;
-	height: 100% !important;
-	font-weight: bold !important;
-	/*font-size: 150% !important;*/
-	color: black !important;
+.cms table.ss-gridfield-table tbody td.col-treenav {
+	padding: 0;
+	height: 100%;
+	vertical-align: middle;
 }
 
-.ss-gridfield-pagesections .col-treenav > button, .ss-gridfield-pagesections .col-treenav > button > span {
-	padding: 0 !important;
-	margin: 0 !important;
-	text-align: left !important;
+.cms table.ss-gridfield-table tbody td.col-treenav .col-treenav__inner {
+	display: flex;
+	height: 100%;
+	flex-flow: row nowrap;
+	justify-content: flex-start;
+	align-items: center;
 }
 
-.ss-gridfield-pagesections .col-treenav > button:focus {
-	background: none !important;
-	box-shadow: none!important;
-	border: none !important;
-	background-color: none !important;
+.cms table.ss-gridfield-table tbody td.col-treenav button {
+	width: 2em;
+	height: 100%;
+	display: block;
+	float: left;
+	margin: 0 0.5em 0 0;
+	padding: 0;
+	border-radius: 0;
+	position: relative;
 }
 
-.ss-gridfield-pagesections .col-treenav > button > span > span.is-closed{
-
-	font-size: 100%;
+.cms table.ss-gridfield-table tbody td.col-treenav button svg {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
 }
 
-.ss-gridfield-pagesections .col-treenav > button > span > span.is-open{
-	font-size: 96%;
-	margin-left: -0.1em;
+.cms table.ss-gridfield-table tbody td.col-treenav button.level1 {
+	margin-left: 2em;
 }
 
-.ss-gridfield-pagesections .col-treenav > button > span > span.is-end{
-	font-size: 110%;
-	margin-left: -0.1em;
+.cms table.ss-gridfield-table tbody td.col-treenav button.level2 {
+	margin-left: 4em;
 }
 
-.ss-gridfield-pagesections .col-treenav > button > span > span {
-	margin-right: 1em;
-	text-transform: capitalize;
-	vertical-align: middle;
+.cms table.ss-gridfield-table tbody td.col-treenav button.level3 {
+	margin-left: 6em;
 }
 
-.ss-gridfield-pagesections .col-treenav > button > span {
-	margin-right: 30px !important;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow-x: hidden;
+.cms table.ss-gridfield-table tbody td.col-treenav button.level4 {
+	margin-left: 8em;
 }
 
-.ss-gridfield-pagesections .col-treenav > button.level0 > span {
-	margin-left: 1em !important;
-}
-.ss-gridfield-pagesections .col-treenav > button.level1 > span {
-	margin-left: 2em !important;
+.cms table.ss-gridfield-table tbody td.col-treenav button.level5 {
+	margin-left: 10em;
 }
-.ss-gridfield-pagesections .col-treenav > button.level2 > span {
-	margin-left: 4em !important;
-}
-.ss-gridfield-pagesections .col-treenav > button.level3 > span {
-	margin-left: 6em !important;
-}
-.ss-gridfield-pagesections .col-treenav > button.level4 > span {
-	margin-left: 8em !important;
 
+.cms table.ss-gridfield-table tbody td.col-treenav button.level6 {
+	margin-left: 12em;
 }
 
-
 /**
  * Orderable rows
  */
+.col-treenav__draggable {
+	z-index: 300;
+	background: #f6f7f8;
+	padding: 2px 4px;
+	border-radius: 2px;
+	box-shadow: 0 0 1px #ccc;
+}
+
+.col-treenav__draggable:before {
+	position: absolute;
+	content: "";
+	left: -19px;
+	top: -19px;
+	width: 8px;
+	height: 8px;
+	border: 3px solid #4a4a4a;
+	border-radius: 50%;
+	box-sizing: border-box;
+}
+
+.col-treenav__draggable.state-hover {
+	background: #A8CB7F;
+}
 
 .ss-gridfield-pagesections thead tr th.col-Reorder span {
 	padding: 0 !important;
 	margin-left: 8px;
 }
 
-.ss-gridfield-pagesections .col-reorder {
+.cms .ss-gridfield-pagesections table.ss-gridfield-table tr td.col-reorder {
 	position: relative;
-	padding: 0 !important;
-	width: 16px !important;
+	padding: 0;
+	width: 16px;
 }
 
 .ss-gridfield-pagesections .col-reorder .handle {
@@ -150,26 +161,63 @@
 
 .ss-gridfield-pagesections .col-reorder .ui-droppable {
 	position: absolute;
-	left: 0;
-	width: 100%;
+	left: 100%;
+	width: 500%;
 	z-index: 100;
 	display: none;
 }
 
+.ss-gridfield-pagesections .col-reorder .ui-droppable svg {
+	position: absolute;
+	left: 0;
+	top: 50%;
+	z-index: 100;
+	transform: translate(0, -50%);
+}
+
+.ss-gridfield-pagesections .col-reorder .ui-droppable svg path {
+	fill: #A8CB7F;
+}
+
 .ss-gridfield-pagesections .col-reorder .ui-droppable.before {
 	top: 0;
 	height: 25%;
 	background-color: rgba(0, 100, 0, 0.4);
 }
 
+.ss-gridfield-pagesections .col-reorder .ui-droppable.before svg {
+	top: 0;
+}
+
 .ss-gridfield-pagesections .col-reorder .ui-droppable.middle {
-	top: 25%;
-	height: 50%;
+	left: auto;
+	right: 0;
+	top: 0;
+	height: 100%;
 	background-color: rgba(0, 0, 100, 0.4);
 }
 
+.ss-gridfield-pagesections .col-reorder .ui-droppable.middle svg {
+	left: auto;
+	right: 0;
+	transform: scale(-1) translate(0, 50%);
+}
+
 .ss-gridfield-pagesections .col-reorder .ui-droppable.after {
 	bottom: 0;
 	height: 25%;
 	background-color: rgba(0, 100, 0, 0.4);
 }
+
+.ss-gridfield-pagesections .col-reorder .ui-droppable.after svg {
+	top: 100%;
+}
+
+.ss-gridfield-pagesections .col-reorder .ui-droppable.state-active {
+	background: pink !important;
+	z-index: 200;
+}
+
+.ss-gridfield-pagesections .col-reorder .ui-droppable.state-active  svg path {
+	fill: #417505;
+}
diff --git a/javascript/GridFieldPageSectionsExtension.js b/javascript/GridFieldPageSectionsExtension.js
@@ -50,7 +50,7 @@
 				var grid = this.getGridField();
 				var id = grid.data("id");
 				var rowId = $target.parents(".ss-gridfield-item").data("id");
-				var $treeNav = $target.hasClass("col-treenav") ? $target : 
+				var $treeNav = $target.hasClass("col-treenav") ? $target :
 					$target.parents(".col-treenav").first();
 
 				// If we don't have a col-treenav the user clicked on another column
@@ -63,7 +63,7 @@
 				if (level > 0) {
 					// Go up through the rows and find the first row with lower level (=parent)
 					$parent = $treeNav.parents(".ss-gridfield-item").prev();
-					while ($parent.length > 0 && 
+					while ($parent.length > 0 &&
 							$parent.find(".col-treenav").data("level") >= level) {
 						$parent = $parent.prev();
 					}
@@ -91,7 +91,7 @@
 					$menu.append("<li data-type='" + key + "'>" + value  + "</li>");
 				});
 				$menu.append("<li class='header options'>Options</li>");
-				$menu.append("<li data-type='__REMOVE__'>Remove from " + 
+				$menu.append("<li data-type='__REMOVE__'>Remove from " +
 					(parentId ? parentName : "page") + "</li>");
 				$menu.append("<li data-type='__DELETE__'>Delete</li>");
 				$menu.show();
@@ -133,11 +133,13 @@
 
 				$("tr.ss-gridfield-item").each(function() {
 					var $this = $(this);
+					var icon = "<svg width='20' height='15' xmlns='http://www.w3.org/2000/svg'><path d='M10.957 10.882v2.367a1.21 1.21 0 0 1-1.905.988l-8.54-6.02a1.21 1.21 0 0 1 0-1.976l8.54-6.02a1.21 1.21 0 0 1 1.906.988v2.418h7.254c.668 0 1.21.542 1.21 1.21v4.836a1.21 1.21 0 0 1-1.21 1.209h-7.255z' fill='#4A4A4A' fill-rule='evenodd'/></svg>"
 
 					$col = $this.find(".col-reorder");
-					$col.append("<div class='before'></div><div class='middle'></div><div class='after'></div>");
+					$col.append("<div class='before'>" + icon + "</div><div class='middle'>" + icon + "</div><div class='after'>" + icon + "</div>");
 					$col.find("div").each(function() {
 						$(this).droppable({
+							hoverClass: "state-active",
 							tolerance: "pointer",
 							drop: function(event, ui) {
 								$drop = $(this);
@@ -155,12 +157,12 @@
 									// If the current element is open, then dragging the other element to the
 									// "after" slot means it becomes a child of this element, otherwise it
 									// has to actually go after this element.
-									if ($treenav.find("button").hasClass("is-open")) {
-										type = "child";
-										childOrder = -1000000;
-									} else {
-										type = "after";
-									}
+										if ($treenav.find("button").hasClass("is-open")) {
+											type = "child";
+											childOrder = -1000000;
+										} else {
+											type = "after";
+										}
 								}
 
 								var id = ui.draggable.data("id");
@@ -195,13 +197,17 @@
 
 					$this.draggable({
 						revert: "invalid",
+						cursor: "crosshair",
+						cursorAt: { top: -15, left: -15 },
+						activeClass: "state-hover",
 						helper: function() {
-							var clone = $this.clone().css("z-index", 200).find(".ui-droppable").remove().end();
+							var $helper =  $("<div class='col-treenav__draggable'>" + $this.find(".col-treenav__title").text() + "</div>")
+							//var clone = $this.clone().css("z-index", 200).find(".ui-droppable").remove().end();
 							// Timeout is needed otherwise the draggable position is messed up
 							setTimeout(function() {
 								hideRow($this);
 							}, 1);
-							return clone;
+							return $helper;
 						},
 						start: function() {
 							var element = $this.data("class");
@@ -212,10 +218,10 @@
 								// Check if we're allowed to drop the element on the specified drop point.
 								// Depending on where we drop it (before, middle or after) we have to either
 								// check our allowed children, or the allowed children of our parent row.
-								if ($drop.hasClass("before") || 
+								if ($drop.hasClass("before") ||
 										($drop.hasClass("after") && !$treenav.find("button").hasClass("is-open"))) {
 
-									var $parent = $treenav.parent().siblings("[data-id=" + 
+									var $parent = $treenav.parent().siblings("[data-id=" +
 										$treenav.data("parent") + "]").first();
 
 									var allowed = $parent.find(".col-treenav").data("allowed-elements");

diff --git a/templates/GridFieldPageElement.ss b/templates/GridFieldPageElement.ss
@@ -1 +1,6 @@
-$ButtonField <span>$Title</span>
+<div class="col-treenav__inner">
+	$ButtonField
+	<span class="col-treenav__title">
+		$Title
+	</span>
+</div>