mirror of
https://github.com/google/blockly.git
synced 2026-01-08 01:20:12 +01:00
Move CSS to constants (#3482)
This commit is contained in:
@@ -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 */
|
||||
];
|
||||
};
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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 */
|
||||
];
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user