mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
Adding tabs to shortcuts
This commit is contained in:
Kushan Joshi
committed by
Bryan Housel
Bryan Housel
parent
5e8ad595b0
commit
8d2e2c7f9f
@@ -3087,11 +3087,61 @@ img.tile-removing {
|
||||
.modal-shortcuts {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.modal-shortcuts .modal-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.modal-shortcuts .wrapper {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.modal-shortcuts .tabs-bar {
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal-shortcuts .tab {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.modal-shortcuts .tab:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.modal-shortcuts .tab.active {
|
||||
background-color: #E8EBFF;
|
||||
color: #7092FF;
|
||||
}
|
||||
|
||||
.modal-shortcuts .kbd-row {
|
||||
padding-right: 10px;
|
||||
color: #767676;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.modal-shortcuts .shorctut-desc {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.modal-shortcuts kbd {
|
||||
padding: 2px 4px;
|
||||
background: #eee;
|
||||
margin-right: 4px;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
padding: 3px 5px;
|
||||
font: 11px;
|
||||
line-height: 10px;
|
||||
letter-spacing: 1px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
margin: 0 2px;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
|
||||
/* Save Mode
|
||||
|
||||
@@ -1016,29 +1016,27 @@ en:
|
||||
help: "You're now ready to edit OpenStreetMap!{br}You can replay this walkthrough anytime or view more documentation by clicking the {button} Help button."
|
||||
save: "Don't forget to regularly save your changes!"
|
||||
start: "Start mapping!"
|
||||
shortcuts:
|
||||
shortcuts:
|
||||
display:
|
||||
desc: "Changing the display"
|
||||
shortcuts:
|
||||
pan_map: "Pan map"
|
||||
pan_map_screen: "Pan map by one screenful"
|
||||
zoom: "Zoom in / Zoom out"
|
||||
zoom_large: "Zoom in / Zoom out by a lot"
|
||||
bg_switcher: "Display background layer switcher"
|
||||
bg: "Switch between previous and current backgrounds"
|
||||
wireframe: "Toggle wireframe mode"
|
||||
help: "Show in-editor help/documentation"
|
||||
minimap: "Toggle minimap"
|
||||
infobox: "Toggle info/measurements box"
|
||||
radial_menu: "Toggle radial menu for currently selected object"
|
||||
desc: "Display"
|
||||
pan_map: "Pan map"
|
||||
pan_map_screen: "Pan map by one screenful"
|
||||
zoom: "Zoom in / Zoom out"
|
||||
zoom_large: "Zoom in / Zoom out by a lot"
|
||||
bg_switcher: "Display background layer switcher"
|
||||
bg: "Switch between backgrounds"
|
||||
wireframe: "Toggle wireframe mode"
|
||||
help: "Show in-editor help/documentation"
|
||||
minimap: "Toggle minimap"
|
||||
infobox: "Toggle info/measurements box"
|
||||
radial_menu: "Toggle radial menu for selected object"
|
||||
edit:
|
||||
desc: "Editing mode"
|
||||
shortcuts:
|
||||
add_point: "Switch to 'add point' mode"
|
||||
add_line: "Switch to 'add line' mode"
|
||||
add_area: "Switch to 'add area' mode"
|
||||
continue_line: "Continue drawing a line at the selected node"
|
||||
stop_line: "Stop drawing of a line or area"
|
||||
undo: "Undo last action"
|
||||
redo: "Redo last action"
|
||||
save: "Save changes"
|
||||
desc: "Editing"
|
||||
add_point: "Switch to 'add point' mode"
|
||||
add_line: "Switch to 'add line' mode"
|
||||
add_area: "Switch to 'add area' mode"
|
||||
continue_line: "Continue drawing a line at the selected node"
|
||||
stop_line: "Stop drawing of a line or area"
|
||||
undo: "Undo last action"
|
||||
redo: "Redo last action"
|
||||
save: "Save changes"
|
||||
@@ -6,7 +6,7 @@ export { dataDeprecated } from './deprecated.json';
|
||||
export { dataDiscarded } from './discarded.json';
|
||||
export { dataLocales } from './locales.json';
|
||||
export { dataPhoneFormats } from './phone-formats.json';
|
||||
export { dataShortcuts } from './shortcuts.json';
|
||||
export { shortcuts } from './shortcuts.json';
|
||||
|
||||
export { default as dataImperial } from './imperial.json';
|
||||
export { default as dataDriveLeft } from './drive-left.json';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
[
|
||||
{ "shortcuts": [
|
||||
{
|
||||
"key": "display",
|
||||
"desc": "Changing the display",
|
||||
"desc": "shortcuts.display.desc",
|
||||
"shortcuts": [
|
||||
{
|
||||
"shortcut": [
|
||||
@@ -10,7 +10,7 @@
|
||||
"←",
|
||||
"→"
|
||||
],
|
||||
"key": "pan_map"
|
||||
"key": "shortcuts.display.pan_map"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
@@ -19,119 +19,119 @@
|
||||
"⇧←",
|
||||
"⇧→"
|
||||
],
|
||||
"key": "pan_map_screen"
|
||||
"key": "shortcuts.display.pan_map_screen"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"+",
|
||||
"-"
|
||||
],
|
||||
"key": "zoom"
|
||||
"key": "shortcuts.display.zoom"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"⌘+",
|
||||
"⌘-"
|
||||
],
|
||||
"key": "zoom_large"
|
||||
"key": "shortcuts.display.zoom_large"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"B"
|
||||
],
|
||||
"key": "bg_switcher"
|
||||
"key": "shortcuts.display.bg_switcher"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"⌘B"
|
||||
],
|
||||
"key": "bg"
|
||||
"key": "shortcuts.display.bg"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"W"
|
||||
],
|
||||
"key": "wireframe"
|
||||
"key": "shortcuts.display.wireframe"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"H"
|
||||
],
|
||||
"key": "help"
|
||||
"key": "shortcuts.display.help"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"/"
|
||||
],
|
||||
"key": "minimap"
|
||||
"key": "shortcuts.display.minimap"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"⌘I"
|
||||
],
|
||||
"key": "infobox"
|
||||
"key": "shortcuts.display.infobox"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"Spacebar"
|
||||
"Space"
|
||||
],
|
||||
"key": "radial_menu"
|
||||
"key": "shortcuts.display.radial_menu"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "edit",
|
||||
"desc": "Editing mode",
|
||||
"desc": "shortcuts.edit.desc",
|
||||
"shortcuts": [
|
||||
{
|
||||
"shortcut": [
|
||||
"1"
|
||||
],
|
||||
"key": "add_point"
|
||||
"key": "shortcuts.edit.add_point"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"2"
|
||||
],
|
||||
"desc": "add_line"
|
||||
"key": "shortcuts.edit.add_line"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"3"
|
||||
],
|
||||
"key": "add_area"
|
||||
"key": "shortcuts.edit.add_area"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"A"
|
||||
],
|
||||
"key": "continue_line"
|
||||
"key": "shortcuts.edit.continue_line"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"↵ Enter",
|
||||
"Esc"
|
||||
],
|
||||
"key": "stop_line"
|
||||
"key": "shortcuts.edit.stop_line"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"⌘Z"
|
||||
],
|
||||
"key": "undo"
|
||||
"key": "shortcuts.edit.undo"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"⌘⇧Z"
|
||||
],
|
||||
"key": "redo"
|
||||
"key": "shortcuts.edit.redo"
|
||||
},
|
||||
{
|
||||
"shortcut": [
|
||||
"⌘S"
|
||||
],
|
||||
"save": "save"
|
||||
"key": "shortcuts.edit.save"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
]}
|
||||
@@ -2,16 +2,109 @@ import * as d3 from 'd3';
|
||||
import { uiCmd } from './cmd';
|
||||
import { uiModal } from './modal';
|
||||
import { d3keybinding } from '../lib/d3.keybinding.js';
|
||||
import shortcuts from '../../data/shortcuts.json';
|
||||
import { t } from '../util/locale';
|
||||
import { shortcuts as shortcutsData } from '../../data';
|
||||
|
||||
export function uiShortcuts(context) {
|
||||
var key = uiCmd('⇧/');
|
||||
|
||||
var activeTab = 0;
|
||||
function shortcuts(selection) {
|
||||
if (!d3.selectAll('.modal').empty()) return;
|
||||
var modalSelection;
|
||||
function render(selection) {
|
||||
var wrapper = selection
|
||||
.selectAll('.wrapper')
|
||||
.data([0]);
|
||||
|
||||
var wrapperEnter = wrapper
|
||||
.enter()
|
||||
.append('div')
|
||||
.attr('class', 'wrapper');
|
||||
|
||||
var tabsBar = wrapperEnter
|
||||
.append('div')
|
||||
.attr('class', 'tabs-bar');
|
||||
|
||||
var shortcutsList = wrapperEnter
|
||||
.append('div')
|
||||
.attr('class', 'shortcuts-list');
|
||||
|
||||
wrapper = wrapper.merge(wrapperEnter);
|
||||
|
||||
var tabs = tabsBar
|
||||
.selectAll('.tab')
|
||||
.data(shortcutsData);
|
||||
|
||||
var tabsEnter = tabs
|
||||
.enter()
|
||||
.append('div')
|
||||
.attr('class', 'tab')
|
||||
.on('click', function (d, i) {
|
||||
activeTab = i;
|
||||
render(selection);
|
||||
});
|
||||
|
||||
tabsEnter
|
||||
.append('span')
|
||||
.text(function (d) { return t(d.desc); });
|
||||
|
||||
tabs = tabs
|
||||
.merge(tabsEnter);
|
||||
|
||||
// Update
|
||||
wrapper.selectAll('.tab')
|
||||
.classed('active', function (d, i) {
|
||||
return i === activeTab;
|
||||
});
|
||||
|
||||
var shortcuts = shortcutsList
|
||||
.selectAll('.shortcut-tab')
|
||||
.data(shortcutsData);
|
||||
|
||||
var shortcutsEnter = shortcuts
|
||||
.enter()
|
||||
.append('div')
|
||||
.attr('class', 'shortcut-tab')
|
||||
.on('click', function (d, i) {
|
||||
activeTab = i;
|
||||
render(selection);
|
||||
});
|
||||
|
||||
var row = shortcutsEnter
|
||||
.selectAll('.shortcut-row')
|
||||
.data(function (d) { return d.shortcuts; })
|
||||
.enter()
|
||||
.append('div')
|
||||
.attr('class', 'shortcut-row');
|
||||
|
||||
var shortcutsRow = row
|
||||
.append('div')
|
||||
.attr('class', 'kbd-row col6');
|
||||
|
||||
shortcutsRow
|
||||
.selectAll('kbd')
|
||||
.data(function (d) { return d.shortcut; })
|
||||
.enter().append('kbd')
|
||||
.text(function (d) { return uiCmd(d); });
|
||||
|
||||
var description = row
|
||||
.append('div')
|
||||
.attr('class', 'shorctut-desc col6')
|
||||
.text(function (d) { return t(d.key); });
|
||||
|
||||
shortcuts = shortcuts
|
||||
.merge(shortcutsEnter);
|
||||
|
||||
wrapper.selectAll('.shortcut-tab')
|
||||
.style('display', function (d, i) {
|
||||
return i === activeTab ? 'block' : 'none';
|
||||
});
|
||||
|
||||
}
|
||||
function show() {
|
||||
if (!d3.selectAll('.modal').empty()) return;
|
||||
|
||||
var modalSelection = uiModal(selection);
|
||||
modalSelection = uiModal(selection);
|
||||
|
||||
modalSelection.select('.modal')
|
||||
.attr('class', 'modal fillL col6');
|
||||
@@ -19,7 +112,7 @@ export function uiShortcuts(context) {
|
||||
var shortcutsModal = modalSelection.select('.content');
|
||||
|
||||
shortcutsModal
|
||||
.attr('class','cf');
|
||||
.attr('class', 'cf modal-shortcuts');
|
||||
|
||||
shortcutsModal
|
||||
.append('div')
|
||||
@@ -27,35 +120,41 @@ export function uiShortcuts(context) {
|
||||
.append('h3')
|
||||
.text('Keyboard shortcuts');
|
||||
|
||||
var section = shortcutsModal
|
||||
.selectAll('section')
|
||||
.data(shortcuts)
|
||||
.enter().append('section')
|
||||
.attr('class', 'modal-section modal-shortcuts cf');
|
||||
// var wrap = shortcutsModal.selectAll('.wrapper')
|
||||
// - .data([0]);
|
||||
|
||||
section
|
||||
.append('h4')
|
||||
.text(function(d) { return d.desc; });
|
||||
// wrap = wrap.enter()
|
||||
// .append('div')
|
||||
// .attr('class', 'preset-input-wrap')
|
||||
// .merge(wrap);
|
||||
shortcutsModal.call(render);
|
||||
|
||||
var p = section
|
||||
.selectAll('p')
|
||||
.data(function(d) { return d.shortcuts; })
|
||||
.enter().append('p');
|
||||
|
||||
var shortcuts = p
|
||||
.append('span')
|
||||
.attr('class', 'col4');
|
||||
// section
|
||||
// .append('h4')
|
||||
// .text(function(d) { return t(d.desc); });
|
||||
|
||||
shortcuts
|
||||
.selectAll('kbd')
|
||||
.data(function(d) { return d.shortcut; })
|
||||
.enter().append('kbd')
|
||||
.text(function(d) { return uiCmd(d); });
|
||||
// var row = section
|
||||
// .selectAll('.shortcut-row')
|
||||
// .data(function(d) { return d.shortcuts; })
|
||||
// .enter()
|
||||
// .append('div')
|
||||
// .attr('class', 'shortcut-row');
|
||||
|
||||
var description = p
|
||||
.append('span')
|
||||
.attr('class', 'col8')
|
||||
.text(function(d) { return t('shortcuts.' });
|
||||
// var shortcuts = row
|
||||
// .append('div')
|
||||
// .attr('class', 'kbd-row col4');
|
||||
|
||||
// shortcuts
|
||||
// .selectAll('kbd')
|
||||
// .data(function(d) { return d.shortcut; })
|
||||
// .enter().append('kbd')
|
||||
// .text(function(d) { return uiCmd(d); });
|
||||
|
||||
// var description = row
|
||||
// .append('div')
|
||||
// .attr('class', 'shorctut-desc col6')
|
||||
// .text(function(d) { return t(d.key); });
|
||||
}
|
||||
|
||||
var keybinding = d3keybinding('shortcuts')
|
||||
|
||||
Reference in New Issue
Block a user