Add "What's new in iD" notification on new versions

(closes #1856)

css/80_app.css

@@ -2728,6 +2728,32 @@ img.tile-removing {
     color: #ccf;
 }
 
+.badge {
+    display: inline-block;
+    background: #d32232;
+    width: 21px;
+    height: 20px;
+    border-radius: 11px;
+    margin-left: 6px;
+}
+[dir='rtl'] .badge {
+    margin-left: 0;
+    margin-right: 6px;
+}
+.badge a {
+    margin-right: 5px;
+}
+[dir='rtl'] .badge a {
+    margin-right: 0;
+    margin-left: 5px;
+}
+.badge .icon {
+    vertical-align: baseline;
+    width: 11px;
+    height: 11px;
+    fill: white;
+}
+
 
 /* Modals
 ------------------------------------------------------- */

data/core.yaml

@@ -456,6 +456,8 @@ en:
     live: live
     lose_changes: "You have unsaved changes. Switching the map server will discard them. Are you sure you want to switch servers?"
     dev: dev
+  version:
+    whats_new: "What's new in iD {version}"
   tag_reference:
     description: Description
     on_wiki: "{tag} on wiki.osm.org"

dist/locales/en.json

@@ -563,6 +563,9 @@
             "lose_changes": "You have unsaved changes. Switching the map server will discard them. Are you sure you want to switch servers?",
             "dev": "dev"
         },
+        "version": {
+            "whats_new": "What's new in iD {version}"
+        },
         "tag_reference": {
             "description": "Description",
             "on_wiki": "{tag} on wiki.osm.org",

modules/ui/index.js

@@ -8,6 +8,7 @@ export { uiConfirm } from './confirm';
 export { uiConflicts } from './conflicts';
 export { uiContributors } from './contributors';
 export { uiDisclosure } from './disclosure';
+export { uiEditMenu } from './edit_menu';
 export { uiEntityEditor } from './entity_editor';
 export { uiFeatureInfo } from './feature_info';
 export { uiFeatureList } from './feature_list';
@@ -45,7 +46,6 @@ export { uiTagReference } from './tag_reference';
 export { uiToggle } from './toggle';
 export { uiTooltipHtml } from './tooltipHtml';
 export { uiUndoRedo } from './undo_redo';
+export { uiVersion } from './version';
 export { uiViewOnOSM } from './view_on_osm';
 export { uiZoom } from './zoom';
-
-export { uiEditMenu } from './edit_menu';

modules/ui/init.js

@@ -29,6 +29,7 @@ import { uiSpinner } from './spinner';
 import { uiSplash } from './splash';
 import { uiStatus } from './status';
 import { uiUndoRedo } from './undo_redo';
+import { uiVersion } from './version';
 import { uiZoom } from './zoom';
 import { uiCmd } from './cmd';
 
@@ -190,16 +191,13 @@ export function uiInit(context) {
             .attr('id', 'about-list');
 
         if (!context.embed()) {
-            aboutList.call(uiAccount(context));
+            aboutList
+                .call(uiAccount(context));
         }
 
         aboutList
             .append('li')
-            .append('a')
-            .attr('target', '_blank')
-            .attr('tabindex', -1)
-            .attr('href', 'https://github.com/openstreetmap/iD')
-            .text(context.version);
+            .call(uiVersion(context));
 
         var issueLinks = aboutList
             .append('li');

modules/ui/version.js

@@ -0,0 +1,48 @@
+import { t } from '../util/locale';
+import { svgIcon } from '../svg/index';
+import { tooltip } from '../util/tooltip';
+
+// these are module variables so they are preserved through a ui.restart()
+var sawVersion = null,
+    isNewVersion = false,
+    isNewUser = false;
+
+
+export function uiVersion(context) {
+
+    var currVersion = context.version,
+        matchedVersion = currVersion.match(/\d\.\d\.\d.*/);
+
+    if (sawVersion === null && matchedVersion !== null) {
+        isNewVersion = (context.storage('sawVersion') !== currVersion);
+        isNewUser = !context.storage('sawSplash');
+        context.storage('sawVersion', currVersion);
+        sawVersion = currVersion;
+    }
+
+    return function(selection) {
+        selection
+            .append('a')
+            .attr('target', '_blank')
+            .attr('tabindex', -1)
+            .attr('href', 'https://github.com/openstreetmap/iD')
+            .text(currVersion);
+
+        // only show new version indicator to users that have used iD before
+        if (isNewVersion && !isNewUser) {
+            var fragment = currVersion.replace(/\./g, '');
+            selection
+                .append('div')
+                .attr('class', 'badge')
+                .append('a')
+                .attr('target', '_blank')
+                .attr('tabindex', -1)
+                .attr('href', 'https://github.com/openstreetmap/iD/blob/master/CHANGELOG.md#' + fragment)
+                .call(svgIcon('#gift-11'))
+                .call(tooltip()
+                    .title(t('version.whats_new', { version: currVersion }))
+                    .placement('top')
+                );
+        }
+    };
+}