ENHANCEMENT: style tree drop down field, and search by id.

Add javascript to allow only one or the other to be active (this needs to be fixed)

css/DMSMainCMS.css

@@ -14,5 +14,14 @@
 .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; }
 
+#Main_FromtheCMS .document-add-existing input { position: absolute; z-index: 9999; top: 70px; width: 388px; padding: 9px 7px; border-bottom-right-radius: 0; border-top-right-radius: 0; }
+#Main_FromtheCMS .document-add-existing input.disable { color: #C0C0C2; text-shadow: 0 -1px 0 white; background: #EEE; box-shadow: inset 0 1px 8px 0 #C4C4C4; }
+#Main_FromtheCMS .document-add-existing .treedropdownfield-toggle-panel-link { padding: 5px 9px 9px; }
+#Main_FromtheCMS .document-add-existing .treedropdownfield-title { width: auto; }
+#Main_FromtheCMS .document-add-existing .treedropdownfield-toggle-panel-link a { display: inline-block; top: 4px; position: relative; }
+#Main_FromtheCMS .document-add-existing .document-list { position: absolute; z-index: 9999; width: 386px; border: 1px solid #DDD; background: #ffffff; box-shadow: 0 2px 4px 1px #DDD; max-height: 300px; overflow: scroll; }
+#Main_FromtheCMS .document-add-existing .document-list ul li { display: block; line-height: 18px; padding: 4px 8px; border: 1px solid #FFF; }
+#Main_FromtheCMS .document-add-existing .document-list ul li:hover { border: 1px solid #CCC; border-radius: 4px; background: rgba(203, 203, 203, 0.4); }
+
 #Form_EditForm_Documents { padding: 1em 0; }
 #Form_EditForm_Documents input[name="filter[LastChanged]"] { display: none; }

javascript/DMSDocumentAddExistingField.js

@@ -45,9 +45,79 @@
 			}
 		});
 
+		// Add label to tree drop down button
+		$('.document-add-existing .treedropdownfield-toggle-panel-link').entwine({
+			onmatch: function() {
+				this.prepend('<span>Browse by page</span>');
+			}
+		});
+
+		// TODO - If the treedropdown field is open then disable the search field
+		//		  else, make this search field enabled 
+		$('.document-add-existing .TreeDropdownField').entwine({
+			onmatch: function(event) {
+				// Not really sure what var self = this does, but thought it looked cool :)
+				var self = this;
+				console.log('Ive found you');
+				// If dropdownfield-panel is visible
+				if ($(this).find('.treedropdownfield-panel').is(':visible')) {
+					// Add border for testing
+					$(this).css('border', '2px solid blue');
+					// Then disable search field
+					self.closest('.document-add-existing').find('.document-autocomplete').prop('disabled', true);
+					console.log('Disabling');
+				}
+				else{
+					// Add border colour for testing purposes only
+					self.css('border', '2px solid red');
+					// Enable search field
+					$(this).closest('.document-add-existing').find('.document-autocomplete').prop('disabled', false);
+					console.log('Ok you can work');
+				}
+			}
+		});
+
+		//These are some test but I don't think they work or accomplish the function that I want
+
+		// When clicking on the tree dropdown button
+		// Disable the search input
+/*		$('.treedropdownfield-toggle-panel-link').entwine({
+			onclick: function() {
+				//$(this).closest('.document-add-existing').find('.document-autocomplete').addClass('disable');
+				$(this).closest('.document-add-existing').find('.document-autocomplete').prop('disabled', true);
+			}
+		});*/
+
+/*		$('.treedropdownfield-toggle-panel-link').entwine({
+			onclick: function() {
+				var self = this;
+
+				if ($(this).hasClass('treedropdownfield-open-tree')) {
+					$(this).css('border', '2px solid blue');
+					self.closest('.document-add-existing').find('.document-autocomplete').prop('disabled', true);
+					console.log('Disabling');
+				}
+				else{
+					self.css('border', '2px solid red');
+					$(this).closest('.document-add-existing').find('.document-autocomplete').prop('disabled', false);
+					console.log('Ok you can work');
+				}
+			}
+		});*/
+
+		// TODO - This will become redundant if the above function works
+		// When clicking on the search input this removes the disabled state
+		$('.document-add-existing .document-autocomplete').entwine({
+			onclick: function() {
+				this.removeClass('disable');
+			}
+		});
+
+		//TODO - When documents load in the document list. Toggle the visibilty of this. By default it should be hidden
 		$('.document-add-existing input[name=PageSelector]').entwine({
 			onchange: function(event) {
 				$(this).closest('.document-add-existing').find('.document-list').load('admin/pages/adddocument/documentlist?pageID=' + $(this).val());
+				$(this).closest('.document-add-existing').find('.document-list').toggle();
 			}
 		});
 

scss/DMSMainCMS.scss

@@ -57,6 +57,62 @@ $gf_colour_zebra: #F0F4F7;
 	}
 }
 
+#Main_FromtheCMS{
+	.document-add-existing{
+		input{
+			position: absolute;
+			z-index: 9999;
+			top: 70px;
+			width: 388px;
+			padding: 9px 7px;
+			border-bottom-right-radius:0;
+			border-top-right-radius:0;
+			&.disable{
+				color: #C0C0C2;
+				text-shadow: 0 -1px 0 #FFF;
+				background: #EEE;
+				box-shadow: inset 0 1px 8px 0 #C4C4C4;
+			}
+		}
+		.treedropdownfield-toggle-panel-link{
+			padding: 5px 9px 9px;
+		}
+		.treedropdownfield-title{
+			width: auto;
+		}
+		.treedropdownfield-toggle-panel-link a{
+			display: inline-block;
+			top: 4px;
+			position: relative;
+		}
+		.document-list{
+			position: absolute;
+			z-index: 9999;
+			width: 386px;
+			border: 1px solid #DDD;
+			background: #ffffff;
+			//display: none;
+			box-shadow:0 2px 4px 1px #DDD;
+			max-height:300px;
+			overflow:scroll;
+			ul{
+				li{
+					display: block;
+					line-height:18px;
+					padding: 4px 8px;
+					border: 1px solid #FFF;
+					&:hover{
+						border: 1px solid #CCC;
+						border-radius: 4px;
+						background: rgba(203, 203, 203, 0.4);
+						//background: #DADADA url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
+						//background: rgba(0,255,0,0.6);
+					}
+				}
+			}
+		}
+	}
+}
 
 #Form_EditForm_Documents {
 	padding: 1em 0;

templates/DMSDocumentAddExistingField.ss

@@ -9,7 +9,7 @@
 		</h3>
 
 		<input class="document-autocomplete text" type="text" placeholder="Search by ID or filename" />
-		<span>or Add from page</span>
+		<!-- <span>or Add from page</span> -->
 		$fieldByName(PageSelector)
 
 		<div class="document-list">