diff --git a/core/css.js b/core/css.js index 128fea86d..a4babe270 100644 --- a/core/css.js +++ b/core/css.js @@ -295,10 +295,6 @@ Blockly.Css.CONTENT = [ 'fill: #000;', '}', - '.blocklyFlyoutLabelText:hover {', - 'fill: #aaa;', - '}', - /* Don't allow users to select text. It gets annoying when trying to drag a block and selected text moves instead. diff --git a/core/flyout.js b/core/flyout.js index b129f6166..ceeaf211c 100644 --- a/core/flyout.js +++ b/core/flyout.js @@ -702,10 +702,8 @@ Blockly.Flyout.prototype.show = function(xmlList) { } else if (tagName == 'BUTTON' || tagName == 'LABEL') { // Labels behave the same as buttons, but are styled differently. var isLabel = tagName == 'LABEL'; - var text = xml.getAttribute('text'); - var callbackKey = xml.getAttribute('callbackKey'); var curButton = new Blockly.FlyoutButton(this.workspace_, - this.targetWorkspace_, text, callbackKey, isLabel); + this.targetWorkspace_, xml, isLabel); contents.push({type: 'button', button: curButton}); gaps.push(default_gap); } diff --git a/core/flyout_button.js b/core/flyout_button.js index babcf97a5..4e3fd7ec7 100644 --- a/core/flyout_button.js +++ b/core/flyout_button.js @@ -35,14 +35,13 @@ goog.require('goog.math.Coordinate'); * @param {!Blockly.WorkspaceSvg} workspace The workspace in which to place this * button. * @param {!Blockly.WorkspaceSvg} targetWorkspace The flyout's target workspace. - * @param {string} text The text to display on the button. - * @param {string} callbackKey The key to use when looking up the callback for a - * click on this button. + * @param {!Element} xml The XML specifying the label/button. * @param {boolean} isLabel Whether this button should be styled as a label. * @constructor */ -Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey, - isLabel) { +Blockly.FlyoutButton = function(workspace, targetWorkspace, xml, isLabel) { + // Labels behave the same as buttons, but are styled differently. + /** * @type {!Blockly.WorkspaceSvg} * @private @@ -59,7 +58,7 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey, * @type {string} * @private */ - this.text_ = text; + this.text_ = xml.getAttribute('text'); /** * @type {!goog.math.Coordinate} @@ -67,19 +66,36 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey, */ this.position_ = new goog.math.Coordinate(0, 0); - /** - * Function to call when this button is clicked. - * @type {function(!Blockly.FlyoutButton)} - * @private - */ - this.callback_ = Blockly.flyoutButtonCallbacks_[callbackKey]; - /** * Whether this button should be styled as a label. * @type {boolean} * @private */ this.isLabel_ = isLabel; + + /** + * Function to call when this button is clicked. + * @type {function(!Blockly.FlyoutButton)} + * @private + */ + this.callback_ = null; + + var callbackKey = xml.getAttribute('callbackKey'); + if (this.isLabel_ && callbackKey) { + console.warn('Labels should not have callbacks. Label text: ' + this.text_); + } else if (!this.isLabel_ && + !(callbackKey && Blockly.flyoutButtonCallbacks_[callbackKey])) { + console.warn('Buttons should have callbacks. Button text: ' + this.text_); + } else { + this.callback_ = Blockly.flyoutButtonCallbacks_[callbackKey]; + } + + /** + * If specified, a CSS class to add to this button. + * @type {?string} + * @private + */ + this.cssClass_ = xml.getAttribute('web-class') || null; }; /** @@ -104,8 +120,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.utils.createSvgElement('g', {'class': cssClass}, this.workspace_.getCanvas()); if (!this.isLabel_) { @@ -124,8 +144,8 @@ Blockly.FlyoutButton.prototype.createDom = function() { var svgText = Blockly.utils.createSvgElement('text', {'class': this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText', - 'x': 0, 'y': 0, - 'text-anchor': 'middle'}, this.svgGroup_); + '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..c728879e7 100644 --- a/tests/playground.html +++ b/tests/playground.html @@ -320,6 +320,11 @@ h1 { #importExport { font-family: monospace; } + +.ioLabel>.blocklyFlyoutLabelText { + font-style: italic; +} + @@ -586,6 +591,7 @@ h1 { +