scratchfoundation/scratch-blocks
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-blocks.git synced 2025-08-13 22:49:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions1

Slight refactor of colour handling; add additional properties ()

Browse source 
* Add and render opacity of blocks

* Add insertion marker colour and opacity

* Add goog.require for Colours in block.js

* Add color of text field during editing

* Add colour overriding upon injection

* Add colours to CSS at run-time injection

* Expand colour variables to include toolbox, flyout, scrollbars

* Example of dark mode in horizontal_playground

* Fix loop style for colours
This commit is contained in:
Tim Mickel 2016-04-14 18:04:17 -04:00
parent 0fb21a90fe
commit 62509d41ad
8 changed files with 91 additions and 9 deletions
core
css.js

23
core/css.js
View file

@ -87,6 +87,13 @@ Blockly.Css.inject = function(hasCss, pathToMedia) {
// Strip off any trailing slash (either Unix or Windows).
Blockly.Css.mediaPath_ = pathToMedia.replace(/[\\\/]$/, '');
text = text.replace(/<<<PATH>>>/g, Blockly.Css.mediaPath_);
// Dynamically replace colours in the CSS text, in case they have
// been set at run-time injection.
for (var colourProperty in Blockly.Colours) {
if (Blockly.Colours.hasOwnProperty(colourProperty)) {
text = text.replace('$colour_' + colourProperty, Blockly.Colours[colourProperty]);
}
}
// Inject CSS tag.
var cssNode = document.createElement('style');
document.head.appendChild(cssNode);
@ -140,7 +147,7 @@ Blockly.Css.setCursor = function(cursor) {
*/
Blockly.Css.CONTENT = [
'.blocklySvg {',
'background-color: ' + Blockly.Colours.workspace + ';',
'background-color: $colour_workspace;',
'outline: none;',
'overflow: hidden;', /* IE overflows by default. */
'}',
@ -261,7 +268,7 @@ Blockly.Css.CONTENT = [
'.blocklyNonEditableText>text,',
'.blocklyEditableText>text {',
'fill: ' + Blockly.Colours.text + ';',
'fill: $colour_text;',
'}',
'.blocklyEditableText:hover>rect {',
@ -270,7 +277,7 @@ Blockly.Css.CONTENT = [
'}',
'.blocklyBubbleText {',
'fill:' + Blockly.Colours.text +';',
'fill: $colour_text;',
'}',
/*
@ -333,6 +340,7 @@ Blockly.Css.CONTENT = [
'padding: 2px 0;',
'width: 100%;',
'text-align: center;',
'color: $colour_text;',
'}',
'.blocklyMainBackground {',
@ -347,7 +355,7 @@ Blockly.Css.CONTENT = [
'}',
'.blocklyFlyoutBackground {',
'fill: #ddd;',
'fill: $colour_flyout;',
'fill-opacity: .8;',
'}',
@ -356,12 +364,12 @@ Blockly.Css.CONTENT = [
'}',
'.blocklyScrollbarKnob {',
'fill: #ccc;',
'fill: $colour_scrollbar;',
'}',
'.blocklyScrollbarBackground:hover+.blocklyScrollbarKnob,',
'.blocklyScrollbarKnob:hover {',
'fill: #bbb;',
'fill: $colour_scrollbarHover;',
'}',
'.blocklyZoom>image {',
@ -430,7 +438,8 @@ Blockly.Css.CONTENT = [
/* Category tree in Toolbox. */
'.blocklyToolboxDiv {',
'background-color: #ddd;',
'background-color: $colour_toolbox;',
'color: $colour_toolboxText;',
'overflow-x: visible;',
'overflow-y: auto;',
'position: absolute;',