Skip to content

Commit

Permalink
fix: fix styling of dropdown menus (#152)
Browse files Browse the repository at this point in the history 
* chore: remove block definitions monkeypatched by scratch-gui

* refactor: use block styles instead of colors to color blocks

* fix: fix highlighting of dropdown fields in shadow blocks

* fix: prevent white hover highlight on non-shadow dropdown fields

* fix: make selected dropdown color changes more robust

* chore: remove duplicative sound colors

* refactor: move block colors into a custom theme

* chore: condense placeholder block definitions
  • Loading branch information
@gonfunko
gonfunko authored Sep 3, 2024
1 parent 8e165ce commit 0e80277
Show file tree
Hide file tree
Showing 17 changed files with 213 additions and 439 deletions.
31 changes: 5 additions & 26 deletions src/blocks/control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@

import * as Blockly from "blockly/core";
import { Categories } from "../categories.js";
import { Colours } from "../colours.js";

Blockly.Blocks["control_forever"] = {
/**
Expand Down Expand Up @@ -198,12 +197,7 @@ Blockly.Blocks["control_stop"] = {
this.appendDummyInput()
.appendField(Blockly.Msg.CONTROL_STOP)
.appendField(stopDropdown, "STOP_OPTION");
this.setColour(
Colours.control.primary,
Colours.control.secondary,
Colours.control.tertiary,
Colours.control.quaternary
);
this.setStyle("colours_control");
this.setPreviousStatement(true);
},
};
Expand Down Expand Up @@ -381,25 +375,10 @@ Blockly.Blocks["control_start_as_clone"] = {
},
};

Blockly.Blocks["control_create_clone_of_menu"] = {
/**
* Create-clone drop-down menu.
* @this Blockly.Block
*/
init: function () {
this.jsonInit({
message0: "%1",
args0: [
{
type: "field_dropdown",
name: "CLONE_OPTION",
options: [[Blockly.Msg.CONTROL_CREATECLONEOF_MYSELF, "_myself_"]],
},
],
extensions: ["colours_control", "output_string"],
});
},
};
/**
* Create-clone drop-down menu. Populated dynamically by scratch-gui.
*/
Blockly.Blocks["control_create_clone_of_menu"] = {};

Blockly.Blocks["control_create_clone_of"] = {
/**
Expand Down
25 changes: 5 additions & 20 deletions src/blocks/event.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,26 +142,11 @@ Blockly.Blocks["event_whenbroadcastreceived"] = {
},
};

Blockly.Blocks["event_whenbackdropswitchesto"] = {
/**
* Block for when the current backdrop switched to a selected backdrop.
* @this Blockly.Block
*/
init: function () {
this.jsonInit({
message0: Blockly.Msg.EVENT_WHENBACKDROPSWITCHESTO,
args0: [
{
type: "field_dropdown",
name: "BACKDROP",
options: [["backdrop1", "BACKDROP1"]],
},
],
category: Categories.event,
extensions: ["colours_event", "shape_hat"],
});
},
};
/**
* Block for when the current backdrop switched to a selected backdrop.
* Populated dynamically by scratch-gui.
*/
Blockly.Blocks["event_whenbackdropswitchesto"] = {};

Blockly.Blocks["event_whengreaterthan"] = {
/**
Expand Down
50 changes: 8 additions & 42 deletions src/blocks/looks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,28 +339,10 @@ Blockly.Blocks["looks_setstretchto"] = {
},
};

Blockly.Blocks["looks_costume"] = {
/**
* Costumes drop-down menu.
* @this Blockly.Block
*/
init: function () {
this.jsonInit({
message0: "%1",
args0: [
{
type: "field_dropdown",
name: "COSTUME",
options: [
["costume1", "COSTUME1"],
["costume2", "COSTUME2"],
],
},
],
extensions: ["colours_looks", "output_string"],
});
},
};
/**
* Costumes drop-down menu. Populated dynamically by scratch-gui.
*/
Blockly.Blocks["looks_costume"] = {};

Blockly.Blocks["looks_switchcostumeto"] = {
/**
Expand Down Expand Up @@ -416,26 +398,10 @@ Blockly.Blocks["looks_switchbackdropto"] = {
},
};

Blockly.Blocks["looks_backdrops"] = {
/**
* Backdrop list
* @this Blockly.Block
*/
init: function () {
this.jsonInit({
id: "looks_backdrops",
message0: "%1",
args0: [
{
type: "field_dropdown",
name: "BACKDROP",
options: [["backdrop1", "BACKDROP1"]],
},
],
extensions: ["colours_looks", "output_string"],
});
},
};
/**
* Backdrop list. Populated dynamically by scratch-gui.
*/
Blockly.Blocks["looks_backdrops"] = {};

Blockly.Blocks["looks_gotofrontback"] = {
/**
Expand Down
26 changes: 5 additions & 21 deletions src/blocks/math.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
* @author q.neutron@gmail.com (Quynh Neutron)
*/
import * as Blockly from "blockly/core";
import { Colours } from "../colours.js";
import * as Constants from "../constants.js";

Blockly.Blocks["math_number"] = {
Expand All @@ -43,10 +42,7 @@ Blockly.Blocks["math_number"] = {
],
output: "Number",
outputShape: Constants.OUTPUT_SHAPE_ROUND,
colour: Colours.textField,
colourSecondary: Colours.textField,
colourTertiary: Colours.textField,
colourQuaternary: Colours.textField,
extensions: ["colours_textfield"],
});
},
};
Expand All @@ -68,10 +64,7 @@ Blockly.Blocks["math_integer"] = {
],
output: "Number",
outputShape: Constants.OUTPUT_SHAPE_ROUND,
colour: Colours.textField,
colourSecondary: Colours.textField,
colourTertiary: Colours.textField,
colourQuaternary: Colours.textField,
extensions: ["colours_textfield"],
});
},
};
Expand All @@ -94,10 +87,7 @@ Blockly.Blocks["math_whole_number"] = {
],
output: "Number",
outputShape: Constants.OUTPUT_SHAPE_ROUND,
colour: Colours.textField,
colourSecondary: Colours.textField,
colourTertiary: Colours.textField,
colourQuaternary: Colours.textField,
extensions: ["colours_textfield"],
});
},
};
Expand All @@ -119,10 +109,7 @@ Blockly.Blocks["math_positive_number"] = {
],
output: "Number",
outputShape: Constants.OUTPUT_SHAPE_ROUND,
colour: Colours.textField,
colourSecondary: Colours.textField,
colourTertiary: Colours.textField,
colourQuaternary: Colours.textField,
extensions: ["colours_textfield"],
});
},
};
Expand All @@ -144,10 +131,7 @@ Blockly.Blocks["math_angle"] = {
],
output: "Number",
outputShape: Constants.OUTPUT_SHAPE_ROUND,
colour: Colours.textField,
colourSecondary: Colours.textField,
colourTertiary: Colours.textField,
colourQuaternary: Colours.textField,
extensions: ["colours_textfield"],
});
},
};
78 changes: 12 additions & 66 deletions src/blocks/motion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,28 +115,10 @@ Blockly.Blocks["motion_pointindirection"] = {
},
};

