CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 05:30:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Working on note editor style and ui, simplify d3 code

Browse Source
This commit is contained in:
Bryan Housel
2018-07-02 12:32:40 -04:00
parent d81b9c5625
commit a474e3bb9f
5 changed files with 96 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/65_data.css
+7 -12
View File
@@ -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;
}
data/core.yaml
+8 -11
View File
@@ -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
dist/locales/en.json
Vendored
+1 -4
View File
@@ -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",
modules/svg/notes.js
+30
View File
@@ -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) : []);
modules/ui/note_editor.js
+50 -102
View File
@@ -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');
}
}