From ab8e793a7226f70dfae0e787e598bb8503bcf0ce Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Tue, 3 Jul 2018 02:41:47 -0400
Subject: [PATCH] Playing with note styling, add avatars and more metadata

---
 css/65_data.css           | 35 +++++++++++++++++++++++++---
 modules/ui/note_editor.js | 48 ++++++++++++++++++++++++++-------------
 2 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/css/65_data.css b/css/65_data.css
index 0b4db4d47..93627877e 100644
--- a/css/65_data.css
+++ b/css/65_data.css
@@ -28,16 +28,45 @@
 .comment {
     background-color: #fff;
     border-radius: 5px;
+    border: 1px solid #ccc;
     padding: 10px;
     margin: 10px auto;
+    display: flex;
+    flex-flow: row nowrap;
 }
-.commentText {
-    margin-bottom: 15px;
+
+.comment-main {
+    padding: 0 10px;
+    flex: 1 1 100%;
+    flex-flow: column nowrap;
+    overflow: hidden;
+    overflow-wrap: break-word;
+}
+.comment-avatar {
+    flex: 0 0 40px;
+}
+.comment-avatar .icon.comment-avatar-icon {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+}
+.comment-metadata {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+}
+.comment-author {
+    font-weight: bold;
     color: #333;
 }
-.commentCreator {
+.comment-date {
     color: #aaa;
 }
+.comment-text {
+    color: #333;
+    margin-top: 10px;
+}
 
 /* Note editor UI */
 #new-comment-input {
diff --git a/modules/ui/note_editor.js b/modules/ui/note_editor.js
index 9f2f8c073..b6b772a9f 100644
--- a/modules/ui/note_editor.js
+++ b/modules/ui/note_editor.js
@@ -4,6 +4,7 @@ import { uiFormFields } from './form_fields';
 import { select as d3_select } from 'd3-selection';
 
 import { t } from '../util/locale';
+import { svgIcon } from '../svg';
 import {
     utilGetSetValue,
     utilNoAuto,
@@ -48,11 +49,6 @@ export function uiNoteEditor(context) {
 
 
     function noteComments(selection) {
-        function noteCreator(d) {
-            var userName = d.user ? d.user : t('note.anonymous');
-            return String(userName + ' ' + localeDateString(d.date));
-        }
-
         var comments = selection.selectAll('.comments')
             .data([0]);
 
@@ -62,23 +58,43 @@ export function uiNoteEditor(context) {
             .merge(comments);
 
         var commentEnter = comments.selectAll('.comment')
-            .data(_note.comments, function(d) { return d.uid; })
+            .data(_note.comments)
             .enter()
             .append('div')
             .attr('class', 'comment');
 
-        commentEnter
-            .append('p')
-            .attr('class', 'commentText')
+        var avatar = commentEnter
+            .append('div')
+            .attr('class', 'comment-avatar');
+
+        avatar
+            .call(svgIcon('#iD-icon-avatar', 'comment-avatar-icon'));
+
+        var main = commentEnter
+            .append('div')
+            .attr('class', 'comment-main');
+
+        var meta = main
+            .append('div')
+            .attr('class', 'comment-metadata');
+
+        meta
+            .append('div')
+            .attr('class', 'comment-author')
+            .text(function(d) { return d.user || t('note.anonymous'); });
+
+        meta
+            .append('div')
+            .attr('class', 'comment-date')
+            .text(function(d) { return d.action + ' ' + localeDateString(d.date); });
+
+        main
+            .append('div')
+            .attr('class', 'comment-text')
             .text(function(d) { return d.text; });
-
-        commentEnter
-            .append('p')
-            .attr('class', 'commentCreator')
-            .text(function(d) { return noteCreator(d); });
-
     }
 
+
     function saveHeader(selection) {
         var header = selection.selectAll('.notesSaveHeader')
             .data([0]);
@@ -89,8 +105,8 @@ export function uiNoteEditor(context) {
             .merge(header);
     }
 
-    function input(selection) {
 
+    function input(selection) {
         // Input
         var input = selection.selectAll('textarea')
             .data([0]);