From 47617cff181efcc62e8e8f1feb575eaaa1e90cf4 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 6 Nov 2024 09:18:47 -0800 Subject: [PATCH 1/6] refactor!: Rename blocklyTreeIconClosed to blocklyToolboxCategoryIconClosed. --- core/toolbox/category.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/core/toolbox/category.ts b/core/toolbox/category.ts index 06f219e5eb8..eb7cdee91e8 100644 --- a/core/toolbox/category.ts +++ b/core/toolbox/category.ts @@ -139,7 +139,7 @@ export class ToolboxCategory 'contents': 'blocklyToolboxCategoryGroup', 'selected': 'blocklyToolboxSelected', 'openicon': 'blocklyToolboxCategoryIconOpen', - 'closedicon': 'blocklyTreeIconClosed', + 'closedicon': 'blocklyToolboxCategoryIconClosed', }; } @@ -692,19 +692,19 @@ Css.register(` width: 16px; } -.blocklyTreeIconClosed { +.blocklyToolboxCategoryIconClosed { background-position: -32px -1px; } -.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed { +.blocklyToolboxDiv[dir="RTL"] .blocklyToolboxCategoryIconClosed { background-position: 0 -1px; } -.blocklyToolboxSelected>.blocklyTreeIconClosed { +.blocklyToolboxSelected>.blocklyToolboxCategoryIconClosed { background-position: -32px -17px; } -.blocklyToolboxDiv[dir="RTL"] .blocklyToolboxSelected>.blocklyTreeIconClosed { +.blocklyToolboxDiv[dir="RTL"] .blocklyToolboxSelected>.blocklyToolboxCategoryIconClosed { background-position: 0 -17px; } From 8d1e571b18eaf5afbf14b3cf00d0fa37819309b8 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 6 Nov 2024 09:19:30 -0800 Subject: [PATCH 2/6] refactor!: Rename blocklyTreeLabel to blocklyToolboxCategoryLabel --- core/toolbox/category.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/core/toolbox/category.ts b/core/toolbox/category.ts index eb7cdee91e8..cc20c19e2f9 100644 --- a/core/toolbox/category.ts +++ b/core/toolbox/category.ts @@ -135,7 +135,7 @@ export class ToolboxCategory 'row': 'blocklyToolboxCategory', 'rowcontentcontainer': 'blocklyTreeRowContentContainer', 'icon': 'blocklyToolboxCategoryIcon', - 'label': 'blocklyTreeLabel', + 'label': 'blocklyToolboxCategoryLabel', 'contents': 'blocklyToolboxCategoryGroup', 'selected': 'blocklyToolboxSelected', 'openicon': 'blocklyToolboxCategoryIconOpen', @@ -716,18 +716,18 @@ Css.register(` background-position: -16px -17px; } -.blocklyTreeLabel { +.blocklyToolboxCategoryLabel { cursor: default; font: 16px sans-serif; padding: 0 3px; vertical-align: middle; } -.blocklyToolboxDelete .blocklyTreeLabel { +.blocklyToolboxDelete .blocklyToolboxCategoryLabel { cursor: url("<<>>/handdelete.cur"), auto; } -.blocklyToolboxSelected .blocklyTreeLabel { +.blocklyToolboxSelected .blocklyToolboxCategoryLabel { color: #fff; } `); From 48fde0c371e47df7ae39a552858646d7f07d5689 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 6 Nov 2024 09:30:13 -0800 Subject: [PATCH 3/6] refactor!: Rename blocklyToolboxDiv to blocklyToolbox. --- core/toolbox/category.ts | 10 +++++----- core/toolbox/separator.ts | 2 +- core/toolbox/toolbox.ts | 4 ++-- tests/mocha/toolbox_test.js | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/core/toolbox/category.ts b/core/toolbox/category.ts index cc20c19e2f9..c173c33ca03 100644 --- a/core/toolbox/category.ts +++ b/core/toolbox/category.ts @@ -663,11 +663,11 @@ Css.register(` background-color: rgba(255, 255, 255, .2); } -.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategoryContainer { +.blocklyToolbox[layout="h"] .blocklyToolboxCategoryContainer { margin: 1px 5px 1px 0; } -.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategoryContainer { +.blocklyToolbox[dir="RTL"][layout="h"] .blocklyToolboxCategoryContainer { margin: 1px 0 1px 5px; } @@ -679,7 +679,7 @@ Css.register(` white-space: nowrap; } -.blocklyToolboxDiv[dir="RTL"] .blocklyToolboxCategory { +.blocklyToolbox[dir="RTL"] .blocklyToolboxCategory { margin-left: 8px; padding-right: 0; } @@ -696,7 +696,7 @@ Css.register(` background-position: -32px -1px; } -.blocklyToolboxDiv[dir="RTL"] .blocklyToolboxCategoryIconClosed { +.blocklyToolbox[dir="RTL"] .blocklyToolboxCategoryIconClosed { background-position: 0 -1px; } @@ -704,7 +704,7 @@ Css.register(` background-position: -32px -17px; } -.blocklyToolboxDiv[dir="RTL"] .blocklyToolboxSelected>.blocklyToolboxCategoryIconClosed { +.blocklyToolbox[dir="RTL"] .blocklyToolboxSelected>.blocklyToolboxCategoryIconClosed { background-position: 0 -17px; } diff --git a/core/toolbox/separator.ts b/core/toolbox/separator.ts index ec003daf686..5824b439316 100644 --- a/core/toolbox/separator.ts +++ b/core/toolbox/separator.ts @@ -88,7 +88,7 @@ Css.register(` margin: 5px 0; } -.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator { +.blocklyToolbox[layout="h"] .blocklyTreeSeparator { border-right: solid #e5e5e5 1px; border-bottom: none; height: auto; diff --git a/core/toolbox/toolbox.ts b/core/toolbox/toolbox.ts index 0c5a8e2a4f2..efd5381b48b 100644 --- a/core/toolbox/toolbox.ts +++ b/core/toolbox/toolbox.ts @@ -198,7 +198,7 @@ export class Toolbox protected createContainer_(): HTMLDivElement { const toolboxContainer = document.createElement('div'); toolboxContainer.setAttribute('layout', this.isHorizontal() ? 'h' : 'v'); - dom.addClass(toolboxContainer, 'blocklyToolboxDiv'); + dom.addClass(toolboxContainer, 'blocklyToolbox'); toolboxContainer.setAttribute('dir', this.RTL ? 'RTL' : 'LTR'); return toolboxContainer; } @@ -1107,7 +1107,7 @@ Css.register(` } /* Category tree in Toolbox. */ -.blocklyToolboxDiv { +.blocklyToolbox { user-select: none; -ms-user-select: none; -webkit-user-select: none; diff --git a/tests/mocha/toolbox_test.js b/tests/mocha/toolbox_test.js index 755f08cf8f2..1cb8df979ee 100644 --- a/tests/mocha/toolbox_test.js +++ b/tests/mocha/toolbox_test.js @@ -47,7 +47,7 @@ suite('Toolbox', function () { test('Init called -> HtmlDiv is inserted before parent node', function () { const toolboxDiv = Blockly.common.getMainWorkspace().getInjectionDiv() .childNodes[0]; - assert.equal(toolboxDiv.className, 'blocklyToolboxDiv'); + assert.equal(toolboxDiv.className, 'blocklyToolbox'); }); test('Init called -> Toolbox is subscribed to background and foreground colour', function () { const themeManager = this.toolbox.workspace_.getThemeManager(); From 2ed691268edba2da840d21b2a3486ebd1dfd5350 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 6 Nov 2024 09:45:25 -0800 Subject: [PATCH 4/6] refactor: remove unreferenced CSS classes. --- core/css.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/core/css.ts b/core/css.ts index d18d930a943..225d65375f6 100644 --- a/core/css.ts +++ b/core/css.ts @@ -243,10 +243,6 @@ let content = ` cursor: inherit; } -.blocklyFieldDropdown:not(.blocklyHidden) { - display: block; -} - .blocklyIconGroup { cursor: default; } From 81fb65827e9b450d818dfc0b8e10afd4bfc3eb2a Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 6 Nov 2024 10:20:28 -0800 Subject: [PATCH 5/6] refactor!: Remove the blocklyArrowTop and blocklyArrowBottom classes. --- core/css.ts | 10 ---------- core/dropdowndiv.ts | 17 +++++------------ 2 files changed, 5 insertions(+), 22 deletions(-) diff --git a/core/css.ts b/core/css.ts index 225d65375f6..22abfa32a22 100644 --- a/core/css.ts +++ b/core/css.ts @@ -132,22 +132,12 @@ let content = ` z-index: -1; background-color: inherit; border-color: inherit; -} - -.blocklyArrowTop { border-top: 1px solid; border-left: 1px solid; border-top-left-radius: 4px; border-color: inherit; } -.blocklyArrowBottom { - border-bottom: 1px solid; - border-right: 1px solid; - border-bottom-right-radius: 4px; - border-color: inherit; -} - .blocklyHighlightedConnectionPath { fill: none; stroke: #fc3; diff --git a/core/dropdowndiv.ts b/core/dropdowndiv.ts index a47e78c2a45..5ae1b99cffe 100644 --- a/core/dropdowndiv.ts +++ b/core/dropdowndiv.ts @@ -697,19 +697,12 @@ function positionInternal( // Update arrow CSS. if (metrics.arrowVisible) { + const x = metrics.arrowX; + const y = metrics.arrowY; + const rotation = metrics.arrowAtTop ? 45 : 225; arrow.style.display = ''; - arrow.style.transform = - 'translate(' + - metrics.arrowX + - 'px,' + - metrics.arrowY + - 'px) rotate(45deg)'; - arrow.setAttribute( - 'class', - metrics.arrowAtTop - ? 'blocklyDropDownArrow blocklyArrowTop' - : 'blocklyDropDownArrow blocklyArrowBottom', - ); + arrow.style.transform = `translate(${x}px, ${y}px) rotate(${rotation}deg)`; + arrow.setAttribute('class', 'blocklyDropDownArrow'); } else { arrow.style.display = 'none'; } From 0741edf2a7d3755bd4a14b623d2b8b2e8eae3007 Mon Sep 17 00:00:00 2001 From: Aaron Dodson Date: Wed, 6 Nov 2024 10:27:30 -0800 Subject: [PATCH 6/6] feat: Add a blocklyTextInputField class to text fields. --- core/field_textinput.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/core/field_textinput.ts b/core/field_textinput.ts index 39bdca97056..5b754624aff 100644 --- a/core/field_textinput.ts +++ b/core/field_textinput.ts @@ -22,6 +22,7 @@ import { } from './field_input.js'; import * as fieldRegistry from './field_registry.js'; import * as parsing from './utils/parsing.js'; +import * as dom from './utils/dom.js'; /** * Class for an editable text field. @@ -49,6 +50,13 @@ export class FieldTextInput extends FieldInput { super(value, validator, config); } + override initView() { + super.initView(); + if (this.fieldGroup_) { + dom.addClass(this.fieldGroup_, 'blocklyTextInputField'); + } + } + /** * Ensure that the input value casts to a valid string. *