Blockly.Blocks["motion_pointtowards_menu"] = {
/**
* Point towards drop-down menu.
* @this Blockly.Block
*/
init: function () {
this.jsonInit({
message0: "%1",
args0: [
{
type: "field_dropdown",
name: "TOWARDS",
options: [
[Blockly.Msg.MOTION_POINTTOWARDS_POINTER, "_mouse_"],
[Blockly.Msg.MOTION_POINTTOWARDS_RANDOM, "_random_"],
],
},
],
extensions: ["colours_motion", "output_string"],
});
},
};
/**
* Point towards drop-down menu. Populated dynamically by scratch-gui.
*/
Blockly.Blocks["motion_pointtowards_menu"] = {};

Blockly.Blocks["motion_pointtowards"] = {
/**
Expand All @@ -158,28 +140,10 @@ Blockly.Blocks["motion_pointtowards"] = {
},
};

Blockly.Blocks["motion_goto_menu"] = {
/**
* Go to drop-down menu.
* @this Blockly.Block
*/
init: function () {
this.jsonInit({
message0: "%1",
args0: [
{
type: "field_dropdown",
name: "TO",
options: [
[Blockly.Msg.MOTION_GOTO_POINTER, "_mouse_"],
[Blockly.Msg.MOTION_GOTO_RANDOM, "_random_"],
],
},
],
extensions: ["colours_motion", "output_string"],
});
},
};
/**
* Go to drop-down menu. Populated dynamically by scratch-gui.
*/
Blockly.Blocks["motion_goto_menu"] = {};

