From 1db4ea86f728323e8df7950a6841a52ea754491d Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Thu, 16 Feb 2017 10:20:37 -0500
Subject: [PATCH] Add icons to operation flash messages

---
 css/app.css                   | 20 +++++++++++++++-
 modules/behavior/operation.js | 44 +++++++++++++++++++++++++++++++----
 2 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/css/app.css b/css/app.css
index 43ce8fd03..0472f1732 100644
--- a/css/app.css
+++ b/css/app.css
@@ -575,9 +575,22 @@ button.save.has-count .count::before {
 
 #flash .content {
     margin: 0 auto;
-    padding: 10px;
+    padding: 6px;
     max-width: 50%;
     border-radius: 3px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+#flash svg.operation-icon {
+    width: 36px;
+    height: 36px;
+}
+
+#flash div.operation-tip {
+    margin: 0 10px;
 }
 
 /* Header for modals / panes
@@ -3734,6 +3747,11 @@ img.tile-removing {
   -ms-filter: "FlipH";
 }
 
+[dir='rtl'] #flash .content {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
 /* footer */
 [dir='rtl'] #scale-block {
   float: right;
diff --git a/modules/behavior/operation.js b/modules/behavior/operation.js
index 997c42487..19c5083cd 100644
--- a/modules/behavior/operation.js
+++ b/modules/behavior/operation.js
@@ -1,6 +1,6 @@
 import * as d3 from 'd3';
 import { d3keybinding } from '../lib/d3.keybinding.js';
-import { uiFlash } from '../ui/index';
+import { uiFlash } from '../ui';
 
 
 /* Creates a keybinding behavior for an operation */
@@ -8,17 +8,53 @@ export function behaviorOperation(context) {
     var which, keybinding;
 
 
+    function drawIcon(selection) {
+        var button = selection
+            .append('svg')
+            .attr('class', 'operation-icon')
+            .append('g')
+            .attr('class', 'radial-menu-item radial-menu-item-' + which.id)
+            .attr('transform', 'translate(18,18)')
+            .classed('disabled', which.disabled());
+
+        button
+            .append('circle')
+            .attr('r', 15);
+
+        button
+            .append('use')
+            .attr('transform', 'translate(-10,-10)')
+            .attr('width', '20')
+            .attr('height', '20')
+            .attr('xlink:href', '#operation-' + which.id);
+
+        return selection;
+    }
+
+
     var behavior = function () {
         if (which && which.available() && !context.inIntro()) {
             keybinding = d3keybinding('behavior.key.' + which.id);
             keybinding.on(which.keys, function() {
                 d3.event.preventDefault();
                 var disabled = which.disabled();
+
                 if (disabled) {
-                    uiFlash(2500, 500).text(which.tooltip);
+                    uiFlash(2500, 500)
+                        .html('')
+                        .call(drawIcon)
+                        .append('div')
+                        .attr('class', 'operation-tip')
+                        .text(which.tooltip);
+
                 } else {
-                    var annotation = which.annotation() || which.title;
-                    uiFlash(1500, 250).text(annotation);
+                    uiFlash(1500, 250)
+                        .html('')
+                        .call(drawIcon)
+                        .append('div')
+                        .attr('class', 'operation-tip')
+                        .text(which.annotation() || which.title);
+
                     which();
                 }
             });