Merge pull request #725 from rachel-fenichel/feature/flyout_label

Add option to style flyout buttons as labels

core/css.js

@@ -270,6 +270,22 @@ Blockly.Css.CONTENT = [
     'fill: #aaa;',
   '}',
 
+  '.blocklyFlyoutLabel {',
+    'cursor: default;',
+  '}',
+
+  '.blocklyFlyoutLabelBackground {',
+    'opacity: 0;',
+  '}',
+
+  '.blocklyFlyoutLabelText {',
+    '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

@@ -698,11 +698,13 @@ Blockly.Flyout.prototype.show = function(xmlList) {
         } else {
           gaps.push(default_gap);
         }
-      } else if (tagName == 'BUTTON') {
-        var label = xml.getAttribute('text');
+      } 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_, label, callbackKey);
+            this.targetWorkspace_, text, callbackKey, isLabel);
         contents.push({type: 'button', button: curButton});
         gaps.push(default_gap);
       }

core/flyout_button.js

@@ -38,9 +38,11 @@ goog.require('goog.math.Coordinate');
  * @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 {boolean} isLabel Whether this button should be styled as a label.
  * @constructor
  */
-Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey) {
+Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey,
+    isLabel) {
   /**
    * @type {!Blockly.WorkspaceSvg}
    * @private
@@ -71,6 +73,13 @@ Blockly.FlyoutButton = function(workspace, targetWorkspace, text, callbackKey) {
    * @private
    */
   this.callback_ = Blockly.flyoutButtonCallbacks_[callbackKey];
+
+  /**
+   * Whether this button should be styled as a label.
+   * @type {boolean}
+   * @private
+   */
+  this.isLabel_ = isLabel;
 };
 
 /**
@@ -96,29 +105,37 @@ Blockly.FlyoutButton.prototype.height = 0;
  */
 Blockly.FlyoutButton.prototype.createDom = function() {
   this.svgGroup_ = Blockly.createSvgElement('g',
-      {'class': 'blocklyFlyoutButton'}, this.workspace_.getCanvas());
+      {'class': this.isLabel_ ? 'blocklyFlyoutLabel' : 'blocklyFlyoutButton'},
+      this.workspace_.getCanvas());
 
-  // Shadow rectangle (light source does not mirror in RTL).
-  var shadow = Blockly.createSvgElement('rect',
-      {'class': 'blocklyFlyoutButtonShadow',
-       'rx': 4, 'ry': 4, 'x': 1, 'y': 1},
-       this.svgGroup_);
+  if (!this.isLabel_) {
+    // Shadow rectangle (light source does not mirror in RTL).
+    var shadow = Blockly.createSvgElement('rect',
+        {'class': 'blocklyFlyoutButtonShadow',
+         'rx': 4, 'ry': 4, 'x': 1, 'y': 1},
+         this.svgGroup_);
+  }
   // Background rectangle.
   var rect = Blockly.createSvgElement('rect',
-      {'class': 'blocklyFlyoutButtonBackground', 'rx': 4, 'ry': 4},
-       this.svgGroup_);
+      {'class': this.isLabel_ ?
+        'blocklyFlyoutLabelBackground' : 'blocklyFlyoutButtonBackground',
+        'rx': 4, 'ry': 4},
+      this.svgGroup_);
 
   var svgText = Blockly.createSvgElement('text',
-      {'class': 'blocklyText', 'x': 0, 'y': 0,
-       'text-anchor': 'middle'}, this.svgGroup_);
+      {'class':  this.isLabel_ ? 'blocklyFlyoutLabelText' : 'blocklyText',
+        'x': 0, 'y': 0,
+        'text-anchor': 'middle'}, this.svgGroup_);
   svgText.textContent = this.text_;
 
   this.width = svgText.getComputedTextLength() +
       2 * Blockly.FlyoutButton.MARGIN;
   this.height = 20;  // Can't compute it :(
 
-  shadow.setAttribute('width', this.width);
-  shadow.setAttribute('height', this.height);
+  if (!this.isLabel_) {
+    shadow.setAttribute('width', this.width);
+    shadow.setAttribute('height', this.height);
+  }
   rect.setAttribute('width', this.width);
   rect.setAttribute('height', this.height);
 
@@ -192,5 +209,7 @@ Blockly.FlyoutButton.prototype.onMouseUp = function(e) {
   Blockly.Flyout.terminateDrag_();
 
   // Call the callback registered to this button.
-  this.callback_(this);
+  if (this.callback_) {
+    this.callback_(this);
+  }
 };

core/toolbox.js

@@ -362,6 +362,7 @@ Blockly.Toolbox.prototype.syncTrees_ = function(treeIn, treeOut, pathToMedia) {
         break;
       case 'BLOCK':
       case 'SHADOW':
+      case 'LABEL':
       case 'BUTTON':
         treeOut.blocks.push(childIn);
         lastElement = childIn;