From e9fdfb05b258d29c7add514a8af597cd2f9cf338 Mon Sep 17 00:00:00 2001
From: Loz Calver <lozcalver@bigfork.co.uk>
Date: Tue, 22 Oct 2013 16:44:28 +0100
Subject: [PATCH] GridField 'Add existing' action styling improvements

---
 css/GridField.css                   |  8 ++++----
 forms/gridfield/GridFieldConfig.php |  2 +-
 scss/GridField.scss                 | 15 ++++++++++++---
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/css/GridField.css b/css/GridField.css
index 43ab08fd1..0a0b8c62b 100644
--- a/css/GridField.css
+++ b/css/GridField.css
@@ -30,10 +30,10 @@ Used in side panels and action tabs
 .cms .ss-gridfield .ss-gridfield-buttonrow { font-size: 14.4px; }
 .cms .ss-gridfield .grid-levelup { text-indent: -9999em; margin-bottom: 6px; }
 .cms .ss-gridfield .grid-levelup a.list-parent-link { background: transparent url(../images/gridfield-level-up.png) no-repeat 0 0; display: block; }
-.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 { font-size: 12px; margin-bottom: 0; display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; }
+.cms .ss-gridfield .add-existing-autocompleter span { float: left; 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; height: 32px; margin-bottom: 12px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.cms .ss-gridfield .add-existing-autocompleter button#action_gridfield_relationadd { height: 32px; margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; }
+.cms .ss-gridfield .grid-csv-button, .cms .ss-gridfield .grid-print-button { margin-bottom: 0; font-size: 12px; 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; }
diff --git a/forms/gridfield/GridFieldConfig.php b/forms/gridfield/GridFieldConfig.php
index 78895d542..f9438284b 100644
--- a/forms/gridfield/GridFieldConfig.php
+++ b/forms/gridfield/GridFieldConfig.php
@@ -236,7 +236,7 @@ class GridFieldConfig_RelationEditor extends GridFieldConfig {
 		
 		$this->addComponent(new GridFieldButtonRow('before'));
 		$this->addComponent(new GridFieldAddNewButton('buttons-before-left'));
-		$this->addComponent(new GridFieldAddExistingAutocompleter('buttons-before-left'));
+		$this->addComponent(new GridFieldAddExistingAutocompleter('buttons-before-right'));
 		$this->addComponent(new GridFieldToolbarHeader());
 		$this->addComponent($sort = new GridFieldSortableHeader());
 		$this->addComponent($filter = new GridFieldFilterHeader());
diff --git a/scss/GridField.scss b/scss/GridField.scss
index 1244105df..e7710c021 100644
--- a/scss/GridField.scss
+++ b/scss/GridField.scss
@@ -118,14 +118,23 @@ $gf_grid_x:	16px;
 			margin-bottom: 6px;
 		}
 		.add-existing-autocompleter {
-			span {															
+			span {
+				float: left;		
 				@include inline-block(top);
 			}
 			input.relation-search {
-				width: 270px;
+				width: 270px; height: 32px;
 				margin-bottom: $gf_grid_y;
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+			button#action_gridfield_relationadd {
+				height: 32px;
+				margin-left: 0; // Webkit needs this
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+				border-left: none;
 			}
-			width: 500px;
 		}
 		.grid-csv-button, .grid-print-button {
 			margin-bottom: 0;