ENHANCEMENT: Move Actions into a FieldGroup and style these. TODO - Toggle each individual action detail when clicking the respective button. Currently when clicking a button this hides the whole panel

code/DMSDocument.php

@@ -481,9 +481,16 @@ class DMSDocument extends DataObject implements DMSDocumentInterface {
 		);
 
 		$fields->add(new LiteralField('BottomTaskSelection',"<div id=\"Actions\" class=\"field actions\"><label class=\"left\">Actions</label><ul><li class=\"ss-ui-button\">Replace</li><li class=\"ss-ui-button\">Embargo</li></ul></div>"));
-		$fields->add($uploadField);
-		$fields->add($pagesGrid);
+		//$fields->add($uploadField);
 
+		// This adds all the actions details into a group.
+		// Embargo, History, etc to go in here
+		// These are toggled on and off via the Actions Buttons above
+		$fields->add($group = new FieldGroup(
+				$uploadField,
+				$pagesGrid
+		));
+		$group->setName("ActionsPanel")->addExtraClass('dmsupload ss-upload ss-uploadfield');
 		return $fields;
 	}
 

css/DMSDocumentCMSFields.css

@@ -9,18 +9,23 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
 
 #DocumentTypeID ul { padding: 0; }
 #DocumentTypeID ul input[type="radio"] { display: none; }
-#DocumentTypeID ul li { display: inline-block; padding: 0; width: 94px; margin-right: -1px; border-radius: 0; }
+#DocumentTypeID ul li { display: inline-block; padding: 0; width: 90px; margin-right: -1px; border-radius: 0; }
 #DocumentTypeID ul li.val1 { width: 130px; }
+#DocumentTypeID ul li.val1 label { max-width: 105px; }
 #DocumentTypeID ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; }
 #DocumentTypeID ul li:last-child { border-radius: 0 6px 6px 0; }
 #DocumentTypeID ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); box-shadow: 0 1px 1px 0 #A0A0A0 inset; }
 #DocumentTypeID ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; }
-#DocumentTypeID ul li label { padding: .4em 1em; display: block; line-height: 1.4; white-space: normal; }
+#DocumentTypeID ul li label { padding: .4em 1em; display: inline-block; line-height: 1.4; white-space: normal; max-width: 60px; }
 
 #Actions li { margin-left: 2px; }
 #Actions li:first-child { margin-left: 0; }
 
-#ReplaceFile { display: none; }
+#ActionsPanel .middleColumn { margin-left: 184px; }
+#ActionsPanel label.fieldholder-small-label { display: none; }
+#ActionsPanel .fieldgroup-field { float: none; width: auto; }
+#ActionsPanel .fieldgroup-field .fieldholder-small label { float: none; width: auto; margin: 0; padding: 0; }
+#ActionsPanel .fieldgroup-field .fieldholder-small label.ss-ui-button { float: left; margin: 0 10px 0 0; }
 
 #Form_ItemEditForm fieldset table.ss-gridfield-table { width: auto; }
 #Form_ItemEditForm fieldset table.ss-gridfield-table tr th.main { min-width: 200px; }

css/DMSMainCMS.css

@@ -9,4 +9,5 @@
 .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li { padding-bottom: 1px; border: 1px solid #C0C0C2; }
 .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li a { padding: 8px 20px 8px; }
 
+#Form_EditForm_Documents { padding: 1em 0; }
 #Form_EditForm_Documents input[name="filter[LastChanged]"] { display: none; }

javascript/DMSDocumentCMSFields.js

@@ -12,13 +12,15 @@
 
 		$('#DocumentTypeID input[type=radio]').entwine({
 			onadd: function() {
+				// Checks to see what radio button is selected
 				if (this.is(':checked')) {
 					this.change();
 				}
 			},
 			onchange: function(e) {
+				// Remove selected class from radio buttons
 				$('#DocumentTypeID').find('li').removeClass('selected');
-
+				//If radio button is checked then add the selected class
 				if (this.is(':checked')) {
 					this.parent('li').addClass('selected');
 				}
@@ -27,8 +29,9 @@
 
 		$('#Actions ul li').entwine({
 			onclick: function(e) {
-				e.preventDefault();
-				this.parents('fieldset').find('#ReplaceFile').show();
+				//TODO - Fix so when clicking on an action it toggles the correct details inside the ActionsPanel
+				// Currently this just hides the whole ActionsPanel when you click an action button
+				this.parents('fieldset').find('#ActionsPanel').hide();
 			}
 		});
 

scss/DMSDocumentCMSFields.scss

@@ -48,11 +48,14 @@ form.small .field .TreeDropdownField,
 		li{
 			display:inline-block;
 			padding:0;
-			width:94px;
+			width:90px;
 			margin-right: -1px;
 			border-radius:0;
 			&.val1{
 				width:130px;
+				label{
+					max-width:105px;
+				}
 			}
 			&:first-child{
 				border-radius: 6px 0 0 6px;
@@ -76,9 +79,10 @@ form.small .field .TreeDropdownField,
 			}
 			label{
 				padding: .4em 1em;
-				display: block;
+				display: inline-block;
 				line-height: 1.4;
 				white-space:normal;
+				max-width:60px;
 			}
 		}
 	}
@@ -91,8 +95,30 @@ form.small .field .TreeDropdownField,
 		}
 	}
 }
-#ReplaceFile{
-	display:none;
+
+#ActionsPanel{
+	.middleColumn{
+		margin-left:184px;
+	}
+	label.fieldholder-small-label{
+		display: none;
+	}
+	.fieldgroup-field{
+		float:none;
+		width:auto;
+ 		.fieldholder-small{
+			label{
+				float:none;
+				width:auto;
+				margin:0;
+				padding:0;
+				&.ss-ui-button{
+					float: left;
+					margin: 0 10px 0 0;
+				}
+			}
+		}
+	}
 }
 
 #Form_ItemEditForm{

scss/DMSMainCMS.scss

@@ -41,6 +41,9 @@
 }
 
 
-#Form_EditForm_Documents input[name="filter[LastChanged]"] {
-	display: none;
+#Form_EditForm_Documents {
+	padding: 1em 0;
+	input[name="filter[LastChanged]"] {
+		display: none;
+	}
 }