From fd4bd2725d83fbc4c8d8a0626bbe3df42713ca65 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Wed, 31 Jul 2024 18:38:39 -0400 Subject: [PATCH] Remove sidebar toggle button, move tooltip to resizer (re: #1497) This also quietly changes a few of the text strings that we use to talk about this component. "sidebar" -> "feature inspector" Because if we move it to some other part of the screen like the bottom, it's not really a sidebar anymore --- data/core.yaml | 11 ++++--- data/l10n/core.en.json | 12 ++++---- data/shortcuts.json | 4 +-- modules/ui/UiSidebar.js | 25 +++++++++++----- modules/ui/tools/index.js | 1 - modules/ui/tools/sidebar_toggle.js | 29 ------------------- modules/ui/top_toolbar.js | 7 ++--- svg/rapid-sprite/icons/icon-sidebar-left.svg | 7 ----- svg/rapid-sprite/icons/icon-sidebar-right.svg | 7 ----- 9 files changed, 32 insertions(+), 71 deletions(-) delete mode 100644 modules/ui/tools/sidebar_toggle.js delete mode 100644 svg/rapid-sprite/icons/icon-sidebar-left.svg delete mode 100644 svg/rapid-sprite/icons/icon-sidebar-right.svg diff --git a/data/core.yaml b/data/core.yaml index f6c371b9e2..d3d409ace1 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -570,9 +570,6 @@ en: report_a_bug: Report a bug help_translate: Help translate example: "Example:" - sidebar: - key: '`' - tooltip: Toggle the sidebar. feature_info: hidden_warning: one: "{count} hidden feature" @@ -679,6 +676,8 @@ en: locating: "Locating, please wait..." location_unavailable: Your location is unavailable. inspector: + key: '`' + tooltip: Toggle the feature inspector. zoom_to: key: Z title: Zoom To Selection @@ -1585,7 +1584,7 @@ en: editing: title: "Editing & Saving" select_h: "Select" - select_left_click: "{mouse_left_icon} Left-click or {onefinger_tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the sidebar." + select_left_click: "{mouse_left_icon} Left-click or {onefinger_tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the feature inspector." select_right_click: "{mouse_right_icon} Right-click or {onefinger_tap_and_hold_icon} long-press a feature to display the edit menu, which provides operations such as copy, rotate, and delete." select_space: "The `{space}` key can also be used instead of left-click when selecting and drawing." multiselect_h: "Multiselect" @@ -1754,7 +1753,7 @@ en: tools_h: "Tools" tools: "The following tools are currently supported: [KeepRight](https://www.keepright.at/) and [Osmose](https://osmose.openstreetmap.fr/)." issues_h: "Handling Issues" - issues: "Handling Q/A issues is similar to handling notes. Select a marker to view the issue details in the sidebar. Each tool has its own capabilities, but generally you can comment and/or close an issue." + issues: "Handling Q/A issues is similar to handling notes. Select a marker to view the issue details in the feature inspector. Each tool has its own capabilities, but generally you can comment and/or close an issue." field: restrictions: title: Turn Restrictions Help @@ -2541,7 +2540,7 @@ en: issues: "Toggle validation issues pane" preferences: "Toggle user preferences pane" fullscreen: "Toggle full screen mode" - sidebar: "Toggle sidebar" + inspector: "Toggle feature inspector" wireframe: "Toggle wireframe mode" osm_data: "Toggle OpenStreetMap data" rapid_features_data: "Toggle Rapid Features" diff --git a/data/l10n/core.en.json b/data/l10n/core.en.json index d4d7205309..ae9b7abb4b 100644 --- a/data/l10n/core.en.json +++ b/data/l10n/core.en.json @@ -755,10 +755,6 @@ "report_a_bug": "Report a bug", "help_translate": "Help translate", "example": "Example:", - "sidebar": { - "key": "`", - "tooltip": "Toggle the sidebar." - }, "feature_info": { "hidden_warning": { "one": "{count} hidden feature", @@ -881,6 +877,8 @@ "location_unavailable": "Your location is unavailable." }, "inspector": { + "key": "`", + "tooltip": "Toggle the feature inspector.", "zoom_to": { "key": "Z", "title": "Zoom To Selection", @@ -2002,7 +2000,7 @@ "editing": { "title": "Editing & Saving", "select_h": "Select", - "select_left_click": "{mouse_left_icon} Left-click or {onefinger_tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the sidebar.", + "select_left_click": "{mouse_left_icon} Left-click or {onefinger_tap_icon} tap a feature to select it. This will highlight it with a pulsing glow and display further details about it in the feature inspector.", "select_right_click": "{mouse_right_icon} Right-click or {onefinger_tap_and_hold_icon} long-press a feature to display the edit menu, which provides operations such as copy, rotate, and delete.", "select_space": "The `{space}` key can also be used instead of left-click when selecting and drawing.", "multiselect_h": "Multiselect", @@ -2182,7 +2180,7 @@ "tools_h": "Tools", "tools": "The following tools are currently supported: [KeepRight](https://www.keepright.at/) and [Osmose](https://osmose.openstreetmap.fr/).", "issues_h": "Handling Issues", - "issues": "Handling Q/A issues is similar to handling notes. Select a marker to view the issue details in the sidebar. Each tool has its own capabilities, but generally you can comment and/or close an issue." + "issues": "Handling Q/A issues is similar to handling notes. Select a marker to view the issue details in the feature inspector. Each tool has its own capabilities, but generally you can comment and/or close an issue." }, "field": { "restrictions": { @@ -3139,7 +3137,7 @@ "issues": "Toggle validation issues pane", "preferences": "Toggle user preferences pane", "fullscreen": "Toggle full screen mode", - "sidebar": "Toggle sidebar", + "inspector": "Toggle feature inspector", "wireframe": "Toggle wireframe mode", "osm_data": "Toggle OpenStreetMap data", "rapid_features_data": "Toggle Rapid Features", diff --git a/data/shortcuts.json b/data/shortcuts.json index 651320cb9d..2c1558679f 100644 --- a/data/shortcuts.json +++ b/data/shortcuts.json @@ -91,8 +91,8 @@ "text": "shortcuts.browsing.display_options.fullscreen" }, { - "shortcuts": ["sidebar.key", "`", "²"], - "text": "shortcuts.browsing.display_options.sidebar" + "shortcuts": ["inspector.key", "`", "²"], + "text": "shortcuts.browsing.display_options.inspector" }, { "shortcuts": ["area_fill.wireframe.key"], diff --git a/modules/ui/UiSidebar.js b/modules/ui/UiSidebar.js index 5eb48fc647..3007f3ba4d 100644 --- a/modules/ui/UiSidebar.js +++ b/modules/ui/UiSidebar.js @@ -12,6 +12,7 @@ import { uiMapRouletteEditor } from './maproulette_editor.js'; import { uiOsmoseEditor } from './osmose_editor.js'; import { uiNoteEditor } from './note_editor.js'; import { uiRapidFeatureInspector } from './rapid_feature_inspector.js'; +import { uiTooltip } from './tooltip.js'; const NEAR_TOLERANCE = 4; @@ -51,10 +52,12 @@ export class UiSidebar { this.KeepRightEditor = uiKeepRightEditor(context); this.OsmoseEditor = uiOsmoseEditor(context); this.MapRouletteEditor = uiMapRouletteEditor(context); + this.Tooltip = uiTooltip(context); // D3 selections this.$parent = null; this.$sidebar = null; + this.$resizer = null; this.$custom = null; this.$featureList = null; this.$inspector = null; @@ -104,8 +107,8 @@ export class UiSidebar { const storage = context.systems.storage; const dir = l10n.textDirection(); - const preferCollapsed = (storage.getItem('sidebar.collapsed') === 'true'); - const storedWidth = +(storage.getItem('sidebar.width') || DEFAULT_WIDTH); + const preferCollapsed = (storage.getItem('inspector.collapsed') === 'true'); + const storedWidth = +(storage.getItem('inspector.width') || DEFAULT_WIDTH); this._expandWidth = Math.max(MIN_WIDTH, storedWidth); // add .sidebar @@ -139,7 +142,12 @@ export class UiSidebar { .append('div') .attr('class', 'resizer-handle'); - $resizer = $resizer.merge($$resizer); + this.$resizer = $resizer = $resizer.merge($$resizer) + .call(this.Tooltip + .placement(dir === 'rtl' ? 'right' : 'left') // place on the sidebar side (i.e. don't cover the map) + .title(l10n.t('inspector.tooltip')) + .shortcut(l10n.t('inspector.key')) + ); // add sidebar contents: feature list pane and inspector @@ -155,7 +163,7 @@ export class UiSidebar { this.$inspector = $sidebar.select('.inspector-wrap'); // figure out a better way to rebind this if locale changes - const keys = [l10n.t('sidebar.key'), '`', '²', '@']; // iD#5663, iD#6864 - common QWERTY, AZERTY + const keys = [l10n.t('inspector.key'), '`', '²', '@']; // iD#5663, iD#6864 - common QWERTY, AZERTY context.keybinding().off(keys); context.keybinding().on(keys, this.toggle); } @@ -445,7 +453,7 @@ export class UiSidebar { $sidebar .transition() - .tween('sidebar.toggler', () => { + .tween('inspector.toggler', () => { return t => { const setWidth = lerp(t); @@ -489,8 +497,8 @@ export class UiSidebar { if ('button' in e && e.button !== 0) return; - const $sidebar = this.$sidebar; const $container = this.context.container(); + const $sidebar = this.$sidebar; const expandWidth = this._expandWidth || DEFAULT_WIDTH; const startCollapsed = $sidebar.classed('collapsed'); @@ -502,6 +510,7 @@ export class UiSidebar { this._lastCoord = [e.clientX, e.clientY]; this._lastWidth = startWidth; + this.Tooltip.hide(); $container.classed('resizing', true); $sidebar @@ -618,7 +627,7 @@ export class UiSidebar { const preferWidth = this._expandWidth; const storage = this.context.systems.storage; - storage.setItem('sidebar.collapsed', preferCollapsed); - storage.setItem('sidebar.width', preferWidth); + storage.setItem('inspector.collapsed', preferCollapsed); + storage.setItem('inspector.width', preferWidth); } } diff --git a/modules/ui/tools/index.js b/modules/ui/tools/index.js index 6e774a57ca..77bce3ff0f 100644 --- a/modules/ui/tools/index.js +++ b/modules/ui/tools/index.js @@ -3,5 +3,4 @@ export * from './modes.js'; export * from './notes.js'; export * from './rapid_features.js'; export * from './save.js'; -export * from './sidebar_toggle.js'; export * from './undo_redo.js'; diff --git a/modules/ui/tools/sidebar_toggle.js b/modules/ui/tools/sidebar_toggle.js deleted file mode 100644 index 369b9082a3..0000000000 --- a/modules/ui/tools/sidebar_toggle.js +++ /dev/null @@ -1,29 +0,0 @@ -import { uiIcon } from '../icon.js'; -import { uiTooltip } from '../tooltip.js'; - - -export function uiToolSidebarToggle(context) { - const l10n = context.systems.l10n; - const ui = context.systems.ui; - - let tool = { - id: 'sidebar_toggle', - label: l10n.t('toolbar.inspect') - }; - - tool.install = function(selection) { - selection - .append('button') - .attr('class', 'bar-button') - .on('click', () => ui.sidebar.toggle()) - .call(uiTooltip(context) - .placement('bottom') - .title(l10n.t('sidebar.tooltip')) - .shortcut(l10n.t('sidebar.key')) - .scrollContainer(context.container().select('.top-toolbar')) - ) - .call(uiIcon('#rapid-icon-sidebar-' + (l10n.isRTL() ? 'right' : 'left'))); - }; - - return tool; -} diff --git a/modules/ui/top_toolbar.js b/modules/ui/top_toolbar.js index 9f016fcb32..06d12721e3 100644 --- a/modules/ui/top_toolbar.js +++ b/modules/ui/top_toolbar.js @@ -1,13 +1,12 @@ import { select as d3_select } from 'd3-selection'; import { - uiToolRapidFeatures, uiToolDrawModes, uiToolNotes, uiToolSave, - uiToolSidebarToggle, uiToolUndoRedo, uiToolDownloadOsc + uiToolRapidFeatures, uiToolDrawModes, uiToolNotes, + uiToolSave, uiToolUndoRedo, uiToolDownloadOsc } from './tools/index.js'; export function uiTopToolbar(context) { - const sidebarToggle = uiToolSidebarToggle(context); const rapidFeatures = uiToolRapidFeatures(context); const modes = uiToolDrawModes(context); const notes = uiToolNotes(context); @@ -22,7 +21,7 @@ export function uiTopToolbar(context) { function update(selection) { - let tools = [sidebarToggle, 'spacer', modes, rapidFeatures]; + const tools = ['spacer', modes, rapidFeatures]; if (notesEnabled()) { tools.push('spacer', notes); diff --git a/svg/rapid-sprite/icons/icon-sidebar-left.svg b/svg/rapid-sprite/icons/icon-sidebar-left.svg deleted file mode 100644 index 3ca4a282d4..0000000000 --- a/svg/rapid-sprite/icons/icon-sidebar-left.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/svg/rapid-sprite/icons/icon-sidebar-right.svg b/svg/rapid-sprite/icons/icon-sidebar-right.svg deleted file mode 100644 index 9261cafdbc..0000000000 --- a/svg/rapid-sprite/icons/icon-sidebar-right.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - -