ENHANCEMENT: add styling to meta-data. MINOR: Add initial styling for document type and action buttons with JS to hide panels - this needs a lot of work

code/DMSDocument.php

@@ -448,7 +448,7 @@ class DMSDocument extends DataObject implements DMSDocumentInterface {
 			new GridFieldSortableHeader(),
 			new GridFieldDataColumns(),
 			new GridFieldPaginator(30),
-			new GridFieldEditButton(),
+			//new GridFieldEditButton(),
 			new GridFieldDetailForm()
 		);
 		$gridFieldConfig->getComponentByType('GridFieldDataColumns')->setDisplayFields(array('Title'=>'Title','ClassName'=>'Page Type','ID'=>'Page ID'));
@@ -468,6 +468,7 @@ class DMSDocument extends DataObject implements DMSDocumentInterface {
 		$actions->setName('DMSActions');
 		$fields->add($actions);*/
 
+		$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(FormAction::create('dod', _t('GridFieldDetailForm.Delete', 'Delete'))
@@ -480,20 +481,20 @@ class DMSDocument extends DataObject implements DMSDocumentInterface {
 	/**
 	 * Return the relative URL of an icon for the file type,
 	 * based on the {@link appCategory()} value.
-	 * Images are searched for in "framework/images/app_icons/".
+	 * Images are searched for in "dms/images/app_icons/".
 	 *
 	 * @return String
 	 */
 	function Icon($ext) {
-		if(!Director::fileExists(FRAMEWORK_DIR . "/images/app_icons/{$ext}_32.gif")) {
+		if(!Director::fileExists("dms/images/app_icons/{$ext}_32.png")) {
 			$ext = File::get_app_category($ext);
 		}
 
-		if(!Director::fileExists(FRAMEWORK_DIR . "/images/app_icons/{$ext}_32.gif")) {
+		if(!Director::fileExists("dms/images/app_icons/{$ext}_32.png")) {
 			$ext = "generic";
 		}
 
-		return FRAMEWORK_DIR . "/images/app_icons/{$ext}_32.gif";
+		return "dms/images/app_icons/{$ext}_32.png";
 	}
 	
 	/**

css/DMSDocumentCMSFields.css

@@ -1 +1,9 @@
-#test { /* Test SCSS */ }
+#FileP .fieldgroup-field { width: 100%; }
+#FileP .fieldgroup-field .cms-file-info-data { width: 400px; }
+#FileP .fieldgroup-field .fieldholder-small { margin-top: 5px; }
+#FileP .fieldgroup-field .fieldholder-small label { width: auto; margin-left: 0; padding-top: 0; margin-right: 10px; font-weight: bold; }
+#FileP .fieldgroup-field .fieldholder-small .readonly { font-style: italic; color: #666; }
+
+#DocumentTypeID ul input[type="radio"] { display: none; }
+#DocumentTypeID ul li { display: inline; float: none; padding: 4px; }
+#DocumentTypeID ul li.selected { border-bottom: 1px solid #555; border-top: 1px solid #e6e6e6; }

javascript/DMSDocumentCMSFields.js

@@ -2,5 +2,37 @@
 
 	$.entwine('ss', function($) {
 
+		$('#DocumentTypeID ul li').entwine({
+				onmatch: function() {
+					this.addClass('ss-ui-button');
+				},
 			});
+
+		$('#DocumentTypeID ul li').entwine({
+			onclick: function(e) {
+				if ($('input[type=radio]:checked').length > 0) {
+					this.addClass('selected');
+				}
+				//not.(this).removeClass('selected');
+	/*			e.preventDefault();
+				this.parents('.cms-preview').loadUrl(this.attr('href'));
+				this.addClass('disabled');
+				this.parents('.cms-preview-states').find('a').not(this).removeClass('disabled');
+				//This hides all watermarks
+				this.parents('.cms-preview-states').find('.cms-preview-watermark').hide();
+				//Show the watermark for the current state
+				this.siblings('.cms-preview-watermark').show();*/
+			},
 		});
+
+		$('#Actions ul li').entwine({
+			onclick: function(e) {
+				e.preventDefault();
+				this.parents('fieldset').find('#ReplaceFile').hide();
+			}
+		});
+
+
+	});
+
+}(jQuery));

scss/DMSDocumentCMSFields.scss

@@ -1,3 +1,43 @@
-#test {
-	/* Test SCSS */
+#FileP{
+	.fieldgroup-field{
+		width:100%;
+		.cms-file-info-data{
+			width:400px;
+		}
+		.fieldholder-small{
+			margin-top: 5px;
+			label{
+				width:auto;
+				margin-left: 0;
+				padding-top: 0;
+				margin-right: 10px;
+				font-weight: bold;
+			}
+			.readonly{
+				font-style:italic;
+				color: #666;
+			}
+		}
+	}
+}
+
+#DocumentTypeID{
+	ul{
+		input[type="radio"]{
+			display:none;
+		}
+		li{
+			display:inline;
+			float: none;
+			padding:4px;
+			&.selected{
+				border-bottom:1px solid #555;
+				border-top:1px solid #e6e6e6;
+			}
+			label{
+				//display: inline-block;
+				//padding: 4px 10px;
+			}
+		}
+	}
 }