From 776bf103d87c914072091e2b97db6deb861a27f2 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Mon, 25 Mar 2019 12:25:04 -0400 Subject: [PATCH] Reorganize toolbar code --- css/80_app.css | 1 + data/core.yaml | 1 + dist/locales/en.json | 1 + modules/ui/index.js | 5 +- modules/ui/{modes.js => tools/add_recent.js} | 21 +++-- modules/ui/tools/index.js | 6 ++ modules/ui/{ => tools}/notes.js | 25 +++--- modules/ui/{ => tools}/save.js | 24 ++++-- modules/ui/{ => tools}/search_add.js | 32 ++++---- modules/ui/tools/sidebar_toggle.js | 31 ++++++++ modules/ui/{ => tools}/undo_redo.js | 22 ++++-- modules/ui/top_toolbar.js | 82 +++++--------------- 12 files changed, 137 insertions(+), 114 deletions(-) rename modules/ui/{modes.js => tools/add_recent.js} (96%) create mode 100644 modules/ui/tools/index.js rename modules/ui/{ => tools}/notes.js (90%) rename modules/ui/{ => tools}/save.js (86%) rename modules/ui/{ => tools}/search_add.js (96%) create mode 100644 modules/ui/tools/sidebar_toggle.js rename modules/ui/{ => tools}/undo_redo.js (87%) diff --git a/css/80_app.css b/css/80_app.css index 633a0cdd9..d37282d3b 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -463,6 +463,7 @@ button[disabled].action:hover { margin-top: 1px; margin-bottom: 2px; font-size: 11px; + white-space: nowrap; } #bar .toolbar-item:not(.spacer) { margin: 0 5px 0 5px; diff --git a/data/core.yaml b/data/core.yaml index b2c56f81b..9fdd6ac04 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -36,6 +36,7 @@ en: filter_tooltip: points add_note: title: Note + label: Add Note description: "Spotted an issue? Let other mappers know." tail: Click on the map to add a note. key: N diff --git a/dist/locales/en.json b/dist/locales/en.json index d2dd8ef2d..bc36a9b1e 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -43,6 +43,7 @@ }, "add_note": { "title": "Note", + "label": "Add Note", "description": "Spotted an issue? Let other mappers know.", "tail": "Click on the map to add a note.", "key": "N" diff --git a/modules/ui/index.js b/modules/ui/index.js index 25775c454..137bae15e 100644 --- a/modules/ui/index.js +++ b/modules/ui/index.js @@ -42,7 +42,6 @@ export { uiLoading } from './loading'; export { uiMapData } from './map_data'; export { uiMapInMap } from './map_in_map'; export { uiModal } from './modal'; -export { uiModes } from './modes'; export { uiNotice } from './notice'; export { uiNoteComments } from './note_comments'; export { uiNoteEditor } from './note_editor'; @@ -57,7 +56,6 @@ export { uiRawMemberEditor } from './raw_member_editor'; export { uiRawMembershipEditor } from './raw_membership_editor'; export { uiRawTagEditor } from './raw_tag_editor'; export { uiRestore } from './restore'; -export { uiSave } from './save'; export { uiScale } from './scale'; export { uiSelectionList } from './selection_list'; export { uiSidebar } from './sidebar'; @@ -69,8 +67,7 @@ export { uiSuccess } from './success'; export { uiTagReference } from './tag_reference'; export { uiToggle } from './toggle'; export { uiTooltipHtml } from './tooltipHtml'; -export { uiUndoRedo } from './undo_redo'; export { uiVersion } from './version'; export { uiViewOnOSM } from './view_on_osm'; export { uiViewOnKeepRight } from './view_on_keepRight'; -export { uiZoom } from './zoom'; \ No newline at end of file +export { uiZoom } from './zoom'; diff --git a/modules/ui/modes.js b/modules/ui/tools/add_recent.js similarity index 96% rename from modules/ui/modes.js rename to modules/ui/tools/add_recent.js index fb222c5fe..b0a4c0358 100644 --- a/modules/ui/modes.js +++ b/modules/ui/tools/add_recent.js @@ -4,14 +4,19 @@ import _uniqWith from 'lodash-es/uniqWith'; import { drag as d3_drag } from 'd3-drag'; import { event as d3_event, select as d3_select } from 'd3-selection'; -import { modeAddArea, modeAddLine, modeAddPoint, modeBrowse } from '../modes'; -import { t, textDirection } from '../util/locale'; -import { tooltip } from '../util/tooltip'; -import { uiPresetIcon } from './preset_icon'; -import { uiTooltipHtml } from './tooltipHtml'; +import { modeAddArea, modeAddLine, modeAddPoint, modeBrowse } from '../../modes'; +import { t, textDirection } from '../../util/locale'; +import { tooltip } from '../../util/tooltip'; +import { uiPresetIcon } from '../preset_icon'; +import { uiTooltipHtml } from '../tooltipHtml'; -export function uiModes(context) { +export function uiToolAddRecent(context) { + + var tool = { + id: 'modes', + label: t('toolbar.recent') + }; function enabled() { return osmEditable(); @@ -38,7 +43,7 @@ export function uiModes(context) { } - return function(selection) { + tool.render = function(selection) { context .on('enter.editor', function(entered) { selection.selectAll('button.add-button') @@ -313,4 +318,6 @@ export function uiModes(context) { context.ui().checkOverflow('#bar', true); } }; + + return tool; } diff --git a/modules/ui/tools/index.js b/modules/ui/tools/index.js new file mode 100644 index 000000000..65d9e7de3 --- /dev/null +++ b/modules/ui/tools/index.js @@ -0,0 +1,6 @@ +export * from './add_recent'; +export * from './notes'; +export * from './save'; +export * from './search_add'; +export * from './sidebar_toggle'; +export * from './undo_redo'; diff --git a/modules/ui/notes.js b/modules/ui/tools/notes.js similarity index 90% rename from modules/ui/notes.js rename to modules/ui/tools/notes.js index 1dafac952..710d7c3ff 100644 --- a/modules/ui/notes.js +++ b/modules/ui/tools/notes.js @@ -5,13 +5,19 @@ import { select as d3_select } from 'd3-selection'; import { modeAddNote, modeBrowse -} from '../modes'; +} from '../../modes'; -import { svgIcon } from '../svg'; -import { tooltip } from '../util/tooltip'; -import { uiTooltipHtml } from './tooltipHtml'; +import { t } from '../../util/locale'; +import { svgIcon } from '../../svg'; +import { tooltip } from '../../util/tooltip'; +import { uiTooltipHtml } from '../tooltipHtml'; -export function uiNotes(context) { +export function uiToolNotes(context) { + + var tool = { + id: 'notes', + label: t('modes.add_note.label') + }; var mode = modeAddNote(context); @@ -39,7 +45,7 @@ export function uiNotes(context) { } }); - return function(selection) { + tool.render = function(selection) { context .on('enter.editor.notes', function(entered) { @@ -109,11 +115,6 @@ export function uiNotes(context) { .call(svgIcon(d.icon || '#iD-icon-' + d.button)); }); - buttonsEnter - .append('span') - .attr('class', 'label') - .text(function(mode) { return mode.title; }); - // if we are adding/removing the buttons, check if toolbar has overflowed if (buttons.enter().size() || buttons.exit().size()) { context.ui().checkOverflow('#bar', true); @@ -125,4 +126,6 @@ export function uiNotes(context) { .classed('disabled', function(d) { return !enabled(d); }); } }; + + return tool; } diff --git a/modules/ui/save.js b/modules/ui/tools/save.js similarity index 86% rename from modules/ui/save.js rename to modules/ui/tools/save.js index 1fbadafc8..e9cede948 100644 --- a/modules/ui/save.js +++ b/modules/ui/tools/save.js @@ -1,21 +1,27 @@ import { interpolateRgb as d3_interpolateRgb } from 'd3-interpolate'; import { event as d3_event } from 'd3-selection'; -import { t } from '../util/locale'; -import { modeSave } from '../modes'; -import { svgIcon } from '../svg'; -import { uiCmd } from './cmd'; -import { uiTooltipHtml } from './tooltipHtml'; -import { tooltip } from '../util/tooltip'; +import { t } from '../../util/locale'; +import { modeSave } from '../../modes'; +import { svgIcon } from '../../svg'; +import { uiCmd } from '../cmd'; +import { uiTooltipHtml } from '../tooltipHtml'; +import { tooltip } from '../../util/tooltip'; -export function uiSave(context) { +export function uiToolSave(context) { + + var tool = { + id: 'save', + label: t('save.title') + }; + var history = context.history(); var key = uiCmd('⌘S'); var _numChanges = 0; - return function(selection) { + tool.render = function(selection) { function isSaving() { @@ -109,4 +115,6 @@ export function uiSave(context) { } }); }; + + return tool; } diff --git a/modules/ui/search_add.js b/modules/ui/tools/search_add.js similarity index 96% rename from modules/ui/search_add.js rename to modules/ui/tools/search_add.js index 1774e3ef3..079f1798b 100644 --- a/modules/ui/search_add.js +++ b/modules/ui/tools/search_add.js @@ -7,18 +7,24 @@ import { selectAll as d3_selectAll } from 'd3-selection'; -import { modeAddArea, modeAddLine, modeAddPoint } from '../modes'; -import { t, textDirection } from '../util/locale'; -import { svgIcon } from '../svg/index'; -import { tooltip } from '../util/tooltip'; -import { uiTagReference } from './tag_reference'; -import { uiTooltipHtml } from './tooltipHtml'; -import { uiPresetFavoriteButton } from './preset_favorite_button'; -import { uiPresetIcon } from './preset_icon'; -import { utilKeybinding, utilNoAuto, utilRebind } from '../util'; +import { modeAddArea, modeAddLine, modeAddPoint } from '../../modes'; +import { t, textDirection } from '../../util/locale'; +import { svgIcon } from '../../svg/index'; +import { tooltip } from '../../util/tooltip'; +import { uiTagReference } from '../tag_reference'; +import { uiTooltipHtml } from '../tooltipHtml'; +import { uiPresetFavoriteButton } from '../preset_favorite_button'; +import { uiPresetIcon } from '../preset_icon'; +import { utilKeybinding, utilNoAuto, utilRebind } from '../../util'; -export function uiSearchAdd(context) { +export function uiToolSearchAdd(context) { + + var tool = { + id: 'search_add', + label: t('inspector.search') + }; + var dispatch = d3_dispatch('choose'); var presets; var searchWrap = d3_select(null), @@ -59,7 +65,7 @@ export function uiSearchAdd(context) { } - function searchAdd(selection) { + tool.render = function(selection) { updateShownGeometry(allowedGeometry.slice()); // shallow copy var key = t('modes.add_feature.key'); @@ -175,7 +181,7 @@ export function uiSearchAdd(context) { updateEnabledState(); updateResultsList(); - } + }; function osmEditable() { var mode = context.mode(); @@ -635,5 +641,5 @@ export function uiSearchAdd(context) { return item; } - return utilRebind(searchAdd, dispatch, 'on'); + return utilRebind(tool, dispatch, 'on'); } diff --git a/modules/ui/tools/sidebar_toggle.js b/modules/ui/tools/sidebar_toggle.js new file mode 100644 index 000000000..53daa5266 --- /dev/null +++ b/modules/ui/tools/sidebar_toggle.js @@ -0,0 +1,31 @@ + +import { t, textDirection } from '../../util/locale'; +import { svgIcon } from '../../svg'; +import { uiTooltipHtml } from '../tooltipHtml'; +import { tooltip } from '../../util/tooltip'; + +export function uiToolSidebarToggle(context) { + + var tool = { + id: 'sidebar_toggle', + label: t('toolbar.inspect') + }; + + tool.render = function(selection) { + selection + .append('button') + .attr('class', 'bar-button') + .attr('tabindex', -1) + .on('click', function() { + context.ui().sidebar.toggle(); + }) + .call(tooltip() + .placement('bottom') + .html(true) + .title(uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key'))) + ) + .call(svgIcon('#iD-icon-sidebar-' + (textDirection === 'rtl' ? 'right' : 'left'))); + }; + + return tool; +} diff --git a/modules/ui/undo_redo.js b/modules/ui/tools/undo_redo.js similarity index 87% rename from modules/ui/undo_redo.js rename to modules/ui/tools/undo_redo.js index 7222396b9..32fcb67f5 100644 --- a/modules/ui/undo_redo.js +++ b/modules/ui/tools/undo_redo.js @@ -5,14 +5,20 @@ import { select as d3_select } from 'd3-selection'; -import { t, textDirection } from '../util/locale'; -import { svgIcon } from '../svg'; -import { uiCmd } from './cmd'; -import { uiTooltipHtml } from './tooltipHtml'; -import { tooltip } from '../util/tooltip'; +import { t, textDirection } from '../../util/locale'; +import { svgIcon } from '../../svg'; +import { uiCmd } from '../cmd'; +import { uiTooltipHtml } from '../tooltipHtml'; +import { tooltip } from '../../util/tooltip'; -export function uiUndoRedo(context) { +export function uiToolUndoRedo(context) { + + var tool = { + id: 'undo_redo', + label: t('toolbar.undo_redo') + }; + var commands = [{ id: 'undo', cmd: uiCmd('⌘Z'), @@ -32,7 +38,7 @@ export function uiUndoRedo(context) { } - return function(selection) { + tool.render = function(selection) { var tooltipBehavior = tooltip() .placement('bottom') .html(true) @@ -93,4 +99,6 @@ export function uiUndoRedo(context) { }); } }; + + return tool; } diff --git a/modules/ui/top_toolbar.js b/modules/ui/top_toolbar.js index 2045b5acd..213fecf83 100644 --- a/modules/ui/top_toolbar.js +++ b/modules/ui/top_toolbar.js @@ -4,52 +4,17 @@ import { } 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 { uiModes } from './modes'; -import { uiNotes } from './notes'; -import { uiSave } from './save'; -import { uiSearchAdd } from './search_add'; -import { uiTooltipHtml } from './tooltipHtml'; -import { uiUndoRedo } from './undo_redo'; +import { uiToolAddRecent, uiToolNotes, uiToolSave, uiToolSearchAdd, uiToolSidebarToggle, uiToolUndoRedo } from './tools'; export function uiTopToolbar(context) { - var searchAdd = uiSearchAdd(context), - modes = uiModes(context), - notes = uiNotes(context), - undoRedo = uiUndoRedo(context), - save = uiSave(context); - - var sidebarToggle = function(selection) { - - selection - .append('button') - .attr('class', 'bar-button') - .attr('tabindex', -1) - .on('click', function() { - context.ui().sidebar.toggle(); - }) - .call(tooltip() - .placement('bottom') - .html(true) - .title(uiTooltipHtml(t('sidebar.tooltip'), t('sidebar.key'))) - ) - .call(svgIcon('#iD-icon-sidebar-' + (textDirection === 'rtl' ? 'right' : 'left'))); - }; - - var itemContentByID = { - sidebar_toggle: sidebarToggle, - search_add: searchAdd, - modes: modes, - notes: notes, - undo_redo: undoRedo, - save: save - }; + var sidebarToggle = uiToolSidebarToggle(context), + searchAdd = uiToolSearchAdd(context), + addRecent = uiToolAddRecent(context), + notes = uiToolNotes(context), + undoRedo = uiToolUndoRedo(context), + save = uiToolSave(context); function notesEnabled() { var noteLayer = context.layers().layer('notes'); @@ -66,23 +31,23 @@ export function uiTopToolbar(context) { function update() { - var toolbarItemIDs = [ - 'sidebar_toggle', + var tools = [ + sidebarToggle, 'spacer', - 'search_add', - 'modes', + searchAdd, + addRecent, 'spacer' ]; if (notesEnabled()) { - toolbarItemIDs = toolbarItemIDs.concat(['notes', 'spacer']); + tools = tools.concat([notes, 'spacer']); } - toolbarItemIDs = toolbarItemIDs.concat(['undo_redo', 'save']); + tools = tools.concat([undoRedo, save]); var toolbarItems = bar.selectAll('.toolbar-item') - .data(toolbarItemIDs, function(d) { - return d; + .data(tools, function(d) { + return d.id || d; }); toolbarItems.exit() @@ -92,7 +57,7 @@ export function uiTopToolbar(context) { .enter() .append('div') .attr('class', function(d) { - return 'toolbar-item ' + d.replace('_', '-'); + return 'toolbar-item ' + (d.id || d).replace('_', '-'); }); var actionableItems = itemsEnter.filter(function(d) { return d !== 'spacer'; }); @@ -101,25 +66,14 @@ export function uiTopToolbar(context) { .append('div') .attr('class', 'item-content') .each(function(d) { - d3_select(this).call(itemContentByID[d], bar); + d3_select(this).call(d.render, 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); - } + return d.label; }); }