From afca4264ca1c89e0efd69d1218f76ee4e5342ead Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Mon, 31 Oct 2016 15:20:16 -0700
Subject: [PATCH] Add option to style flyout buttons as labels

---
 core/css.js           | 16 +++++++++++++++
 core/flyout.js        |  8 +++++---
 core/flyout_button.js | 47 ++++++++++++++++++++++++++++++-------------
 core/toolbox.js       |  1 +
 4 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/core/css.js b/core/css.js
index 8390d0373..32f47a6f0 100644
--- a/core/css.js
+++ b/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.
diff --git a/core/flyout.js b/core/flyout.js
index 0fed89f80..f31a4ff0b 100644
--- a/core/flyout.js
+++ b/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);
       }
diff --git a/core/flyout_button.js b/core/flyout_button.js
index 662d228c9..212c6ad21 100644
--- a/core/flyout_button.js
+++ b/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);
+  }
 };
diff --git a/core/toolbox.js b/core/toolbox.js
index 215ecfff5..292500cd6 100644
--- a/core/toolbox.js
+++ b/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;