updated: new comments in notes sidebar ui

css/65_data.css

@@ -38,3 +38,9 @@
 .commentCreator {
     color: #aaa;
 }
+
+/* Note editor UI */
+#new-comment-input {
+    width: 100%;
+    height: 100px;
+}

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

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": {

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);
     }