Add inline notification for flagged messages

img/chatapp.svg

@@ -317,6 +317,56 @@ function TextChatMessage(message_text, is_myself) {
   }
 }
 
+function ReportChatMessage(_exclamation_mark, is_myself) {
+  let line = (current_language=='en')?['⚠ this message was reported']: ['⚠ beskeden blev rapporteret'];
+  let bubble_color = '#FFFFFF';
+  let text_color = '#FF0000';
+  let container = document.getElementById('messages');
+
+  // attributes
+  this.height = 0; // height on screen when fully visible
+  this.group = null; // a <g> with a transform=translate(0,y_shift) attribute
+
+  /// Render the chat message on the screen
+  this.draw = function(y_offset, y_shift) {
+    let group = create_svg_node('g', {'transform': `translate(0, ${y_shift})`});
+
+    let x = 150; // middle
+    let text = create_svg_node('text', {
+      'x': `${x}%`,
+      'font-size': `${line_height}px`,
+      'text-anchor': 'middle',
+      'font-weight': 'bold'
+    });
+
+    let tspan = create_svg_node('tspan', {
+      'x': `${x}%`,
+      'y': `${y_offset + line_height}`, // important: y is lower text baseline
+      'fill': text_color,
+      'width': '5%'
+    });
+    enable_scrolling(tspan)
+
+    tspan.appendChild(document.createTextNode(line));
+    text.appendChild(tspan);
+
+    group.appendChild(text); // needs to be part of the DOM *now*
+    container.appendChild(group);
+    let bubble = create_bubble(text, bubble_color);
+    group.appendChild(bubble);
+    redraw_on_top(text);
+
+    this.height = bubble.getBBox().height + bubble_spacing;
+    this.group = group;
+  }
+
+  /// Move a chat message on the screen (to simulate scrolling)
+  this.shift_y_pos = function(by) {
+    redraw_on_top(document.getElementById('contact_name_box'));
+    this.group.setAttribute('transform', `translate(0, ${by})`);
+  }
+}
+
 /// A class holding a image-based chat message.
 ///
 /// *ChatMessages are owned by a Dialog.
@@ -434,6 +484,8 @@ function create_chat_message(content, is_myself) {
     constr = ImageChatMessage;
   } else if(content.startsWith('$')) {
     constr = OfflineChatMessage;
+  } else if(content.startsWith('!')) {
+    constr = ReportChatMessage;
   } else {
     constr = TextChatMessage;
   }
@@ -536,7 +588,7 @@ function Dialog() {
   }
 
   async function post_message(dialog, message, is_myself) {
-    if(!is_myself && dialog.messages.length) {
+    if(!is_myself && dialog.messages.length && !message.startsWith('!')) {
       await wait(message.length * get_typing_speed());
     } // first message should be instant
 
@@ -574,10 +626,16 @@ function Dialog() {
     clear_input_field();
     release_send_button();
     await post_message(this, message, true);
+    if(will_be_flagged) {
+      await post_message(this, '!flagged', true);
+    }
   }
 
-  this.you = async function(message) {
+  this.you = async function(message, will_be_flagged) {
     await post_message(this, message, false);
+    if(will_be_flagged) {
+      await post_message(this, '!flagged', true);
+    }
   }
 
   this.end = async function(message) {