From ffcd546474ee8e2790be01b97f0a9b23d74c8653 Mon Sep 17 00:00:00 2001 From: Andy O'Neill <andy@scratch.mit.edu> Date: Thu, 2 Mar 2023 13:46:07 -0500 Subject: [PATCH] feat: add quaternary color for selected dropdowns --- blocks_common/math.js | 15 +++++++---- blocks_common/note.js | 3 ++- blocks_common/text.js | 3 ++- blocks_horizontal/control.js | 15 +++++++---- blocks_horizontal/event.js | 15 +++++++---- blocks_horizontal/wedo.js | 27 ++++++++++++------- blocks_vertical/control.js | 3 ++- blocks_vertical/data.js | 8 ++---- blocks_vertical/event.js | 1 + blocks_vertical/looks.js | 2 ++ blocks_vertical/motion.js | 3 +++ blocks_vertical/procedures.js | 2 ++ blocks_vertical/sound.js | 1 + blocks_vertical/vertical_extensions.js | 13 ++++----- core/block.js | 34 ++++++++++++++++++++--- core/block_svg.js | 8 +++--- core/colours.js | 36 ++++++++++++++++--------- core/css.js | 2 +- core/field_colour.js | 4 +-- core/field_colour_slider.js | 5 ++-- core/field_dropdown.js | 4 +-- core/field_iconmenu.js | 6 +++-- tests/jsunit/block_test.js | 37 ++++++++++++++++++++++++++ 23 files changed, 180 insertions(+), 67 deletions(-) diff --git a/blocks_common/math.js b/blocks_common/math.js index 615228ff..63a95e98 100644 --- a/blocks_common/math.js +++ b/blocks_common/math.js @@ -51,7 +51,8 @@ Blockly.Blocks['math_number'] = { "outputShape": Blockly.OUTPUT_SHAPE_ROUND, "colour": Blockly.Colours.textField, "colourSecondary": Blockly.Colours.textField, - "colourTertiary": Blockly.Colours.textField + "colourTertiary": Blockly.Colours.textField, + "colourQuaternary": Blockly.Colours.textField }); } }; @@ -75,7 +76,8 @@ Blockly.Blocks['math_integer'] = { "outputShape": Blockly.OUTPUT_SHAPE_ROUND, "colour": Blockly.Colours.textField, "colourSecondary": Blockly.Colours.textField, - "colourTertiary": Blockly.Colours.textField + "colourTertiary": Blockly.Colours.textField, + "colourQuaternary": Blockly.Colours.textField }); } }; @@ -100,7 +102,8 @@ Blockly.Blocks['math_whole_number'] = { "outputShape": Blockly.OUTPUT_SHAPE_ROUND, "colour": Blockly.Colours.textField, "colourSecondary": Blockly.Colours.textField, - "colourTertiary": Blockly.Colours.textField + "colourTertiary": Blockly.Colours.textField, + "colourQuaternary": Blockly.Colours.textField }); } }; @@ -124,7 +127,8 @@ Blockly.Blocks['math_positive_number'] = { "outputShape": Blockly.OUTPUT_SHAPE_ROUND, "colour": Blockly.Colours.textField, "colourSecondary": Blockly.Colours.textField, - "colourTertiary": Blockly.Colours.textField + "colourTertiary": Blockly.Colours.textField, + "colourQuaternary": Blockly.Colours.textField }); } }; @@ -148,7 +152,8 @@ Blockly.Blocks['math_angle'] = { "outputShape": Blockly.OUTPUT_SHAPE_ROUND, "colour": Blockly.Colours.textField, "colourSecondary": Blockly.Colours.textField, - "colourTertiary": Blockly.Colours.textField + "colourTertiary": Blockly.Colours.textField, + "colourQuaternary": Blockly.Colours.textField }); } }; diff --git a/blocks_common/note.js b/blocks_common/note.js index 91ffffd5..f51ca40f 100644 --- a/blocks_common/note.js +++ b/blocks_common/note.js @@ -51,7 +51,8 @@ Blockly.Blocks['note'] = { "output": "Number", "colour": Blockly.Colours.textField, "colourSecondary": Blockly.Colours.textField, - "colourTertiary": Blockly.Colours.textField + "colourTertiary": Blockly.Colours.textField, + "colourQuaternary": Blockly.Colours.textField }); } }; diff --git a/blocks_common/text.js b/blocks_common/text.js index 1c2c57f0..484475d6 100644 --- a/blocks_common/text.js +++ b/blocks_common/text.js @@ -50,7 +50,8 @@ Blockly.Blocks['text'] = { "outputShape": Blockly.OUTPUT_SHAPE_ROUND, "colour": Blockly.Colours.textField, "colourSecondary": Blockly.Colours.textField, - "colourTertiary": Blockly.Colours.textField + "colourTertiary": Blockly.Colours.textField, + "colourQuaternary": Blockly.Colours.textField }); } }; diff --git a/blocks_horizontal/control.js b/blocks_horizontal/control.js index 8aa9418f..8fd7cf20 100644 --- a/blocks_horizontal/control.js +++ b/blocks_horizontal/control.js @@ -65,7 +65,8 @@ Blockly.Blocks['control_repeat'] = { "category": Blockly.Categories.control, "colour": Blockly.Colours.control.primary, "colourSecondary": Blockly.Colours.control.secondary, - "colourTertiary": Blockly.Colours.control.tertiary + "colourTertiary": Blockly.Colours.control.tertiary, + "colourQuaternary": Blockly.Colours.control.quaternary }); } }; @@ -99,7 +100,8 @@ Blockly.Blocks['control_forever'] = { "category": Blockly.Categories.control, "colour": Blockly.Colours.control.primary, "colourSecondary": Blockly.Colours.control.secondary, - "colourTertiary": Blockly.Colours.control.tertiary + "colourTertiary": Blockly.Colours.control.tertiary, + "colourQuaternary": Blockly.Colours.control.quaternary }); } }; @@ -139,7 +141,8 @@ Blockly.Blocks['control_repeat'] = { "category": Blockly.Categories.control, "colour": Blockly.Colours.control.primary, "colourSecondary": Blockly.Colours.control.secondary, - "colourTertiary": Blockly.Colours.control.tertiary + "colourTertiary": Blockly.Colours.control.tertiary, + "colourQuaternary": Blockly.Colours.control.quaternary }); } }; @@ -167,7 +170,8 @@ Blockly.Blocks['control_stop'] = { "category": Blockly.Categories.control, "colour": Blockly.Colours.control.primary, "colourSecondary": Blockly.Colours.control.secondary, - "colourTertiary": Blockly.Colours.control.tertiary + "colourTertiary": Blockly.Colours.control.tertiary, + "colourQuaternary": Blockly.Colours.control.quaternary }); } }; @@ -201,7 +205,8 @@ Blockly.Blocks['control_wait'] = { "category": Blockly.Categories.control, "colour": Blockly.Colours.control.primary, "colourSecondary": Blockly.Colours.control.secondary, - "colourTertiary": Blockly.Colours.control.tertiary + "colourTertiary": Blockly.Colours.control.tertiary, + "colourQuaternary": Blockly.Colours.control.quaternary }); } }; diff --git a/blocks_horizontal/event.js b/blocks_horizontal/event.js index 19a6ebab..faada4fb 100644 --- a/blocks_horizontal/event.js +++ b/blocks_horizontal/event.js @@ -54,7 +54,8 @@ Blockly.Blocks['event_whenflagclicked'] = { "category": Blockly.Categories.event, "colour": Blockly.Colours.event.primary, "colourSecondary": Blockly.Colours.event.secondary, - "colourTertiary": Blockly.Colours.event.tertiary + "colourTertiary": Blockly.Colours.event.tertiary, + "colourQuaternary": Blockly.Colours.event.quaternary }); } }; @@ -84,7 +85,8 @@ Blockly.Blocks['dropdown_whenbroadcast'] = { this.setOutput(true); this.setColour(Blockly.Colours.event.primary, Blockly.Colours.event.secondary, - Blockly.Colours.event.tertiary + Blockly.Colours.event.tertiary, + Blockly.Colours.event.quaternary ); } }; @@ -116,7 +118,8 @@ Blockly.Blocks['event_whenbroadcastreceived'] = { "category": Blockly.Categories.event, "colour": Blockly.Colours.event.primary, "colourSecondary": Blockly.Colours.event.secondary, - "colourTertiary": Blockly.Colours.event.tertiary + "colourTertiary": Blockly.Colours.event.tertiary, + "colourQuaternary": Blockly.Colours.event.quaternary }); } }; @@ -146,7 +149,8 @@ Blockly.Blocks['dropdown_broadcast'] = { this.setOutput(true); this.setColour(Blockly.Colours.event.primary, Blockly.Colours.event.secondary, - Blockly.Colours.event.tertiary + Blockly.Colours.event.tertiary, + Blockly.Colours.event.quaternary ); } }; @@ -179,7 +183,8 @@ Blockly.Blocks['event_broadcast'] = { "category": Blockly.Categories.event, "colour": Blockly.Colours.event.primary, "colourSecondary": Blockly.Colours.event.secondary, - "colourTertiary": Blockly.Colours.event.tertiary + "colourTertiary": Blockly.Colours.event.tertiary, + "colourQuaternary": Blockly.Colours.event.quaternary }); } }; diff --git a/blocks_horizontal/wedo.js b/blocks_horizontal/wedo.js index f2052aa2..723fa9db 100644 --- a/blocks_horizontal/wedo.js +++ b/blocks_horizontal/wedo.js @@ -61,7 +61,8 @@ Blockly.Blocks['dropdown_wedo_setcolor'] = { this.setOutput(true); this.setColour(Blockly.Colours.looks.primary, Blockly.Colours.looks.secondary, - Blockly.Colours.looks.tertiary + Blockly.Colours.looks.tertiary, + Blockly.Colours.looks.quaternary ); } }; @@ -94,7 +95,8 @@ Blockly.Blocks['wedo_setcolor'] = { "category": Blockly.Categories.looks, "colour": Blockly.Colours.looks.primary, "colourSecondary": Blockly.Colours.looks.secondary, - "colourTertiary": Blockly.Colours.looks.tertiary + "colourTertiary": Blockly.Colours.looks.tertiary, + "colourQuaternary": Blockly.Colours.looks.quaternary }); } }; @@ -128,7 +130,8 @@ Blockly.Blocks['wedo_motorclockwise'] = { "category": Blockly.Categories.motion, "colour": Blockly.Colours.motion.primary, "colourSecondary": Blockly.Colours.motion.secondary, - "colourTertiary": Blockly.Colours.motion.tertiary + "colourTertiary": Blockly.Colours.motion.tertiary, + "colourQuaternary": Blockly.Colours.motion.quaternary }); } }; @@ -162,7 +165,8 @@ Blockly.Blocks['wedo_motorcounterclockwise'] = { "category": Blockly.Categories.motion, "colour": Blockly.Colours.motion.primary, "colourSecondary": Blockly.Colours.motion.secondary, - "colourTertiary": Blockly.Colours.motion.tertiary + "colourTertiary": Blockly.Colours.motion.tertiary, + "colourQuaternary": Blockly.Colours.motion.quaternary }); } }; @@ -186,7 +190,8 @@ Blockly.Blocks['dropdown_wedo_motorspeed'] = { this.setOutput(true); this.setColour(Blockly.Colours.motion.primary, Blockly.Colours.motion.secondary, - Blockly.Colours.motion.tertiary + Blockly.Colours.motion.tertiary, + Blockly.Colours.motion.quaternary ); } }; @@ -219,7 +224,8 @@ Blockly.Blocks['wedo_motorspeed'] = { "category": Blockly.Categories.motion, "colour": Blockly.Colours.motion.primary, "colourSecondary": Blockly.Colours.motion.secondary, - "colourTertiary": Blockly.Colours.motion.tertiary + "colourTertiary": Blockly.Colours.motion.tertiary, + "colourQuaternary": Blockly.Colours.motion.quaternary }); } }; @@ -250,7 +256,8 @@ Blockly.Blocks['dropdown_wedo_whentilt'] = { this.setOutput(true); this.setColour(Blockly.Colours.event.primary, Blockly.Colours.event.secondary, - Blockly.Colours.event.tertiary + Blockly.Colours.event.tertiary, + Blockly.Colours.event.quaternary ); } }; @@ -282,7 +289,8 @@ Blockly.Blocks['wedo_whentilt'] = { "category": Blockly.Categories.event, "colour": Blockly.Colours.event.primary, "colourSecondary": Blockly.Colours.event.secondary, - "colourTertiary": Blockly.Colours.event.tertiary + "colourTertiary": Blockly.Colours.event.tertiary, + "colourQuaternary": Blockly.Colours.event.quaternary }); } }; @@ -310,7 +318,8 @@ Blockly.Blocks['wedo_whendistanceclose'] = { "category": Blockly.Categories.event, "colour": Blockly.Colours.event.primary, "colourSecondary": Blockly.Colours.event.secondary, - "colourTertiary": Blockly.Colours.event.tertiary + "colourTertiary": Blockly.Colours.event.tertiary, + "colourQuaternary": Blockly.Colours.event.quaternary }); } }; diff --git a/blocks_vertical/control.js b/blocks_vertical/control.js index e5bb20b5..34187458 100644 --- a/blocks_vertical/control.js +++ b/blocks_vertical/control.js @@ -209,7 +209,8 @@ Blockly.Blocks['control_stop'] = { this.setCategory(Blockly.Categories.control); this.setColour(Blockly.Colours.control.primary, Blockly.Colours.control.secondary, - Blockly.Colours.control.tertiary + Blockly.Colours.control.tertiary, + Blockly.Colours.control.quaternary ); this.setPreviousStatement(true); }, diff --git a/blocks_vertical/data.js b/blocks_vertical/data.js index a2e1df0e..726697d4 100644 --- a/blocks_vertical/data.js +++ b/blocks_vertical/data.js @@ -118,9 +118,7 @@ Blockly.Blocks['data_showvariable'] = { "previousStatement": null, "nextStatement": null, "category": Blockly.Categories.data, - "colour": Blockly.Colours.data.primary, - "colourSecondary": Blockly.Colours.data.secondary, - "colourTertiary": Blockly.Colours.data.tertiary + "extensions": ["colours_data"] }); } }; @@ -142,9 +140,7 @@ Blockly.Blocks['data_hidevariable'] = { "previousStatement": null, "nextStatement": null, "category": Blockly.Categories.data, - "colour": Blockly.Colours.data.primary, - "colourSecondary": Blockly.Colours.data.secondary, - "colourTertiary": Blockly.Colours.data.tertiary + "extensions": ["colours_data"] }); } }; diff --git a/blocks_vertical/event.js b/blocks_vertical/event.js index c51a93cb..5694893c 100644 --- a/blocks_vertical/event.js +++ b/blocks_vertical/event.js @@ -216,6 +216,7 @@ Blockly.Blocks['event_broadcast_menu'] = { "colour": Blockly.Colours.event.secondary, "colourSecondary": Blockly.Colours.event.secondary, "colourTertiary": Blockly.Colours.event.tertiary, + "colourQuaternary": Blockly.Colours.event.quaternary, "extensions": ["output_string"] }); } diff --git a/blocks_vertical/looks.js b/blocks_vertical/looks.js index 92629a6d..66482f0e 100644 --- a/blocks_vertical/looks.js +++ b/blocks_vertical/looks.js @@ -367,6 +367,7 @@ Blockly.Blocks['looks_costume'] = { "colour": Blockly.Colours.looks.secondary, "colourSecondary": Blockly.Colours.looks.secondary, "colourTertiary": Blockly.Colours.looks.tertiary, + "colourQuaternary": Blockly.Colours.looks.quaternary, "extensions": ["output_string"] }); } @@ -447,6 +448,7 @@ Blockly.Blocks['looks_backdrops'] = { "colour": Blockly.Colours.looks.secondary, "colourSecondary": Blockly.Colours.looks.secondary, "colourTertiary": Blockly.Colours.looks.tertiary, + "colourQuaternary": Blockly.Colours.looks.quaternary, "extensions": ["output_string"] }); } diff --git a/blocks_vertical/motion.js b/blocks_vertical/motion.js index b40d2b03..b4b59692 100644 --- a/blocks_vertical/motion.js +++ b/blocks_vertical/motion.js @@ -141,6 +141,7 @@ Blockly.Blocks['motion_pointtowards_menu'] = { "colour": Blockly.Colours.motion.secondary, "colourSecondary": Blockly.Colours.motion.secondary, "colourTertiary": Blockly.Colours.motion.tertiary, + "colourQuaternary": Blockly.Colours.motion.quaternary, "extensions": ["output_string"] }); } @@ -187,6 +188,7 @@ Blockly.Blocks['motion_goto_menu'] = { "colour": Blockly.Colours.motion.secondary, "colourSecondary": Blockly.Colours.motion.secondary, "colourTertiary": Blockly.Colours.motion.tertiary, + "colourQuaternary": Blockly.Colours.motion.quaternary, "extensions": ["output_string"] }); } @@ -285,6 +287,7 @@ Blockly.Blocks['motion_glideto_menu'] = { "colour": Blockly.Colours.motion.secondary, "colourSecondary": Blockly.Colours.motion.secondary, "colourTertiary": Blockly.Colours.motion.tertiary, + "colourQuaternary": Blockly.Colours.motion.quaternary, "extensions": ["output_string"] }); } diff --git a/blocks_vertical/procedures.js b/blocks_vertical/procedures.js index fc7df290..1d2d2153 100644 --- a/blocks_vertical/procedures.js +++ b/blocks_vertical/procedures.js @@ -943,6 +943,7 @@ Blockly.Blocks['argument_editor_boolean'] = { "colour": Blockly.Colours.textField, "colourSecondary": Blockly.Colours.textField, "colourTertiary": Blockly.Colours.textField, + "colourQuaternary": Blockly.Colours.textField, "extensions": ["output_boolean"] }); }, @@ -963,6 +964,7 @@ Blockly.Blocks['argument_editor_string_number'] = { "colour": Blockly.Colours.textField, "colourSecondary": Blockly.Colours.textField, "colourTertiary": Blockly.Colours.textField, + "colourQuaternary": Blockly.Colours.textField, "extensions": ["output_number", "output_string"] }); }, diff --git a/blocks_vertical/sound.js b/blocks_vertical/sound.js index d4e4e824..03c33630 100644 --- a/blocks_vertical/sound.js +++ b/blocks_vertical/sound.js @@ -59,6 +59,7 @@ Blockly.Blocks['sound_sounds_menu'] = { "colour": Blockly.Colours.sounds.secondary, "colourSecondary": Blockly.Colours.sounds.secondary, "colourTertiary": Blockly.Colours.sounds.tertiary, + "colourQuaternary": Blockly.Colours.sounds.quaternary, "extensions": ["output_string"] }); } diff --git a/blocks_vertical/vertical_extensions.js b/blocks_vertical/vertical_extensions.js index 76fe3aa5..2d6c13ad 100644 --- a/blocks_vertical/vertical_extensions.js +++ b/blocks_vertical/vertical_extensions.js @@ -35,25 +35,26 @@ goog.require('Blockly.constants'); /** * Helper function that generates an extension based on a category name. - * The generated function will set primary, secondary, and tertiary colours - * based on the category name. + * The generated function will set primary, secondary, tertiary, and quaternary + * colours based on the category name. * @param {String} category The name of the category to set colours for. * @return {function} An extension function that sets colours based on the given * category. */ Blockly.ScratchBlocks.VerticalExtensions.colourHelper = function(category) { var colours = Blockly.Colours[category]; - if (!(colours && colours.primary && colours.secondary && colours.tertiary)) { + if (!(colours && colours.primary && colours.secondary && colours.tertiary && + colours.quaternary)) { throw new Error('Could not find colours for category "' + category + '"'); } /** - * Set the primary, secondary, and tertiary colours on this block for the - * given category. + * Set the primary, secondary, tertiary, and quaternary colours on this block for + * the given category. * @this {Blockly.Block} */ return function() { this.setColourFromRawValues_(colours.primary, colours.secondary, - colours.tertiary); + colours.tertiary, colours.quaternary); }; }; diff --git a/core/block.js b/core/block.js index 88c11fb9..176cbcc5 100644 --- a/core/block.js +++ b/core/block.js @@ -238,6 +238,13 @@ Blockly.Block.prototype.colourSecondary_ = '#FF0000'; */ Blockly.Block.prototype.colourTertiary_ = '#FF0000'; +/** + * Quaternary colour of the block in '#RRGGBB' format. + * @type {string} + * @private + */ +Blockly.Block.prototype.colourQuaternary = '#FF0000'; + /** * Fill colour used to override default shadow colour behaviour. * @type {string} @@ -798,6 +805,14 @@ Blockly.Block.prototype.getColourTertiary = function() { return this.colourTertiary_; }; +/** + * Get the quaternary colour of a block. + * @return {string} #RRGGBB string. + */ +Blockly.Block.prototype.getColourQuaternary = function() { + return this.colourQuaternary_; +}; + /** * Get the shadow colour of a block. * @return {string} #RRGGBB string. @@ -849,8 +864,10 @@ Blockly.Block.prototype.makeColour_ = function(colour) { * @param {number|string} colour HSV hue value, or #RRGGBB string. * @param {number|string} colourSecondary HSV hue value, or #RRGGBB string. * @param {number|string} colourTertiary HSV hue value, or #RRGGBB string. + * @param {number|string} colourQuaternary HSV hue value, or #RRGGBB string. */ -Blockly.Block.prototype.setColour = function(colour, colourSecondary, colourTertiary) { +Blockly.Block.prototype.setColour = function(colour, colourSecondary, colourTertiary, + colourQuaternary) { this.colour_ = this.makeColour_(colour); if (colourSecondary !== undefined) { this.colourSecondary_ = this.makeColour_(colourSecondary); @@ -864,6 +881,11 @@ Blockly.Block.prototype.setColour = function(colour, colourSecondary, colourTert this.colourTertiary_ = goog.color.rgbArrayToHex( goog.color.darken(goog.color.hexToRgb(this.colour_), 0.2)); } + if (colourQuaternary !== undefined) { + this.colourQuaternary_ = this.makeColour_(colourQuaternary); + } else { + this.colourQuaternary_ = this.colourTertiary_; + } if (this.rendered) { this.updateColour(); } @@ -1364,18 +1386,22 @@ Blockly.Block.prototype.mixin = function(mixinObj, opt_disableCheck) { * contains string table references. * @param {string|?} tertiary Tertiary colour, which may be a string that * contains string table references. + * @param {string|?} quaternary Quaternary colour, which may be a string that + * contains string table references. * @private */ Blockly.Block.prototype.setColourFromRawValues_ = function(primary, secondary, - tertiary) { + tertiary, quaternary) { primary = goog.isString(primary) ? Blockly.utils.replaceMessageReferences(primary) : primary; secondary = goog.isString(secondary) ? Blockly.utils.replaceMessageReferences(secondary) : secondary; tertiary = goog.isString(tertiary) ? Blockly.utils.replaceMessageReferences(tertiary) : tertiary; + quaternary = goog.isString(quaternary) ? + Blockly.utils.replaceMessageReferences(quaternary) : quaternary; - this.setColour(primary, secondary, tertiary); + this.setColour(primary, secondary, tertiary, quaternary); }; /** @@ -1386,7 +1412,7 @@ Blockly.Block.prototype.setColourFromRawValues_ = function(primary, secondary, */ Blockly.Block.prototype.setColourFromJson_ = function(json) { this.setColourFromRawValues_(json['colour'], json['colourSecondary'], - json['colourTertiary']); + json['colourTertiary'], json['colourQuaternary']); }; /** diff --git a/core/block_svg.js b/core/block_svg.js index 73c0133c..6e24dbe8 100644 --- a/core/block_svg.js +++ b/core/block_svg.js @@ -309,7 +309,7 @@ Blockly.BlockSvg.prototype.setParent = function(newParent) { // If we are a shadow block, inherit tertiary colour. if (this.isShadow()) { this.setColour(this.getColour(), this.getColourSecondary(), - newParent.getColourTertiary()); + newParent.getColourTertiary(), this.getColourQuaternary()); } } // If we are losing a parent, we want to move our DOM element to the @@ -1060,11 +1060,13 @@ Blockly.BlockSvg.prototype.setDeleteStyle = function(enable) { * string. * @param {number|string} colourTertiary Tertiary HSV hue value, or #RRGGBB * string. + * @param {number|string} colourQuaternary Quaternary HSV hue value, or #RRGGBB + * string. */ Blockly.BlockSvg.prototype.setColour = function(colour, colourSecondary, - colourTertiary) { + colourTertiary, colourQuaternary) { Blockly.BlockSvg.superClass_.setColour.call(this, colour, colourSecondary, - colourTertiary); + colourTertiary, colourQuaternary); if (this.rendered) { this.updateColour(); diff --git a/core/colours.js b/core/colours.js index 58e4f96d..78b259c8 100644 --- a/core/colours.js +++ b/core/colours.js @@ -28,59 +28,70 @@ Blockly.Colours = { "motion": { "primary": "#4C97FF", "secondary": "#4280D7", - "tertiary": "#3373CC" + "tertiary": "#3373CC", + "quaternary": "#3373CC" }, "looks": { "primary": "#9966FF", "secondary": "#855CD6", - "tertiary": "#774DCB" + "tertiary": "#774DCB", + "quaternary": "#774DCB" }, "sounds": { "primary": "#CF63CF", "secondary": "#C94FC9", - "tertiary": "#BD42BD" + "tertiary": "#BD42BD", + "quaternary": "#BD42BD" }, "control": { "primary": "#FFAB19", "secondary": "#EC9C13", - "tertiary": "#CF8B17" + "tertiary": "#CF8B17", + "quaternary": "#CF8B17" }, "event": { "primary": "#FFBF00", "secondary": "#E6AC00", - "tertiary": "#CC9900" + "tertiary": "#CC9900", + "quaternary": "#CC9900" }, "sensing": { "primary": "#5CB1D6", "secondary": "#47A8D1", - "tertiary": "#2E8EB8" + "tertiary": "#2E8EB8", + "quaternary": "#2E8EB8" }, "pen": { "primary": "#0fBD8C", "secondary": "#0DA57A", - "tertiary": "#0B8E69" + "tertiary": "#0B8E69", + "quaternary": "#0B8E69" }, "operators": { "primary": "#59C059", "secondary": "#46B946", - "tertiary": "#389438" + "tertiary": "#389438", + "quaternary": "#389438" }, "data": { "primary": "#FF8C1A", "secondary": "#FF8000", - "tertiary": "#DB6E00" + "tertiary": "#DB6E00", + "quaternary": "#DB6E00" }, // This is not a new category, but rather for differentiation // between lists and scalar variables. "data_lists": { "primary": "#FF661A", "secondary": "#FF5500", - "tertiary": "#E64D00" + "tertiary": "#E64D00", + "quaternary": "#E64D00" }, "more": { "primary": "#FF6680", "secondary": "#FF4D6A", - "tertiary": "#FF3355" + "tertiary": "#FF3355", + "quaternary": "#FF3355" }, "text": "#FFFFFF", "workspace": "#F9F9F9", @@ -111,7 +122,8 @@ Blockly.Colours = { "numPadActiveBackground": "#435F91", "numPadText": "white", // Do not use hex here, it cannot be inlined with data-uri SVG "valueReportBackground": "#FFFFFF", - "valueReportBorder": "#AAAAAA" + "valueReportBorder": "#AAAAAA", + "menuHover": "rgba(0, 0, 0, 0.2)" }; /** diff --git a/core/css.js b/core/css.js index e46579d5..03c6bab0 100644 --- a/core/css.js +++ b/core/css.js @@ -1169,7 +1169,7 @@ Blockly.Css.CONTENT = [ '.blocklyDropDownDiv .goog-menuitem-highlight,', '.blocklyDropDownDiv .goog-menuitem-hover {', - 'background-color: rgba(0, 0, 0, 0.2);', + 'background-color: $colour_menuHover;', '}', /* State: selected/checked. */ diff --git a/core/field_colour.js b/core/field_colour.js index 58afad24..6dab2e42 100644 --- a/core/field_colour.js +++ b/core/field_colour.js @@ -123,9 +123,9 @@ Blockly.FieldColour.prototype.setValue = function(colour) { } this.colour_ = colour; if (this.sourceBlock_) { - // Set the primary, secondary and tertiary colour to this value. + // Set the primary, secondary, tertiary, and quaternary colour to this value. // The renderer expects to be able to use the secondary color as the fill for a shadow. - this.sourceBlock_.setColour(colour, colour, colour); + this.sourceBlock_.setColour(colour, colour, colour, colour); } }; diff --git a/core/field_colour_slider.js b/core/field_colour_slider.js index d8560573..331de697 100644 --- a/core/field_colour_slider.js +++ b/core/field_colour_slider.js @@ -112,9 +112,10 @@ Blockly.FieldColourSlider.prototype.setValue = function(colour) { } this.colour_ = colour; if (this.sourceBlock_) { - // Set the primary, secondary and tertiary colour to this value. + // Set the colours to this value. // The renderer expects to be able to use the secondary colour as the fill for a shadow. - this.sourceBlock_.setColour(colour, colour, this.sourceBlock_.getColourTertiary()); + this.sourceBlock_.setColour(colour, colour, this.sourceBlock_.getColourTertiary(), + this.sourceBlock_.getColourQuaternary()); } this.updateSliderHandles_(); this.updateDom_(); diff --git a/core/field_dropdown.js b/core/field_dropdown.js index 8d833c7f..627fbf89 100644 --- a/core/field_dropdown.js +++ b/core/field_dropdown.js @@ -250,9 +250,9 @@ Blockly.FieldDropdown.prototype.showEditor_ = function() { // Update colour to look selected. if (!this.disableColourChange_) { if (this.sourceBlock_.isShadow()) { - this.sourceBlock_.setShadowColour(this.sourceBlock_.getColourTertiary()); + this.sourceBlock_.setShadowColour(this.sourceBlock_.getColourQuaternary()); } else if (this.box_) { - this.box_.setAttribute('fill', this.sourceBlock_.getColourTertiary()); + this.box_.setAttribute('fill', this.sourceBlock_.getColourQuaternary()); } } }; diff --git a/core/field_iconmenu.js b/core/field_iconmenu.js index 351f8891..f5d2a83b 100644 --- a/core/field_iconmenu.js +++ b/core/field_iconmenu.js @@ -254,7 +254,8 @@ Blockly.FieldIconMenu.prototype.showEditor_ = function() { this.savedPrimary_ = this.sourceBlock_.getColour(); this.sourceBlock_.setColour(this.sourceBlock_.getColourSecondary(), this.sourceBlock_.getColourSecondary(), - this.sourceBlock_.getColourTertiary()); + this.sourceBlock_.getColourTertiary(), + this.sourceBlock_.getColourQuaternary()); var scale = this.sourceBlock_.workspace.scale; // Offset for icon-type horizontal blocks. @@ -295,7 +296,8 @@ Blockly.FieldIconMenu.prototype.onHide_ = function() { if (this.sourceBlock_) { this.sourceBlock_.setColour(this.savedPrimary_, this.sourceBlock_.getColourSecondary(), - this.sourceBlock_.getColourTertiary()); + this.sourceBlock_.getColourTertiary(), + this.sourceBlock_.getColourQuaternary()); } Blockly.DropDownDiv.content_.removeAttribute('role'); Blockly.DropDownDiv.content_.removeAttribute('aria-haspopup'); diff --git a/tests/jsunit/block_test.js b/tests/jsunit/block_test.js index bb794069..d01a1e95 100644 --- a/tests/jsunit/block_test.js +++ b/tests/jsunit/block_test.js @@ -67,3 +67,40 @@ function test_jsonInit_FieldIconMenu() { assertTrue('IconMenu field not added to block by jsonInit', block.getField(field_name) instanceof Blockly.FieldIconMenu); } + +function test_jsonInit_colors() { + var workspace = new Blockly.Workspace(); + var block_name = 'test_jsonInit_FieldDropdown_colors'; + var field_name = 'TEST_FIELD'; + var dropdown_options = [ + ['value', 'VALUE'] + ]; + + Blockly.Blocks[block_name] = { + init: function() { + this.jsonInit({ + message0: '%1', + args0: [{ + type: 'field_dropdown', + name: field_name, + options: dropdown_options + }], + output: null, + colour: '#111111', + colourSecondary: '#222222', + colourTertiary: '#333333', + colourQuaternary: '#444444' + }); + } + }; + + var block = workspace.newBlock(block_name); + var field = block.getField(field_name); + + assertEquals('Block primary colour not set', block.getColour(), '#111111'); + assertEquals('Block secondary colour not set', block.getColourSecondary(), '#222222'); + assertEquals('Block tertiary colour not set', block.getColourTertiary(), '#333333'); + assertEquals('Block quaternary colour not set', block.getColourQuaternary(), '#444444'); + + assertEquals('Source block is not correct', field.sourceBlock_, block); +}