From f461be7f018c6e1be79d1109c2ea0d09fc4de3c4 Mon Sep 17 00:00:00 2001 From: jwklong Date: Sat, 31 Oct 2026 23:15:38 +0000 Subject: [PATCH 1/3] two column categories Signed-off-by: jwklong --- src/components/blocks/blocks.css | 5 ++- .../editor-settings/editor-settings.jsx | 4 +- src/editor-settings/settings.js | 1 + .../twoColumnCategories.jsx | 37 +++++++++++++++++++ 4 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 src/editor-settings/settings/twoColumnCategories/twoColumnCategories.jsx diff --git a/src/components/blocks/blocks.css b/src/components/blocks/blocks.css index 583f587f797..3577010e88d 100644 --- a/src/components/blocks/blocks.css +++ b/src/components/blocks/blocks.css @@ -44,7 +44,6 @@ border-right: 1px solid $ui-black-transparent; border-bottom: 1px solid $ui-black-transparent; box-sizing: content-box; - height: calc(100% - 3.25rem) !important; /* For now, the layout cannot support scrollbars in the category menu. @@ -55,6 +54,10 @@ -ms-overflow-style: none; } +.blocks :global(.blocklyToolboxDiv:not(.blocklyToolboxDivColumns)) { + height: calc(100% - 3.25rem) !important; +} + [dir="rtl"] .blocks :global(.blocklyToolboxDiv) { border-right: none; border-left: 1px solid $ui-black-transparent; diff --git a/src/components/editor-settings/editor-settings.jsx b/src/components/editor-settings/editor-settings.jsx index 76f1d55907f..2fbc96d6fcd 100644 --- a/src/components/editor-settings/editor-settings.jsx +++ b/src/components/editor-settings/editor-settings.jsx @@ -71,6 +71,8 @@ class EditorSettingsModal extends React.Component { + + @@ -95,7 +97,7 @@ class EditorSettingsModal extends React.Component { - + diff --git a/src/editor-settings/settings.js b/src/editor-settings/settings.js index 7f29d6868ac..21a429b1297 100644 --- a/src/editor-settings/settings.js +++ b/src/editor-settings/settings.js @@ -25,5 +25,6 @@ export default Object.fromEntries([ "swatches", "test", "twGallery", + "twoColumnCategories", "vmDebug" ].map(v => [v, require(`./settings/${v}/${v}.jsx`).default])) \ No newline at end of file diff --git a/src/editor-settings/settings/twoColumnCategories/twoColumnCategories.jsx b/src/editor-settings/settings/twoColumnCategories/twoColumnCategories.jsx new file mode 100644 index 00000000000..e4b424f1bf8 --- /dev/null +++ b/src/editor-settings/settings/twoColumnCategories/twoColumnCategories.jsx @@ -0,0 +1,37 @@ +import BooleanSetting from "../../components/boolean-setting/boolean-setting.jsx"; +import {FormattedMessage} from 'react-intl'; +import React from 'react'; +import LazyScratchBlocks from "../../../lib/tw-lazy-scratch-blocks.js"; +import refreshWorkspace from "../../util/refreshWorkspace.js"; + +export default (class extends BooleanSetting { + getPrimary() { + return () + } + + getHelp() { + return () + } + + async setValue(value) { + await LazyScratchBlocks.load(); + let ScratchBlocks = LazyScratchBlocks.get(); + + ScratchBlocks.Toolbox.TWO_COLUMNS = value; + + let toolboxDiv = ScratchBlocks.mainWorkspace.getToolbox().HtmlDiv; + if (value) { + toolboxDiv.classList.add('blocklyToolboxDivColumns'); + } else { + toolboxDiv.classList.remove('blocklyToolboxDivColumns'); + } + ScratchBlocks.mainWorkspace.getToolbox().categoryMenu_.populate(ScratchBlocks.mainWorkspace.options.languageTree); + ScratchBlocks.mainWorkspace.getToolbox().position() + } +}); \ No newline at end of file From 4478ea3b115bb586f7c89788a5b3723e13114233 Mon Sep 17 00:00:00 2001 From: jwklong Date: Sun, 1 Nov 2026 09:30:28 +0000 Subject: [PATCH 2/3] extension button styling Signed-off-by: jwklong --- src/components/gui/gui.css | 16 +++++++++++++++- src/components/gui/gui.jsx | 2 +- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css index 9633205ac9e..28494def7e5 100644 --- a/src/components/gui/gui.css +++ b/src/components/gui/gui.css @@ -271,10 +271,24 @@ border: 1px solid $looks-secondary; box-sizing: content-box; /* To match scratch-block vertical toolbox borders */ } +.extension-button-container.hover { + bottom: 0.75rem; + left: 15.5rem; + width: 2.75rem; + height: 2.75rem; + border-radius: 100%; + box-shadow: 0 0 0 4px $looks-transparent; + transition: transform, box-shadow 0.5s; +} +.extension-button-container.hover:hover { + background: $extensions-primary; + transform: scale(1.1); + box-shadow: 0 0 0 6px $looks-transparent; +} $fade-out-distance: 15px; -.extension-button-container:before { +.extension-button-container:not(.hover):before { content: ""; position: absolute; top: calc(calc(-1 * $fade-out-distance) - 1px); diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index ee7767e6eb4..73af52fc120 100644 --- a/src/components/gui/gui.jsx +++ b/src/components/gui/gui.jsx @@ -453,7 +453,7 @@ const GUIComponent = props => { vm={vm} /> - +