Style note header

css/65_data.css

@@ -3,17 +3,24 @@
 .layer-notes {
     pointer-events: none;
 }
-
 .layer-notes .note .note-shadow {
-    color: #000;
     pointer-events: none;
 }
 .layer-notes .note .note-fill {
-    color: #ff3300;
     pointer-events: visible;
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-point.png), pointer; /* FF */
 }
+
+.note-header-icon .note-shadow,
+.layer-notes .note .note-shadow {
+    color: #000;
+}
+.note-header-icon .note-fill,
+.layer-notes .note .note-fill {
+    color: #ff3300;
+}
+.note-header-icon.closed .note-fill,
 .layer-notes .note.closed .note-fill {
     color: #55dd00;
 }
@@ -24,26 +31,79 @@
     color: #ffee00;
 }
 
+/* slight adjustments to preset icon for note icons */
+.note-header-icon .preset-icon-28 {
+    top: 18px;
+}
+.note-header-icon .preset-icon-24 {
+    top: 20px;
+}
+.note-header-icon .preset-icon-24 .icon.note-fill {
+    width: 25px;
+    height: 23px;
+}
+
 /* OSM Note UI */
+.note-header {
+    background-color: #f6f6f6;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+}
+
+.note-header-icon {
+    background-color: #fff;
+    padding: 10px;
+    flex: 0 0 62px;
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border-right: 1px solid #ccc;
+    border-radius: 5px 0 0 5px;
+}
+[dir='rtl'] .note-header-icon {
+    border-right: unset;
+    border-left: 1px solid #ccc;
+    border-radius: 0 5px 5px 0;
+}
+
+.note-header-icon .icon-wrap {
+    position: absolute;
+    top: 0px;
+}
+
+.note-header-label {
+    background-color: #f6f6f6;
+    padding: 0 10px;
+    flex: 1 1 100%;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 0 5px 5px 0;
+}
+[dir='rtl'] .note-header-label {
+    border-radius: 5px 0 0 5px;
+}
+
+.comments-container {
+    background: #ececec;
+    padding: 1px 10px;
+    margin: 10px 0;
+    border-radius: 8px;
+}
+
 .comment {
     background-color: #fff;
     border-radius: 5px;
     border: 1px solid #ccc;
-    padding: 10px;
     margin: 10px auto;
     display: flex;
     flex-flow: row nowrap;
 }
-
-.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;
+    padding: 10px;
+    flex: 0 0 62px;
 }
 .comment-avatar .icon.comment-avatar-icon {
     width: 40px;
@@ -52,13 +112,16 @@
     border: 1px solid #ccc;
     border-radius: 20px;
 }
+.comment-main {
+    padding: 10px;
+    flex: 1 1 100%;
+    flex-flow: column nowrap;
+    overflow: hidden;
+    overflow-wrap: break-word;
+}
 .comment-metadata {
-    display: -webkit-flex; /* Safari */
-    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
     flex-flow: row nowrap;
-    flex-wrap: wrap;
     justify-content: space-between;
-
 }
 .comment-author {
     font-weight: bold;
@@ -72,7 +135,6 @@
     margin-top: 10px;
     overflow-y: hidden; /* TODO: give scroll bar or replace with accordion  */
     max-height: 250px;
-
 }
 
 #new-comment-input {

data/core.yaml

@@ -614,6 +614,7 @@ en:
     note: Note
     title: Edit note
     anonymous: anonymous
+    closed: "(Closed)"
     more: More
     less: Less
     commentTitle: Comments

modules/ui/note_comments.js

@@ -15,12 +15,12 @@ export function uiNoteComments() {
 
 
     function noteComments(selection) {
-        var comments = selection.selectAll('.comments')
+        var comments = selection.selectAll('.comments-container')
             .data([0]);
 
         comments = comments.enter()
             .append('div')
-            .attr('class', 'comments')
+            .attr('class', 'comments-container')
             .merge(comments);
 
         var commentEnter = comments.selectAll('.comment')

modules/ui/note_header.js

@@ -7,12 +7,37 @@ export function uiNoteHeader() {
 
 
     function noteHeader(selection) {
-        selection.selectAll('.note-header')
-            .data([_note], function(d) { return d.id; })
-            .enter()
-            .append('h3')
-            .attr('class', 'note-header')
-            .text(function(d) { return String(t('note.note') + ' ' + d.id); });
+        var header = selection.selectAll('.note-header')
+            .data([_note], function(d) { return d.id; });
+
+        header.exit()
+            .remove();
+
+        var headerEnter = header.enter()
+            .append('div')
+            .attr('class', 'note-header');
+
+        var iconEnter = headerEnter
+            .append('div')
+            .attr('class', function(d) { return 'note-header-icon ' + d.status; });
+
+        iconEnter
+            .append('div')
+            .attr('class', 'preset-icon-28')
+            .call(svgIcon('#fas-comment-alt', 'note-shadow'));
+
+        iconEnter
+            .append('div')
+            .attr('class', 'preset-icon-24')
+            .call(svgIcon('#fas-comment-alt', 'note-fill'));
+
+        headerEnter
+            .append('div')
+            .attr('class', 'note-header-label')
+            .text(function(d) {
+                return t('note.note') + ' ' + d.id + ' ' +
+                    (d.status === 'closed' ? t('note.closed') : '');
+            });
     }