Fixes for RTL, improve curtain placement for edit menu steps

This commit is contained in:
Bryan Housel
2017-04-17 14:06:05 -04:00
parent e249826b1b
commit b743d37a31
4 changed files with 92 additions and 43 deletions
+5 -3
View File
@@ -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;
}
+28 -6
View File
@@ -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
View File
@@ -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
View File
@@ -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();