fix: resolve various UI issues (#117)

* chore: format checkable_continuous_flyout.js * fix: adjust flyout layout constants * fix: align block connection highlights with Scratch * fix: fix various CSS issues
scratchfoundation · Aug 9, 2024 · 4b74d5c · 4b74d5c
1 parent 2a543f5
commit 4b74d5c
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 62 deletions.
diff --git a/core/css.js b/core/css.js
@@ -17,7 +17,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as Blockly from 'blockly/core';
+import * as Blockly from "blockly/core";
 
 const styles = `
   .blocklySvg {
@@ -411,18 +411,19 @@ const styles = `
     cursor: pointer;
   }
 
-  .zelos-renderer.scratch-theme .blocklyFlyoutLabelText {
+  .scratch-renderer.zelos-theme .blocklyFlyoutLabelText {
     font-family: "Helvetica Neue", Helvetica, sans-serif;
     font-size: 14pt;
     fill: #575E75;
     font-weight: bold;
   }
 
-  .zelos-renderer.scratch-theme .blocklyText {
+  .scratch-renderer.zelos-theme .blocklyText,
+  .scratch-renderer.zelos-theme .blocklyHtmlInput {
     font-weight: 500;
   }
 
-  .zelos-renderer.scratch-theme .blocklyFlyoutButton .blocklyText {
+  .scratch-renderer.zelos-theme .blocklyFlyoutButton .blocklyText {
     fill: var(--colour-textFieldText);
   }
 
@@ -850,7 +851,7 @@ const styles = `
     cursor: url("<<<PATH>>>/handdelete.cur"), auto;
   }
 
-  .blocklyTreeSelected {
+  .blocklyToolboxSelected {
     background-color: var(--colour-toolboxSelected);
   }
 
@@ -1319,7 +1320,7 @@ const styles = `
     transform: rotate(-180deg);
   }
 
-  .zelos-renderer.scratch-theme .blocklyComment .blocklyTextarea {
+  .scratch-renderer.zelos-theme .blocklyComment .blocklyTextarea {
     border: none;
     --commentFillColour: #fef49c;
     font-size: 12pt;
@@ -1328,10 +1329,28 @@ const styles = `
     color: #575e75;
   }
 
-  .zelos-renderer.scratch-theme .blocklyCommentText.blocklyText {
+  .scratch-renderer.zelos-theme .blocklyCommentText.blocklyText {
     font-weight: 400;
   }
 
+  .blocklyToolboxCategory {
+    height: auto;
+    line-height: auto;
+    margin-bottom: 0;
+    padding: 0.375rem 0px;
+    cursor: pointer;
+  }
+  .blocklyToolboxCategory:hover {
+    color: #4c97ff;
+  }
+  .blocklyDropDownDiv .blocklyMenuItem {
+    color: #fff;
+    font-weight: bold;
+  }
+  .blocklyToolboxSelected .blocklyTreeLabel {
+    color: var(--colour-toolboxText);
+  }
+
   .blocklyDeleteIcon {
     display: block;
     width: 32px;

diff --git a/src/checkable_continuous_flyout.js b/src/checkable_continuous_flyout.js
@@ -1,5 +1,5 @@
-import * as Blockly from 'blockly';
-import {ContinuousFlyout} from '@blockly/continuous-toolbox';
+import * as Blockly from "blockly";
+import { ContinuousFlyout } from "@blockly/continuous-toolbox";
 
 export class CheckableContinuousFlyout extends ContinuousFlyout {
   /**
@@ -22,12 +22,18 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
    * @const
    */
   static CHECKMARK_PATH =
-      'M' + CheckableContinuousFlyout.CHECKBOX_SIZE / 4 +
-      ' ' + CheckableContinuousFlyout.CHECKBOX_SIZE / 2 +
-      'L' + 5 * CheckableContinuousFlyout.CHECKBOX_SIZE / 12 +
-      ' ' + 2 * CheckableContinuousFlyout.CHECKBOX_SIZE / 3 +
-      'L' + 3 * CheckableContinuousFlyout.CHECKBOX_SIZE / 4 +
-      ' ' + CheckableContinuousFlyout.CHECKBOX_SIZE / 3;
+    "M" +
+    CheckableContinuousFlyout.CHECKBOX_SIZE / 4 +
+    " " +
+    CheckableContinuousFlyout.CHECKBOX_SIZE / 2 +
+    "L" +
+    (5 * CheckableContinuousFlyout.CHECKBOX_SIZE) / 12 +
+    " " +
+    (2 * CheckableContinuousFlyout.CHECKBOX_SIZE) / 3 +
+    "L" +
+    (3 * CheckableContinuousFlyout.CHECKBOX_SIZE) / 4 +
+    " " +
+    CheckableContinuousFlyout.CHECKBOX_SIZE / 3;
 
   /**
    * Size of the checkbox corner radius
@@ -48,15 +54,14 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
    * @const
    */
   static CHECKBOX_SPACE_X =
-      CheckableContinuousFlyout.CHECKBOX_SIZE +
-      2 * CheckableContinuousFlyout.CHECKBOX_MARGIN;
-
+    CheckableContinuousFlyout.CHECKBOX_SIZE +
+    2 * CheckableContinuousFlyout.CHECKBOX_MARGIN;
 
   constructor(workspaceOptions) {
     super(workspaceOptions);
-    this.tabWidth_ = 0;
-    this.MARGIN = 10;
-    this.GAP_Y = 8;
+    this.tabWidth_ = -2;
+    this.MARGIN = 12;
+    this.GAP_Y = 12;
     CheckableContinuousFlyout.CHECKBOX_MARGIN = this.MARGIN;
 
     /**
@@ -69,6 +74,13 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
     this.checkboxes_ = new Map();
   }
 
+  initFlyoutButton_(button, x, y) {
+    if (button.isLabel()) {
+      button.height = 40;
+    }
+    super.initFlyoutButton_(button, x, y);
+  }
+
   show(flyoutDef) {
     this.clearOldCheckboxes();
     super.show(flyoutDef);
@@ -95,16 +107,30 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
     if (block.checkboxInFlyout) {
       const coordinates = block.getRelativeToSurfaceXY();
       const checkbox = this.createCheckbox_(
-          block, coordinates.x, coordinates.y, block.getHeightWidth());
+        block,
+        coordinates.x,
+        coordinates.y,
+        block.getHeightWidth()
+      );
       let moveX = coordinates.x;
       if (this.RTL) {
-        moveX -= (CheckableContinuousFlyout.CHECKBOX_SIZE + CheckableContinuousFlyout.CHECKBOX_MARGIN);
+        moveX -=
+          CheckableContinuousFlyout.CHECKBOX_SIZE +
+          CheckableContinuousFlyout.CHECKBOX_MARGIN;
       } else {
-        moveX += CheckableContinuousFlyout.CHECKBOX_SIZE + CheckableContinuousFlyout.CHECKBOX_MARGIN;
+        moveX +=
+          CheckableContinuousFlyout.CHECKBOX_SIZE +
+          CheckableContinuousFlyout.CHECKBOX_MARGIN;
       }
       block.moveBy(moveX, 0);
-      this.listeners.push(Blockly.browserEvents.bind(checkbox.svgRoot,
-          'mousedown', null, this.checkboxClicked_(checkbox)));
+      this.listeners.push(
+        Blockly.browserEvents.bind(
+          checkbox.svgRoot,
+          "mousedown",
+          null,
+          this.checkboxClicked_(checkbox)
+        )
+      );
     }
     super.addBlockListeners_(root, block, rect);
   }
@@ -118,7 +144,7 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
    * @private
    */
   checkboxClicked_(checkboxObj) {
-    return function(e) {
+    return function (e) {
       this.setCheckboxState(checkboxObj.block.id, !checkboxObj.clicked);
       // This event has been handled.  No need to bubble up to the document.
       e.stopPropagation();
@@ -138,40 +164,63 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
   createCheckbox_(block, cursorX, cursorY, blockHW) {
     var checkboxState = this.getCheckboxState(block.id);
     var svgRoot = block.getSvgRoot();
-    var extraSpace = CheckableContinuousFlyout.CHECKBOX_SIZE + CheckableContinuousFlyout.CHECKBOX_MARGIN;
-    var xOffset = this.RTL ? this.getWidth() / this.workspace_.scale - extraSpace : cursorX;
-    var yOffset = cursorY + blockHW.height / 2 - CheckableContinuousFlyout.CHECKBOX_SIZE / 2;
+    var extraSpace =
+      CheckableContinuousFlyout.CHECKBOX_SIZE +
+      CheckableContinuousFlyout.CHECKBOX_MARGIN;
+    var xOffset = this.RTL
+      ? this.getWidth() / this.workspace_.scale - extraSpace
+      : cursorX;
+    var yOffset =
+      cursorY +
+      blockHW.height / 2 -
+      CheckableContinuousFlyout.CHECKBOX_SIZE / 2;
     var touchMargin = CheckableContinuousFlyout.CHECKBOX_TOUCH_PADDING;
-    var checkboxGroup = Blockly.utils.dom.createSvgElement('g',
-        {
-          'transform': `translate(${xOffset}, ${yOffset})`,
-          'fill': 'transparent',
-        }, null);
-    Blockly.utils.dom.createSvgElement('rect',
-        {
-          'class': 'blocklyFlyoutCheckbox',
-          'height': CheckableContinuousFlyout.CHECKBOX_SIZE,
-          'width': CheckableContinuousFlyout.CHECKBOX_SIZE,
-          'rx': CheckableContinuousFlyout.CHECKBOX_CORNER_RADIUS,
-          'ry': CheckableContinuousFlyout.CHECKBOX_CORNER_RADIUS
-        }, checkboxGroup);
-    Blockly.utils.dom.createSvgElement('path',
-        {
-          'class': 'blocklyFlyoutCheckboxPath',
-          'd': CheckableContinuousFlyout.CHECKMARK_PATH
-        }, checkboxGroup);
-    Blockly.utils.dom.createSvgElement('rect',
-        {
-          'class': 'blocklyTouchTargetBackground',
-          'x': -touchMargin + 'px',
-          'y': -touchMargin + 'px',
-          'height': CheckableContinuousFlyout.CHECKBOX_SIZE + 2 * touchMargin,
-          'width': CheckableContinuousFlyout.CHECKBOX_SIZE + 2 * touchMargin,
-        }, checkboxGroup);
-    var checkboxObj = {svgRoot: checkboxGroup, clicked: checkboxState, block: block};
+    var checkboxGroup = Blockly.utils.dom.createSvgElement(
+      "g",
+      {
+        transform: `translate(${xOffset}, ${yOffset})`,
+        fill: "transparent",
+      },
+      null
+    );
+    Blockly.utils.dom.createSvgElement(
+      "rect",
+      {
+        class: "blocklyFlyoutCheckbox",
+        height: CheckableContinuousFlyout.CHECKBOX_SIZE,
+        width: CheckableContinuousFlyout.CHECKBOX_SIZE,
+        rx: CheckableContinuousFlyout.CHECKBOX_CORNER_RADIUS,
+        ry: CheckableContinuousFlyout.CHECKBOX_CORNER_RADIUS,
+      },
+      checkboxGroup
+    );
+    Blockly.utils.dom.createSvgElement(
+      "path",
+      {
+        class: "blocklyFlyoutCheckboxPath",
+        d: CheckableContinuousFlyout.CHECKMARK_PATH,
+      },
+      checkboxGroup
+    );
+    Blockly.utils.dom.createSvgElement(
+      "rect",
+      {
+        class: "blocklyTouchTargetBackground",
+        x: -touchMargin + "px",
+        y: -touchMargin + "px",
+        height: CheckableContinuousFlyout.CHECKBOX_SIZE + 2 * touchMargin,
+        width: CheckableContinuousFlyout.CHECKBOX_SIZE + 2 * touchMargin,
+      },
+      checkboxGroup
+    );
+    var checkboxObj = {
+      svgRoot: checkboxGroup,
+      clicked: checkboxState,
+      block: block,
+    };
 
     if (checkboxState) {
-      Blockly.utils.dom.addClass((checkboxObj.svgRoot), 'checked');
+      Blockly.utils.dom.addClass(checkboxObj.svgRoot, "checked");
     }
 
     this.workspace_.getCanvas().insertBefore(checkboxGroup, svgRoot);
@@ -195,13 +244,20 @@ export class CheckableContinuousFlyout extends ContinuousFlyout {
     checkboxObj.clicked = value;
 
     if (checkboxObj.clicked) {
-      Blockly.utils.dom.addClass(checkboxObj.svgRoot, 'checked');
+      Blockly.utils.dom.addClass(checkboxObj.svgRoot, "checked");
     } else {
-      Blockly.utils.dom.removeClass(checkboxObj.svgRoot, 'checked');
+      Blockly.utils.dom.removeClass(checkboxObj.svgRoot, "checked");
     }
 
-    Blockly.Events.fire(new Blockly.Events.BlockChange(
-        checkboxObj.block, 'checkbox', null, oldValue, value));
+    Blockly.Events.fire(
+      new Blockly.Events.BlockChange(
+        checkboxObj.block,
+        "checkbox",
+        null,
+        oldValue,
+        value
+      )
+    );
   }
 
   /**

diff --git a/src/renderer/constants.js b/src/renderer/constants.js
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from "blockly/core";
+
+export class ConstantProvider extends Blockly.zelos.ConstantProvider {
+  REPLACEMENT_GLOW_COLOUR = "#ffffff";
+}
diff --git a/src/renderer/renderer.js b/src/renderer/renderer.js
@@ -7,6 +7,7 @@
 import * as Blockly from "blockly/core";
 import { Drawer } from "./drawer.js";
 import { RenderInfo } from "./render_info.js";
+import { ConstantProvider } from "./constants.js";
 
 export class ScratchRenderer extends Blockly.zelos.Renderer {
   makeDrawer_(block, info) {
@@ -16,6 +17,14 @@ export class ScratchRenderer extends Blockly.zelos.Renderer {
   makeRenderInfo_(block) {
     return new RenderInfo(this, block);
   }
+
+  makeConstants_() {
+    return new ConstantProvider();
+  }
+
+  shouldHighlightConnection(connection) {
+    return false;
+  }
 }
 
 Blockly.blockRendering.register("scratch", ScratchRenderer);