CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-10 02:17:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Configure zelos selected glow properties in theme (#3715)

Browse Source 
* Configure selected and replacement glow size and colour in zelos from the theme.
This commit is contained in:
Sam El-Husseini
2020-02-25 14:29:45 -08:00
committed by GitHub
parent 60db399a8d
commit 97eb86f988
2 changed files with 60 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
core/renderers/zelos/constants.js
View File

@@ -310,6 +310,30 @@ Blockly.zelos.ConstantProvider = function() {
*/
this.MAX_DYNAMIC_CONNECTION_SHAPE_WIDTH = 12 * this.GRID_UNIT;
/**
* The selected glow colour.
* @type {string}
*/
this.SELECTED_GLOW_COLOUR = '#fff200';
/**
* The size of the selected glow.
* @type {number}
*/
this.SELECTED_GLOW_SIZE = 0.5;
/**
* The replacement glow colour.
* @type {string}
*/
this.REPLACEMENT_GLOW_COLOUR = '#fff200';
/**
* The size of the selected glow.
* @type {number}
*/
this.REPLACEMENT_GLOW_SIZE = 2;
/**
* The ID of the selected glow filter, or the empty string if no filter is
* set.
@@ -380,6 +404,30 @@ Blockly.zelos.ConstantProvider.prototype.init = function() {
this.INSIDE_CORNERS.rightWidth;
};
/**
* @override
*/
Blockly.zelos.ConstantProvider.prototype.setTheme = function(theme) {
Blockly.zelos.ConstantProvider.superClass_.setTheme.call(this, theme);
this.SELECTED_GLOW_COLOUR =
theme.getComponentStyle('selectedGlowColour') ||
this.SELECTED_GLOW_COLOUR;
var selectedGlowSize =
Number(theme.getComponentStyle('selectedGlowSize'));
this.SELECTED_GLOW_SIZE =
selectedGlowSize && !isNaN(selectedGlowSize) ?
selectedGlowSize : this.SELECTED_GLOW_SIZE;
this.REPLACEMENT_GLOW_COLOUR =
theme.getComponentStyle('replacementGlowColour') ||
this.REPLACEMENT_GLOW_COLOUR;
var replacementGlowSize =
Number(theme.getComponentStyle('replacementGlowSize'));
this.REPLACEMENT_GLOW_SIZE =
replacementGlowSize && !isNaN(replacementGlowSize) ?
replacementGlowSize : this.REPLACEMENT_GLOW_SIZE;
};
/**
* @override
*/
@@ -388,6 +436,9 @@ Blockly.zelos.ConstantProvider.prototype.dispose = function() {
if (this.selectedGlowFilter_) {
Blockly.utils.dom.removeNode(this.selectedGlowFilter_);
}
if (this.replacementGlowFilter_) {
Blockly.utils.dom.removeNode(this.replacementGlowFilter_);
}
};
/**
@@ -764,7 +815,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg,
Blockly.utils.dom.createSvgElement('feGaussianBlur',
{
'in': 'SourceGraphic',
'stdDeviation': 0.5 // TODO: configure size in theme.
'stdDeviation': this.SELECTED_GLOW_SIZE
},
selectedGlowFilter);
// Set all gaussian blur pixels to 1 opacity before applying flood
@@ -778,7 +829,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg,
// Color the highlight
Blockly.utils.dom.createSvgElement('feFlood',
{
'flood-color': '#fff200', // TODO: configure colour in theme.
'flood-color': this.SELECTED_GLOW_COLOUR,
'flood-opacity': 1,
'result': 'outColor'
},
@@ -806,7 +857,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg,
Blockly.utils.dom.createSvgElement('feGaussianBlur',
{
'in': 'SourceGraphic',
'stdDeviation': 2 // TODO: configure size in theme.
'stdDeviation': this.REPLACEMENT_GLOW_SIZE
},
replacementGlowFilter);
// Set all gaussian blur pixels to 1 opacity before applying flood
@@ -820,7 +871,7 @@ Blockly.zelos.ConstantProvider.prototype.createDom = function(svg,
// Color the highlight
Blockly.utils.dom.createSvgElement('feFlood',
{
'flood-color': '#fff200', // TODO: configure colour in theme.
'flood-color': this.REPLACEMENT_GLOW_COLOUR,
'flood-opacity': 1,
'result': 'outColor'
},
@@ -897,7 +948,7 @@ Blockly.zelos.ConstantProvider.prototype.getCSS_ = function(name) {
// Connection highlight.
selector + ' .blocklyHighlightedConnectionPath {',
'stroke: #fff200;',
'stroke: ' + this.SELECTED_GLOW_COLOUR + ';',
'}',
// Disabled outline paths.

4
core/theme/highcontrast.js
View File

@@ -108,6 +108,10 @@ Blockly.Themes.HighContrast =
Blockly.Themes.HighContrast.defaultBlockStyles,
Blockly.Themes.HighContrast.categoryStyles);
Blockly.Themes.HighContrast.setComponentStyle('selectedGlowColour', '#000000');
Blockly.Themes.HighContrast.setComponentStyle('selectedGlowSize', 1);
Blockly.Themes.HighContrast.setComponentStyle('replacementGlowColour', '#000000');
Blockly.Themes.HighContrast.setFontStyle({
'family': null, // Use default font-family
'weight': null, // Use default font-weight