[Zelos] apply Colour (#3465)

* Only apply colour from a single entry point. Zelos rendering apply colour

core/block_svg.js

@@ -359,6 +359,8 @@ Blockly.BlockSvg.prototype.setParent = function(newParent) {
     this.workspace.getCanvas().appendChild(svgRoot);
     this.translate(oldXY.x, oldXY.y);
   }
+
+  this.applyColour();
 };
 
 /**
@@ -970,12 +972,11 @@ Blockly.BlockSvg.prototype.dispose = function(healStack, animate) {
  * @package
  */
 Blockly.BlockSvg.prototype.applyColour = function() {
-  if (!this.isEnabled() || !this.rendered) {
-    // Disabled blocks and non-rendered blocks don't have colour.
+  if (!this.rendered) {
+    // Non-rendered blocks don't have colour.
     return;
   }
-
-  this.pathObject.applyColour(this.isShadow());
+  this.pathObject.applyColour(this);
 
   var icons = this.getIcons();
   for (var i = 0; i < icons.length; i++) {
@@ -993,9 +994,8 @@ Blockly.BlockSvg.prototype.applyColour = function() {
  * Enable or disable a block.
  */
 Blockly.BlockSvg.prototype.updateDisabled = function() {
-  var isDisabled = !this.isEnabled() || this.getInheritedDisabled();
-  this.pathObject.updateDisabled(isDisabled, this.isShadow());
   var children = this.getChildren(false);
+  this.applyColour();
   for (var i = 0, child; (child = children[i]); i++) {
     child.updateDisabled();
   }

core/field_textinput.js

@@ -238,6 +238,22 @@ Blockly.FieldTextInput.prototype.doValueUpdate_ = function(newValue) {
   }
 };
 
+/**
+ * Updates text field to match the colour/style of the block.
+ * @package
+ */
+Blockly.FieldTextInput.prototype.applyColour = function() {
+  if (this.sourceBlock_ && this.constants_.FULL_BLOCK_FIELDS) {
+    if (this.sourceBlock_.isShadow()) {
+      this.sourceBlock_.pathObject.svgPath.setAttribute('fill', '#fff');
+    } else if (this.borderRect_) {
+      this.borderRect_.setAttribute('stroke',
+          this.sourceBlock_.style.colourTertiary);
+      this.borderRect_.setAttribute('fill', '#fff');
+    }
+  }
+};
+
 /**
  * Updates the colour of the htmlInput given the current validity of the
  * field's value.

core/renderers/common/i_path_object.js

@@ -48,7 +48,7 @@ Blockly.blockRendering.IPathObject.prototype.setPath;
 /**
  * Apply the stored colours to the block's path, taking into account whether
  * the paths belong to a shadow block.
- * @param {boolean} isShadow True if the block is a shadow block.
+ * @param {!Blockly.Block} block The source block.
  * @package
  */
 Blockly.blockRendering.IPathObject.prototype.applyColour;
@@ -90,14 +90,6 @@ Blockly.blockRendering.IPathObject.prototype.setMarkerSvg;
  */
 Blockly.blockRendering.IPathObject.prototype.updateHighlighted;
 
-/**
- * Set whether the block shows a disable pattern or not.
- * @param {boolean} disabled True if disabled.
- * @param {boolean} isShadow True if the block is a shadow block.
- * @package
- */
-Blockly.blockRendering.IPathObject.prototype.updateDisabled;
-
 /**
  * Add or remove styling showing that a block is selected.
  * @param {boolean} enable True if selection is enabled, false otherwise.

core/renderers/common/path_object.js

@@ -139,17 +139,15 @@ Blockly.blockRendering.PathObject.prototype.setMarkerSvg = function(markerSvg) {
 /**
  * Apply the stored colours to the block's path, taking into account whether
  * the paths belong to a shadow block.
- * @param {boolean} isShadow True if the block is a shadow block.
+ * @param {!Blockly.Block} block The source block.
  * @package
  */
-Blockly.blockRendering.PathObject.prototype.applyColour = function(isShadow) {
-  if (isShadow) {
-    this.svgPath.setAttribute('stroke', 'none');
-    this.svgPath.setAttribute('fill', this.style.colourSecondary);
-  } else {
-    this.svgPath.setAttribute('stroke', this.style.colourTertiary);
-    this.svgPath.setAttribute('fill', this.style.colourPrimary);
-  }
+Blockly.blockRendering.PathObject.prototype.applyColour = function(block) {
+  this.svgPath.setAttribute('stroke', this.style.colourTertiary);
+  this.svgPath.setAttribute('fill', this.style.colourPrimary);
+
+  this.updateShadow_(block.isShadow());
+  this.updateDisabled_(!block.isEnabled() || block.getInheritedDisabled());
 };
 
 /**
@@ -196,20 +194,28 @@ Blockly.blockRendering.PathObject.prototype.updateHighlighted = function(
 };
 
 /**
- * Set whether the block shows a disable pattern or not.
- * @param {boolean} disabled True if disabled.
- * @param {boolean} isShadow True if the block is a shadow block.
- * @package
+ * Updates the look of the block to reflect a shadow state.
+ * @param {boolean} shadow True if the block is a shadow block.
+ * @protected
  */
-Blockly.blockRendering.PathObject.prototype.updateDisabled = function(disabled,
-    isShadow) {
+Blockly.blockRendering.PathObject.prototype.updateShadow_ = function(shadow) {
+  if (shadow) {
+    this.svgPath.setAttribute('stroke', 'none');
+    this.svgPath.setAttribute('fill', this.style.colourSecondary);
+  }
+};
 
+/**
+ * Updates the look of the block to reflect a disabled state.
+ * @param {boolean} disabled True if disabled.
+ * @protected
+ */
+Blockly.blockRendering.PathObject.prototype.updateDisabled_ = function(
+    disabled) {
   this.setClass_('blocklyDisabled', disabled);
   if (disabled) {
     this.svgPath.setAttribute('fill',
         'url(#' + this.constants_.disabledPatternId + ')');
-  } else {
-    this.applyColour(isShadow);
   }
 };
 

core/renderers/geras/path_object.js

@@ -124,20 +124,15 @@ Blockly.geras.PathObject.prototype.flipRTL = function() {
 /**
  * @override
  */
-Blockly.geras.PathObject.prototype.applyColour = function(isShadow) {
-  if (isShadow) {
-    this.svgPathLight.style.display = 'none';
-    this.svgPathDark.setAttribute('fill', this.style.colourSecondary);
-    this.svgPath.setAttribute('stroke', 'none');
-    this.svgPath.setAttribute('fill', this.style.colourSecondary);
-  } else {
-    this.svgPathLight.style.display = '';
-    this.svgPathDark.style.display = '';
-    this.svgPath.setAttribute('stroke', 'none');
-    this.svgPathLight.setAttribute('stroke', this.style.colourTertiary);
-    this.svgPathDark.setAttribute('fill', this.colourDark);
-    this.svgPath.setAttribute('fill', this.style.colourPrimary);
-  }
+Blockly.geras.PathObject.prototype.applyColour = function(block) {
+  this.svgPathLight.style.display = '';
+  this.svgPathDark.style.display = '';
+  this.svgPathLight.setAttribute('stroke', this.style.colourTertiary);
+  this.svgPathDark.setAttribute('fill', this.colourDark);
+
+  Blockly.geras.PathObject.superClass_.applyColour.call(this, block);
+  
+  this.svgPath.setAttribute('stroke', 'none');
 };
 
 /**
@@ -167,12 +162,21 @@ Blockly.geras.PathObject.prototype.updateHighlighted = function(highlighted) {
 /**
  * @override
  */
-Blockly.geras.PathObject.prototype.updateDisabled = function(
-    disabled, isShadow) {
-  if (disabled) {
-    this.svgPath.setAttribute('fill',
-        'url(#' + this.constants_.disabledPatternId + ')');
-  } else {
-    this.applyColour(isShadow);
+Blockly.geras.PathObject.prototype.updateShadow_ = function(shadow) {
+  if (shadow) {
+    this.svgPathLight.style.display = 'none';
+    this.svgPathDark.setAttribute('fill', this.style.colourSecondary);
+    this.svgPath.setAttribute('stroke', 'none');
+    this.svgPath.setAttribute('fill', this.style.colourSecondary);
+  }
+};
+
+/**
+ * @override
+ */
+Blockly.geras.PathObject.prototype.updateDisabled_ = function(disabled) {
+  Blockly.geras.PathObject.superClass_.updateDisabled_.call(this, disabled);
+  if (disabled) {
+    this.svgPath.setAttribute('stroke', 'none');
   }
 };

core/renderers/zelos/path_object.js

@@ -85,6 +85,23 @@ Blockly.zelos.PathObject.prototype.setPath = function(pathString) {
   }
 };
 
+/**
+ * @override
+ */
+Blockly.zelos.PathObject.prototype.applyColour = function(block) {
+  Blockly.zelos.PathObject.superClass_.applyColour.call(this, block);
+  // Set shadow stroke colour.
+  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);
+  }
+};
+
 /**
  * @override
  */
@@ -97,6 +114,21 @@ Blockly.zelos.PathObject.prototype.flipRTL = function() {
   }
 };
 
+/**
+ * @override
+ */
+Blockly.zelos.PathObject.prototype.updateDisabled_ = function(
+    disabled) {
+  Blockly.zelos.PathObject.superClass_.updateDisabled_.call(this, disabled);
+  for (var i = 0, keys = Object.keys(this.outlines_),
+    key; (key = keys[i]); i++) {
+    if (disabled) {
+      this.outlines_[key].setAttribute('fill',
+          'url(#' + this.constants_.disabledPatternId + ')');
+    }
+  }
+};
+
 /**
  * @override
  */

core/renderers/zelos/renderer.js

@@ -139,10 +139,18 @@ Blockly.zelos.Renderer.prototype.getCSS_ = function() {
       'font-size: ' + constants.FIELD_TEXT_FONTSIZE + 'pt;',
       'font-weight: ' + constants.FIELD_TEXT_FONTWEIGHT + ';',
     '}',
+    selector + ' .blocklyNonEditableText>text,',
+    selector + ' .blocklyEditableText>text,',
+    selector + ' .blocklyNonEditableText>g>text,',
+    selector + ' .blocklyEditableText>g>text {',
+      'fill: #575E75;',
+    '}',
 
     // Editable field hover.
-    selector + ' .blocklyEditableText:not(.editing):hover>rect ,',
-    selector + ' .blocklyEditableText:not(.editing):hover>.blocklyPath {',
+    selector + ' .blocklyDraggable:not(.blocklyDisabled)',
+    ' .blocklyEditableText:not(.editing):hover>rect ,',
+    selector + ' .blocklyDraggable:not(.blocklyDisabled)',
+    ' .blocklyEditableText:not(.editing):hover>.blocklyPath {',
       'stroke: #fff;',
       'stroke-width: 2;',
     '}',
@@ -151,6 +159,7 @@ Blockly.zelos.Renderer.prototype.getCSS_ = function() {
     selector + ' .blocklyHtmlInput {',
       'font-family: ' + constants.FIELD_TEXT_FONTFAMILY + ';',
       'font-weight: ' + constants.FIELD_TEXT_FONTWEIGHT + ';',
+      'color: #575E75;',
     '}',
   
     // Dropdown field.