From 8234079d1057e8ca738f786401ecf202ad9d507a Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Mon, 29 Jun 2020 17:08:06 -0400
Subject: [PATCH] Show operation icon colors in the help pane

---
 css/80_app.css           | 21 +++++++++------------
 modules/ui/edit_menu.js  |  2 +-
 modules/ui/flash.js      |  6 +++---
 modules/ui/panes/help.js | 22 +++++++++++++++-------
 4 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 403305755..eb3187e30 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -406,6 +406,15 @@ button[disabled].action {
     height: 20px;
 }
 
+.icon.operation use {
+    fill: #222;
+    color: #79f;
+}
+.icon.operation.disabled use {
+    fill: rgba(32,32,32,.2);
+    color: rgba(40,40,40,.2);
+}
+
 .icon.monochrome use {
     fill: currentColor;
 }
@@ -4387,11 +4396,6 @@ img.tile-debug {
 .flash-icon use {
     color: #222;
 }
-
-.flash-icon.operation use {
-    fill: #222;
-    color: #79f;
-}
 .flash-icon.disabled use,
 .flash-icon.operation.disabled use {
     fill: rgba(32,32,32,0.7);
@@ -5395,15 +5399,8 @@ li.hide + li.version .badge .tooltip .popover-arrow {
 }
 
 .edit-menu-item use {
-    fill: #222;
-    color: #79f;
     pointer-events: none;
 }
-.edit-menu-item.disabled use {
-    fill: rgba(32,32,32,.2);
-    color: rgba(40,40,40,.2);
-}
-
 
 /* Lasso
 ------------------------------------------------------- */
diff --git a/modules/ui/edit_menu.js b/modules/ui/edit_menu.js
index d436d64b2..41703952e 100644
--- a/modules/ui/edit_menu.js
+++ b/modules/ui/edit_menu.js
@@ -119,7 +119,7 @@ export function uiEditMenu(context) {
                 )
                 .append('div')
                 .attr('class', 'icon-wrap')
-                .call(svgIcon('#iD-operation-' + d.id, 'operation-icon'));
+                .call(svgIcon('#iD-operation-' + d.id, 'operation'));
         });
 
         if (showLabels) {
diff --git a/modules/ui/flash.js b/modules/ui/flash.js
index 0ed943ca9..d7ad2507d 100644
--- a/modules/ui/flash.js
+++ b/modules/ui/flash.js
@@ -7,7 +7,7 @@ export function uiFlash(context) {
     var _iconName = '#iD-icon-no';
     var _iconClass = 'disabled';
     var _text = '';
-    var _textClass;    
+    var _textClass;
 
     function flash() {
         if (_flashTimer) {
@@ -31,7 +31,7 @@ export function uiFlash(context) {
 
         var iconEnter = contentEnter
             .append('svg')
-            .attr('class', 'flash-icon')
+            .attr('class', 'flash-icon icon')
             .append('g')
             .attr('transform', 'translate(10,10)');
 
@@ -56,7 +56,7 @@ export function uiFlash(context) {
 
         content
             .selectAll('.flash-icon')
-            .attr('class', 'flash-icon ' + (_iconClass || ''));
+            .attr('class', 'icon flash-icon ' + (_iconClass || ''));
 
         content
             .selectAll('.flash-icon use')
diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js
index 6f9651b9a..6ef4f80f5 100644
--- a/modules/ui/panes/help.js
+++ b/modules/ui/panes/help.js
@@ -232,31 +232,35 @@ export function uiPaneHelp(context) {
     };
 
     var replacements = {
+        // insert icons corresponding to various UI elements
         point_icon: icon('#iD-icon-point', 'pre-text'),
         line_icon: icon('#iD-icon-line', 'pre-text'),
         area_icon: icon('#iD-icon-area', 'pre-text'),
         note_icon: icon('#iD-icon-note', 'pre-text add-note'),
         plus: icon('#iD-icon-plus', 'pre-text'),
         minus: icon('#iD-icon-minus', 'pre-text'),
-        orthogonalize_icon: icon('#iD-operation-orthogonalize', 'pre-text'),
-        disconnect_icon: icon('#iD-operation-disconnect', 'pre-text'),
+        move_icon: icon('#iD-operation-move', 'pre-text operation'),
+        merge_icon: icon('#iD-operation-merge', 'pre-text operation'),
+        delete_icon: icon('#iD-operation-delete', 'pre-text operation'),
+        orthogonalize_icon: icon('#iD-operation-orthogonalize', 'pre-text operation'),
+        disconnect_icon: icon('#iD-operation-disconnect', 'pre-text operation'),
         layers_icon: icon('#iD-icon-layers', 'pre-text'),
         data_icon: icon('#iD-icon-data', 'pre-text'),
         inspect: icon('#iD-icon-inspect', 'pre-text'),
-        move_icon: icon('#iD-operation-move', 'pre-text'),
-        merge_icon: icon('#iD-operation-merge', 'pre-text'),
-        delete_icon: icon('#iD-operation-delete', 'pre-text'),
         close: icon('#iD-icon-close', 'pre-text'),
         undo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-redo' : '#iD-icon-undo', 'pre-text'),
         redo_icon: icon(localizer.textDirection() === 'rtl' ? '#iD-icon-undo' : '#iD-icon-redo', 'pre-text'),
         save_icon: icon('#iD-icon-save', 'pre-text'),
         leftclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'left'),
         rightclick: icon('#iD-walkthrough-mouse', 'pre-text mouseclick', 'right'),
+
+        // insert localized, platform-dependent keys
         shift: uiCmd.display('⇧'),
         alt: uiCmd.display('⌥'),
         return: uiCmd.display('↵'),
         space: t('shortcuts.key.space'),
-        version: context.version,
+
+        // reference localized UI labels directly so that they'll always match
         shortcuts_key: t('shortcuts.toggle.key'),
         save: t('save.title'),
         undo: t('undo.title'),
@@ -278,7 +282,10 @@ export function uiPaneHelp(context) {
         new_relation: t('inspector.new_relation'),
         background_settings: t('background.description'),
         imagery_offset: t('background.fix_misalignment'),
-        start_the_walkthrough: t('splash.walkthrough')
+        start_the_walkthrough: t('splash.walkthrough'),
+
+        // insert iD's version number
+        version: context.version
     };
 
     // For each section, squash all the texts into a single markdown document
@@ -294,6 +301,7 @@ export function uiPaneHelp(context) {
         return {
             title: t(helpkey + '.title'),
             html: marked(text.trim())
+                // use keyboard key styling for shortcuts
                 .replace(/<code>/g, '<kbd>')
                 .replace(/<\/code>/g, '<\/kbd>')
         };