diff --git a/css/80_app.css b/css/80_app.css index 5a7d8fb3a..801158597 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -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; } diff --git a/modules/ui/intro/building.js b/modules/ui/intro/building.js index b62fce0ff..75258383d 100644 --- a/modules/ui/intro/building.js +++ b/modules/ui/intro/building.js @@ -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 } ); diff --git a/modules/ui/intro/line.js b/modules/ui/intro/line.js index 603d22621..fbf6d9288 100644 --- a/modules/ui/intro/line.js +++ b/modules/ui/intro/line.js @@ -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 } ); diff --git a/modules/ui/intro/point.js b/modules/ui/intro/point.js index 6439fe301..6f4a46315 100644 --- a/modules/ui/intro/point.js +++ b/modules/ui/intro/point.js @@ -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();