From e5cb8e753ed41daca95db57f80a7fc2a53ec0914 Mon Sep 17 00:00:00 2001 From: Sam El-Husseini Date: Wed, 4 Dec 2019 09:46:18 -0800 Subject: [PATCH] Move CSS to constants (#3482) --- core/renderers/common/constants.js | 64 +++++++++++++++++++++++++++++ core/renderers/common/renderer.js | 66 +----------------------------- core/renderers/zelos/constants.js | 59 ++++++++++++++++++++++++++ core/renderers/zelos/renderer.js | 60 --------------------------- 4 files changed, 124 insertions(+), 125 deletions(-) diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js index cf3cbe122..d679b2ca1 100644 --- a/core/renderers/common/constants.js +++ b/core/renderers/common/constants.js @@ -801,3 +801,67 @@ Blockly.blockRendering.ConstantProvider.prototype.createDom = function(svg) { this.disabledPatternId = disabledPattern.id; this.disabledPattern_ = disabledPattern; }; + +/** + * Get any renderer specific CSS to inject when the renderer is initialized. + * @param {string} name Name of the renderer. + * @return {!Array.} Array of CSS strings. + * @package + */ +Blockly.blockRendering.ConstantProvider.prototype.getCSS = function(name) { + var selector = '.' + name + '-renderer'; + return [ + /* eslint-disable indent */ + // Fields. + selector + ' .blocklyText {', + 'cursor: default;', + 'fill: #fff;', + 'font-family: ' + this.FIELD_TEXT_FONTFAMILY + ';', + 'font-size: ' + this.FIELD_TEXT_FONTSIZE + 'pt;', + 'font-weight: ' + this.FIELD_TEXT_FONTWEIGHT + ';', + '}', + selector + ' .blocklyNonEditableText>rect,', + selector + ' .blocklyEditableText>rect {', + 'fill: #fff;', + 'fill-opacity: .6;', + 'stroke: none;', + '}', + selector + ' .blocklyNonEditableText>text,', + selector + ' .blocklyEditableText>text {', + 'fill: #000;', + '}', + + // Editable field hover. + selector + ' .blocklyEditableText:not(.editing):hover>rect {', + 'stroke: #fff;', + 'stroke-width: 2;', + '}', + + // Text field input. + selector + ' .blocklyHtmlInput {', + 'font-family: ' + this.FIELD_TEXT_FONTFAMILY + ';', + 'font-weight: ' + this.FIELD_TEXT_FONTWEIGHT + ';', + '}', + + // Selection highlight. + selector + ' .blocklySelected>.blocklyPath {', + 'stroke: #fc3;', + 'stroke-width: 3px;', + '}', + + // Connection highlight. + selector + ' .blocklyHighlightedConnectionPath {', + 'stroke: #fc3;', + '}', + + // Replacable highlight. + selector + ' .blocklyReplaceable .blocklyPath {', + 'fill-opacity: .5;', + '}', + selector + ' .blocklyReplaceable .blocklyPathLight,', + selector + ' .blocklyReplaceable .blocklyPathDark {', + 'display: none;', + '}', + /* eslint-enable indent */ + ]; +}; diff --git a/core/renderers/common/renderer.js b/core/renderers/common/renderer.js index c5a7a50f4..03160d592 100644 --- a/core/renderers/common/renderer.js +++ b/core/renderers/common/renderer.js @@ -63,7 +63,7 @@ Blockly.blockRendering.Renderer = function(name) { Blockly.blockRendering.Renderer.prototype.init = function() { this.constants_ = this.makeConstants_(); this.constants_.init(); - this.injectCSS_(this.getCSS_()); + this.injectCSS_(this.constants_.getCSS(this.name)); }; /** @@ -148,70 +148,6 @@ Blockly.blockRendering.Renderer.prototype.getConstants = function() { (this.constants_)); }; -/** - * Get any renderer specific CSS to inject when the renderer is initialized. - * @return {!Array.} Array of CSS strings. - * @protected - */ -Blockly.blockRendering.Renderer.prototype.getCSS_ = function() { - var selector = '.' + this.name + '-renderer'; - var constants = this.getConstants(); - return [ - /* eslint-disable indent */ - // Fields. - selector + ' .blocklyText {', - 'cursor: default;', - 'fill: #fff;', - 'font-family: ' + constants.FIELD_TEXT_FONTFAMILY + ';', - 'font-size: ' + constants.FIELD_TEXT_FONTSIZE + 'pt;', - 'font-weight: ' + constants.FIELD_TEXT_FONTWEIGHT + ';', - '}', - selector + ' .blocklyNonEditableText>rect,', - selector + ' .blocklyEditableText>rect {', - 'fill: #fff;', - 'fill-opacity: .6;', - 'stroke: none;', - '}', - selector + ' .blocklyNonEditableText>text,', - selector + ' .blocklyEditableText>text {', - 'fill: #000;', - '}', - - // Editable field hover. - selector + ' .blocklyEditableText:not(.editing):hover>rect {', - 'stroke: #fff;', - 'stroke-width: 2;', - '}', - - // Text field input. - selector + ' .blocklyHtmlInput {', - 'font-family: ' + constants.FIELD_TEXT_FONTFAMILY + ';', - 'font-weight: ' + constants.FIELD_TEXT_FONTWEIGHT + ';', - '}', - - // Selection highlight. - selector + ' .blocklySelected>.blocklyPath {', - 'stroke: #fc3;', - 'stroke-width: 3px;', - '}', - - // Connection highlight. - selector + ' .blocklyHighlightedConnectionPath {', - 'stroke: #fc3;', - '}', - - // Replacable highlight. - selector + ' .blocklyReplaceable .blocklyPath {', - 'fill-opacity: .5;', - '}', - selector + ' .blocklyReplaceable .blocklyPathLight,', - selector + ' .blocklyReplaceable .blocklyPathDark {', - 'display: none;', - '}', - /* eslint-enable indent */ - ]; -}; - /** * Get any renderer specific CSS to inject when the renderer is initialized. * @param {!Array.} cssArray Array of CSS strings. diff --git a/core/renderers/zelos/constants.js b/core/renderers/zelos/constants.js index c6c78f994..eb2114472 100644 --- a/core/renderers/zelos/constants.js +++ b/core/renderers/zelos/constants.js @@ -636,3 +636,62 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg) { this.replacementGlowFilterId = replacementGlowFilter.id; this.replacementGlowFilter_ = replacementGlowFilter; }; + +/** + * @override + */ +Blockly.zelos.ConstantProvider.prototype.getCSS = function(name) { + var selector = '.' + name + '-renderer'; + return [ + /* eslint-disable indent */ + // Fields. + selector + ' .blocklyText {', + 'cursor: default;', + 'fill: #fff;', + 'font-family: ' + this.FIELD_TEXT_FONTFAMILY + ';', + 'font-size: ' + this.FIELD_TEXT_FONTSIZE + 'pt;', + 'font-weight: ' + this.FIELD_TEXT_FONTWEIGHT + ';', + '}', + selector + ' .blocklyNonEditableText>text,', + selector + ' .blocklyEditableText>text,', + selector + ' .blocklyNonEditableText>g>text,', + selector + ' .blocklyEditableText>g>text {', + 'fill: #575E75;', + '}', + + // Editable field hover. + selector + ' .blocklyDraggable:not(.blocklyDisabled)', + ' .blocklyEditableText:not(.editing):hover>rect ,', + selector + ' .blocklyDraggable:not(.blocklyDisabled)', + ' .blocklyEditableText:not(.editing):hover>.blocklyPath {', + 'stroke: #fff;', + 'stroke-width: 2;', + '}', + + // Text field input. + selector + ' .blocklyHtmlInput {', + 'font-family: ' + this.FIELD_TEXT_FONTFAMILY + ';', + 'font-weight: ' + this.FIELD_TEXT_FONTWEIGHT + ';', + 'color: #575E75;', + '}', + + // Dropdown field. + selector + ' .blocklyDropdownText {', + 'fill: #fff !important;', + '}', + // Widget and Dropdown Div + selector + '.blocklyWidgetDiv .goog-menuitem,', + selector + '.blocklyDropDownDiv .goog-menuitem {', + 'font-family: ' + this.FIELD_TEXT_FONTFAMILY + ';', + '}', + selector + '.blocklyDropDownDiv .goog-menuitem-content {', + 'color: #fff;', + '}', + + // Connection highlight. + selector + ' .blocklyHighlightedConnectionPath {', + 'stroke: #fff200;', + '}', + /* eslint-enable indent */ + ]; +}; diff --git a/core/renderers/zelos/renderer.js b/core/renderers/zelos/renderer.js index 719963a76..3b08aa886 100644 --- a/core/renderers/zelos/renderer.js +++ b/core/renderers/zelos/renderer.js @@ -123,64 +123,4 @@ Blockly.zelos.Renderer.prototype.shouldInsertDraggedBlock = function(_block, return false; }; -/** - * @override - */ -Blockly.zelos.Renderer.prototype.getCSS_ = function() { - var selector = '.' + this.name + '-renderer'; - var constants = this.getConstants(); - return [ - /* eslint-disable indent */ - // Fields. - selector + ' .blocklyText {', - 'cursor: default;', - 'fill: #fff;', - 'font-family: ' + constants.FIELD_TEXT_FONTFAMILY + ';', - 'font-size: ' + constants.FIELD_TEXT_FONTSIZE + 'pt;', - 'font-weight: ' + constants.FIELD_TEXT_FONTWEIGHT + ';', - '}', - selector + ' .blocklyNonEditableText>text,', - selector + ' .blocklyEditableText>text,', - selector + ' .blocklyNonEditableText>g>text,', - selector + ' .blocklyEditableText>g>text {', - 'fill: #575E75;', - '}', - - // Editable field hover. - selector + ' .blocklyDraggable:not(.blocklyDisabled)', - ' .blocklyEditableText:not(.editing):hover>rect ,', - selector + ' .blocklyDraggable:not(.blocklyDisabled)', - ' .blocklyEditableText:not(.editing):hover>.blocklyPath {', - 'stroke: #fff;', - 'stroke-width: 2;', - '}', - - // Text field input. - selector + ' .blocklyHtmlInput {', - 'font-family: ' + constants.FIELD_TEXT_FONTFAMILY + ';', - 'font-weight: ' + constants.FIELD_TEXT_FONTWEIGHT + ';', - 'color: #575E75;', - '}', - - // Dropdown field. - selector + ' .blocklyDropdownText {', - 'fill: #fff !important;', - '}', - // Widget and Dropdown Div - selector + '.blocklyWidgetDiv .goog-menuitem,', - selector + '.blocklyDropDownDiv .goog-menuitem {', - 'font-family: ' + constants.FIELD_TEXT_FONTFAMILY + ';', - '}', - selector + '.blocklyDropDownDiv .goog-menuitem-content {', - 'color: #fff;', - '}', - - // Connection highlight. - selector + ' .blocklyHighlightedConnectionPath {', - 'stroke: #fff200;', - '}', - /* eslint-enable indent */ - ]; -}; - Blockly.blockRendering.register('zelos', Blockly.zelos.Renderer);