ENHANCEMENT: Move GridField buttons out of table (fixes 7213)

* Added a separate component to grid field to hold buttons.
* Updated templates for changes
* Updated comments

css/AssetUploadField.css

@@ -4,13 +4,6 @@
 /** ----------------------------------------------- Typography.  ------------------------------------------------ */
 /** ----------------------------------------------- Grid Units (px)  We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
 /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
-/** This file contains mixins relating to specific functionality  Mixins should be stored here rather than individual files */
-/*Mixin generates the generic button styling for the gridfield*/
-/**
-	Mixin creates a transparent button with a dropdown arrow, 
-	as is used for files in the files up-load area. The arrows 
-	themselves are added in the _style file
-**/
 #AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
 
 body.cms.ss-uploadfield-edit-iframe { padding: 16px; overflow: auto; }

css/GridField.css

@@ -11,14 +11,8 @@
 /** ----------------------------------------------- Typography.  ------------------------------------------------ */
 /** ----------------------------------------------- Grid Units (px)  We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
 /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
-/** This file contains mixins relating to specific functionality  Mixins should be stored here rather than individual files */
-/*Mixin generates the generic button styling for the gridfield*/
-/**
-	Mixin creates a transparent button with a dropdown arrow, 
-	as is used for files in the files up-load area. The arrows 
-	themselves are added in the _style file
-**/
 .cms .ss-gridfield > div { margin-bottom: 36px; }
+.cms .ss-gridfield > div.addNewGridFieldButton { margin-bottom: 12px; }
 .cms .ss-gridfield[data-selectable] tr.ui-selected, .cms .ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
 .cms .ss-gridfield[data-selectable] td { cursor: pointer; }
 .cms .ss-gridfield span button#action_gridfield_relationfind { display: none; }

forms/gridfield/GridField.php

