summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMax Magorsch <arzano@gentoo.org>2020-07-11 15:12:51 +0200
committerMax Magorsch <arzano@gentoo.org>2020-07-11 15:13:07 +0200
commit4bf91463052c41965ee7a9f79ab2187ea65d3d82 (patch)
tree9de09590c8d8144e7c7021a1228446cb9240c852
parentAdd url paramter 'h' for further highlighting (diff)
downloadfrontend-4bf91463052c41965ee7a9f79ab2187ea65d3d82.tar.gz
frontend-4bf91463052c41965ee7a9f79ab2187ea65d3d82.tar.bz2
frontend-4bf91463052c41965ee7a9f79ab2187ea65d3d82.zip
Use a table for the message body instead of pre
This simplifies the highlighting of lines. Signed-off-by: Max Magorsch <arzano@gentoo.org>
-rw-r--r--public/css/main.css4
-rw-r--r--views/message.erb33
2 files changed, 29 insertions, 8 deletions
diff --git a/public/css/main.css b/public/css/main.css
index 0acabf6..aa81004 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -100,6 +100,10 @@
.ag-date {
}
+.ag-line:target {
+ background-color:#FFF3CD;
+}
+
.ag-line-number{
color: #c1c1c1!important;
}
diff --git a/views/message.erb b/views/message.erb
index 40c333a..f7e1c89 100644
--- a/views/message.erb
+++ b/views/message.erb
@@ -37,7 +37,30 @@
</table>
</div>
-<pre class="ag-message-content"><div class="d-flex flex-row"><div class="text-right pr-3"><% strip_email(message['_source']['content']).split("\n").each_with_index do |line, index| %><a id="L<%= index + 1 %>" class="ag-line-number" href="#L<%= index + 1 %>"><%= index + 1 %></a><br/><% end %></div><div id="ag-message-body" class="w-100"><%= linkize(strip_email(message['_source']['content'])) %></div></div></pre>
+<div style="border: 1px solid #ccc;font-size:12px;padding:10px;background-color: #f5f5f5;" class="mb-3 w-100">
+ <table class="w-100">
+ <% inquote = false %>
+ <% linkize(strip_email(message['_source']['content'])).split("\n").each_with_index do |line, index| %>
+ <tr id="L<%= index + 1 %>" class="ag-line">
+ <td class="pr-3 text-right" style="line-height: 1.2;user-select: none;"><a style="font-family: monospace;font-size: 12px;" class="ag-line-number" href="#L<%= index + 1 %>"><%= index + 1 %></a></td>
+ <% if line.start_with?('<div class="ag-quote">') %>
+ <% inquote = true %>
+ <td style="line-height: 1.2;font-family: monospace;font-size: 12px;color:#999"><%= line.sub('<div class="ag-quote">','') %></td>
+ <% elsif line.end_with?('</div>') %>
+ <% inquote = false %>
+ <td style="line-height: 1.2;font-family: monospace;font-size: 12px;color:#999"><%= line.sub('</div>','') %></td>
+ <% else %>
+ <% if inquote %>
+ <td style="line-height: 1.2;font-family: monospace;font-size: 12px;color:#999;"><%= line %></td>
+ <% else %>
+ <td style="line-height: 1.2;font-family: monospace;font-size: 12px;"><%= line %></td>
+ <% end %>
+ <% end %>
+ </tr>
+ <% end %>
+ </table>
+</div>
+
<% if message['_source']['attachments'] and not message['_source']['attachments'].empty? %>
<h3>Attachments</h3>
@@ -86,10 +109,6 @@
</div>
<script>
- // highlight based on the specified reference in url
- var lineNumber = window.location.hash.substr(1).replace("L", "");
- highlightLine(lineNumber);
-
// highlight based on parameter "h"
var url = new URL(window.location.href);
var highlights = url.searchParams.get("h");
@@ -112,9 +131,7 @@
function highlightLine(lineNumber) {
if(isNumeric(lineNumber)){
- var lines = document.getElementById("ag-message-body").innerHTML.split("\n");
- lines[parseFloat(lineNumber) - 1] = '<div style="display: inline-block;background-color:#FFF3CD;">' + lines[parseFloat(lineNumber) - 1] + '</div>'
- document.getElementById("ag-message-body").innerHTML = lines.join("\n");
+ document.querySelectorAll(".ag-line")[parseFloat(lineNumber) - 1].style.backgroundColor = '#FFF3CD';
}
}