Flexbox buttons in top bar

- Makes the "Sidebar" toggle button permanent but removes the label
- Did some things to the "Save" button to make it the same width whether there
  is a count or not (prevents the buttons from jumping when pressing undo/redo)
- Removes a lot of the floated col rules that aren't used much anymore

css/80_app.css

@@ -61,6 +61,7 @@ body {
     #content > #bar {
         width: 100vw;
     }
+/*
     #content.inactive > #bar > .spacer.col4 {
         width: 0px;
     }
@@ -69,6 +70,7 @@ body {
         transition-duration: 200ms;
         transition-timing-function: step-end;
     }
+*/
 }
 
 #defs {
@@ -92,12 +94,9 @@ body {
     height: 40px;
     width: 40px;
     border-radius: 4px;
-    margin-right: 10px;
     background: black;
 }
 [dir='rtl'] .spinner img {
-    margin-left: 10px;
-    margin-right: auto;
     -moz-transform: scaleX(-1);
     -o-transform: scaleX(-1);
     -webkit-transform: scaleX(-1);
@@ -278,18 +277,8 @@ table.tags, table.tags td, table.tags th {
 
 /* Grid
 ------------------------------------------------------- */
-.col0    { float: left; width: 04.1666%; }
-.col1    { float: left; width: 08.3333%; }
-.col2    { float: left; width: 16.6666%; }
-.col3    { float: left; width: 25.0000%; max-width: 300px; }
-.col4    { float: left; width: 33.3333%; max-width: 400px; }
-.col5    { float: left; width: 41.6666%; max-width: 500px; }
 .col6    { float: left; width: 50.0000%; max-width: 600px; }
-.col7    { float: left; width: 58.3333%; }
 .col8    { float: left; width: 66.6666%; }
-.col9    { float: left; width: 75.0000%; }
-.col10   { float: left; width: 83.3333%; }
-.col11   { float: left; width: 91.6666%; }
 .col12   { float: left; width: 100.0000%; }
 
 /* UI Lists
@@ -326,7 +315,7 @@ ul li { list-style: none;}
 }
 
 .toggle-list > label.active {
-    background: #E8EBFF;
+    background: #e8ebff;
 }
 
 
@@ -433,7 +422,7 @@ button.minor:hover {
     background-color: #f1f1f1;
 }
 
-.button-wrap {
+/*.button-wrap {
     display: inline-block;
     padding-right: 10px;
     margin: 0;
@@ -455,7 +444,7 @@ button.minor:hover {
 }
 [dir='rtl'] .button-wrap:last-of-type {
     padding-left: 0;
-}
+}*/
 
 .joined button {
     border-radius: 0;
@@ -489,18 +478,15 @@ button.action {
     background: #7092ff;
     color: #fff;
 }
-
 button[disabled].action,
 button[disabled].action:hover {
     background: #cccccc;
     color: #888;
 }
-
 button.action:focus,
 button.action:hover {
-    background: #597BE7;
+    background: #597be7;
 }
-
 button.secondary-action {
     background: #ececec;
 }
@@ -509,61 +495,6 @@ button.secondary-action:focus,
 button.secondary-action:hover {
     background: #cccccc;
 }
-.button-wrap.sidebar-collapse,
-.button-wrap.save-wrap {
-    min-width: 33.3333%;
-}
-.button-wrap.modes {
-    width: 100%;
-}
-
-button.undo-button,
-button.redo-button {
-    width: 44px;
-}
-button.save {
-    padding: 0;
-    display: flex;
-}
-button.save .save-inner-wrap {
-    flex: 1;
-}
-button.save .count {
-    display: none;
-}
-button.save.has-count .count {
-    display: inline-block;
-    color: #333;
-    border: 0px solid rgba(51, 51, 51, 0.2);
-    border-left-width: 1px;
-    padding: 0px 12px;
-}
-[dir='rtl'] button.save.has-count .count {
-    border-left-width: 0px;
-    border-right-width: 1px;
-}
-
-.help-wrap svg.icon.pre-text.add-note,
-button.add-note svg.icon {
-    height: 15px;
-    width: 15px;
-    color: rgba(0,0,0,0.25);
-    stroke: #333;
-    stroke-width: 60px;
-    margin-top: 3px;
-}
-button.add-note svg.icon {
-    margin-left: unset;
-    margin-right: 7px;
-}
-[dir='rtl'] button.add-note svg.icon {
-    margin-left: 7px;
-    margin-right: unset;
-}
-.help-wrap svg.icon.pre-text.add-note {
-    margin-left: 3px;
-    margin-right: 3px;
-}
 
 
 /* Icons
@@ -622,6 +553,9 @@ button.add-note svg.icon {
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */
 #bar {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
     position: absolute;
     padding: 10px;
     left: 0;
@@ -629,52 +563,104 @@ button.add-note svg.icon {
     right: 0;
     height: 60px;
     z-index: 9;
-    min-width: 600px;
 }
 
-[dir='rtl'] #bar .button-wrap button {
-    float: right;
+.tool-group {
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: row nowrap;
 }
-#bar .center-area,
-#bar .trailing-area {
-    min-width: 50%;
+.tool-group.leading-area {
+    justify-content: flex-start;
 }
-.sidebar-collapsed #bar .leading-area,
-.sidebar-collapsed #bar .center-area,
-.sidebar-collapsed #bar .trailing-area {
-    min-width: 33.3333%;
+.tool-group.center-area {
+    justify-content: center;
 }
-#bar .center-area {
-    float: left;
+.tool-group.trailing-area {
+    justify-content: flex-end;
 }
-[dir='rtl'] #bar .center-area {
-    float: right;
+
+.tool-group > div {
+    display: flex;
+    margin: 0 5px;
 }
-.sidebar-collapsed #bar .center-area {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    float: none;
+
+.tool-group button {
+    display: flex;
+    flex: 1 1 auto;
+    flex-flow: row nowrap;
+    padding: 0 10px;
+    min-width: 30px;
 }
-#bar .leading-area {
-    float: left;
-    display: none;
+
+.tool-group button .icon {
+    flex: 0 0 20px;
 }
-[dir='rtl'] #bar .leading-area {
-    float: right;
+.tool-group button .label {
+    flex: 0 1 auto;
+    padding: 0 5px;
 }
-.sidebar-collapsed #bar .leading-area {
+
+
+button.save .count {
+    visibility: hidden;
     display: inline-block;
+    border: 0px solid #ccc;
+    border-left-width: 1px;
+    padding: 0px 8px;
+    min-width: 32px;
+    text-align: center;
 }
-#bar .trailing-area {
-    float: right;
-    text-align: right;
+[dir='rtl'] button.save .count {
+    border-left-width: 0px;
+    border-right-width: 1px;
 }
-[dir='rtl'] #bar .trailing-area {
-    float: left;
-    text-align: left;
+button.save.has-count .count {
+    visibility: visible;
 }
 
+/* if no count, shift label over where the count would be, preserving width */
+button.save .label {
+    margin-right: -12px;
+    margin-left: 15px;
+}
+[dir='rtl'] button.save .label {
+    margin-left: -12px;
+    margin-right: 15px;
+}
+button.save.has-count .label {
+    margin-right: 3px;
+    margin-left: 0;
+}
+[dir='rtl'] button.save.has-count .label {
+    margin-left: 3px;
+    margin-right: 0;
+}
+
+
+.help-wrap svg.icon.pre-text.add-note,
+button.add-note svg.icon {
+    height: 15px;
+    width: 15px;
+    color: rgba(0,0,0,0.25);
+    stroke: #333;
+    stroke-width: 60px;
+    margin-top: 3px;
+}
+button.add-note svg.icon {
+    margin-left: unset;
+    margin-right: 4px;
+}
+[dir='rtl'] button.add-note svg.icon {
+    margin-left: 4px;
+    margin-right: unset;
+}
+.help-wrap svg.icon.pre-text.add-note {
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
+
 
 /* Header for modals / panes
 ------------------------------------------------------- */
@@ -771,14 +757,6 @@ button.add-note svg.icon {
     justify-content: center;
 }
 
-.sidebar-component .body {
-    width: 100%;
-    overflow: auto;
-    top: 60px;
-    bottom: 0;
-    position: absolute;
-}
-
 
 /* Hide/Toggle collapsable sections (aka Disclosure)
 ------------------------------------------------------- */
@@ -801,6 +779,25 @@ a.hide-toggle {
     padding-bottom: 5px;
 }
 
+
+/* Sidebar / Inspector
+------------------------------------------------------- */
+#sidebar {
+    position: relative;
+    float: left;
+    height: 100%;
+    z-index: 10;
+    background: #f6f6f6;
+    -ms-user-select: element;
+    border: 0px solid #ccc;
+    border-right-width: 1px;
+}
+[dir='rtl'] #sidebar {
+    float: right;
+    border-right-width: 0px;
+    border-left-width: 1px;
+}
+
 #sidebar-resizer {
     position: absolute;
     top: 0;
@@ -822,23 +819,6 @@ a.hide-toggle {
     left: -10px;
 }
 
-/* Sidebar / Inspector
-------------------------------------------------------- */
-#sidebar {
-    position: relative;
-    float: left;
-    height: 100%;
-    z-index: 10;
-    background: #f6f6f6;
-    -ms-user-select: element;
-    border: 0px solid #ccc;
-    border-right-width: 1px;
-}
-[dir='rtl'] #sidebar {
-    float: right;
-    border-right-width: 0px;
-    border-left-width: 1px;
-}
 
 .sidebar-component {
     position: absolute;
@@ -848,6 +828,14 @@ a.hide-toggle {
     right: 0;
 }
 
+.sidebar-component .body {
+    width: 100%;
+    overflow: auto;
+    top: 60px;
+    bottom: 0;
+    position: absolute;
+}
+
 .panewrap {
     position: absolute;
     width: 200%;
@@ -935,6 +923,7 @@ a.hide-toggle {
 }
 
 
+
 /* Feature List / Search Results
 ------------------------------------------------------- */
 .feature-list  {
@@ -3019,6 +3008,8 @@ div.full-screen > button:hover {
     top: 60px;
     bottom: 30px;
     right: 0;
+    width: 33.3333%;
+    max-width: 400px;
     padding-bottom: 50px;
     overflow: hidden;
     z-index: -1;
@@ -3028,6 +3019,11 @@ div.full-screen > button:hover {
     right: auto !important;
 }
 
+.map-pane.help-wrap {
+    width: 50.0000%;
+    max-width: 600px;
+}
+
 .pane-heading {
     display: flex;
     flex-flow: row nowrap;
@@ -3826,6 +3822,10 @@ img.tile-debug {
     text-align: center;
 }
 
+.modal-section.buttons button {
+    min-width: 130px;
+}
+
 .modal-section.buttons .action {
     display: inline-block;
     margin: 0 10px;
@@ -4103,9 +4103,6 @@ svg.mouseclick use.right {
 .settings-modal textarea {
     height: 70px;
 }
-.settings-modal .buttons .button.col3 {
-    float: none;   /* undo float left */
-}
 
 .settings-custom-background .instructions-template {
     margin-bottom: 20px;
@@ -4508,12 +4505,12 @@ svg.mouseclick use.right {
 }
 
 /* Move over tooltips that are near the edge of screen */
-.add-point .tooltip .tooltip-arrow {
-    left: 60px;
+button.sidebar-toggle .tooltip .tooltip-arrow {
+    left: 32px;
 }
-[dir='rtl'] .add-point .tooltip .tooltip-arrow {
+[dir='rtl'] button.sidebar-toggle .tooltip .tooltip-arrow {
     left: auto;
-    right: 60px;
+    right: 32px;
 }
 
 li:first-of-type .badge .tooltip,

data/core.yaml

@@ -296,7 +296,7 @@ en:
   help_translate: Help translate
   sidebar_button:
     title: Sidebar
-    tooltip: Open the sidebar.
+    tooltip: Toggle the sidebar.
   feature_info:
     hidden_warning: "{count} hidden features"
     hidden_details: "These features are currently hidden: {details}"

dist/locales/en.json

@@ -375,7 +375,7 @@
         "help_translate": "Help translate",
         "sidebar_button": {
             "title": "Sidebar",
-            "tooltip": "Open the sidebar."
+            "tooltip": "Toggle the sidebar."
         },
         "feature_info": {
             "hidden_warning": "{count} hidden features",

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

@@ -74,6 +74,7 @@ export function uiInit(context) {
             .attr('id', 'content')
             .attr('class', 'active');
 
+        // Top toolbar
         var bar = content
             .append('div')
             .attr('id', 'bar')
@@ -90,56 +91,62 @@ 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'));
+
         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));
+            // .append('span')
+            // .attr('class', 'label')
+            // .text(t('sidebar_button.title'));
 
+        leadingArea
+            .append('div')
+            .attr('class', 'full-screen bar-group')
+            .call(uiFullScreen(context));
+
+
+        // Center area button group (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);
 
+
+        // Center 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', 'save-wrap')
+            .call(uiSave(context));
 
         trailingArea
             .append('div')
             .attr('class', 'spinner')
             .call(uiSpinner(context));
 
-        trailingArea
-            .append('div')
-            .attr('class', 'button-wrap joined')
-            .call(uiUndoRedo(context));
-
-        trailingArea
-            .append('div')
-            .attr('class', 'button-wrap save-wrap')
-            .call(uiSave(context));
 
+        // Map controls
         var controls = bar
             .append('div')
             .attr('class', 'map-controls');

modules/ui/map_data.js

@@ -578,7 +578,7 @@ export function uiMapData(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/modes.js

@@ -125,7 +125,7 @@ export function uiModes(context) {
             buttonsEnter
                 .each(function(d) {
                     d3_select(this)
-                        .call(svgIcon('#iD-icon-' + d.button, 'pre-text'));
+                        .call(svgIcon('#iD-icon-' + d.button));
                 });
 
             buttonsEnter
@@ -136,8 +136,6 @@ export function uiModes(context) {
             // update
             buttons = buttons
                 .merge(buttonsEnter)
-                .classed('col3', showNotes)    // 25%
-                .classed('col4', !showNotes)   // 33%
                 .property('disabled', function(d) {
                     return d.id === 'add-note' ? !notesEditable() : !editable();
                 });

modules/ui/save.js

@@ -80,15 +80,15 @@ export function uiSave(context) {
 
         var button = selection
             .append('button')
-            .attr('class', 'save col12 disabled')
+            .attr('class', 'save disabled')
             .attr('tabindex', -1)
             .on('click', save)
             .call(tooltipBehavior);
 
         button
-            .append('div')
-            .attr('class', 'save-inner-wrap')
-            .call(svgIcon('#iD-icon-save', 'pre-text'))
+            .call(svgIcon('#iD-icon-save'));
+
+        button
             .append('span')
             .attr('class', 'label')
             .text(t('save.title'));

modules/ui/settings/custom_background.js

@@ -41,12 +41,12 @@ export function uiSettingsCustomBackground(context) {
             .property('value', _currSettings.template);
 
 
-        // insert a cancel button, and adjust the button widths
+        // insert a cancel button
         var buttonSection = modal.select('.modal-section.buttons');
 
         buttonSection
             .insert('button', '.ok-button')
-            .attr('class', 'button col3 cancel-button secondary-action')
+            .attr('class', 'button cancel-button secondary-action')
             .text(t('confirm.cancel'));
 
 
@@ -54,8 +54,6 @@ export function uiSettingsCustomBackground(context) {
             .on('click.cancel', clickCancel);
 
         buttonSection.select('.ok-button')
-            .classed('col3', true)
-            .classed('col4', false)
             .attr('disabled', isSaveDisabled)
             .on('click.save', clickSave);
 

modules/ui/settings/custom_data.js

@@ -70,12 +70,12 @@ export function uiSettingsCustomData(context) {
             .property('value', _currSettings.url);
 
 
-        // insert a cancel button, and adjust the button widths
+        // insert a cancel button
         var buttonSection = modal.select('.modal-section.buttons');
 
         buttonSection
             .insert('button', '.ok-button')
-            .attr('class', 'button col3 cancel-button secondary-action')
+            .attr('class', 'button cancel-button secondary-action')
             .text(t('confirm.cancel'));
 
 
@@ -83,8 +83,6 @@ export function uiSettingsCustomData(context) {
             .on('click.cancel', clickCancel);
 
         buttonSection.select('.ok-button')
-            .classed('col3', true)
-            .classed('col4', false)
             .attr('disabled', isSaveDisabled)
             .on('click.save', clickSave);
 

modules/ui/undo_redo.js

@@ -48,7 +48,7 @@ export function uiUndoRedo(context) {
             .data(commands)
             .enter()
             .append('button')
-            .attr('class', function(d) { return 'col6 disabled ' + d.id + '-button'; })
+            .attr('class', function(d) { return 'disabled ' + d.id + '-button'; })
             .on('click', function(d) { return d.action(); })
             .call(tooltipBehavior);