diff options
| -rw-r--r-- | public/css/main.css | 4 | ||||
| -rw-r--r-- | views/message.erb | 33 |
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'; } } |