Move CSS to constants (#3482)

This commit is contained in:
Sam El-Husseini
2019-12-04 09:46:18 -08:00
committed by GitHub
parent 917f58ab0f
commit e5cb8e753e
4 changed files with 124 additions and 125 deletions

View File

@@ -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.<string>} 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 */
];
};

View File

@@ -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.<string>} 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.<string>} cssArray Array of CSS strings.

View File

@@ -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 */
];
};

View File

@@ -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);