Make top toolbar item spacing more consistent

Prepare top toolbar to be more dynamic

css/80_app.css

@@ -436,39 +436,37 @@ button[disabled].action:hover {
     flex-flow: row nowrap;
     justify-content: space-between;
     position: absolute;
-    padding: 10px;
+    padding: 10px 5px 10px 5px;
     left: 0;
     top: 0;
     right: 0;
     height: 60px;
     z-index: 9;
 }
-
-.tool-group {
+#bar .toolbar-item {
     display: flex;
     flex: 0 1 auto;
     flex-flow: row nowrap;
-    width: 100%;
+    justify-content: center;
+    position: relative;
 }
-.tool-group.leading-area {
+#bar .toolbar-item:not(.spacer) {
+    margin: 0 5px 0 5px;
+}
+#bar .toolbar-item.spacer {
+    width: 100%;
+    flex-grow: 2;
+}
+#bar .toolbar-item:first-child {
     justify-content: flex-start;
 }
-.tool-group.leading-area,
-.tool-group.trailing-area {
-    flex-shrink: 2;
-}
-.tool-group.center-area {
-    justify-content: center;
-}
-.tool-group.trailing-area {
+#bar .toolbar-item:last-child {
     justify-content: flex-end;
 }
-
-.tool-group > div:not(:empty) {
-    display: flex;
-    margin: 0 5px;
+#bar .toolbar-item:empty:not(.spacer) {
+    display: none;
 }
