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

(re: #3924)

css/80_app.css

@@ -2420,6 +2420,7 @@ div.full-screen > button:hover {
     margin-top: 10px;
     border-bottom: 1px solid #ccc;
     border-radius: 4px;
+    text-align: center;
 }
 
 .help-wrap .nav {
@@ -3016,20 +3017,14 @@ img.tile-removing {
     background-color: #ececec;
 }
 
-.modal-actions button:before,
-.save-success a.button.osm:before,
-.walkthrough a:before {
-    display: block;
-    content: '';
+.logo {
     height: 100px;
     width: 100%;
     max-width: 100px;
     margin: auto;
-    margin-bottom: 10px;
-    background:transparent url(img/iD-sprite.svg) no-repeat -200px -460px;
 }
 
-.modal-actions :first-child {
+.modal-actions > :first-child {
     border-right: 1px solid #CCC;
 }
 
@@ -3039,57 +3034,48 @@ img.tile-removing {
 
 /* Restore Modal
 ------------------------------------------------------- */
-
-.modal-actions .restore:before {
-    background-position: -500px -460px;
+.modal-actions .logo-restore {
+    color: #7092FF;
 }
-
-.modal-actions .reset:before {
-    background-position: -600px -460px;
+.modal-actions .logo-reset {
+    color: #E06C5E;
 }
 
 /* Success Modal
 ------------------------------------------------------- */
-
 .save-success p {
     padding: 15px 15px 0 15px;
 }
 .save-success a.details {
-  padding-left: 15px;
+    padding-left: 15px;
 }
 .save-success .button {
     padding-top: 15px;
 }
-
+.save-success .logo-osm {
+    color: #7092FF;
+    margin-bottom: 10px;
+}
 .save-success a.button.social {
     height: auto;
+    border-bottom: none;
 }
-
 .save-success .icon.social {
     height: 80px;
     width: 80px;
     color: #7092FF;
 }
 
-.save-success .button.osm:before {
-    background-position: -200px -460px;
-}
-
 /* Splash Modal
 ------------------------------------------------------- */
-
-.modal-actions .walkthrough:before,
-.walkthrough a:before {
-    background-position: -300px -460px;
+.modal-actions .logo-walkthrough,
+.modal-actions .logo-features {
+    color: #7092FF;
 }
 
-.modal-actions .start:before {
-    background-position: -400px -460px;
-}
 
-/* Commit Modal
+/* Save Mode
 ------------------------------------------------------- */
-
 .mode-save a.user-info {
     display: inline-block;
 }
@@ -3452,6 +3438,13 @@ img.tile-removing {
 .add-point .tooltip .tooltip-arrow {
     left: 60px;
 }
+[dir='rtl'] .add-point .tooltip .tooltip-arrow {
+    left: auto;
+    right: 60px;
+}
+[dir='rtl'] .curtain-tooltip.intro-points-add .tooltip-arrow {
+    left: 50%;
+}
 
 /* radial menu (deprecated) */
 
@@ -3656,25 +3649,11 @@ img.tile-removing {
     top: 133px !important;
 }
 
-/* Tooltip illustrations */
-
-.intro-points-add .tooltip-inner::before,
-.intro-areas-add .tooltip-inner::before,
-.intro-lines-add .tooltip-inner::before {
-    margin-left: -20px;
-    display: block;
-    content: "";
+.tooltip-illustration {
     height: 80px;
     width: 200px;
-    background:transparent url(img/iD-sprite.svg) no-repeat 0 -320px;
-}
-
-.intro-areas-add .tooltip-inner::before {
-    background-position: 0 -400px;
-}
-
-.intro-lines-add .tooltip-inner::before {
-    background-position: 0 -480px;
+    margin-left: -20px;
+    margin-top: -10px;
 }
 
 .huge-modal-button {
@@ -3686,8 +3665,7 @@ img.tile-removing {
 .huge-modal-button .illustration {
     height: 100px;
     width: 100px;
-    background: rgba(0, 0, 0, 0) url(img/iD-sprite.svg) no-repeat -300px -460px;
-    margin: auto;
+    color: #7092FF;
 }
 
 .mapillary-wrap {

modules/ui/curtain.js

@@ -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' +

modules/ui/help.js

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

modules/ui/intro/area.js

@@ -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);
     }

modules/ui/intro/intro.js

@@ -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(); }
 

modules/ui/intro/line.js

@@ -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);
     }

modules/ui/intro/point.js

@@ -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);
     }
 

modules/ui/intro/start_editing.js

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

modules/ui/restore.js

@@ -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();
     };
 }

modules/ui/splash.js

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

modules/ui/success.js

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

svg/iD-sprite.json

@@ -383,5 +383,23 @@
 
     "logo-twitter-shape":       { "fill": "currentColor" },
     "logo-facebook-shape":      { "fill": "currentColor" },
-    "logo-google-shape":        { "fill": "currentColor" }
+    "logo-google-shape":        { "fill": "currentColor" },
+
+    "logo-osm":                 { "viewBox": "200 460 100 100" },
+    "logo-walkthrough":         { "viewBox": "300 460 100 100" },
+    "logo-features":            { "viewBox": "400 460 100 100" },
+    "logo-restore":             { "viewBox": "500 460 100 100" },
+    "logo-reset":               { "viewBox": "600 460 100 100" },
+
+    "logo-osm-shape":           { "fill": "currentColor" },
+    "logo-walkthrough-shape":   { "fill": "currentColor" },
+    "logo-features-shape1":     { "fill": "currentColor" },
+    "logo-features-shape2":     { "fill": "currentColor" },
+    "logo-features-shape3":     { "fill": "currentColor" },
+    "logo-restore-shape":       { "fill": "currentColor" },
+    "logo-reset-shape":         { "fill": "currentColor" },
+
+    "poi-images":               { "viewBox": "0 320 200 80" },
+    "landuse-images":           { "viewBox": "0 400 200 80" },
+    "feature-images":           { "viewBox": "0 480 200 80" }
 }