Adjust templates to include message status

resources/chat/message_status_icons.style

+@charset "utf-8";
+
+.status-icon {
+    height: 1.75em;
+    margin-right: -6px;
+    margin-top: -.4em;
+}
+
+.x-ltime.message-status {
+    left: 0px;
+    margin-left: -1.5em;
+}
+
+.x-ltime.message-status > .status-icon {
+    margin-right: 0;
+    margin-top: -2px;
+}
+
+.message.consecutive:not(.x-message) {
+    clear: both;
+}
+
+.stockholm {
+    float: right;
+    padding-right: 5px;
+    margin-right: -8px;
+    margin-left: 4px;
+    padding-left: 4px;
+}
+
+.rtl .stockholm {
+    float: left;
+    padding-right: 4px;
+    margin-right: 4px;
+    margin-left: -8px;
+    padding-left: 5px;
+}
+
+.stockholm > .status-icon {
+    height: 1.6em;
+    margin-right: -6px;
+    margin-top: -2px;
+}
+
+.stockholm > .status-icon.failed {
+    height: 1.4em;
+    padding-top: 2px;
+}
+
+.accepted {
+    filter: invert(38%) sepia(17%) saturate(0%) hue-rotate(177deg) brightness(94%) contrast(97%);
+}
+
+.delivered {
+    filter: invert(28%) sepia(98%) saturate(2550%) hue-rotate(107deg) brightness(102%) contrast(103%);
+}
+
+.failed {
+    filter: invert(12%) sepia(77%) saturate(5700%) hue-rotate(357deg) brightness(73%) contrast(112%);
+}

resources/chat/styles/Smooth Operator/html/message.html

-<div class="{message.css_classes} {user_icons}" user="{message.sender.name}" style="background-color: {message.sender.color};">
+<div class="{message.css_classes} {user_icons}" user="{message.sender.name}" style="background-color: {message.sender.color};" id="{message.id}">
 	<img class="x-icon" src="{message.sender.iconpath}" />
 	<span class="x-iconmask" style="-webkit-mask-box-image: {message.sender.iconpath};"></span>
 	<span class="x-color" style="background-color: {message.sender.color};" src="{message.sender.iconpath}"></span>
@@ -6,6 +6,7 @@
 		<span class="x-sender">{message.sender.name} </span>
 		<span class="x-rtime" title="{message.date}">{message.time} </span>
 		<span class="x-ltime" title="{message.date}">{message.time} </span>
+                <span id="status-{message.id}">{message.status}</span>
 		<span class="x-mark"></span>
 		<span class="x-message" title="{message.time}">{message.message} </span>
 	</span>

resources/chat/styles/Smooth Operator/html/message_continuation.html

@@ -6,6 +6,7 @@
 		<span class="x-sender">{message.sender.name} </span>
 		<span class="x-rtime" title="{message.date}">{message.time} </span>
 		<span class="x-ltime" title="{message.date}">{message.time} </span>
+                <span id="status-{message.id}">{message.status}</span>
 		<span class="x-mark"></span>
 		<span class="x-message" title="{message.time}">{message.message} </span>
 	</span>

resources/chat/styles/Stockholm/html/message.html

@@ -7,6 +7,7 @@
 		<div class="x-sender">{message.sender.name}</div>
 	</div>
 	<div class="x-message {message.text_direction}">
+                <span id="status-{message.id}">{message.status}</span>
 		<div class="x-time" title="{message.date}">{message.time}</div>
 		<div class="x-text">{message.message}</div>
 	</div>

resources/chat/styles/Stockholm/html/message_continuation.html

 <div class="x-message {message.css_classes} {message.text_direction}">
+        <span id="status-{message.id}">{message.status}</span>
 	<div class="x-time" title="{message.date}">{message.time}</div>
 	<div class="x-text">{message.message}</div>
 </div>

resources/chat/styles/Stockholm/html/message_status.html

+<span id='status-{message.id}'>
+    <span class="stockholm"><img class="{message.css_classes} {message.status}" src="{message.iconpath}" /></span>
+</span>

resources/chat/template.html

@@ -15,6 +15,11 @@
       @import url("{style_url}");
     </style>
 
+    <!-- The message status icon styles!-->
+    <style id="main_style" type="text/css" media="screen,print">
+      @import url("../../message_status_icons.style");
+    </style>
+
     <!-- The selected font !-->
     <style id="font_style" type="text/css" media="screen,print">
       body {{ font: {font_size}px {font_family}; }}