-.tool-group button.bar-button {
+button.bar-button {
     flex: 0 0 auto;
     flex-flow: row nowrap;
     align-items: center;
@@ -477,22 +475,22 @@ button[disabled].action:hover {
     white-space: nowrap;
     display: flex;
 }
-.tool-group button.bar-button .icon {
+button.bar-button .icon {
     flex: 0 0 20px;
 }
-.tool-group button.bar-button .label {
+button.bar-button .label {
     flex: 0 1 auto;
     padding: 0 5px;
 }
 
-.tool-group button.dragging {
+button.bar-button.dragging {
     opacity: 0.75;
     z-index: 200;
 }
-.tool-group button.dragging .tooltip {
+button.bar-button.dragging .tooltip {
     display: none;
 }
-.tool-group button.dragging.removing {
+button.bar-button.dragging.removing {
     cursor: url(img/cursor-select-remove.png), pointer;
 }
 
@@ -575,9 +573,6 @@ button.add-note svg.icon {
 }
 
 
-#bar.narrow .tool-group {
-    width: unset;
-}
 #bar.narrow .spinner,
 #bar.narrow button.bar-button .label {
     display: none;
@@ -587,19 +582,26 @@ button.add-note svg.icon {
     border-right-width: 0;
 }
 
+[dir='ltr'] .undo-redo > button:first-of-type {
+    margin-right: 1px;
+}
+[dir='rtl'] .undo-redo > button:first-of-type {
+    margin-left: 1px;
+}
+
 /* Add a feature search bar
 ------------------------------------------------------- */
 
 .search-add {
-    width: 100%;
+    width: 200%;
     justify-content: center;
     position: relative;
+    min-width: 150px;
+    max-width: 325px;
 }
 .search-add .search-wrap {
     position: relative;
     width: 100%;
-    min-width: 150px;
-    max-width: 325px;
 }
 [dir='ltr'] .search-add .search-wrap {
     border-radius: 20px 4px 4px 20px;
@@ -778,25 +780,29 @@ button.add-note svg.icon {
 [dir='rtl'] .search-add .subitems {
     padding-right: 6px;
 }
-.search-add button.add-preset {
+
+/* Add a preset mode buttons
+------------------------------------------------------- */
+
+button.bar-button.add-preset {
     border-radius: 4px;
 }
-[dir='ltr'] .search-add button.add-preset {
+[dir='ltr'] button.bar-button.add-preset {
     margin-left: 1px;
 }
-[dir='rtl'] .search-add button.add-preset {
+[dir='rtl'] button.bar-button.add-preset {
     margin-right: 1px;
 }
-[dir='ltr'] .search-add button.add-preset.first-recent {
-    margin-left: 5px;
+[dir='ltr'] button.bar-button.add-preset.first-recent {
+    margin-left: 10px;
 }
-[dir='rtl'] .search-add button.add-preset.first-recent {
-    margin-right: 5px;
+[dir='rtl'] button.bar-button.add-preset.first-recent {
+    margin-right: 10px;
 }
-.search-add button.add-preset {
+button.bar-button.add-preset {
     padding: 0;
 }
-.search-add button.add-preset.disabled .preset-icon-container {
+button.add-preset.disabled .preset-icon-container {
     opacity: 0.5;
 }
 /* Header for modals / panes
@@ -5064,10 +5070,10 @@ svg.mouseclick use.right {
 }
 
 /* Move over tooltips that are near the edge of screen */
-button.sidebar-toggle .tooltip .tooltip-arrow {
+.sidebar-toggle .tooltip .tooltip-arrow {
     left: 36px;
 }
-[dir='rtl'] button.sidebar-toggle .tooltip .tooltip-arrow {
+[dir='rtl'] .sidebar-toggle .tooltip .tooltip-arrow {
     left: auto;
     right: 36px;
 }

modules/ui/notes.js

@@ -29,8 +29,18 @@ export function uiNotes(context) {
         return context.map().notesEditable() && mode && mode.id !== 'save';
     }
 
+    context.keybinding().on(mode.key, function() {
+        if (!enabled(mode)) return;
+
+        if (mode.id === context.mode().id) {
+            context.enter(modeBrowse(context));
+        } else {
+            context.enter(mode);
+        }
+    });
 
     return function(selection) {
+
         context
             .on('enter.editor.notes', function(entered) {
                 selection.selectAll('button.add-button')
@@ -45,16 +55,6 @@ export function uiNotes(context) {
                     .classed('mode-' + exited.id, false);
             });
 
-        context.keybinding().on(mode.key, function() {
-            if (!enabled(mode)) return;
-
-            if (mode.id === context.mode().id) {
-                context.enter(modeBrowse(context));
-            } else {
-                context.enter(mode);
-            }
-        });
-
 
         var debouncedUpdate = _debounce(update, 500, { leading: true, trailing: true });
 

modules/ui/top_toolbar.js

@@ -1,9 +1,14 @@
 
+import {
+    select as d3_select
+} from 'd3-selection';
+
+import _debounce from 'lodash-es/debounce';
+
 import { svgIcon } from '../svg';
 import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';
 
-import { uiFullScreen } from './full_screen';
 import { uiModes } from './modes';
 import { uiNotes } from './notes';
 import { uiSave } from './save';
@@ -14,18 +19,17 @@ import { uiUndoRedo } from './undo_redo';
 
 export function uiTopToolbar(context) {
 
+    var searchAdd = uiSearchAdd(context),
+        modes = uiModes(context),
+        notes = uiNotes(context),
+        undoRedo = uiUndoRedo(context),
+        save = uiSave(context);
 
-    function topToolbar(bar) {
+    var sidebarToggle = function(selection) {
 
-        // Leading area button group (Sidebar toggle)
-        var leadingArea = bar
-            .append('div')
-            .attr('class', 'tool-group leading-area');
-
-        var sidebarButton = leadingArea
-            .append('div')
+        selection
             .append('button')
-            .attr('class', 'sidebar-toggle bar-button')
+            .attr('class', 'bar-button')
             .attr('tabindex', -1)
             .on('click', function() {
                 context.ui().sidebar.toggle();
@@ -34,48 +38,69 @@ export function uiTopToolbar(context) {
                 .placement('bottom')
                 .html(true)
                 .title(uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key')))
-            );
+            )
+            .call(svgIcon('#iD-icon-sidebar-' + (textDirection === 'rtl' ? 'right' : 'left')));
+    };
 
-        var iconSuffix = textDirection === 'rtl' ? 'right' : 'left';
-        sidebarButton
-            .call(svgIcon('#iD-icon-sidebar-' + iconSuffix));
+    var itemContentByID = {
+        sidebar_toggle: sidebarToggle,
+        search_add: searchAdd,
+        modes: modes,
+        notes: notes,
+        undo_redo: undoRedo,
+        save: save
+    };
 
-        leadingArea
-            .append('div')
-            .attr('class', 'full-screen bar-group')
-            .call(uiFullScreen(context));
+    function notesEnabled() {
+        var noteLayer = context.layers().layer('notes');
+        return noteLayer && noteLayer.enabled();
+    }
 
+    function topToolbar(bar) {
 
-        // Center area button group (Point/Line/Area/Note mode buttons)
-        var centerArea = bar
-            .append('div')
-            .attr('class', 'tool-group center-area');
+        var debouncedUpdate = _debounce(update, 500, { leading: true, trailing: true });
+        context.layers()
+            .on('change.topToolbar', debouncedUpdate);
 
-        var addArea = centerArea.append('div')
-            .attr('class', 'search-add');
+        update();
 
-        addArea.call(uiSearchAdd(context), bar);
-        addArea.call(uiModes(context), bar);
+        function update() {
 
-        centerArea.append('div')
-            .attr('class', 'notes')
-            .call(uiNotes(context), bar);
+            var toolbarItemIDs = [
+                'sidebar_toggle',
+                'spacer',
+                'search_add',
+                'modes',
+                'spacer'
+            ];
 
+            if (notesEnabled()) {
+                toolbarItemIDs = toolbarItemIDs.concat(['notes', 'spacer']);
+            }
 
-        // Trailing area button group (Undo/Redo save buttons)
-        var trailingArea = bar
-            .append('div')
-            .attr('class', 'tool-group trailing-area');
+            toolbarItemIDs = toolbarItemIDs.concat(['undo_redo', 'save']);
 
-        trailingArea
-            .append('div')
-            .attr('class', 'joined')
-            .call(uiUndoRedo(context));
+            var toolbarItems = bar.selectAll('.toolbar-item')
+                .data(toolbarItemIDs, function(d) {
+                    return d;
+                });
+
+            toolbarItems.exit()
+                .remove();
+
+            toolbarItems
+                .enter()
+                .append('div')
+                .attr('class', function(d) {
+                    return 'toolbar-item ' + d.replace('_', '-');
+                })
+                .each(function(d) {
+                    if (itemContentByID[d]) {
+                        d3_select(this).call(itemContentByID[d], bar);
+                    }
+                });
+        }
 
-        trailingArea
-            .append('div')
-            .attr('class', 'save-wrap')
-            .call(uiSave(context));
     }
 
     return topToolbar;