diff --git a/core/css.ts b/core/css.ts index d18d930a94..22abfa32a2 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; @@ -243,10 +233,6 @@ let content = ` cursor: inherit; } -.blocklyFieldDropdown:not(.blocklyHidden) { - display: block; -} - .blocklyIconGroup { cursor: default; } diff --git a/core/dropdowndiv.ts b/core/dropdowndiv.ts index a47e78c2a4..5ae1b99cff 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'; } diff --git a/core/field_textinput.ts b/core/field_textinput.ts index 39bdca9705..5b754624af 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. * diff --git a/core/toolbox/category.ts b/core/toolbox/category.ts index 06f219e5eb..c173c33ca0 100644 --- a/core/toolbox/category.ts +++ b/core/toolbox/category.ts @@ -135,11 +135,11 @@ export class ToolboxCategory 'row': 'blocklyToolboxCategory', 'rowcontentcontainer': 'blocklyTreeRowContentContainer', 'icon': 'blocklyToolboxCategoryIcon', - 'label': 'blocklyTreeLabel', + 'label': 'blocklyToolboxCategoryLabel', 'contents': 'blocklyToolboxCategoryGroup', 'selected': 'blocklyToolboxSelected', 'openicon': 'blocklyToolboxCategoryIconOpen', - 'closedicon': 'blocklyTreeIconClosed', + 'closedicon': 'blocklyToolboxCategoryIconClosed', }; } @@ -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; } @@ -692,19 +692,19 @@ Css.register(` width: 16px; } -.blocklyTreeIconClosed { +.blocklyToolboxCategoryIconClosed { background-position: -32px -1px; } -.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed { +.blocklyToolbox[dir="RTL"] .blocklyToolboxCategoryIconClosed { background-position: 0 -1px; } -.blocklyToolboxSelected>.blocklyTreeIconClosed { +.blocklyToolboxSelected>.blocklyToolboxCategoryIconClosed { background-position: -32px -17px; } -.blocklyToolboxDiv[dir="RTL"] .blocklyToolboxSelected>.blocklyTreeIconClosed { +.blocklyToolbox[dir="RTL"] .blocklyToolboxSelected>.blocklyToolboxCategoryIconClosed { background-position: 0 -17px; } @@ -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; } `); diff --git a/core/toolbox/separator.ts b/core/toolbox/separator.ts index ec003daf68..5824b43931 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 0c5a8e2a4f..efd5381b48 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 755f08cf8f..1cb8df979e 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();