Draw squares for non-droppable dropdown fields (#551)

This commit is contained in:
Tim Mickel 2016-07-27 16:29:02 -04:00 committed by GitHub
parent 6006f24801
commit b4826b4065
4 changed files with 32 additions and 8 deletions

View file

@ -332,6 +332,12 @@ Blockly.BlockSvg.FIELD_WIDTH = 6 * Blockly.BlockSvg.GRID_UNIT;
*/
Blockly.BlockSvg.EDITABLE_FIELD_PADDING = 6;
/**
* Square box field padding (left/right of the text).
* @const
*/
Blockly.BlockSvg.BOX_FIELD_PADDING = 3 * Blockly.BlockSvg.GRID_UNIT;
/**
* Minimum width of user inputs during editing
* @const

View file

@ -392,8 +392,7 @@ Blockly.Css.CONTENT = [
'.blocklyNonEditableText>rect,',
'.blocklyEditableText>rect {',
'fill: #fff;',
'fill-opacity: .6;',
'fill-opacity: 0;',
'}',
'.blocklyNonEditableText>text,',
@ -401,11 +400,6 @@ Blockly.Css.CONTENT = [
'fill: $colour_text;',
'}',
'.blocklyEditableText:hover>rect {',
'stroke: #fff;',
'stroke-width: 2;',
'}',
'.blocklyDropdownText {',
'fill: #fff !important;',
'}',

View file

@ -307,6 +307,10 @@ Blockly.Field.prototype.render_ = function() {
// Add padding to left and right of text.
width += Blockly.BlockSvg.EDITABLE_FIELD_PADDING;
}
if (this.box_) {
// Add padding to any drawn box.
width += Blockly.BlockSvg.BOX_FIELD_PADDING;
}
// Update text centering, based on newly calculated width.
var centerTextX = width / 2;
// In a text-editing shadow block's field,
@ -332,6 +336,11 @@ Blockly.Field.prototype.render_ = function() {
var width = 0;
}
this.size_.width = width;
// Update any drawn box to the correct width and height.
if (this.box_) {
this.box_.setAttribute('width', this.size_.width);
this.box_.setAttribute('height', this.size_.height);
}
};
/**

View file

@ -91,6 +91,18 @@ Blockly.FieldDropdown.prototype.init = function() {
' ' + Blockly.FieldDropdown.ARROW_CHAR));
Blockly.FieldDropdown.superClass_.init.call(this);
// If not in a shadow block, draw a box.
if (!this.sourceBlock_.isShadow()) {
this.box_ = Blockly.createSvgElement('rect', {
'rx': Blockly.BlockSvg.CORNER_RADIUS,
'ry': Blockly.BlockSvg.CORNER_RADIUS,
'x': 0,
'y': 0,
'width': this.size_.width,
'height': this.size_.height,
'stroke': this.sourceBlock_.getColourTertiary()
}, this.fieldGroup_);
}
// Force a reset of the text to add the arrow.
var text = this.text_;
this.text_ = null;
@ -165,7 +177,10 @@ Blockly.FieldDropdown.prototype.showEditor_ = function() {
// Recalculate height for the total content, not only box height.
menuSize.height = menuDom.scrollHeight;
Blockly.DropDownDiv.setColour(this.sourceBlock_.parentBlock_.getColour(), this.sourceBlock_.getColourTertiary());
var primaryColour = (this.sourceBlock_.isShadow()) ?
this.sourceBlock_.parentBlock_.getColour() : this.sourceBlock_.getColour();
Blockly.DropDownDiv.setColour(primaryColour, this.sourceBlock_.getColourTertiary());
Blockly.DropDownDiv.showPositionedByBlock(this, this.sourceBlock_);
menu.setAllowAutoFocus(true);