mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-15 21:48:20 +02:00
Fixes for RTL, improve curtain placement for edit menu steps
This commit is contained in:
+5
-3
@@ -3660,9 +3660,6 @@ img.tile-removing {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.curtain-tooltip .tooltip-inner .bold {
|
||||
}
|
||||
|
||||
.curtain-tooltip .tooltip-inner .button-section,
|
||||
.curtain-tooltip .tooltip-inner .instruction {
|
||||
font-weight: bold;
|
||||
@@ -3674,6 +3671,10 @@ img.tile-removing {
|
||||
padding: 10px 20px 0 20px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .curtain-tooltip .tooltip-inner .button-section button.col8 {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.curtain-tooltip .tooltip-inner .instruction:only-child {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
@@ -3683,6 +3684,7 @@ img.tile-removing {
|
||||
.curtain-tooltip .tooltip-inner .icon.pre-text {
|
||||
vertical-align: text-top;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import * as d3 from 'd3';
|
||||
import _ from 'lodash';
|
||||
import { t } from '../../util/locale';
|
||||
import { t, textDirection } from '../../util/locale';
|
||||
import { modeBrowse, modeSelect } from '../../modes';
|
||||
import { utilRebind } from '../../util/rebind';
|
||||
import { icon, pad, isMostlySquare, selectMenuItem, transitionTime } from './helper';
|
||||
@@ -48,6 +48,24 @@ export function uiIntroBuilding(context, reveal) {
|
||||
}
|
||||
|
||||
|
||||
function revealEditMenu(loc, text, options) {
|
||||
var rect = context.surfaceRect();
|
||||
var point = context.curtainProjection(loc);
|
||||
var pad = 40;
|
||||
var width = 250 + (2 * pad);
|
||||
var height = 350;
|
||||
var startX = rect.left + point[0];
|
||||
var left = (textDirection === 'rtl') ? (startX - width + pad) : (startX - pad);
|
||||
var box = {
|
||||
left: left,
|
||||
top: point[1] + rect.top - 60,
|
||||
width: width,
|
||||
height: height
|
||||
};
|
||||
reveal(box, text, options);
|
||||
}
|
||||
|
||||
|
||||
function addHouse() {
|
||||
context.enter(modeBrowse(context));
|
||||
context.history().reset('initial');
|
||||
@@ -192,6 +210,7 @@ export function uiIntroBuilding(context, reveal) {
|
||||
);
|
||||
|
||||
button.on('click.intro', function() {
|
||||
button.on('click.intro', null);
|
||||
continueTo(choosePresetHouse);
|
||||
});
|
||||
|
||||
@@ -237,6 +256,7 @@ export function uiIntroBuilding(context, reveal) {
|
||||
);
|
||||
|
||||
button.on('click.intro', function() {
|
||||
button.on('click.intro', null);
|
||||
continueTo(closeEditorHouse);
|
||||
});
|
||||
}, 400); // after preset list pane visible..
|
||||
@@ -253,7 +273,7 @@ export function uiIntroBuilding(context, reveal) {
|
||||
|
||||
function continueTo(nextStep) {
|
||||
d3.select('.preset-list-button').on('click.intro', null);
|
||||
context.on('exit.intro', null);
|
||||
context.on('enter.intro', null);
|
||||
nextStep();
|
||||
}
|
||||
}
|
||||
@@ -338,8 +358,9 @@ export function uiIntroBuilding(context, reveal) {
|
||||
if (!node) { return continueTo(rightClickHouse); }
|
||||
|
||||
var wasChanged = false;
|
||||
var menuCoords = context.map().mouseCoordinates();
|
||||
|
||||
revealHouse(house,
|
||||
revealEditMenu(menuCoords,
|
||||
t('intro.buildings.square_building', { button: icon('#operation-orthogonalize', 'pre-text') })
|
||||
);
|
||||
|
||||
@@ -355,7 +376,7 @@ export function uiIntroBuilding(context, reveal) {
|
||||
var node = selectMenuItem('orthogonalize').node();
|
||||
if (!wasChanged && !node) { return continueTo(rightClickHouse); }
|
||||
|
||||
revealHouse(house,
|
||||
revealEditMenu(menuCoords,
|
||||
t('intro.buildings.square_building', { button: icon('#operation-orthogonalize', 'pre-text') }),
|
||||
{ duration: 0 }
|
||||
);
|
||||
@@ -653,8 +674,9 @@ export function uiIntroBuilding(context, reveal) {
|
||||
if (!node) { return continueTo(rightClickTank); }
|
||||
|
||||
var wasChanged = false;
|
||||
var menuCoords = context.map().mouseCoordinates();
|
||||
|
||||
revealTank(tank,
|
||||
revealEditMenu(menuCoords,
|
||||
t('intro.buildings.circle_tank', { button: icon('#operation-circularize', 'pre-text') })
|
||||
);
|
||||
|
||||
@@ -670,7 +692,7 @@ export function uiIntroBuilding(context, reveal) {
|
||||
var node = selectMenuItem('circularize').node();
|
||||
if (!wasChanged && !node) { return continueTo(rightClickTank); }
|
||||
|
||||
revealTank(tank,
|
||||
revealEditMenu(menuCoords,
|
||||
t('intro.buildings.circle_tank', { button: icon('#operation-circularize', 'pre-text') }),
|
||||
{ duration: 0 }
|
||||
);
|
||||
|
||||
+25
-18
@@ -1,6 +1,6 @@
|
||||
import * as d3 from 'd3';
|
||||
import _ from 'lodash';
|
||||
import { t } from '../../util/locale';
|
||||
import { t, textDirection } from '../../util/locale';
|
||||
import { geoSphericalDistance } from '../../geo';
|
||||
import { modeBrowse, modeSelect } from '../../modes';
|
||||
import { utilRebind } from '../../util/rebind';
|
||||
@@ -49,6 +49,24 @@ export function uiIntroLine(context, reveal) {
|
||||
}
|
||||
|
||||
|
||||
function revealEditMenu(loc, text, options) {
|
||||
var rect = context.surfaceRect();
|
||||
var point = context.curtainProjection(loc);
|
||||
var pad = 40;
|
||||
var width = 250 + (2 * pad);
|
||||
var height = 350;
|
||||
var startX = rect.left + point[0];
|
||||
var left = (textDirection === 'rtl') ? (startX - width + pad) : (startX - pad);
|
||||
var box = {
|
||||
left: left,
|
||||
top: point[1] + rect.top - 60,
|
||||
width: width,
|
||||
height: height
|
||||
};
|
||||
reveal(box, text, options);
|
||||
}
|
||||
|
||||
|
||||
function addLine() {
|
||||
context.enter(modeBrowse(context));
|
||||
context.history().reset('initial');
|
||||
@@ -688,14 +706,10 @@ export function uiIntroLine(context, reveal) {
|
||||
if (!node) { return continueTo(rightClickIntersection); }
|
||||
|
||||
var wasChanged = false;
|
||||
var menuCoords = context.map().mouseCoordinates();
|
||||
washingtonSegmentId = null;
|
||||
|
||||
var padding = 60 * Math.pow(2, context.map().zoom() - 18);
|
||||
var box = pad(eleventhAvenueEnd, padding, context);
|
||||
box.width += 100;
|
||||
box.height += 120;
|
||||
|
||||
reveal(box, t('intro.lines.split_intersection',
|
||||
revealEditMenu(menuCoords, t('intro.lines.split_intersection',
|
||||
{ button: icon('#operation-split', 'pre-text'), street: t('intro.graph.name.washington-street') })
|
||||
);
|
||||
|
||||
@@ -703,11 +717,7 @@ export function uiIntroLine(context, reveal) {
|
||||
var node = selectMenuItem('split').node();
|
||||
if (!wasChanged && !node) { return continueTo(rightClickIntersection); }
|
||||
|
||||
var padding = 60 * Math.pow(2, context.map().zoom() - 18);
|
||||
var box = pad(eleventhAvenueEnd, padding, context);
|
||||
box.width += 100;
|
||||
box.height += 120;
|
||||
reveal(box, t('intro.lines.split_intersection',
|
||||
revealEditMenu(menuCoords, t('intro.lines.split_intersection',
|
||||
{ button: icon('#operation-split', 'pre-text'), street: t('intro.graph.name.washington-street') }),
|
||||
{ duration: 0 }
|
||||
);
|
||||
@@ -973,16 +983,13 @@ export function uiIntroLine(context, reveal) {
|
||||
var node = selectMenuItem('delete').node();
|
||||
if (!node) return continueTo(multiRightClick);
|
||||
|
||||
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
|
||||
var box = pad(twelfthAvenue, padding, context);
|
||||
reveal(box,
|
||||
var menuCoords = context.map().mouseCoordinates();
|
||||
revealEditMenu(menuCoords,
|
||||
t('intro.lines.multi_delete', { button: icon('#operation-delete', 'pre-text') })
|
||||
);
|
||||
|
||||
context.map().on('move.intro drawn.intro', function() {
|
||||
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
|
||||
var box = pad(twelfthAvenue, padding, context);
|
||||
reveal(box,
|
||||
revealEditMenu(menuCoords,
|
||||
t('intro.lines.multi_delete', { button: icon('#operation-delete', 'pre-text') }),
|
||||
{ duration: 0 }
|
||||
);
|
||||
|
||||
+34
-16
@@ -25,6 +25,24 @@ export function uiIntroPoint(context, reveal) {
|
||||
}
|
||||
|
||||
|
||||
function revealEditMenu(loc, text, options) {
|
||||
var rect = context.surfaceRect();
|
||||
var point = context.curtainProjection(loc);
|
||||
var pad = 40;
|
||||
var width = 250 + (2 * pad);
|
||||
var height = 250;
|
||||
var startX = rect.left + point[0];
|
||||
var left = (textDirection === 'rtl') ? (startX - width + pad) : (startX - pad);
|
||||
var box = {
|
||||
left: left,
|
||||
top: point[1] + rect.top - 60,
|
||||
width: width,
|
||||
height: height
|
||||
};
|
||||
reveal(box, text, options);
|
||||
}
|
||||
|
||||
|
||||
function eventCancel() {
|
||||
d3.event.stopPropagation();
|
||||
d3.event.preventDefault();
|
||||
@@ -382,22 +400,21 @@ export function uiIntroPoint(context, reveal) {
|
||||
var entity = context.hasEntity(pointId);
|
||||
if (!entity) return chapter.restart();
|
||||
|
||||
var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node();
|
||||
if (!node) {
|
||||
return continueTo(rightClickPoint);
|
||||
} else {
|
||||
var rect = context.surfaceRect();
|
||||
var point = context.curtainProjection(entity.loc);
|
||||
var box = {
|
||||
left: point[0] + rect.left - 40,
|
||||
top: point[1] + rect.top - 60,
|
||||
width: 150,
|
||||
height: 150
|
||||
};
|
||||
reveal(box,
|
||||
t('intro.points.delete', { button: icon('#operation-delete', 'pre-text') })
|
||||
);
|
||||
}
|
||||
var node = selectMenuItem('delete').node();
|
||||
if (!node) { return continueTo(rightClickPoint); }
|
||||
|
||||
revealEditMenu(entity.loc,
|
||||
t('intro.points.delete', { button: icon('#operation-delete', 'pre-text') })
|
||||
);
|
||||
|
||||
timeout(function() {
|
||||
context.map().on('move.intro drawn.intro', function() {
|
||||
revealEditMenu(entity.loc,
|
||||
t('intro.points.delete', { button: icon('#operation-delete', 'pre-text') }),
|
||||
{ duration: 0}
|
||||
);
|
||||
});
|
||||
}, 300); // after menu visible
|
||||
|
||||
context.on('exit.intro', function() {
|
||||
if (!pointId) return chapter.restart();
|
||||
@@ -412,6 +429,7 @@ export function uiIntroPoint(context, reveal) {
|
||||
});
|
||||
|
||||
function continueTo(nextStep) {
|
||||
context.map().on('move.intro drawn.intro', null);
|
||||
context.history().on('change.intro', null);
|
||||
context.on('exit.intro', null);
|
||||
nextStep();
|
||||
|
||||
Reference in New Issue
Block a user