Adaptive popup size for FieldDropdowns (#1897)

Replace the fixed dropdown height with one responsive to the document's viewport.

This is adapted from Bohdan-Tereta's proposed solution:
https://github.com/google/blockly/pull/1483#issuecomment-381638639

It is sub-optimal, in that is does not adapt to field height (variable
due to workspace zoom), and it does not fully utilize the space above
or below the field if the block is near the top or the bottom.
This commit is contained in:
Andrew n marshall
2018-05-31 16:37:09 -07:00
committed by GitHub
parent 15817e78a1
commit e9aae34388
2 changed files with 6 additions and 8 deletions

View File

@@ -567,9 +567,6 @@ Blockly.Css.CONTENT = [
'.blocklyDropdownMenu {',
'padding: 0 !important;',
/* max-height value is same as the constant
* Blockly.FieldDropdown.MAX_MENU_HEIGHT defined in field_dropdown.js. */
'max-height: 300px !important;',
'}',
/* Override the default Closure URL. */

View File

@@ -84,10 +84,9 @@ Blockly.FieldDropdown.fromJson = function(options) {
Blockly.FieldDropdown.CHECKMARK_OVERHANG = 25;
/**
* Maximum height of the dropdown menu,it's also referenced in css.js as
* part of .blocklyDropdownMenu.
* Maximum height of the dropdown menu, as a percentage of the viewport height.
*/
Blockly.FieldDropdown.MAX_MENU_HEIGHT = 300;
Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH = 0.45;
/**
* Android can't (in 2014) display "▾", so use "▼" instead.
@@ -258,8 +257,10 @@ Blockly.FieldDropdown.prototype.positionMenu_ = function(menu) {
this.createWidget_(menu);
var menuSize = Blockly.utils.uiMenu.getSize(menu);
if (menuSize.height > Blockly.FieldDropdown.MAX_MENU_HEIGHT) {
menuSize.height = Blockly.FieldDropdown.MAX_MENU_HEIGHT;
var menuMaxHeightPx = Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH
* document.documentElement.clientHeight;
if (menuSize.height > menuMaxHeightPx) {
menuSize.height = menuMaxHeightPx;
}
if (this.sourceBlock_.RTL) {