Merge pull request #2136 from nedmas/fix-remove-export-button-padding

FIX: GridField button styling

admin/code/SecurityAdmin.php

@@ -67,7 +67,8 @@ class SecurityAdmin extends LeftAndMain implements PermissionProvider {
 			false,
 			Member::get(),
 			$memberListConfig = GridFieldConfig_RecordEditor::create()
-				->addComponent(new GridFieldExportButton())
+				->addComponent(new GridFieldButtonRow('after'))
+				->addComponent(new GridFieldExportButton('buttons-after-left'))
 		)->addExtraClass("members_grid");
 		$memberListConfig->getComponentByType('GridFieldDetailForm')->setValidator(new Member_Validator());
 

css/GridField.css

@@ -14,6 +14,10 @@ Used in side panels and action tabs
 .cms .ss-gridfield > div { margin-bottom: 36px; }
 .cms .ss-gridfield > div.addNewGridFieldButton { margin-bottom: 0; }
 .cms .ss-gridfield > div.addNewGridFieldButton .action { margin-bottom: 12px; }
+.cms .ss-gridfield > div.ss-gridfield-buttonrow-before { margin-bottom: 0; }
+.cms .ss-gridfield > div.ss-gridfield-buttonrow-before .action { margin-bottom: 12px; }
+.cms .ss-gridfield > div.ss-gridfield-buttonrow-after { margin-bottom: 0; }
+.cms .ss-gridfield > div.ss-gridfield-buttonrow-after .action { margin-top: 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; }
@@ -29,7 +33,7 @@ Used in side panels and action tabs
 .cms .ss-gridfield .add-existing-autocompleter { width: 500px; }
 .cms .ss-gridfield .add-existing-autocompleter span { display: -moz-inline-stack; display: inline-block; vertical-align: top; *vertical-align: auto; zoom: 1; *display: inline; }
 .cms .ss-gridfield .add-existing-autocompleter input.relation-search { width: 270px; margin-bottom: 12px; }
-.cms .ss-gridfield .grid-csv-button, .cms .ss-gridfield .grid-print-button { margin-bottom: 12px; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; }
+.cms .ss-gridfield .grid-csv-button, .cms .ss-gridfield .grid-print-button { font-size: 12px; margin-bottom: 0; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; }
 .cms table.ss-gridfield-table { display: table; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; border-collapse: separate; border-bottom: 0 none; width: 100%; }
 .cms table.ss-gridfield-table thead { color: #323e46; background: transparent; }
 .cms table.ss-gridfield-table thead tr.filter-header .fieldgroup { max-width: 512px; }
@@ -127,4 +131,3 @@ Used in side panels and action tabs
 .cms table.ss-gridfield-table tr.last td { border-bottom: 0 none; }
 .cms table.ss-gridfield-table td:first-child { border-left: 1px solid rgba(0, 0, 0, 0.1); }
 .cms table.ss-gridfield-table td:last-child { border-right: 1px solid rgba(0, 0, 0, 0.1); }
-.cms .grid-bottom-button { margin-top: 12px; }

forms/gridfield/GridFieldButtonRow.php

@@ -21,6 +21,7 @@ class GridFieldButtonRow implements GridField_HTMLProvider {
 
 	public function getHTMLFragments( $gridField) {
 		$data = new ArrayData(array(
+			"TargetFragmentName" => $this->targetFragment,
 			"LeftFragment" => "\$DefineFragment(buttons-{$this->targetFragment}-left)",
 			"RightFragment" => "\$DefineFragment(buttons-{$this->targetFragment}-right)",
 		));

forms/gridfield/GridFieldExportButton.php

@@ -53,7 +53,7 @@ class GridFieldExportButton implements GridField_HTMLProvider, GridField_ActionP
 		$button->setAttribute('data-icon', 'download-csv');
 		$button->addExtraClass('no-ajax');
 		return array(
-			$this->targetFragment => '<p class="grid-bottom-button grid-csv-button">' . $button->Field() . '</p>',
+			$this->targetFragment => '<p class="grid-csv-button">' . $button->Field() . '</p>',
 		);
 	}
 

scss/GridField.scss

@@ -45,6 +45,18 @@ $gf_grid_x:	16px;
 				.action {
 				margin-bottom:$gf_grid_y;
 			}
+		}
+			&.ss-gridfield-buttonrow-before{
+				margin-bottom: 0;
+				.action {
+				margin-bottom:$gf_grid_y;
+			}
+		}
+			&.ss-gridfield-buttonrow-after{
+				margin-bottom: 0;
+				.action {
+				margin-top:$gf_grid_y;
+			}
 		}
 		}
 
@@ -116,7 +128,8 @@ $gf_grid_x:	16px;
 			width: 500px;
 		}
 		.grid-csv-button, .grid-print-button {
-			margin-bottom: $gf_grid_y;
+			margin-bottom: 0;
+			font-size: $font-base-size;
 			@include inline-block();
 		}
 		}
@@ -641,8 +654,4 @@ $gf_grid_x:	16px;
 			border-right: 1px solid $gf_colour_border;
 		}
 	}
-
-	.grid-bottom-button {
-		margin-top:$gf_grid_y;
-	}
 }

security/Group.php

@@ -96,8 +96,9 @@ class Group extends DataObject {
 		if($this->ID) {
 			$group = $this;
 			$config = new GridFieldConfig_RelationEditor();
-			$config->addComponents(new GridFieldExportButton('after'));
+			$config->addComponent(new GridFieldButtonRow('after'));
-			$config->addComponents(new GridFieldPrintButton('after'));
+			$config->addComponents(new GridFieldExportButton('buttons-after-left'));
+			$config->addComponents(new GridFieldPrintButton('buttons-after-left'));
 			$config->getComponentByType('GridFieldAddExistingAutocompleter')
 				->setResultsFormat('$Title ($Email)')->setSearchFields(array('FirstName', 'Surname', 'Email'));
 			$config->getComponentByType('GridFieldDetailForm')

templates/Includes/GridFieldButtonRow.ss

@@ -1,4 +1,4 @@
-<div class="addNewGridFieldButton ss-gridfield-buttonrow">
+<div class="ss-gridfield-buttonrow ss-gridfield-buttonrow-{$TargetFragmentName}">
 	<div class="left">$LeftFragment</div>
 	<div class="right">$RightFragment</div>
 </div>