Skip to content

Commit

Permalink
Make rtl compatible
Browse files Browse the repository at this point in the history 
and minor refactor
  • Loading branch information
@kepta @bhousel
kepta authored and bhousel committed May 16, 2017
1 parent 957c75a commit d45063d
Show file tree
Hide file tree
Showing 6 changed files with 152 additions and 129 deletions.
27 changes: 23 additions & 4 deletions css/80_app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3132,19 +3132,18 @@ img.tile-removing {
padding-right: 10px;
color: #767676;
text-align: right;
white-space: nowrap;
padding-bottom: 5px;
width: 50%;
}

}
.modal-shortcuts .shortcut-desc {
padding-bottom: 5px;
width: 50%;
}

.modal-shortcuts kbd {
display: inline-block;
text-align: right;
text-align: right;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
Expand All @@ -3159,6 +3158,7 @@ img.tile-removing {
box-shadow: inset 0 -1px 0 #bbb;
}


/* Save Mode
------------------------------------------------------- */
.mode-save a.user-info {
Expand Down Expand Up @@ -4092,3 +4092,22 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
[dir='rtl'] .spin-control button.increment{
border-bottom-left-radius: 3px;
}
/* modal */
[dir='rtl'] .modal > button {
position: absolute;
left: 0;
right: unset;
top: 0;
height: 59px;
z-index: 50;
}

/* shortcuts modal */

[dir='rtl'] .kbd-row {
padding-left: 10px;
color: #767676;
text-align: left;
padding-bottom: 5px;
width: 50%;
}
2 changes: 2 additions & 0 deletions data/core.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1017,6 +1017,8 @@ en:
save: "Don't forget to regularly save your changes!"
start: "Start mapping!"
shortcuts:
modal:
title: "Keyboard shortcuts"
display:
desc: "Display"
pan_map: "Pan map"
Expand Down
2 changes: 1 addition & 1 deletion data/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { shortcuts } from './shortcuts.json';
export { dataShortcuts } from './shortcuts.json';

export { default as dataImperial } from './imperial.json';
export { default as dataDriveLeft } from './drive-left.json';
Expand Down
2 changes: 1 addition & 1 deletion data/shortcuts.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{ "shortcuts": [
{ "dataShortcuts": [
{
"key": "display",
"desc": "shortcuts.display.desc",
Expand Down
3 changes: 3 additions & 0 deletions dist/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -884,6 +884,9 @@
}
},
"shortcuts": {
"modal": {
"title": "Keyboard shortcuts"
},
"display": {
"desc": "Display",
"pan_map": "Pan map",
Expand Down
245 changes: 122 additions & 123 deletions modules/ui/shortcuts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,142 +3,141 @@ import { uiCmd } from './cmd';
import { uiModal } from './modal';
import { d3keybinding } from '../lib/d3.keybinding.js';
import { t } from '../util/locale';
import { shortcuts as shortcutsData } from '../../data';
import { dataShortcuts } from '../../data';

export function uiShortcuts() {
var key = '⇧/';
var activeTab = 0;
var modalSelection;
var savedSelection;
var keybinding = d3keybinding('shortcuts')
.on(key, function () {
if (modalSelection) {
modalSelection.close();
modalSelection = null;
return;
}
modalSelection = uiModal(savedSelection);
shortcutsModal(modalSelection);
});

d3.select(document)
.call(keybinding);

function shortcutsModal(modalSelection) {
modalSelection.select('.modal')
.attr('class', 'modal modal-shortcuts fillL col6');

var shortcutsModal = modalSelection.select('.content');

shortcutsModal
.append('div')
.attr('class', 'modal-section')
.append('h3')
.text(t('shortcuts.modal.title'));

shortcutsModal
.call(renderTabs);
}

function shortcuts(selection) {
var modalSelection;

function show() {
modalSelection = uiModal(selection);
function renderTabs(selection) {
var wrapper = selection
.selectAll('.wrapper')
.data([0]);

var wrapperEnter = wrapper
.enter()
.append('div')
.attr('class', 'wrapper modal-section');

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(dataShortcuts);

var tabsEnter = tabs
.enter()
.append('div')
.attr('class', 'tab')
.on('click', function (d, i) {
activeTab = i;
renderTabs(selection);
});

modalSelection.select('.modal')
.attr('class', 'modal fillL col6');
tabsEnter
.append('span')
.text(function (d) { return t(d.desc); });

var shortcutsModal = modalSelection.select('.content');
tabs = tabs
.merge(tabsEnter);

shortcutsModal
.attr('class', 'cf modal-shortcuts');
// Update
wrapper.selectAll('.tab')
.classed('active', function (d, i) {
return i === activeTab;
});

shortcutsModal
.append('div')
.attr('class', 'modal-section')
.append('h3')
.text('Keyboard shortcuts');

shortcutsModal
.call(render);
}
var shortcuts = shortcutsList
.selectAll('.shortcut-tab')
.data(dataShortcuts);

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');

shortcutsRow
.selectAll('kbd')
.data(function (d) { return d.shortcut; })
.enter()
.append('kbd')
.text(function (d) { return uiCmd(d); });

row
.append('div')
.attr('class', 'shortcut-desc')
.text(function (d) { return t(d.key); });

shortcuts = shortcuts
.merge(shortcutsEnter);

// Update
wrapper.selectAll('.shortcut-tab')
.style('display', function (d, i) {
return i === activeTab ? 'flex' : 'none';
});
}

var keybinding = d3keybinding('shortcuts')
.on(key, function () {
if (modalSelection) {
modalSelection.close();
modalSelection = null;
return;
}
show();
var shortcutsEnter = shortcuts
.enter()
.append('div')
.attr('class', 'shortcut-tab')
.on('click', function (d, i) {
activeTab = i;
renderTabs(selection);
});

d3.select(document)
.call(keybinding);
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');

shortcutsRow
.selectAll('kbd')
.data(function (d) { return d.shortcut; })
.enter()
.append('kbd')
.text(function (d) { return uiCmd(d); });

row
.append('div')
.attr('class', 'shortcut-desc')
.text(function (d) { return t(d.key); });

shortcuts = shortcuts
.merge(shortcutsEnter);

// Update
wrapper.selectAll('.shortcut-tab')
.style('display', function (d, i) {
return i === activeTab ? 'flex' : 'none';
});
}

return shortcuts;
return function(selection, show) {
savedSelection = selection;
if (show) {
modalSelection = uiModal(selection);
shortcutsModal(modalSelection);
}
};
}

0 comments on commit d45063d

Please sign in to comment.