From 86dc0c9012b8f5eb5611dde344081199f96b640e Mon Sep 17 00:00:00 2001 From: Thomas Hervey Date: Mon, 2 Jul 2018 15:51:55 -0400 Subject: [PATCH] updated: new comments in notes sidebar ui --- css/65_data.css | 6 ++ data/core.yaml | 6 +- dist/locales/en.json | 4 +- modules/ui/note_editor.js | 133 ++++++++++++++++++++++++++++++++++++-- 4 files changed, 141 insertions(+), 8 deletions(-) diff --git a/css/65_data.css b/css/65_data.css index ef0c01b15..788c0e9eb 100644 --- a/css/65_data.css +++ b/css/65_data.css @@ -38,3 +38,9 @@ .commentCreator { color: #aaa; } + +/* Note editor UI */ +#new-comment-input { + width: 100%; + height: 100px; +} diff --git a/data/core.yaml b/data/core.yaml index 8c077dac0..5640a8261 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -616,9 +616,11 @@ en: anonymous: anonymous commentTitle: Comments resolve: Resolve + newComment: New Comment + inputPlaceholder: Enter a comment to share with other users. comment: Comment - commentResolve: "Comment & Resolve" - save: Save new note + commentResolve: Comment & Resolve + save: Save comment cancel: Cancel help: title: Help diff --git a/dist/locales/en.json b/dist/locales/en.json index 6c4d4e8d5..0820a7b88 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -749,9 +749,11 @@ "anonymous": "anonymous", "commentTitle": "Comments", "resolve": "Resolve", + "newComment": "New Comment", + "inputPlaceholder": "Enter a comment to share with other users.", "comment": "Comment", "commentResolve": "Comment & Resolve", - "save": "Save new note", + "save": "Save comment", "cancel": "Cancel" }, "help": { diff --git a/modules/ui/note_editor.js b/modules/ui/note_editor.js index e337493fb..9f2f8c073 100644 --- a/modules/ui/note_editor.js +++ b/modules/ui/note_editor.js @@ -1,20 +1,27 @@ import { dispatch as d3_dispatch } from 'd3-dispatch'; import { uiFormFields } from './form_fields'; +import { select as d3_select } from 'd3-selection'; + +import { t } from '../util/locale'; +import { + utilGetSetValue, + utilNoAuto, + utilRebind +} from '../util'; import { uiField } from './field'; -import { utilRebind } from '../util'; import { utilDetect } from '../util/detect'; -import { t } from '../util/locale'; + +var _newComment; export function uiNoteEditor(context) { - var dispatch = d3_dispatch('change'); + var dispatch = d3_dispatch('change', 'cancel', 'save'); var formFields = uiFormFields(context); var _fieldsArr; var _note; - function localeDateString(s) { if (!s) return null; var detected = utilDetect(); @@ -72,6 +79,121 @@ export function uiNoteEditor(context) { } + function saveHeader(selection) { + var header = selection.selectAll('.notesSaveHeader') + .data([0]); + header = header.enter() + .append('h4') + .attr('class', '.notesSaveHeader') + .text(t('note.newComment')) + .merge(header); + } + + function input(selection) { + + // Input + var input = selection.selectAll('textarea') + .data([0]); + + // enter + input = input.enter() + .append('textarea') + .attr('id', 'new-comment-input') + .attr('placeholder', t('note.inputPlaceholder')) + .attr('maxlength', 1000) + .call(utilNoAuto) + // .on('input', change(true)) + .on('blur', change()) + .on('change', change()) + .merge(input); + + + function change(onInput) { + return function() { + var t = {}; + // t[field.key] = utilGetSetValue(input) || undefined; + dispatch.call('change', this, t, onInput); + }; + } + + // // Input + // var inputSection = selection.selectAll('.note-input') + // .data([0]); + + // // enter + // var inputEnter = inputSection.enter() + // .append('div') + // .attr('class', 'tempClassName'); + + // update + } + + function buttons(selection) { + // Buttons + var buttonSection = selection.selectAll('.buttons') + .data([0]); + + // enter + var buttonEnter = buttonSection.enter() + .append('div') + .attr('class', 'buttons cf'); + + buttonEnter + .append('button') + .attr('class', 'secondary-action col5 button cancel-button') + .append('span') + .attr('class', 'label') + .text(t('note.cancel')); + + buttonEnter + .append('button') + .attr('class', 'action col5 button save-button') + .append('span') + .attr('class', 'label') + .text(t('note.save')); + + // update + buttonSection = buttonSection + .merge(buttonEnter); + + buttonSection.selectAll('.cancel-button') + .on('click.cancel', function() { + // var selectedID = commitChanges.entityID(); TODO: cancel note event + // dispatch.call('cancel', this, selectedID); + }); + + buttonSection.selectAll('.save-button') + .attr('disabled', function() { + var n = d3_select('#new-comment-input').node(); + return (n && n.value.length) ? null : true; + }) + .on('click.save', function() { + this.blur(); // avoid keeping focus on the button - #4641 + // dispatch.call('saveNote', this, _newComment); TODO: saveNote event + }); + } + + function newComment(selection) { + // New Comment + var saveSection = selection.selectAll('.save-section') + .data([0]); + + // saveSection = saveSection.enter() + // .append('h4') + // .text(t('note.newComment')) + // .merge(saveSection); + + saveSection = saveSection.enter() + .append('div') + .attr('class','save-section cf') + .merge(saveSection); + + saveSection + .call(saveHeader) + .call(input) + .call(buttons); + } + function render(selection) { var header = selection.selectAll('.header') @@ -98,7 +220,8 @@ export function uiNoteEditor(context) { .append('div') .attr('class', 'modal-section note-editor') .call(noteHeader) - .call(noteComments); + .call(noteComments) + .call(newComment); }