feat: add quaternary color for selected dropdowns

scratchfoundation · Mar 2, 2023 · ffcd546 · ffcd546
1 parent 69baac5
commit ffcd546
Show file tree

Hide file tree

Showing 23 changed files with 180 additions and 67 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
   };
 };