From 5a31a61ccb3159e82678365f04323893beccbcfc Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 30 Jul 2025 14:59:57 -0700 Subject: [PATCH 1/3] fix: improve rendering of `FieldMatrix` in high contrast mode --- src/fields/field_matrix.ts | 65 ++++++++++++++++++++++---------------- 1 file changed, 38 insertions(+), 27 deletions(-) diff --git a/src/fields/field_matrix.ts b/src/fields/field_matrix.ts index 336527af19..ad6afe5f37 100644 --- a/src/fields/field_matrix.ts +++ b/src/fields/field_matrix.ts @@ -215,7 +215,7 @@ class FieldMatrix extends Blockly.Field { this.arrow_.setAttributeNS( "http://www.w3.org/1999/xlink", "xlink:href", - Blockly.getMainWorkspace().options.pathToMedia + "dropdown-arrow.svg" + this.getConstants().FIELD_DROPDOWN_SVG_ARROW_DATAURI ); this.arrow_.style.cursor = "default"; } @@ -238,6 +238,25 @@ class FieldMatrix extends Blockly.Field { * Show the drop-down menu for editing this field. */ showEditor_() { + const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg; + Blockly.DropDownDiv.setColour( + sourceBlock.getColour(), + sourceBlock.getColourTertiary() + ); + + const style = sourceBlock.style; + if (sourceBlock.isShadow()) { + this.originalStyle = sourceBlock.getStyleName(); + sourceBlock.setStyle(`${this.originalStyle}_selected`); + } else if (this.borderRect_) { + this.borderRect_.setAttribute( + "fill", + "colourQuaternary" in style + ? `${style.colourQuaternary}` + : style.colourTertiary + ); + } + const div = Blockly.DropDownDiv.getContentDiv(); // Build the SVG DOM. const matrixSize = @@ -286,23 +305,19 @@ class FieldMatrix extends Blockly.Field { // Button to clear matrix const clearButtonDiv = document.createElement("div"); clearButtonDiv.className = "scratchMatrixButtonDiv"; - const sourceBlock = this.getSourceBlock() as Blockly.BlockSvg; + const clearButton = this.createButton_(sourceBlock.getColourSecondary()); clearButtonDiv.appendChild(clearButton); // Button to fill matrix const fillButtonDiv = document.createElement("div"); fillButtonDiv.className = "scratchMatrixButtonDiv"; - const fillButton = this.createButton_("#FFFFFF"); + const fillButton = this.createButton_("var(--colour-text)"); fillButtonDiv.appendChild(fillButton); buttonDiv.appendChild(clearButtonDiv); buttonDiv.appendChild(fillButtonDiv); div.appendChild(buttonDiv); - Blockly.DropDownDiv.setColour( - sourceBlock.getColour(), - sourceBlock.getColourTertiary() - ); Blockly.DropDownDiv.showPositionedByBlock( this, sourceBlock, @@ -328,19 +343,6 @@ class FieldMatrix extends Blockly.Field { this.fillMatrix_ ); - const style = sourceBlock.style; - if (sourceBlock.isShadow()) { - this.originalStyle = sourceBlock.getStyleName(); - sourceBlock.setStyle(`${this.originalStyle}_selected`); - } else if (this.borderRect_) { - this.borderRect_.setAttribute( - "fill", - "colourQuaternary" in style - ? `${style.colourQuaternary}` - : style.colourTertiary - ); - } - // Update the matrix for the current value this.updateMatrix_(); } @@ -350,6 +352,7 @@ class FieldMatrix extends Blockly.Field { if (sourceBlock.isShadow()) { sourceBlock.setStyle(this.originalStyle); } + this.updateMatrix_(); } /** @@ -400,12 +403,16 @@ class FieldMatrix extends Blockly.Field { this.fillMatrixNode_( this.ledButtons_, i, + sourceBlock.getColourTertiary() + ); + this.fillMatrixNode_( + this.ledThumbNodes_, + i, sourceBlock.getColourSecondary() ); - this.fillMatrixNode_(this.ledThumbNodes_, i, sourceBlock.getColour()); } else { - this.fillMatrixNode_(this.ledButtons_, i, "#FFFFFF"); - this.fillMatrixNode_(this.ledThumbNodes_, i, "#FFFFFF"); + this.fillMatrixNode_(this.ledButtons_, i, "var(--colour-text)"); + this.fillMatrixNode_(this.ledThumbNodes_, i, "var(--colour-text)"); } } } @@ -505,10 +512,14 @@ class FieldMatrix extends Blockly.Field { * Unbind mouse move event and clear the paint style. */ onMouseUp() { - Blockly.browserEvents.unbind(this.matrixMoveWrapper_); - this.matrixMoveWrapper_ = null; - Blockly.browserEvents.unbind(this.matrixReleaseWrapper_); - this.matrixReleaseWrapper_ = null; + if (this.matrixMoveWrapper_) { + Blockly.browserEvents.unbind(this.matrixMoveWrapper_); + this.matrixMoveWrapper_ = null; + } + if (this.matrixReleaseWrapper_) { + Blockly.browserEvents.unbind(this.matrixReleaseWrapper_); + this.matrixReleaseWrapper_ = null; + } this.paintStyle_ = null; } From 624a2e801f6fe9ab2f549618544a5b163b95340c Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Thu, 31 Jul 2025 09:21:49 -0700 Subject: [PATCH 2/3] fix: improve rendering of `FieldAngle` in high contrast mode --- src/css.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/css.ts b/src/css.ts index fbabbce4eb..690b47a977 100644 --- a/src/css.ts +++ b/src/css.ts @@ -702,16 +702,16 @@ const styles = ` } .blocklyAngleCenterPoint { - stroke: #fff; + stroke: var(--colour-text); stroke-width: 1; - fill: #fff; + fill: var(--colour-text); } .blocklyAngleDragHandle { - stroke: #fff; + stroke: var(--colour-text); stroke-width: 5; stroke-opacity: 0.25; - fill: #fff; + fill: var(--colour-text); cursor: pointer; } @@ -720,18 +720,18 @@ const styles = ` } .blocklyAngleMarks { - stroke: #fff; + stroke: var(--colour-text); stroke-width: 1; stroke-opacity: 0.5; } .blocklyAngleGauge { - fill: #fff; + fill: var(--colour-text); fill-opacity: 0.20; } .blocklyAngleLine { - stroke: #fff; + stroke: var(--colour-text); stroke-width: 1; stroke-linecap: round; pointer-events: none; From b7b6901301c5a3e9cf6b6a0dda3060b16d762f72 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Thu, 31 Jul 2025 11:13:25 -0700 Subject: [PATCH 3/3] fix: improve styling of menus --- src/colours.ts | 1 + src/css.ts | 13 ++++++------- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/colours.ts b/src/colours.ts index 00c95d31df..cb3cfe2843 100644 --- a/src/colours.ts +++ b/src/colours.ts @@ -53,6 +53,7 @@ const Colours = { valueReportBackground: "#FFFFFF", valueReportBorder: "#AAAAAA", contextualMenuHover: "rgba(77, 151, 255, .25)", + menuHover: "rgba(0, 0, 0, .2)", }; /** diff --git a/src/css.ts b/src/css.ts index 690b47a977..b96e17bee3 100644 --- a/src/css.ts +++ b/src/css.ts @@ -1011,12 +1011,12 @@ const styles = ` z-index: 20000; /* Arbitrary, but some apps depend on it... */ } - .blocklyDropDownDiv .blocklyMenu .blocklyMenuItem:hover { - background: var(--colour-menuHover); + .blocklyDropDownDiv .blocklyMenu .blocklyMenuItem.blocklyMenuItemHighlight { + background-color: var(--colour-menuHover); } - .blocklyWidgetDiv .blocklyMenu .blocklyMenuItem:hover { - background: var(--colour-contextualMenuHover); + .blocklyWidgetDiv .blocklyMenu .blocklyMenuItem.blocklyMenuItemHighlight { + background-color: var(--colour-contextualMenuHover); } .blocklyWidgetDiv .blocklyMenu .blocklyMenuItemDisabled.blocklyMenuItem:hover { @@ -1168,13 +1168,12 @@ const styles = ` color: #4c97ff; } .blocklyDropDownDiv .blocklyMenuItem { - color: #fff; font-weight: bold; min-height: 32px; padding: 4px 7em 4px 28px; } - .high-contrast-theme.blocklyDropDownDiv .blocklyMenuItem { - color: #000; + .scratch-renderer.blocklyDropDownDiv .blocklyMenuItem .blocklyMenuItemContent { + color: var(--colour-text); } .blocklyToolboxSelected .blocklyTreeLabel { color: var(--colour-toolboxText);