From 735ae8e48eabb58ea741289867a71928c77bc396 Mon Sep 17 00:00:00 2001 From: Ryan O'Hara Date: Fri, 17 Aug 2012 16:48:09 +1200 Subject: [PATCH] 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 | 9 +++ javascript/DMSDocumentAddExistingField.js | 70 +++++++++++++++++++++++ scss/DMSMainCMS.scss | 56 ++++++++++++++++++ templates/DMSDocumentAddExistingField.ss | 2 +- 4 files changed, 136 insertions(+), 1 deletion(-) diff --git a/css/DMSMainCMS.css b/css/DMSMainCMS.css index bca47b3..033f3b5 100644 --- a/css/DMSMainCMS.css +++ b/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; } diff --git a/javascript/DMSDocumentAddExistingField.js b/javascript/DMSDocumentAddExistingField.js index a560e16..4da899b 100644 --- a/javascript/DMSDocumentAddExistingField.js +++ b/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('Browse by page'); + } + }); + + // 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(); } }); diff --git a/scss/DMSMainCMS.scss b/scss/DMSMainCMS.scss index 0a01767..83dae8a 100644 --- a/scss/DMSMainCMS.scss +++ b/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; diff --git a/templates/DMSDocumentAddExistingField.ss b/templates/DMSDocumentAddExistingField.ss index 2b50262..ce63659 100644 --- a/templates/DMSDocumentAddExistingField.ss +++ b/templates/DMSDocumentAddExistingField.ss @@ -9,7 +9,7 @@ - or Add from page + $fieldByName(PageSelector)