Show operation icon colors in the help pane

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
 ------------------------------------------------------- */

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) {

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')

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