added new-note button

css/55_cursors.css

@@ -82,6 +82,7 @@
 }
 
 .mode-add-point #map,
+.mode-add-note #map,
 .mode-browse.lasso #map,
 .mode-browse.lasso .way,
 .mode-browse.lasso .vertex,

data/core.yaml

@@ -16,6 +16,10 @@ en:
       title: Point
       description: "Add restaurants, monuments, postal boxes or other points to the map."
       tail: Click on the map to add a point.
+    add_note:
+      title: Note
+      description: "Spotted an issue? Let other mappers know."
+      tail: Click on the map to add a note.
     browse:
       title: Browse
       description: Pan and zoom the map.
@@ -31,6 +35,7 @@ en:
         point: Added a point.
         vertex: Added a node to a way.
         relation: Added a relation.
+        note: Added a note.
     start:
       annotation:
         line: Started a line.

dist/locales/en.json

@@ -21,6 +21,11 @@
                 "description": "Add restaurants, monuments, postal boxes or other points to the map.",
                 "tail": "Click on the map to add a point."
             },
+            "add_note": {
+                "title": "Note",
+                "description": "Spotted an issue? Let other mappers know.",
+                "tail": "Click on the map to add a note."
+            },
             "browse": {
                 "title": "Browse",
                 "description": "Pan and zoom the map."
@@ -40,7 +45,8 @@
                 "annotation": {
                     "point": "Added a point.",
                     "vertex": "Added a node to a way.",
-                    "relation": "Added a relation."
+                    "relation": "Added a relation.",
+                    "note": "Added a note."
                 }
             },
             "start": {

modules/actions/add_note.js

@@ -0,0 +1,6 @@
+import osm from '../services/osm';
+
+export function actionAddNote(note) {
+    osm.replaceNote(note);
+    console.log('actionAddNote: ', note);
+}

modules/actions/index.js

@@ -1,6 +1,7 @@
 export { actionAddEntity } from './add_entity';
 export { actionAddMember } from './add_member';
 export { actionAddMidpoint } from './add_midpoint';
+export { actionAddNote } from './add_note';
 export { actionAddVertex } from './add_vertex';
 export { actionChangeMember } from './change_member';
 export { actionChangePreset } from './change_preset';

modules/modes/add_note.js

@@ -0,0 +1,53 @@
+import { t } from '../util/locale';
+import { actionAddNote } from '../actions';
+import { behaviorDraw } from '../behavior';
+import { modeBrowse, modeSelectNote } from './index';
+import { osmNote } from '../osm';
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+
+
+
+export function modeAddNote(context) {
+    var mode = {
+        id: 'add-note',
+        button: 'note',
+        title: t('modes.add_note.title'),
+        description: t('modes.add_note.description'),
+        key: '4'
+    };
+
+    var behavior = behaviorDraw(context)
+        .tail(t('modes.add_note.tail'))
+        .on('click', add)
+        .on('cancel', cancel)
+        .on('finish', cancel);
+
+
+    function add(loc) {
+        var note = osmNote({ loc: loc });
+
+        // actionAddNote(note);
+
+        context.enter(
+            modeSelectNote(context, [note.id]).newFeature(true)
+        );
+    }
+
+
+    function cancel() {
+        context.enter(modeBrowse(context));
+    }
+
+
+    mode.enter = function() {
+        context.install(behavior);
+    };
+
+
+    mode.exit = function() {
+        context.uninstall(behavior);
+    };
+
+
+    return mode;
+}

modules/modes/index.js

@@ -1,6 +1,7 @@
 export { modeAddArea } from './add_area';
 export { modeAddLine } from './add_line';
 export { modeAddPoint } from './add_point';
+export { modeAddNote } from './add_note';
 export { modeBrowse } from './browse';
 export { modeDragNode } from './drag_node';
 export { modeDrawArea } from './draw_area';

modules/modes/select_note.js

@@ -39,6 +39,8 @@ export function modeSelectNote(context, selectedNoteID) {
         behaviorLasso(context),
     ];
 
+    var newFeature = false;
+
 
     function checkSelectedID() {
         if (!osm) return;
@@ -49,6 +51,11 @@ export function modeSelectNote(context, selectedNoteID) {
         return note;
     }
 
+    mode.newFeature = function(_) {
+        if (!arguments.length) return newFeature;
+        newFeature = _;
+        return mode;
+    };
 
     mode.enter = function() {
 

modules/svg/notes.js

@@ -82,15 +82,6 @@ export function svgNotes(projection, context, dispatch) {
             .append('g')
             .attr('class', function(d) { return 'note note-' + d.id + ' ' + d.status; });
 
-        // notesEnter
-        //     .append('use')
-        //     .attr('class', 'note-shadow')
-        //     .attr('width', '24px')
-        //     .attr('height', '24px')
-        //     .attr('x', '-12px')
-        //     .attr('y', '-24px')
-        //     .attr('xlink:href', '#iD-icon-note');
-
         notesEnter
             .append('use')
             .attr('class', 'note-fill')

modules/ui/init.js

@@ -101,7 +101,7 @@ export function uiInit(context) {
 
         limiter
             .append('div')
-            .attr('class', 'button-wrap joined col3')
+            .attr('class', 'button-wrap joined col5')
             .call(uiModes(context), limiter);
 
         limiter

modules/ui/modes.js

@@ -3,10 +3,13 @@ import _debounce from 'lodash-es/debounce';
 import { select as d3_select } from 'd3-selection';
 import { d3keybinding as d3_keybinding } from '../lib/d3.keybinding.js';
 
+import { svgNotes } from '../svg';
+
 import {
     modeAddArea,
     modeAddLine,
     modeAddPoint,
+    modeAddNote,
     modeBrowse
 } from '../modes';
 
@@ -19,7 +22,8 @@ export function uiModes(context) {
     var modes = [
         modeAddPoint(context),
         modeAddLine(context),
-        modeAddArea(context)
+        modeAddArea(context),
+        modeAddNote(context)
     ];
 
 
@@ -29,6 +33,13 @@ export function uiModes(context) {
     }
 
 
+    function toggleNewNote() {
+        return svgNotes().enabled()
+            && context.connection().authenticated()
+            && ~~context.map().zoom() >= 12;
+    }
+
+
     return function(selection) {
         var buttons = selection.selectAll('button.add-button')
             .data(modes);
@@ -36,7 +47,10 @@ export function uiModes(context) {
         buttons = buttons.enter()
             .append('button')
             .attr('tabindex', -1)
-            .attr('class', function(mode) { return mode.id + ' add-button col4'; })
+            .attr('class', function(mode) { return mode.id + ' add-button col3'; })
+            // .classed('disabled', function(mode) {
+            //     return mode.id === 'add-note' && !svgNotes.enabled; // disable notes button
+            // })
             .on('click.mode-buttons', function(mode) {
                 // When drawing, ignore accidental clicks on mode buttons - #4042
                 var currMode = context.mode().id;
@@ -109,10 +123,13 @@ export function uiModes(context) {
             .on('enter.modes', update);
 
 
-
         function update() {
             selection.selectAll('button.add-button')
+                .filter(function(d) { return d.id !== 'add-note'; }) // disable all but add-note
                 .property('disabled', !editable());
+
+            selection.selectAll('button.add-note') // disable add-note
+                .property('disabled', !toggleNewNote());
         }
     };
 }