All graphics from iD-sprite are now symbols that can be used

(re: #3924)
This commit is contained in:
Bryan Housel
2017-03-23 21:11:25 -04:00
parent 09d3e2d09d
commit 468c1e427d
12 changed files with 174 additions and 93 deletions
+18 -5
View File
@@ -51,11 +51,12 @@ export function uiCurtain() {
}
curtain.reveal = function(box, text, tooltipclass, duration) {
curtain.reveal = function(box, text, options) {
if (typeof box === 'string') box = d3.select(box).node();
if (box.getBoundingClientRect) box = box.getBoundingClientRect();
curtain.cut(box, duration);
options = options || {};
curtain.cut(box, options.duration);
if (text) {
// pseudo markdown bold text hack
@@ -104,18 +105,20 @@ export function uiCurtain() {
Math.min(Math.max(10, pos[1]), h - dimensions[1] - 10)
];
if (duration !== 0 || !tooltip.classed(side)) {
if (options.duration !== 0 || !tooltip.classed(side)) {
tooltip.call(uiToggle(true));
}
tooltip
.style('top', pos[1] + 'px')
.style('left', pos[0] + 'px')
.attr('class', 'curtain-tooltip tooltip in ' + side + ' ' + tooltipclass);
.attr('class', 'curtain-tooltip tooltip in ' + side + ' ' + (options.tooltipClass || ''));
} else {
tooltip.call(uiToggle(false));
}
return tooltip;
};
@@ -123,7 +126,17 @@ export function uiCurtain() {
darkness.datum(datum)
.interrupt();
(duration === 0 ? darkness : darkness.transition().duration(duration || 600))
var selection;
if (duration === 0) {
selection = darkness;
} else {
selection = darkness
.transition()
.duration(duration || 600)
.ease(d3.easeLinear);
}
selection
.attr('d', function(d) {
var string = 'M 0,0 L 0,' + window.innerHeight + ' L ' +
window.innerWidth + ',' + window.innerHeight + 'L' +
+14 -3
View File
@@ -159,12 +159,23 @@ export function uiHelp(context) {
.html(function(d) { return d.title; })
.on('click', clickHelp);
toc.append('li')
.attr('class','walkthrough')
var walkthrough = toc
.append('li')
.attr('class', 'walkthrough')
.append('a')
.text(t('splash.walkthrough'))
.on('click', clickWalkthrough);
walkthrough
.append('svg')
.attr('class', 'logo logo-walkthrough')
.append('use')
.attr('xlink:href', '#logo-walkthrough');
walkthrough
.append('div')
.text(t('splash.walkthrough'));
var content = pane.append('div')
.attr('class', 'left-content');
+8 -3
View File
@@ -23,9 +23,14 @@ export function uiIntroArea(context, reveal) {
function addArea() {
reveal('button.add-area',
t('intro.areas.add', { button: icon('#icon-area', 'pre-text') }),
{ tooltipClass: 'intro-areas-add' });
var tooltip = reveal('button.add-area',
t('intro.areas.add', { button: icon('#icon-area', 'pre-text') }));
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#landuse-images');
context.on('enter.intro', startArea);
}
+9 -13
View File
@@ -3,9 +3,10 @@ import { t } from '../../util/locale';
import { localNames } from './helper';
import { coreGraph } from '../../core/graph';
import { dataIntroGraph } from '../../../data/intro_graph.json';
import { modeBrowse } from '../../modes/browse';
import { osmEntity } from '../../osm/entity';
import { dataIntroGraph } from '../../../data/intro_graph.json';
import { svgIcon } from '../../svg/icon';
import { uiCurtain } from '../curtain';
import { uiIntroNavigation } from './navigation';
@@ -39,7 +40,7 @@ export function uiIntro(context) {
// create entities for intro graph and localize names
for (var key in dataIntroGraph) {
introGraph[key] = osmEntity(dataIntroGraph[key]);
var name = localNames[id] && t('intro.graph.' + localNames[id]);
var name = localNames[key] && t('intro.graph.' + localNames[key]);
if (name) {
introGraph[key].tags.name = name;
}
@@ -75,7 +76,7 @@ export function uiIntro(context) {
selection.call(curtain);
var chapters = chapterFlow.map(function(chapter, i) {
var s = chapterUi[chapter](context, reveal)
var s = chapterUi[chapter](context, curtain.reveal)
.on('done', function() {
entered.filter(function(d) {
return d.title === s.title;
@@ -102,6 +103,11 @@ export function uiIntro(context) {
.append('div')
.attr('class', 'intro-nav-wrap fillD');
// navwrap
// .append('div')
// .attr('class', 'intro-nav-wrap-icon fillD')
// .call(svgIcon('#logo-walkthrough', 'pre-text light'));
var buttonwrap = navwrap
.append('div')
.attr('class', 'joined')
@@ -126,16 +132,6 @@ export function uiIntro(context) {
enter(chapters[0]);
function reveal(box, text, options) {
options = options || {};
curtain.reveal(box,
text || '',
options.tooltipClass || '',
options.duration
);
}
function enter(newChapter) {
if (currChapter) { currChapter.exit(); }
+8 -3
View File
@@ -35,9 +35,14 @@ export function uiIntroLine(context, reveal) {
function addLine() {
reveal('button.add-line',
t('intro.lines.add', { button: icon('#icon-line', 'pre-text') }),
{ tooltipClass: 'intro-lines-add' });
var tooltip = reveal('button.add-line',
t('intro.lines.add', { button: icon('#icon-line', 'pre-text') }));
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#feature-images');
context.on('enter.intro', startLine);
}
+7 -1
View File
@@ -28,10 +28,16 @@ export function uiIntroPoint(context, reveal) {
function addPoint() {
reveal('button.add-point',
var tooltip = reveal('button.add-point',
t('intro.points.add', { button: icon('#icon-point', 'pre-text') }),
{ tooltipClass: 'intro-points-add' });
tooltip.selectAll('.tooltip-inner')
.insert('svg', 'span')
.attr('class', 'tooltip-illustration')
.append('use')
.attr('xlink:href', '#poi-images');
context.on('enter.intro', placePoint);
}
+4 -2
View File
@@ -50,8 +50,10 @@ export function uiIntroStartEditing(context, reveal) {
});
startbutton
.append('div')
.attr('class','illustration');
.append('svg')
.attr('class', 'illustration')
.append('use')
.attr('xlink:href', '#logo-walkthrough');
startbutton
.append('h2')
+21 -3
View File
@@ -37,21 +37,39 @@ export function uiRestore(context) {
var restore = buttonWrap
.append('button')
.attr('class', 'restore col6')
.text(t('restore.restore'))
.on('click', function() {
context.history().restore();
modalSelection.remove();
});
buttonWrap
restore
.append('svg')
.attr('class', 'logo logo-restore')
.append('use')
.attr('xlink:href', '#logo-restore');
restore
.append('div')
.text(t('restore.restore'));
var reset = buttonWrap
.append('button')
.attr('class', 'reset col6')
.text(t('restore.reset'))
.on('click', function() {
context.history().clearSaved();
modalSelection.remove();
});
reset
.append('svg')
.attr('class', 'logo logo-reset')
.append('use')
.attr('xlink:href', '#logo-reset');
reset
.append('div')
.text(t('restore.reset'));
restore.node().focus();
};
}
+26 -7
View File
@@ -36,25 +36,44 @@ export function uiSplash(context) {
github: '<a href="https://github.com/openstreetmap/iD">github.com</a>'
}));
var buttons = introModal
var buttonWrap = introModal
.append('div')
.attr('class', 'modal-actions cf');
buttons
var walkthrough = buttonWrap
.append('button')
.attr('class', 'col6 walkthrough')
.text(t('splash.walkthrough'))
.attr('class', 'walkthrough col6')
.on('click', function() {
d3.select(document.body).call(uiIntro(context));
modalSelection.close();
});
buttons
walkthrough
.append('svg')
.attr('class', 'logo logo-walkthrough')
.append('use')
.attr('xlink:href', '#logo-walkthrough');
walkthrough
.append('div')
.text(t('splash.walkthrough'));
var startEditing = buttonWrap
.append('button')
.attr('class', 'col6 start')
.text(t('splash.start'))
.attr('class', 'start-editing col6')
.on('click', modalSelection.close);
startEditing
.append('svg')
.attr('class', 'logo logo-features')
.append('use')
.attr('xlink:href', '#logo-features');
startEditing
.append('div')
.text(t('splash.start'));
modalSelection.select('button.close')
.attr('class','hide');
+12 -2
View File
@@ -45,11 +45,21 @@ export function uiSuccess(context) {
var changesetURL = context.connection().changesetURL(changeset.id);
body
var viewOnOsm = body
.append('a')
.attr('class', 'button col12 osm')
.attr('target', '_blank')
.attr('href', changesetURL)
.attr('href', changesetURL);
viewOnOsm
.append('svg')
.attr('class', 'logo logo-osm')
.append('use')
.attr('xlink:href', '#logo-osm');
viewOnOsm
.append('div')
.text(t('success.view_on_osm'));