tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2589 from kinglozzer/2188-treedropdownfield-overflow

Browse Source 
FIX: Allow TreeDropdownField to open upwards (fixes #2188)
This commit is contained in:
Ingo Schommer 2013-10-23 06:11:41 -07:00
commit 4d1dd1e6c0
3 changed files with 48 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/css/screen.css
View File

@ -182,6 +182,8 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
.field .TreeDropdownField { padding: 0; }
.field .TreeDropdownField .treedropdownfield-panel { border: 1px solid #b3b3b3; border-top: none; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.field .TreeDropdownField.treedropdownfield-open-tree { -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; }
.field .TreeDropdownField.treedropdownfield-with-rise { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; }
.field .TreeDropdownField.treedropdownfield-with-rise .treedropdownfield-panel { border: 1px solid #b3b3b3; border-bottom: none; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; }
.field .TreeDropdownField .badge { display: none; }
.field .dropdown select { margin-top: 8px; }
.field .chzn-container { max-width: 416px; }

15
admin/scss/_forms.scss
View File

@ -191,6 +191,21 @@ form.small .field, .field.small {
@include border-bottom-right-radius(0);
}
&.treedropdownfield-with-rise {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
.treedropdownfield-panel {
border: 1px solid lighten($color-medium-separator, 20%);
border-bottom: none;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
}
// Hide badges, as they cost too much horizontal space,
// and mess up rendering for selected node title
.badge {

33
javascript/TreeDropdownField.js
View File

@ -86,16 +86,45 @@
.removeClass('ui-icon-triangle-1-s')
.addClass('ui-icon-triangle-1-n');
if(tree.is(':empty') && !panel.hasClass('loading')) this.loadTree();
if(tree.is(':empty') && !panel.hasClass('loading')) {
this.loadTree(null, this._riseUp);
} else {
this._riseUp();
}
this.trigger('panelshow');
},
_riseUp: function() {
var container = this,
dropdown = this.getPanel(),
toggle = this.find(".treedropdownfield-toggle-panel-link"),
offsetTop = toggle.innerHeight(),
elHeight,
elPos,
endOfWindow;
if (toggle.length > 0) {
endOfWindow = ($(window).height() + $(document).scrollTop()) - toggle.innerHeight();
elPos = toggle.offset().top;
elHeight = dropdown.innerHeight();
// If the dropdown is too close to the bottom of the page, position it above the 'trigger'
if (elPos + elHeight > endOfWindow && elPos - elHeight > 0) {
container.addClass('treedropdownfield-with-rise');
offsetTop = -dropdown.outerHeight();
} else {
container.removeClass('treedropdownfield-with-rise');
}
}
dropdown.css({"top": offsetTop + "px"});
},
closePanel: function() {
jQuery('body').unbind('click', _clickTestFn);
// swap the up arrow with a down arrow
var toggle = this.find(".treedropdownfield-toggle-panel-link");
toggle.removeClass('treedropdownfield-open-tree');
this.removeClass('treedropdownfield-open-tree');
this.removeClass('treedropdownfield-open-tree treedropdownfield-with-rise');
toggle.find("a")
.removeClass('ui-icon-triangle-1-n')