Merge pull request #5455 from openstreetmap/flexbox-buttons

Flexbox buttons in top bar

data/core.yaml

@@ -302,9 +302,9 @@ en:
   loading_auth: "Connecting to OpenStreetMap..."
   report_a_bug: Report a bug
   help_translate: Help translate
-  sidebar_button:
-    title: Sidebar
-    tooltip: Open the sidebar.
+  sidebar:
+    key: '`'
+    tooltip: Toggle the sidebar.
   feature_info:
     hidden_warning: "{count} hidden features"
     hidden_details: "These features are currently hidden: {details}"
@@ -1159,6 +1159,7 @@ en:
         background_switch: "Switch back to last background"
         map_data: "Show map data options"
         fullscreen: "Enter full screen mode"
+        sidebar: "Toggle sidebar"
         wireframe: "Toggle wireframe mode"
         minimap: "Toggle minimap"
       selecting:

data/shortcuts.json

@@ -66,6 +66,10 @@
               "shortcuts": ["F", "F11"],
               "text": "shortcuts.browsing.display_options.fullscreen"
             },
+            {
+              "shortcuts": ["sidebar.key"],
+              "text": "shortcuts.browsing.display_options.sidebar"
+            },
             {
               "shortcuts": ["area_fill.wireframe.key"],
               "text": "shortcuts.browsing.display_options.wireframe"

dist/locales/en.json

@@ -383,9 +383,9 @@
         "loading_auth": "Connecting to OpenStreetMap...",
         "report_a_bug": "Report a bug",
         "help_translate": "Help translate",
-        "sidebar_button": {
-            "title": "Sidebar",
-            "tooltip": "Open the sidebar."
+        "sidebar": {
+            "key": "`",
+            "tooltip": "Toggle the sidebar."
         },
         "feature_info": {
             "hidden_warning": "{count} hidden features",
@@ -1339,6 +1339,7 @@
                     "background_switch": "Switch back to last background",
                     "map_data": "Show map data options",
                     "fullscreen": "Enter full screen mode",
+                    "sidebar": "Toggle sidebar",
                     "wireframe": "Toggle wireframe mode",
                     "minimap": "Toggle minimap"
                 },

modules/geo/extent.js

@@ -20,7 +20,6 @@ export function geoExtent(min, max) {
     }
 }
 
-// $FlowFixMe
 geoExtent.prototype = new Array(2);
 
 _extend(geoExtent.prototype, {

modules/modes/select_data.js

@@ -1,3 +1,6 @@
+
+import { geoBounds as d3_geoBounds } from 'd3-geo';
+
 import {
     event as d3_event,
     select as d3_select
@@ -12,11 +15,8 @@ import {
     behaviorSelect
 } from '../behavior';
 
-import {
-    modeDragNode,
-    modeDragNote
-} from '../modes';
-
+import { geoExtent } from '../geo';
+import { modeDragNode, modeDragNote } from '../modes';
 import { modeBrowse } from './browse';
 import { uiDataEditor } from '../ui';
 
@@ -69,8 +69,12 @@ export function modeSelectData(context, selectedDatum) {
 
         selectData();
 
-        context.ui().sidebar
-            .show(dataEditor.datum(selectedDatum));
+        var sidebar = context.ui().sidebar;
+        sidebar.show(dataEditor.datum(selectedDatum));
+
+        // expand the sidebar, avoid obscuring the data if needed
+        var extent = geoExtent(d3_geoBounds(selectedDatum));
+        sidebar.expand(sidebar.intersects(extent));
 
         context.map()
             .on('drawn.select-data', selectData);

modules/modes/select_note.js

@@ -105,8 +105,11 @@ export function modeSelectNote(context, selectedNoteID) {
 
         selectNote();
 
-        context.ui().sidebar
-            .show(noteEditor.note(note));
+        var sidebar = context.ui().sidebar;
+        sidebar.show(noteEditor.note(note));
+
+        // expand the sidebar, avoid obscuring the note if needed
+        sidebar.expand(sidebar.intersects(note.extent()));
 
         context.map()
             .on('drawn.select', selectNote);

modules/renderer/map.js

@@ -662,13 +662,11 @@ export function rendererMap(context) {
 
     map.dimensions = function(_) {
         if (!arguments.length) return dimensions;
-        var center = map.center();
         dimensions = _;
         drawLayers.dimensions(dimensions);
         context.background().dimensions(dimensions);
         projection.clipExtent([[0, 0], dimensions]);
         mouse = utilFastMouse(supersurface.node());
-        setCenter(center);
 
         scheduleRedraw();
         return map;

modules/services/mapillary.js

@@ -372,7 +372,7 @@ export default {
         defs.call(svgDefs(context).addSprites, ['mapillary-sprite']);
 
         // Register viewer resize handler
-        context.ui().on('photoviewerResize', function() {
+        context.ui().photoviewer.on('resize', function() {
             if (_mlyViewer) {
                 _mlyViewer.resize();
             }

modules/services/openstreetcam.js

@@ -327,7 +327,7 @@ export default {
 
 
         // Register viewer resize handler
-        context.ui().on('photoviewerResize', function(dimensions) {
+        context.ui().photoviewer.on('resize', function(dimensions) {
             imgZoom = d3_zoom()
                 .extent([[0, 0], dimensions])
                 .translateExtent([[0, 0], dimensions])

modules/services/streetside.js

@@ -626,7 +626,7 @@ export default {
 
 
         // Register viewer resize handler
-        context.ui().on('photoviewerResize', function() {
+        context.ui().photoviewer.on('resize', function() {
             if (_pannellumViewer) {
                 _pannellumViewer.resize();
             }

modules/ui/background.js

@@ -340,7 +340,7 @@ export function uiBackground(context) {
 
         var pane = selection
             .append('div')
-            .attr('class', 'fillL map-pane col4 hide');
+            .attr('class', 'fillL map-pane hide');
 
         var paneTooltip = tooltip()
             .placement((textDirection === 'rtl') ? 'right' : 'left')

modules/ui/confirm.js

@@ -23,7 +23,7 @@ export function uiConfirm(selection) {
     modalSelection.okButton = function() {
         buttons
             .append('button')
-            .attr('class', 'button ok-button action col4')
+            .attr('class', 'button ok-button action')
             .on('click.confirm', function() {
                 modalSelection.remove();
             })

modules/ui/help.js

@@ -384,7 +384,7 @@ export function uiHelp(context) {
 
 
         var pane = selection.append('div')
-            .attr('class', 'help-wrap map-pane fillL col6 hide');
+            .attr('class', 'help-wrap map-pane fillL hide');
 
         var tooltipBehavior = tooltip()
             .placement((textDirection === 'rtl') ? 'right' : 'left')

modules/ui/init.js

@@ -37,14 +37,18 @@ import { uiSidebar } from './sidebar';
 import { uiSpinner } from './spinner';
 import { uiSplash } from './splash';
 import { uiStatus } from './status';
+import { uiTooltipHtml } from './tooltipHtml';
 import { uiUndoRedo } from './undo_redo';
 import { uiVersion } from './version';
 import { uiZoom } from './zoom';
 import { uiCmd } from './cmd';
 
 
 export function uiInit(context) {
-    var uiInitCounter = 0;
+    var _initCounter = 0;
+    var _initCallback;
+    var _needWidth = {};
+
 
     function render(container) {
         container
@@ -74,6 +78,7 @@ export function uiInit(context) {
             .attr('id', 'content')
             .attr('class', 'active');
 
+        // Top toolbar
         var bar = content
             .append('div')
             .attr('id', 'bar')
@@ -90,56 +95,66 @@ export function uiInit(context) {
             .call(uiInfo(context))
             .call(uiNotice(context));
 
+        // Leading area button group (Sidebar toggle)
         var leadingArea = bar
             .append('div')
-            .attr('class', 'leading-area');
+            .attr('class', 'tool-group leading-area');
 
         var sidebarButton = leadingArea
             .append('div')
-            .attr('class', 'button-wrap sidebar-collapse')
             .append('button')
-            .attr('class', 'col12')
+            .attr('class', 'sidebar-toggle')
             .attr('tabindex', -1)
-            .on('click', ui.sidebar.toggleCollapse)
-            .call(tooltip().title(t('sidebar_button.tooltip')).placement('bottom'));
+            .on('click', ui.sidebar.toggle)
+            .call(tooltip()
+                .placement('bottom')
+                .html(true)
+                .title(uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key')))
+            );
+
         var iconSuffix = textDirection === 'rtl' ? 'right' : 'left';
         sidebarButton
-            .call(svgIcon('#iD-icon-sidebar-'+iconSuffix, 'pre-text'))
-            .append('span')
-            .attr('class', 'label')
-            .text(t('sidebar_button.title'));
+            .call(svgIcon('#iD-icon-sidebar-' + iconSuffix));
+
+        leadingArea
+            .append('div')
+            .attr('class', 'full-screen bar-group')
+            .call(uiFullScreen(context));
 
+
+        // Center area button group (Point/Line/Area/Note mode buttons)
         bar
             .append('div')
-            .attr('class', 'center-area')
+            .attr('class', 'tool-group center-area')
             .append('div')
-            .attr('class', 'modes button-wrap joined')
+            .attr('class', 'modes joined')
             .call(uiModes(context), bar);
 
+
+        // Trailing area button group (Undo/Redo save buttons)
         var trailingArea = bar
             .append('div')
-            .attr('class', 'trailing-area');
+            .attr('class', 'tool-group trailing-area');
 
         trailingArea
             .append('div')
-            .attr('class', 'full-screen')
-            .call(uiFullScreen(context));
+            .attr('class', 'joined')
+            .call(uiUndoRedo(context));
 
         trailingArea
             .append('div')
-            .attr('class', 'spinner')
-            .call(uiSpinner(context));
+            .attr('class', 'save-wrap')
+            .call(uiSave(context));
 
-        trailingArea
-            .append('div')
-            .attr('class', 'button-wrap joined')
-            .call(uiUndoRedo(context));
 
-        trailingArea
+        // For now, just put spinner at the end
+        bar
             .append('div')
-            .attr('class', 'button-wrap save-wrap')
-            .call(uiSave(context));
+            .attr('class', 'spinner')
+            .call(uiSpinner(context));
+
 
+        // Map controls (appended to #bar, but absolutely positioned)
         var controls = bar
             .append('div')
             .attr('class', 'map-controls');
@@ -280,6 +295,7 @@ export function uiInit(context) {
         var pa = 80;  // pan amount
         var keybinding = d3_keybinding('main')
             .on('⌫', function() { d3_event.preventDefault(); })
+            .on(t('sidebar.key'), ui.sidebar.toggle)
             .on('←', pan([pa, 0]))
             .on('↑', pan([0, pa]))
             .on('→', pan([-pa, 0]))
@@ -294,7 +310,7 @@ export function uiInit(context) {
 
         context.enter(modeBrowse(context));
 
-        if (!uiInitCounter++) {
+        if (!_initCounter++) {
             if (!hash.startWalkthrough) {
                 context.container()
                     .call(uiSplash(context))
@@ -319,7 +335,7 @@ export function uiInit(context) {
                 });
         }
 
-        uiInitCounter++;
+        _initCounter++;
 
         if (hash.startWalkthrough) {
             hash.startWalkthrough = false;
@@ -336,10 +352,8 @@ export function uiInit(context) {
     }
 
 
-    var renderCallback;
-
     function ui(node, callback) {
-        renderCallback = callback;
+        _initCallback = callback;
         var container = d3_select(node);
         context.container(container);
         context.loadLocale(function(err) {
@@ -359,7 +373,7 @@ export function uiInit(context) {
             if (!err) {
                 context.container().selectAll('*').remove();
                 render(context.container());
-                if (renderCallback) renderCallback();
+                if (_initCallback) _initCallback();
             }
         });
     };
@@ -369,13 +383,48 @@ export function uiInit(context) {
 
     ui.photoviewer = uiPhotoviewer(context);
 
-    ui.onResize = function() {
+    ui.onResize = function(withPan) {
+        var map = context.map();
         var content = d3_select('#content');
         var mapDimensions = utilGetDimensions(content, true);
-        context.map().dimensions(mapDimensions);
+
+        if (withPan !== undefined) {
+            map.redrawEnable(false);
+            map.pan(withPan);
+            map.redrawEnable(true);
+        }
+        map.dimensions(mapDimensions);
 
         ui.photoviewer.onMapResize();
+
+        // check if header or footer have overflowed
+        ui.checkOverflow('#bar');
+        ui.checkOverflow('#footer');
+    };
+
+
+    // Call checkOverflow when resizing or whenever the contents change.
+    ui.checkOverflow = function(selector, reset) {
+        if (reset) {
+            delete _needWidth[selector];
+        }
+
+        var element = d3_select(selector);
+        var scrollWidth = element.property('scrollWidth');
+        var clientWidth = element.property('clientWidth');
+        var needed = _needWidth[selector] || scrollWidth;
+
+        if (scrollWidth > clientWidth) {    // overflow happening
+            element.classed('narrow', true);
+            if (!_needWidth[selector]) {
+                _needWidth[selector] = scrollWidth;
+            }
+
+        } else if (scrollWidth >= needed) {
+            element.classed('narrow', false);
+        }
     };
 
+
     return ui;
 }