diff --git a/core/css.js b/core/css.js
index 128fea86d..6512fd496 100644
--- a/core/css.js
+++ b/core/css.js
@@ -295,7 +295,7 @@ Blockly.Css.CONTENT = [
'fill: #000;',
'}',
- '.blocklyFlyoutLabelText:hover {',
+ '.blocklyFlyoutLabelText.clickable:hover {',
'fill: #aaa;',
'}',
diff --git a/core/flyout.js b/core/flyout.js
index b129f6166..a1b16c425 100644
--- a/core/flyout.js
+++ b/core/flyout.js
@@ -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);
}
diff --git a/core/flyout_button.js b/core/flyout_button.js
index babcf97a5..7f6aedd26 100644
--- a/core/flyout_button.js
+++ b/core/flyout_button.js
@@ -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() +
diff --git a/tests/playground.html b/tests/playground.html
index 8a7435915..06776887d 100644
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -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;
+}
+
@@ -586,6 +592,7 @@ h1 {
+