Blockly.Blocks["motion_gotoxy"] = {
/**
Expand Down Expand Up @@ -253,28 +217,10 @@ Blockly.Blocks["motion_glidesecstoxy"] = {
},
};

Blockly.Blocks["motion_glideto_menu"] = {
/**
* Glide to drop-down menu
* @this Blockly.Block
*/
init: function () {
this.jsonInit({
message0: "%1",
args0: [
{
type: "field_dropdown",
name: "TO",
options: [
[Blockly.Msg.MOTION_GLIDETO_POINTER, "_mouse_"],
[Blockly.Msg.MOTION_GLIDETO_RANDOM, "_random_"],
],
},
],
extensions: ["colours_motion", "output_string"],
});
},
};
/**
* Glide to drop-down menu. Populated dynamically by scratch-gui.
*/
Blockly.Blocks["motion_glideto_menu"] = {};

Blockly.Blocks["motion_glideto"] = {
/**
Expand Down
6 changes: 1 addition & 5 deletions src/blocks/note.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
* @author ericr@media.mit.edu (Eric Rosenbaum)
*/
import * as Blockly from "blockly/core";
import { Colours } from "../colours.js";
import * as Constants from "../constants.js";

Blockly.Blocks["note"] = {
Expand All @@ -43,10 +42,7 @@ Blockly.Blocks["note"] = {
],
outputShape: Constants.OUTPUT_SHAPE_ROUND,
output: "Number",
colour: Colours.textField,
colourSecondary: Colours.textField,
colourTertiary: Colours.textField,
colourQuaternary: Colours.textField,
extensions: ["colours_textfield"],
});
},
};
13 changes: 2 additions & 11 deletions src/blocks/procedures.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
*/

import * as Blockly from "blockly/core";
import { Colours } from "../colours.js";
import { FieldTextInputRemovable } from "../fields/field_textinput_removable.js";

class DuplicateOnDragDraggable {
Expand Down Expand Up @@ -984,11 +983,7 @@ Blockly.Blocks["argument_editor_boolean"] = {
text: "foo",
},
],
colour: Colours.textField,
colourSecondary: Colours.textField,
colourTertiary: Colours.textField,
colourQuaternary: Colours.textField,
extensions: ["output_boolean"],
extensions: ["colours_textfield", "output_boolean"],
});

// Exist on declaration and arguments editors, with different implementations.
Expand All @@ -1007,11 +1002,7 @@ Blockly.Blocks["argument_editor_string_number"] = {
text: "foo",
},
],
colour: Colours.textField,
colourSecondary: Colours.textField,
colourTertiary: Colours.textField,
colourQuaternary: Colours.textField,
extensions: ["output_number", "output_string"],
extensions: ["colours_textfield", "output_number", "output_string"],
});

// Exist on declaration and arguments editors, with different implementations.
Expand Down
Loading

0 comments on commit 0e80277

Please sign in to comment.