From a474e3bb9f9d8f97a7b7cfa4a247a6dbd0c3d5d1 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Mon, 2 Jul 2018 12:32:40 -0400 Subject: [PATCH] Working on note editor style and ui, simplify d3 code --- css/65_data.css | 19 ++--- data/core.yaml | 19 ++--- dist/locales/en.json | 5 +- modules/svg/notes.js | 30 ++++++++ modules/ui/note_editor.js | 152 +++++++++++++------------------------- 5 files changed, 96 insertions(+), 129 deletions(-) diff --git a/css/65_data.css b/css/65_data.css index 49340654f..ef0c01b15 100644 --- a/css/65_data.css +++ b/css/65_data.css @@ -25,21 +25,16 @@ } /* OSM Note UI */ -.comment-first { - background-color: #ddd; - border-radius: 5px; - padding: 5px; - margin: 5px auto; -} .comment { background-color: #fff; border-radius: 5px; - padding: 5px; - margin: 5px auto; -} -.commentCreator { - color: #666; + padding: 10px; + margin: 10px auto; } .commentText { - margin: 20px auto; + margin-bottom: 15px; + color: #333; +} +.commentCreator { + color: #aaa; } diff --git a/data/core.yaml b/data/core.yaml index 731d9a99a..8c077dac0 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -611,18 +611,15 @@ en: openstreetcam: view_on_openstreetcam: "View this image on OpenStreetCam" note: - title: "Edit note" - unresolved: "Unresolved note #" - description: "Description" - creator: "Comment from" - anonymous: 'anonymous' - creatorOn: 'on' - commentTitle: 'Comments' - resolve: "Resolve" - comment: "Comment" + note: Note + title: Edit note + anonymous: anonymous + commentTitle: Comments + resolve: Resolve + comment: Comment commentResolve: "Comment & Resolve" - save: "Save new note" - cancel: "Cancel" + save: Save new note + cancel: Cancel help: title: Help key: H diff --git a/dist/locales/en.json b/dist/locales/en.json index dc650c6b4..6c4d4e8d5 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -744,12 +744,9 @@ "view_on_openstreetcam": "View this image on OpenStreetCam" }, "note": { + "note": "Note", "title": "Edit note", - "unresolved": "Unresolved note #", - "description": "Description", - "creator": "Comment from", "anonymous": "anonymous", - "creatorOn": "on", "commentTitle": "Comments", "resolve": "Resolve", "comment": "Comment", diff --git a/modules/svg/notes.js b/modules/svg/notes.js index bead738fd..6cc9b47f9 100644 --- a/modules/svg/notes.js +++ b/modules/svg/notes.js @@ -64,6 +64,36 @@ export function svgNotes(projection, context, dispatch) { .on('end', editOff); } + + function click(which) { + _selected = which; + context.map().centerEase(which.loc); + + layer.selectAll('.note') + .classed('selected', function(d) { return d === _selected; }); + + // context.ui().sidebar.show(noteEditor.note(which)); + } + + + function mouseover(which) { + layer.selectAll('.note') + .classed('hovered', function(d) { return d === which; }); + + // context.ui().sidebar.show(noteEditor.note(which)); + } + + + function mouseout() { + layer.selectAll('.note') + .classed('hovered', false); + + // TODO: check if the item was clicked. If so, it should remain on the sidebar. + // TODO: handle multi-clicks. Otherwise, utilize behavior/select.js + // context.ui().sidebar.hide(); + } + + function update() { var service = getService(); var data = (service ? service.notes(projection) : []); diff --git a/modules/ui/note_editor.js b/modules/ui/note_editor.js index 821dfd02c..41b38410c 100644 --- a/modules/ui/note_editor.js +++ b/modules/ui/note_editor.js @@ -4,6 +4,7 @@ import { uiFormFields } from './form_fields'; import { uiField } from './field'; import { utilRebind } from '../util'; +import { utilDetect } from '../util/detect'; import { t } from '../util/locale'; @@ -11,117 +12,68 @@ export function uiNoteEditor(context) { var dispatch = d3_dispatch('change'); var formFields = uiFormFields(context); var _fieldsArr; - var _noteID; + var _note; - function noteEditor(selection, note) { - render(selection, note); + + function localeDateString(s) { + if (!s) return null; + var detected = utilDetect(); + var options = { day: 'numeric', month: 'short', year: 'numeric' }; + var d = new Date(s); + if (isNaN(d.getTime())) return null; + return d.toLocaleDateString(detected.locale, options); } - function parseNoteUnresolved(selection, note) { - var unresolved = selection.selectAll('.noteUnresolved') - .data(note, function(d) { return d.id; }) + function noteEditor(selection) { + render(selection); + } + + + function noteHeader(selection) { + selection.selectAll('.note-header') + .data(_note, function(d) { return d.id; }) .enter() .append('h3') - .attr('class', 'noteUnresolved') - .text(function(d) { return String(t('note.unresolved') + ' ' + d.id); }); - - selection.merge(unresolved); - return selection; + .attr('class', 'note-header') + .text(function(d) { return String(t('note.note') + ' ' + d.id); }); } - function parseNoteComments(selection, note) { + function noteComments(selection) { function noteCreator(d) { var userName = d.user ? d.user : t('note.anonymous'); - return String(t('note.creator') + ' ' + userName + ' ' + t('note.creatorOn') + ' ' + d.date); + return String(userName + ' ' + localeDateString(d.date)); } - var comments = selection - .append('div') - .attr('class', 'comments'); + var comments = selection.selectAll('.comments') + .data([0]); - var comment = comments.selectAll('.comment') - .data(note.comments, function(d) { return d.uid; }) + comments = comments.enter() + .append('div') + .attr('class', 'comments') + .merge(comments); + + var commentEnter = comments.selectAll('.comment') + .data(_note.comments, function(d) { return d.uid; }) .enter() .append('div') .attr('class', 'comment'); - // append the creator - comment - .append('p') - .attr('class', 'commentCreator') - .text(function(d) { return noteCreator(d); }); - - // append the comment - comment + commentEnter .append('p') .attr('class', 'commentText') .text(function(d) { return d.text; }); - comments.insert('h4', ':first-child') - .text(t('note.description')); + commentEnter + .append('p') + .attr('class', 'commentCreator') + .text(function(d) { return noteCreator(d); }); - // TODO: have a better check to highlight the first/author comment (e.g., check if `author: true`) - comments.select('div') - .attr('class', 'comment-first'); - - - selection.merge(comments); - return selection; } - function render(selection, note) { - - var exampleNote = { - close_url: 'example_close_url', - comment_url: 'example_comment_url', - comments: [ - { - action: 'opened', - date: '2016-11-20 00:50:20 UTC', - html: '<p>Test comment1.</p>', - text: 'Test comment1', - uid: '111111', - user: 'User1', - user_url: 'example_user_url1' - }, - { - action: 'opened', - date: '2016-11-20 00:50:20 UTC', - html: '<p>Test comment2.</p>', - text: 'Test comment2', - uid: '222222', - user: 'User2', - user_url: 'example_user_url2' - }, - { - action: 'opened', - date: '2016-11-20 00:50:20 UTC', - html: '<p>Test comment3.</p>', - text: 'Test comment3', - uid: '333333', - user: 'User3', - user_url: 'example_user_url3' - } - ], - date_created: '2016-11-20 00:50:20 UTC', - id: 'note789148', - loc: [ - -120.0219036, - 34.4611879 - ], - status: 'open', - type: 'note', - url: 'https://api.openstreetmap.org/api/0.6/notes/789148', - visible: true - }; - - var currentNote = note ? [note] : [exampleNote]; - - var author = currentNote[0].comments[0]; - author.author = true; + function render(selection) { var header = selection.selectAll('.header') .data([0]); @@ -131,6 +83,7 @@ export function uiNoteEditor(context) { .append('h3') .text(t('note.title')); + var body = selection.selectAll('.body') .data([0]); @@ -139,28 +92,23 @@ export function uiNoteEditor(context) { .attr('class', 'body') .merge(body); - // Note Section - var noteSection = body.selectAll('.changeset-editor') - .data([0]); - - noteSection = noteSection.enter() + body.selectAll('.note-editor') + .data([0]) + .enter() .append('div') - .attr('class', 'modal-section changeset-editor') - .merge(noteSection); - - noteSection = noteSection.call(parseNoteUnresolved, currentNote); - - noteSection = noteSection.call(parseNoteComments, currentNote[0]); - // TODO: revisit commit.js, changeset_editor.js to get warnings, fields array, button toggles, etc. + .attr('class', 'modal-section note-editor') + .call(noteHeader) + .call(noteComments); } - noteEditor.noteID = function(_) { - if (!arguments.length) return _noteID; - if (_noteID === _) return noteEditor; - _noteID = _; + + noteEditor.note = function(_) { + if (!arguments.length) return _note; + _note = _; _fieldsArr = null; return noteEditor; }; + return utilRebind(noteEditor, dispatch, 'on'); -} \ No newline at end of file +}