Add labels to toolbar items (close #6098)

css/80_app.css

@@ -436,19 +436,33 @@ button[disabled].action:hover {
     flex-flow: row nowrap;
     justify-content: space-between;
     position: absolute;
-    padding: 10px 5px 10px 5px;
+    padding: 10px 5px 0px 5px;
     left: 0;
     top: 0;
     right: 0;
-    height: 60px;
     z-index: 9;
 }
 #bar .toolbar-item {
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: column wrap;
+    justify-content: center;
+    position: relative;
+}
+#bar .toolbar-item .item-content {
     display: flex;
     flex: 0 1 auto;
     flex-flow: row nowrap;
     justify-content: center;
     position: relative;
+    height: 40px;
+    width: auto;
+}
+#bar .toolbar-item .item-label {
+    text-align: center;
+    margin-top: 1px;
+    margin-bottom: 2px;
+    font-size: 11px;
 }
 #bar .toolbar-item:not(.spacer) {
     margin: 0 5px 0 5px;
@@ -496,38 +510,9 @@ button.bar-button.dragging.removing {
 
 button.save .count {
     display: inline-block;
-    border: 0px solid #ccc;
-    border-left-width: 1px;
-    padding: 0px 0px 0px 8px;
     min-width: 32px;
     text-align: center;
 }
-[dir='rtl'] button.save .count {
-    border-left-width: 0px;
-    border-right-width: 1px;
-    padding: 0px 8px 0px 0px;
-}
-button.save.disabled .count {
-    border: 0px solid rgba(0,0,0,0.25);
-    border-left-width: 1px;
-}
-[dir='rtl'] button.save.disabled .count {
-    border-left-width: 0px;
-    border-right-width: 1px;
-    padding: 0px 8px 0px 0px;
-}
-#bar.narrow button.save .count {
-    padding: 0px;
-}
-
-button.save .label {
-    margin-right: 3px;
-    margin-left: 0;
-}
-[dir='rtl'] button.save .label {
-    margin-left: 3px;
-    margin-right: 0;
-}
 
 .help-wrap svg.icon.pre-text.add-note,
 button.add-note svg.icon {
@@ -582,10 +567,10 @@ button.add-note svg.icon {
     border-right-width: 0;
 }
 
-[dir='ltr'] .undo-redo > button:first-of-type {
+[dir='ltr'] .undo-redo button:first-of-type {
     margin-right: 1px;
 }
-[dir='rtl'] .undo-redo > button:first-of-type {
+[dir='rtl'] .undo-redo button:first-of-type {
     margin-left: 1px;
 }
 

data/core.yaml

@@ -8,6 +8,10 @@ en:
     copy: copy
     open_wikidata: open on wikidata.org
     favorite: favorite
+  toolbar:
+    inspect: Inspect
+    undo_redo: Undo / Redo
+    recent: Recent
   modes:
     add_feature:
       title: Add a feature

dist/locales/en.json

@@ -10,6 +10,11 @@
             "open_wikidata": "open on wikidata.org",
             "favorite": "favorite"
         },
+        "toolbar": {
+            "inspect": "Inspect",
+            "undo_redo": "Undo / Redo",
+            "recent": "Recent"
+        },
         "modes": {
             "add_feature": {
                 "title": "Add a feature",

modules/ui/save.js

@@ -85,11 +85,6 @@ export function uiSave(context) {
         button
             .call(svgIcon('#iD-icon-save'));
 
-        button
-            .append('span')
-            .attr('class', 'label')
-            .text(t('save.title'));
-
         button
             .append('span')
             .attr('class', 'count')

modules/ui/top_toolbar.js

@@ -88,15 +88,37 @@ export function uiTopToolbar(context) {
             toolbarItems.exit()
                 .remove();
 
-            toolbarItems
+            var itemsEnter = toolbarItems
                 .enter()
                 .append('div')
                 .attr('class', function(d) {
                     return 'toolbar-item ' + d.replace('_', '-');
-                })
+                });
+
+            var actionableItems = itemsEnter.filter(function(d) { return d !== 'spacer'; });
+
+            actionableItems
+                .append('div')
+                .attr('class', 'item-content')
                 .each(function(d) {
-                    if (itemContentByID[d]) {
-                        d3_select(this).call(itemContentByID[d], bar);
+                    d3_select(this).call(itemContentByID[d], bar);
+                });
+
+            actionableItems
+                .append('div')
+                .attr('class', 'item-label')
+                .text(function(d) {
+                    switch (d) {
+                    case 'sidebar_toggle':
+                        return t('toolbar.inspect');
+                    case 'save':
+                        return t('save.title');
+                    case 'search_add':
+                        return t('inspector.search');
+                    case 'modes':
+                        return t('toolbar.recent');
+                    default:
+                        return t('toolbar.' + d);
                     }
                 });
         }