diff --git a/css/80_app.css b/css/80_app.css index 5888cd007..72c957f2d 100644 --- a/css/80_app.css +++ b/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, diff --git a/data/core.yaml b/data/core.yaml index 045db6496..bdcbcfca6 100644 --- a/data/core.yaml +++ b/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}" diff --git a/dist/locales/en.json b/dist/locales/en.json index b67bbe8be..09aa3b865 100644 --- a/dist/locales/en.json +++ b/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", diff --git a/modules/ui/background.js b/modules/ui/background.js index 3dbc1c454..6f91098b8 100644 --- a/modules/ui/background.js +++ b/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') diff --git a/modules/ui/confirm.js b/modules/ui/confirm.js index 8eec4b6cd..a993f64c3 100644 --- a/modules/ui/confirm.js +++ b/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(); }) diff --git a/modules/ui/help.js b/modules/ui/help.js index a8b5bbbbd..1d350be2d 100644 --- a/modules/ui/help.js +++ b/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') diff --git a/modules/ui/init.js b/modules/ui/init.js index 9ce38a042..44316c429 100644 --- a/modules/ui/init.js +++ b/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'); diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index 369f8554f..9f4f96e53 100644 --- a/modules/ui/map_data.js +++ b/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') diff --git a/modules/ui/modes.js b/modules/ui/modes.js index 3ccd5dcaf..56e501445 100644 --- a/modules/ui/modes.js +++ b/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(); }); diff --git a/modules/ui/save.js b/modules/ui/save.js index fa23d3025..09d6e5d08 100644 --- a/modules/ui/save.js +++ b/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')); diff --git a/modules/ui/settings/custom_background.js b/modules/ui/settings/custom_background.js index 9b2fc4e05..7af7365a5 100644 --- a/modules/ui/settings/custom_background.js +++ b/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); diff --git a/modules/ui/settings/custom_data.js b/modules/ui/settings/custom_data.js index 090a9ec42..0ba28175f 100644 --- a/modules/ui/settings/custom_data.js +++ b/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); diff --git a/modules/ui/undo_redo.js b/modules/ui/undo_redo.js index 159f74c9a..e57a93140 100644 --- a/modules/ui/undo_redo.js +++ b/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);