[zelos] Set field rect background colour (#3500)

* More consistent field rect colour in zelos. Only overriding in full block fields. Fix disabled block colours.

* Use a better constant name and fix build.
This commit is contained in:
Sam El-Husseini
2019-12-10 08:31:43 -08:00
committed by GitHub
parent a779d44104
commit 63f7af115c
6 changed files with 23 additions and 14 deletions

View File

@@ -331,7 +331,8 @@ Blockly.Field.prototype.createBorderRect_ = function() {
'x': 0,
'y': 0,
'height': this.size_.height,
'width': this.size_.width
'width': this.size_.width,
'class': 'blocklyFieldRect'
}, this.fieldGroup_));
};

View File

@@ -212,6 +212,9 @@ Blockly.FieldDropdown.prototype.initView = function() {
} else {
this.createTextArrow_();
}
Blockly.utils.dom.addClass(/** @type {!SVGRectElement} */ (this.borderRect_),
'blocklyDropdownRect');
};
/**
@@ -515,8 +518,7 @@ Blockly.FieldDropdown.prototype.applyColour = function() {
this.borderRect_.setAttribute('fill',
this.sourceBlock_.style.colourTertiary);
} else {
this.borderRect_.setAttribute('fill',
this.sourceBlock_.style.colourPrimary);
this.borderRect_.setAttribute('fill', 'transparent');
}
}
// Update arrow's colour.

View File

@@ -238,9 +238,9 @@ Blockly.FieldTextInput.prototype.applyColour = function() {
if (this.borderRect_) {
this.borderRect_.setAttribute('stroke',
this.sourceBlock_.style.colourTertiary);
this.borderRect_.setAttribute('fill', '#fff');
} else if (this.sourceBlock_.isShadow()) {
this.sourceBlock_.pathObject.svgPath.setAttribute('fill', '#fff');
} else {
this.sourceBlock_.pathObject.svgPath.setAttribute('fill',
this.constants_.FIELD_BORDER_RECT_COLOUR);
}
}
};

View File

@@ -276,6 +276,13 @@ Blockly.blockRendering.ConstantProvider = function() {
*/
this.FIELD_BORDER_RECT_Y_PADDING = 3;
/**
* The backing colour of a field's border rect.
* @type {string}
* @package
*/
this.FIELD_BORDER_RECT_COLOUR = '#fff';
/**
* Field text baseline.
* This is only used if `FIELD_TEXT_BASELINE_CENTER` is false.
@@ -962,7 +969,7 @@ Blockly.blockRendering.ConstantProvider.prototype.getCSS = function(name) {
'}',
selector + ' .blocklyNonEditableText>rect,',
selector + ' .blocklyEditableText>rect {',
'fill: #fff;',
'fill: ' + this.FIELD_BORDER_RECT_COLOUR + ';',
'fill-opacity: .6;',
'stroke: none;',
'}',

View File

@@ -717,6 +717,10 @@ Blockly.zelos.ConstantProvider.prototype.getCSS = function(name) {
'font-size: ' + this.FIELD_TEXT_FONTSIZE + 'pt;',
'font-weight: ' + this.FIELD_TEXT_FONTWEIGHT + ';',
'}',
selector + ' .blocklyNonEditableText>rect:not(.blocklyDropdownRect),',
selector + ' .blocklyEditableText>rect:not(.blocklyDropdownRect) {',
'fill: ' + this.FIELD_BORDER_RECT_COLOUR + ';',
'}',
selector + ' .blocklyNonEditableText>text,',
selector + ' .blocklyEditableText>text,',
selector + ' .blocklyNonEditableText>g>text,',

View File

@@ -104,12 +104,6 @@ Blockly.zelos.PathObject.prototype.applyColour = function(block) {
if (block.isShadow() && block.getParent()) {
this.svgPath.setAttribute('stroke', block.getParent().style.colourTertiary);
}
// Apply colour to outlines.
for (var i = 0, keys = Object.keys(this.outlines_),
key; (key = keys[i]); i++) {
this.outlines_[key].setAttribute('fill', this.style.colourTertiary);
}
};
/**
@@ -135,6 +129,8 @@ Blockly.zelos.PathObject.prototype.updateDisabled_ = function(
if (disabled) {
this.outlines_[key].setAttribute('fill',
'url(#' + this.constants_.disabledPatternId + ')');
} else {
this.outlines_[key].setAttribute('fill', this.style.colourTertiary);
}
}
};
@@ -233,7 +229,6 @@ Blockly.zelos.PathObject.prototype.endDrawing = function() {
Blockly.zelos.PathObject.prototype.setOutlinePath = function(name, pathString) {
var outline = this.getOutlinePath_(name);
outline.setAttribute('d', pathString);
outline.setAttribute('fill', this.style.colourTertiary);
};
/**