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

Add ability to specify a css class for labels and buttons

Browse Source
This commit is contained in:
Rachel Fenichel
2016-11-09 16:37:46 -08:00
parent e13ce31282
commit effc1d5f1c
4 changed files with 34 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/css.js
View File

@@ -295,7 +295,7 @@ Blockly.Css.CONTENT = [
'fill: #000;',
'}',
'.blocklyFlyoutLabelText:hover {',
'.blocklyFlyoutLabelText.clickable:hover {',
'fill: #aaa;',
'}',

3
core/flyout.js
View File

@@ -704,8 +704,9 @@ Blockly.Flyout.prototype.show = function(xmlList) {
var isLabel = tagName == 'LABEL';
var text = xml.getAttribute('text');
var callbackKey = xml.getAttribute('callbackKey');
var className = xml.getAttribute('class');
var curButton = new Blockly.FlyoutButton(this.workspace_,
this.targetWorkspace_, text, callbackKey, isLabel);
this.targetWorkspace_, text, callbackKey, isLabel, className);
contents.push({type: 'button', button: curButton});
gaps.push(default_gap);
}

31
core/flyout_button.js
View File

@@ -39,10 +39,12 @@ goog.require('goog.math.Coordinate');
* @param {string} callbackKey The key to use when looking up the callback for a
* click on this button.
* @param {boolean} isLabel Whether this button should be styled as a label.
* @param {string=} opt_cssClass Optional parameter specifying a CSS class to
* add to this button.
* @constructor
*/
Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey,
isLabel) {
isLabel, opt_cssClass) {
/**
* @type {!Blockly.WorkspaceSvg}
* @private
@@ -80,6 +82,13 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey,
* @private
*/
this.isLabel_ = isLabel;
/**
* If specified, a CSS class to add to this button.
* @type {?string}
* @private
*/
this.cssClass_ = opt_cssClass || null;
};
/**
@@ -104,8 +113,12 @@ Blockly.FlyoutButton.prototype.height = 0;
* @return {!Element} The button's SVG group.
*/
Blockly.FlyoutButton.prototype.createDom = function() {
this.svgGroup_ = Blockly.utils.createSvgElement('g',
{'class': this.isLabel_ ? 'blocklyFlyoutLabel' : 'blocklyFlyoutButton'},
var cssClass = this.isLabel_ ? 'blocklyFlyoutLabel' : 'blocklyFlyoutButton';
if (this.cssClass_) {
cssClass += ' ' + this.cssClass_;
}
this.svgGroup_ = Blockly.createSvgElement('g', {'class': cssClass},
this.workspace_.getCanvas());
if (!this.isLabel_) {
@@ -122,10 +135,14 @@ Blockly.FlyoutButton.prototype.createDom = function() {
'rx': 4, 'ry': 4},
this.svgGroup_);
var svgText = Blockly.utils.createSvgElement('text',
{'class': this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText',
'x': 0, 'y': 0,
'text-anchor': 'middle'}, this.svgGroup_);
cssClass = this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText';
if (this.isLabel_ && this.callback_) {
cssClass += ' clickable';
}
var svgText = Blockly.createSvgElement('text',
{'class': cssClass, 'x': 0, 'y': 0, 'text-anchor': 'middle'},
this.svgGroup_);
svgText.textContent = this.text_;
this.width = svgText.getComputedTextLength() +

7
tests/playground.html
View File

@@ -115,6 +115,7 @@ function start() {
logEvents(false);
}
taChange();
Blockly.registerButtonCallback('logStuff', function(){console.log('stuff!');});
}
function getToolboxElement() {
@@ -320,6 +321,11 @@ h1 {
#importExport {
font-family: monospace;
}
.ioLabel .blocklyFlyoutLabelText {
font-style: italic;
}
</style>
</head>
<body onload="start()">
@@ -586,6 +592,7 @@ h1 {
</shadow>
</value>
</block>
<label text="Input/Output:" class="ioLabel" callbackKey="logStuff"></label>
<block type="text_print">
<value name="TEXT">
<shadow type="text">