Merge pull request #228 from sminnee/gridfield-side-by-side-actions

Gridfield side by side actions

css/GridField.css

@@ -2,6 +2,8 @@
 .cms .ss-gridfield > div { margin-bottom: 35px; }
 .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 .add-existing-autocompleter { width: 500px; }
+.cms .ss-gridfield .add-existing-autocompleter input.relation-search { width: 380px; }
 .cms table.ss-gridfield-table { display: table; box-shadow: none; padding: 0; border-collapse: separate; border-bottom: 0 none; width: 100%; }
 .cms table.ss-gridfield-table thead { color: #1d2224; background: transparent; }
 .cms table.ss-gridfield-table thead tr.filter-header .fieldgroup { max-width: 512px; }
@@ -17,7 +19,8 @@
 .cms table.ss-gridfield-table tr.title { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
 .cms table.ss-gridfield-table tr.title th { position: relative; background: #7f9198; border-top: 1px solid rgba(0, 0, 0, 0.1); padding: 5px; min-height: 40px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
 .cms table.ss-gridfield-table tr.title th h2 { padding: 0px; font-size: 16.8px; color: #fff; margin: 3px 8px 0; display: inline-block; }
-.cms table.ss-gridfield-table tr.title th .new { font-size: 14.4px; float: right; }
+.cms table.ss-gridfield-table tr.title th .right > * { float: right; font-size: 14.4px; }
+.cms table.ss-gridfield-table tr.title th .left > * { float: left; font-size: 14.4px; }
 .cms table.ss-gridfield-table tr.sortable-header { background: #bac8ce; }
 .cms table.ss-gridfield-table tr.sortable-header th { padding: 0px; }
 .cms table.ss-gridfield-table tr:hover { background: #FFFAD6 !important; }

forms/gridfield/GridFieldAddExistingAutocompleter.php

@@ -15,7 +15,12 @@ class GridFieldAddExistingAutocompleter implements GridField_HTMLProvider, GridF
 	 * @var string $itemClass
 	 */
 	protected $itemClass = 'GridFieldAddExistingAutocompleter';
-	
+
+	/**
+	 * The HTML fragment to write this component into
+	 */
+	protected $targetFragment;
+
 	/**
 	 * Which columns that should be used for doing a "StartsWith" search.
 	 * If multiple fields are provided, the filtering is performed non-exclusive.
@@ -40,7 +45,8 @@ class GridFieldAddExistingAutocompleter implements GridField_HTMLProvider, GridF
 	 *
 	 * @param array $searchFields Which fields on the object in the list should be searched
 	 */
-	public function __construct($searchFields = null) {
+	public function __construct($targetFragment = 'before', $searchFields = null) {
+		$this->targetFragment = $targetFragment;
 		$this->searchFields = (array)$searchFields;
 	}
 	
@@ -67,7 +73,7 @@ class GridFieldAddExistingAutocompleter implements GridField_HTMLProvider, GridF
 		
 		$findAction = new GridField_FormAction($gridField, 'gridfield_relationfind', _t('GridField.Find', "Find"), 'find', 'find');
 		$findAction->setAttribute('data-icon', 'relationfind');
-		$addAction = new GridField_FormAction($gridField, 'gridfield_relationadd', _t('GridField.LinkExisting', "Link Exisiting"), 'addto', 'addto');
+		$addAction = new GridField_FormAction($gridField, 'gridfield_relationadd', _t('GridField.LinkExisting', "Link Existing"), 'addto', 'addto');
 		$addAction->setAttribute('data-icon', 'chain--plus');
 
 		// If an object is not found, disable the action
@@ -78,7 +84,10 @@ class GridFieldAddExistingAutocompleter implements GridField_HTMLProvider, GridF
 		$forTemplate->Fields->push($searchField);
 		$forTemplate->Fields->push($findAction);
 		$forTemplate->Fields->push($addAction);
-		return array('before' => $forTemplate->renderWith($this->itemClass));
+		
+		return array(
+			$this->targetFragment => $forTemplate->renderWith($this->itemClass)
+		);
 	}
 	
 	/**

forms/gridfield/GridFieldAddNewButton.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * This component provides a button for opening the add new form provided by {@link GridFieldDetailForm}.
+ *
+ * @package sapphire
+ * @subpackage gridfield
+ */
+class GridFieldAddNewButton implements GridField_HTMLProvider {
+	protected $targetFragment;
+	
+	public function __construct($targetFragment = 'before') {
+		$this->targetFragment = $targetFragment;
+	}
+	
+	public function getHTMLFragments($gridField) {
+		$data = new ArrayData(array(
+			'NewLink' => Controller::join_links($gridField->Link('item'), 'new'),
+		));
+		return array(
+			$this->targetFragment => $data->renderWith('GridFieldAddNewbutton'),
+		);
+	}
+
+}

forms/gridfield/GridFieldConfig.php

@@ -163,6 +163,7 @@ class GridFieldConfig_RecordEditor extends GridFieldConfig {
 	 */
 	public function __construct($itemsPerPage=null) {
 		$this->addComponent(new GridFieldToolbarHeader());
+		$this->addComponent(new GridFieldAddNewButton('toolbar-header-right'));
 		$this->addComponent($sort = new GridFieldSortableHeader());
 		$this->addComponent($filter = new GridFieldFilterHeader());
 		$this->addComponent(new GridFieldDataColumns());
@@ -209,7 +210,8 @@ class GridFieldConfig_RelationEditor extends GridFieldConfig {
 	 */
 	public function __construct($itemsPerPage=null) {
 		$this->addComponent(new GridFieldToolbarHeader());
-		$this->addComponent(new GridFieldAddExistingAutocompleter());
+		$this->addComponent(new GridFieldAddExistingAutocompleter('toolbar-header-left'));
+		$this->addComponent(new GridFieldAddNewButton('toolbar-header-right'));
 		$this->addComponent($sort = new GridFieldSortableHeader());
 		$this->addComponent($filter = new GridFieldFilterHeader());
 		$this->addComponent(new GridFieldDataColumns());

forms/gridfield/GridFieldExportButton.php

@@ -27,11 +27,18 @@ class GridFieldExportButton implements GridField_HTMLProvider, GridField_ActionP
 	 * @var boolean
 	 */
 	protected $csvHasHeader = true;
+	
+	/**
+	 * Fragment to write the button to
+	 */
+	protected $targetFragment;
 
 	/**
-	 * @param array
+	 * @param string $targetFragment The HTML fragment to write the button into
+	 * @param array $exportColumns The columns to include in the export
 	 */
-	public function __construct($exportColumns = null) {
+	public function __construct($targetFragment = "after", $exportColumns = null) {
+		$this->targetFragment = $targetFragment;
 		$this->exportColumns = $exportColumns;
 	}
 
@@ -49,7 +56,7 @@ class GridFieldExportButton implements GridField_HTMLProvider, GridField_ActionP
 		$button->setAttribute('data-icon', 'download-csv');
 		$button->addExtraClass('no-ajax');
 		return array(
-			'after' => '<p>' . $button->Field() . '</p>',
+			$this->targetFragment => '<p>' . $button->Field() . '</p>',
 		);
 	}
 

forms/gridfield/GridFieldToolbarHeader.php

@@ -2,62 +2,17 @@
 /**
  * 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
- * providing an "add new" button to create new object instances.
- *
- * The reason for making "add new" part of the title component is to make it easier for the user to tell
- * which "add new" button belongs to which datagrid, in the case where multiple datagrids are on a single
- * page. It is also a more efficient use of screen space.
- *
- * The default DataGrid includes the add button. You can hide the button by setting a boolean using the
- * setNewEnabled() method
+ * providing a space for actions on this grid.
+ * 
+ * This header provides two new HTML fragment spaces: 'toolbar-header-left' and 'toolbar-header-right'.
  *
  * @package sapphire
  * @subpackage gridfield
  */
 class GridFieldToolbarHeader implements GridField_HTMLProvider {
-
-	/**
-	 *
-	 * @var bool
-	 */
-	protected $newEnabled = true;
-	
-	/**
-	 *
-	 * @var type 
-	 */
-	protected $gridField = null;
-
 	public function getHTMLFragments( $gridField) {
-		$this->gridField = $gridField;
 		return array(
-			'header' => $gridField->customise(array(
-				'NewLink' => Controller::join_links($gridField->Link('item'), 'new'),
-				'NewEnabled' => $this->getNewEnabled()
-			))->renderWith('GridFieldToolbarHeader')
+			'header' => $gridField->renderWith('GridFieldToolbarHeader')
 		);
 	}
-
-	/**
-	 * Returns whether or not the "add new" button will appear when rendering this DataGrid title
-	 * @return bool
-	 */
-	public function getNewEnabled() {
-		if($this->gridField) {
-			$model = singleton($this->gridField->getModelClass());
-			if(!$model->canCreate()) {
-				return false;
-			}	
-		}
-		
-		return $this->newEnabled;
-	}
-
-	/**
-	 * Enable or disable the "add new" button to add new DataGrid object instances
-	 * @param $enabled
-	 */
-	public function setNewEnabled($enabled) {
-		$this->newEnabled = $enabled;
-	}
 }

scss/GridField.scss

@@ -53,6 +53,15 @@ $gf_grid_x:	16px;
 			}
 		}
 	}
+	
+	.ss-gridfield {
+		.add-existing-autocompleter {
+			input.relation-search {
+				width: 380px;
+			}
+			width: 500px;
+		}
+	}
 
 	table.ss-gridfield-table {
 		display: table; 
@@ -139,9 +148,13 @@ $gf_grid_x:	16px;
 						margin:$gf_grid_y/4 $gf_grid_x/2 0;
 						display:inline-block;
 					}
-					.new{
-						font-size: $gf_grid_y*1.2; 
+					.right > * {
 						float: right;
+						font-size: $gf_grid_y*1.2;
+					}
+					.left > * {
+						float: left;
+						font-size: $gf_grid_y*1.2;
 					}
 				}
 			}	

templates/Includes/GridFieldAddExistingAutocompleter.ss

@@ -1,4 +1,4 @@
-<div><% control Fields %>
+<div class="add-existing-autocompleter"><% control Fields %>
 	<span>$Field</span>
 	<% end_control %>
 </div>

templates/Includes/GridFieldAddNewButton.ss

@@ -0,0 +1 @@
+<a href="$NewLink" class="action ss-ui-action-constructive ss-ui-button ui-button ui-widget ui-state-default ui-corner-all new new-link" data-icon="add"><% _t('GridField.AddNew', 'Add New') %></a>

templates/Includes/GridFieldToolbarHeader.ss

@@ -1,3 +1,7 @@
 <tr class="title">
-	<th colspan="$ColumnCount"><h2>$Title</h2><% if NewEnabled %> <a href="$NewLink" class="action ss-ui-action-constructive ss-ui-button ui-button ui-widget ui-state-default ui-corner-all new new-link" data-icon="add"><% _t('GridField.AddNew', 'Add New') %></a><% end_if %></th>
+	<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>