From da2e75f3c45e4fca5eae789015e924e5e1df5d8f Mon Sep 17 00:00:00 2001
From: Naomi Guyer <adrexia@gmail.com>
Date: Fri, 1 Sep 2017 23:05:02 +1200
Subject: [PATCH] FIX: Add new multiclass UI

Visual fixes for add new multiclass button/selector
---
 css/GridFieldExtensions.css                   | 31 ++++++++++++++++++-
 javascript/GridFieldExtensions.js             |  8 ++---
 .../GridFieldAddNewMultiClass.ss              |  2 +-
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/css/GridFieldExtensions.css b/css/GridFieldExtensions.css
index 9d43e84..f6fbe34 100644
--- a/css/GridFieldExtensions.css
+++ b/css/GridFieldExtensions.css
@@ -75,6 +75,7 @@
 
 .ss-gridfield-add-new-multi-class {
 	margin-bottom: 8px !important;
+	white-space: nowrap;
 }
 
 .ss-gridfield-add-new-multi-class .field {
@@ -84,6 +85,34 @@
 	margin: 0 4px 0 0;
 }
 
+.cms-edit-form:not(.AssetAdmin) .ss-gridfield-add-new-multi-class .form-group .form__field-holder {
+	display: inline;
+	padding: 0;
+	margin: 0;
+}
+
+.cms-edit-form:not(.AssetAdmin) .ss-gridfield-add-new-multi-class .form-group {
+	display: inline-block;
+	margin: 0;
+	min-width: 150px;
+	width: calc(100% - 20px);
+}
+
+.ss-gridfield-add-new-multi-class .form-group:after {
+	border:0;
+}
+
+.btn__addnewmulticlass {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	line-height: 1.85em;
+}
+
+.ss-gridfield-add-new-multi-class .chosen-container-active.chosen-with-drop .chosen-single,
+.ss-gridfield-add-new-multi-class .chosen-container-single .chosen-single  {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
 /**
  * GridFieldEditableColumns
  */
@@ -154,7 +183,7 @@
 	width: 5px;
 	height: 11px;
 	margin: -5px 0 0 -2px;
-	background-image: url('../../framework/admin/thirdparty/jquery-ui-themes/smoothness/images/ui-icons_222222_256x240.png');
+	background-image: url('../../framework/admin/thirdparty/jquery-ui-themes/smoothness/images/ui-icons_222222_256x240.png');
 	background-position: -5px -227px;
 }
 
diff --git a/javascript/GridFieldExtensions.js b/javascript/GridFieldExtensions.js
index 3498c49..ec822ea 100644
--- a/javascript/GridFieldExtensions.js
+++ b/javascript/GridFieldExtensions.js
@@ -215,7 +215,7 @@
 		 * GridFieldAddNewMultiClass
 		 */
 
-		$(".ss-gridfield-add-new-multi-class .ss-ui-button").entwine({
+		$(".ss-gridfield-add-new-multi-class .btn__addnewmulticlass").entwine({
 			onclick: function() {
 				var link = this.data("href");
 				var cls  = this.parents(".ss-gridfield-add-new-multi-class").find("select").val();
@@ -236,12 +236,12 @@
 				this.update();
 			},
 			update: function() {
-				var btn = this.parents(".ss-gridfield-add-new-multi-class").find(".ss-ui-button");
+				var btn = this.parents(".ss-gridfield-add-new-multi-class").find('[data-add-multiclass]');
 
 				if(this.val() && this.val().length) {
-					btn.button().button("enable");
+					btn.removeClass('disabled');
 				} else {
-					btn.button().button("disable");
+					btn.addClass('disabled');
 				}
 			}
 		});
diff --git a/templates/Symbiote/GridFieldExtensions/GridFieldAddNewMultiClass.ss b/templates/Symbiote/GridFieldExtensions/GridFieldAddNewMultiClass.ss
index ec116d1..5bf2952 100644
--- a/templates/Symbiote/GridFieldExtensions/GridFieldAddNewMultiClass.ss
+++ b/templates/Symbiote/GridFieldExtensions/GridFieldAddNewMultiClass.ss
@@ -1,7 +1,7 @@
 <div class="ss-gridfield-add-new-multi-class">
 	$ClassField.FieldHolder
 
-	<a href="#" data-href="$Link" class="ss-ui-action-constructive ss-ui-button" data-icon="add">
+	<a href="#" data-href="$Link" data-add-multiclass class="btn btn-primary font-icon-plus btn__addnewmulticlass" data-icon="add">
 		$Title
 	</a>
 </div>