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)
This commit is contained in:
Ryan O'Hara
parent
50263f0ef1
commit
735ae8e48e
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue