scratchfoundation/scratch-blocks
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-blocks.git synced 2025-08-28 22:10:31 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add styled monitor checkboxes

Browse source
This commit is contained in:
Paul Kaplan 2017-04-19 15:05:51 -04:00
parent fb51d1a078
commit b3d698c71d
2 changed files with 38 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

13
core/css.js
View file

@ -1036,11 +1036,20 @@ Blockly.Css.CONTENT = [
'}',
'.blocklyFlyoutCheckbox {',
'fill: red;',
'fill: white;',
'stroke: #c8c8c8;',
'}',
'.blocklyFlyoutCheckbox.checked {',
'fill: blue;',
'fill: ' + Blockly.Colours.motion.primary + ';',
'stroke: ' + Blockly.Colours.motion.tertiary + ';',
'}',
'.blocklyFlyoutCheckboxPath {',
'stroke: white;',
'stroke-width: 3;',
'stroke-linecap: round;',
'stroke-linejoin: round;',
'}',
'.scratchCategoryMenu {',

35
core/flyout_vertical.js
View file

@ -87,6 +87,13 @@ Blockly.VerticalFlyout.prototype.DEFAULT_WIDTH = 250;
*/
Blockly.VerticalFlyout.prototype.CHECKBOX_SIZE = 20;
/**
* Size of the checkbox corner radius
* @type {number}
* @const
*/
Blockly.VerticalFlyout.prototype.CHECKBOX_CORNER_RADIUS = 5;
/**
* Space above and around the checkbox.
* @type {number}
@ -483,19 +490,31 @@ Blockly.VerticalFlyout.prototype.createCheckbox_ = function(block, cursorX,
cursorY, blockHW) {
var svgRoot = block.getSvgRoot();
var extraSpace = this.CHECKBOX_SIZE + this.CHECKBOX_MARGIN;
var checkboxRect = Blockly.utils.createSvgElement('rect',
var checkboxGroup = Blockly.utils.createSvgElement('g',
{
'class': 'blocklyFlyoutCheckbox',
'transform': 'translate(' +
(this.RTL ? this.getWidth() / this.workspace_.scale - extraSpace : cursorX) +
', ' + (cursorY + blockHW.height / 2 - this.CHECKBOX_SIZE / 2) + ')'
}, null);
Blockly.utils.createSvgElement('rect',
{
'height': this.CHECKBOX_SIZE,
'width': this.CHECKBOX_SIZE,
'x': this.RTL ? this.getWidth() / this.workspace_.scale - extraSpace :
cursorX,
'y': cursorY + blockHW.height / 2 -
this.CHECKBOX_SIZE / 2
}, null);
var checkboxObj = {svgRoot: checkboxRect, clicked: false, block: block};
'rx': this.CHECKBOX_CORNER_RADIUS,
'ry': this.CHECKBOX_CORNER_RADIUS
}, checkboxGroup);
Blockly.utils.createSvgElement('path',
{
'class': 'blocklyFlyoutCheckboxPath',
'd': 'M ' + this.CHECKBOX_SIZE / 4 + ' ' + this.CHECKBOX_SIZE / 2 +
'L ' + 5 * this.CHECKBOX_SIZE / 12 + ' ' + 2 * this.CHECKBOX_SIZE / 3 +
'L ' + 3 * this.CHECKBOX_SIZE / 4 + ' ' + this.CHECKBOX_SIZE / 3
}, checkboxGroup);
var checkboxObj = {svgRoot: checkboxGroup, clicked: false, block: block};
block.flyoutCheckbox = checkboxObj;
this.workspace_.getCanvas().insertBefore(checkboxRect, svgRoot);
this.workspace_.getCanvas().insertBefore(checkboxGroup, svgRoot);
this.checkboxes_.push(checkboxObj);
};