Merge pull request #761 from rachel-fenichel/feature/label_classes_2

Add classes to labels with web-style attribute in xml

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.

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);
       }

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() +

tests/playground.html

@@ -320,6 +320,11 @@ h1 {
 #importExport {
   font-family: monospace;
 }
+
+.ioLabel>.blocklyFlyoutLabelText {
+  font-style: italic;
+}
+
 </style>
 </head>
 <body onload="start()">
@@ -586,6 +591,7 @@ h1 {
           </shadow>
         </value>
       </block>
+      <label text="Input/Output:" web-class="ioLabel"></label>
       <block type="text_print">
         <value name="TEXT">
           <shadow type="text">