@@ -226,6 +226,7 @@ class GridField extends FormField {
 		$content = array(
 			"before" => "",
 			"after" => "",
+			"buttons" => "",
 			"header" => "",
 			"footer" => "",
 		);
@@ -250,7 +251,7 @@ class GridField extends FormField {
 		// Circular dependencies are detected by disallowing any item to be deferred more than 5 times
 		// It's a fairly crude algorithm but it works
 		
-		$fragmentDefined = array('header' => true, 'footer' => true, 'before' => true, 'after' => true);
+		$fragmentDefined = array('header' => true, 'buttons'=>true, 'footer' => true, 'before' => true, 'after' => true);
 		reset($content);
 		while(list($k,$v) = each($content)) {
 			if(preg_match_all('/\$DefineFragment\(([a-z0-9\-_]+)\)/i', $v, $matches)) {
@@ -350,9 +351,12 @@ class GridField extends FormField {
 			'cellpadding' => '0',
 			'cellspacing' => '0'	
 		);
+
+
 		return
 			$this->createTag('fieldset', $attrs, 
 				$content['before'] .
+				$content['buttons'] .
 				$this->createTag('table', $tableAttrs, $head."\n".$foot."\n".$body) .
 				$content['after']
 			);

forms/gridfield/GridFieldButtonRow.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * Adding this class to a {@link GridFieldConfig} of a {@link GridField} adds a buttonrow to that field.
+ * The button row provides a space for actions on this grid.
+ * 
+ * This row provides two new HTML fragment spaces: 'toolbar-header-left' and 'toolbar-header-right'.
+ *
+ * @package framework
+ * @subpackage gridfield
+ */
+class GridFieldButtonRow implements GridField_HTMLProvider {
+	public function getHTMLFragments( $gridField) {
+		return array(
+			'buttons' => $gridField->renderWith('GridFieldButtonRow')
+		);
+	}
+}

forms/gridfield/GridFieldConfig.php

@@ -191,8 +191,11 @@ class GridFieldConfig_RecordEditor extends GridFieldConfig {
 	 * @param int $itemsPerPage - How many items per page should show up
 	 */
 	public function __construct($itemsPerPage=null) {
+
 		$this->addComponent(new GridFieldToolbarHeader());
-		$this->addComponent(new GridFieldAddNewButton('toolbar-header-right'));
+		$this->addComponent(new GridFieldButtonRow());
+		$this->addComponent(new GridFieldAddNewButton('toolbar-header-left'));
+		
 		$this->addComponent($sort = new GridFieldSortableHeader());
 		$this->addComponent($filter = new GridFieldFilterHeader());
 		$this->addComponent(new GridFieldDataColumns());
@@ -240,7 +243,8 @@ class GridFieldConfig_RelationEditor extends GridFieldConfig {
 	public function __construct($itemsPerPage=null) {
 		$this->addComponent(new GridFieldToolbarHeader());
 		$this->addComponent(new GridFieldAddExistingAutocompleter('toolbar-header-left'));
-		$this->addComponent(new GridFieldAddNewButton('toolbar-header-right'));
+		$this->addComponent(new GridFieldButtonRow());
+		$this->addComponent(new GridFieldAddNewButton('toolbar-header-left'));
 		$this->addComponent($sort = new GridFieldSortableHeader());
 		$this->addComponent($filter = new GridFieldFilterHeader());
 		$this->addComponent(new GridFieldDataColumns());

forms/gridfield/GridFieldToolbarHeader.php

@@ -1,10 +1,7 @@
 <?php
 /**
  * Adding this class to a {@link GridFieldConfig} of a {@link GridField} adds a header title to that field.
- * The header serves double duty of displaying the name of the data the GridField is showing and
+ * The header serves to display the name of the data the GridField is showing.
- * providing a space for actions on this grid.
- * 
- * This header provides two new HTML fragment spaces: 'toolbar-header-left' and 'toolbar-header-right'.
  *
  * @package framework
  * @subpackage gridfield

scss/GridField.scss

@@ -45,6 +45,9 @@ $gf_grid_x:	16px;
 	.ss-gridfield {
 		& > div {
 			margin-bottom: $gf_grid_y*3;
+			&.addNewGridFieldButton{
+				margin-bottom:$gf_grid_y;
+			}
 		}
 
 		&[data-selectable] {

scss/_elementMixins.scss

@@ -1,11 +1,11 @@
-/**
+//**
- * This file contains mixins relating to specific functionality
+// * This file contains mixins relating to specific functionality
- *
+// *
- * Mixins should be stored here rather than individual files
+// * Mixins should be stored here rather than individual files
- */
+// */
 
 
-/*Mixin generates the generic button styling for the gridfield*/
+//*Mixin generates the generic button styling for the gridfield*/
 @mixin gridFieldButtons{
 	border:none;			
 	display:block;
@@ -15,11 +15,11 @@
 }
 
 
-/**
+//**
-	Mixin creates a transparent button with a dropdown arrow, 
+//	Mixin creates a transparent button with a dropdown arrow, 
-	as is used for files in the files up-load area. The arrows 
+//	as is used for files in the files up-load area. The arrows 
-	themselves are added in the _style file
+//	themselves are added in the _style file
-**/
+//**/
 @mixin ss-uploadfield-editButton{
 	&.ss-uploadfield-item-edit {
 		opacity:0.9;

scss/_mixins.scss

@@ -0,0 +1,61 @@
+/**
+ * This file contains mixins relating to specific functionality
+ *
+ * Mixins should be stored here rather than individual files
+ */
+
+
+/*Mixin generates the generic button styling for the gridfield*/
+@mixin gridFieldButtons{
+	border:none;			
+	display:block;
+	text-indent:-9999em;
+	width:30px; 
+	height:25px; //match the height of the input field
+}
+
+
+/**
+	Mixin creates a transparent button with a dropdown arrow, 
+	as is used for files in the files up-load area. The arrows 
+	themselves are added in the _style file
+**/
+@mixin ss-uploadfield-editButton{
+	&.ss-uploadfield-item-edit {
+		opacity:0.9;
+		padding-top: 3px;
+		padding-bottom: 0;
+		height:100%;
+		@include border-radius(0);
+		&.ui-state-hover{
+			background:none;		
+			opacity:1;
+			span.toggle-details{
+				opacity:1;
+			}	
+		}
+		span.toggle-details{
+			opacity:0.9;
+			margin-left:3px;
+			display: inline-block;
+			width: 5px;
+			height: 100%;
+			cursor: pointer;
+			.toggle-details-icon {
+				margin-top:1px;
+				display: inline-block;
+				width: 8px;
+				height: 8px;
+				vertical-align: middle;
+				&.opened {	
+					margin-top:0;
+				}
+			}
+		}
+
+	}
+
+	.ui-icon {
+		display: none;
+	}	
+}

templates/Includes/GridFieldButtonRow.ss

@@ -0,0 +1,4 @@
+<div class="addNewGridFieldButton">
+	<div class="left">\$DefineFragment(toolbar-header-left)</div>
+	<div class="right">\$DefineFragment(toolbar-header-right)</div>
+</div>

templates/Includes/GridFieldToolbarHeader.ss

@@ -1,7 +1,5 @@
 <tr class="title">
 	<th colspan="$ColumnCount">
 		<% if Title %><h2>$Title</h2><% end_if %>
-		<div class="left">\$DefineFragment(toolbar-header-left)</div>
-		<div class="right">\$DefineFragment(toolbar-header-right)</div>
 	</th>
 </tr>

templates/Includes/GridField_print.ss

@@ -1,4 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 	<head>
 		<% if $Title %><title>$Title</title><% end_if %>