From e0b5aad65483c71a52837f297b9e77c0a5ad57a0 Mon Sep 17 00:00:00 2001
From: Simon <fortier.simon@hotmail.com>
Date: Tue, 19 Jun 2018 13:56:00 -0400
Subject: [PATCH] Preview icon for images

---
 static/css/main.css   |  9 +++++++++
 templates/search.html | 29 +++++++++++++++++++++--------
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index dbd4daf..2ff4bae 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -51,6 +51,15 @@
     -o-animation: vimCaret 1s linear infinite;
     animation: vimCaret 1s linear infinite; }
 
+.prev-img {
+    width: 100%;
+    max-width: 250px;
+    height: 100%;
+}
+
+.prev-icon {
+    cursor: pointer;
+}
 @-webkit-keyframes vimCaret {
     0% {
         background-color: transparent; }
diff --git a/templates/search.html b/templates/search.html
index ddce976..708218d 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -57,21 +57,24 @@
 
                                 <tr>
                                     <td>
+                                        {% set category = get_mime(src["ext"]) %}
+                                        {% set url = src["website_url"] + src["path"] + "/" + src["name"] + ("." if src["ext"] != "" else "") + src["ext"] %}
+                                        {# Preview #}
+                                        {% if category == "image" %}
+                                            <i class="fas fa-eye prev-icon" data-toggle="popover" tabindex="-1"
+                                               data-content='<img class="prev-img" src="{{ url }}">'></i>
+                                        {% endif %}
                                         {# File name & link #}
-                                        <a href="{{ src["website_url"] + src["path"] + "/" + src["name"] + ("." if src["ext"] != "" else "") + src["ext"] }}" title="{{ src["name"] + src["ext"] }}">
-                                            {{ hl_name |safe }}{{ ("." if src["ext"] != "" else "") + src["ext"] }}
-                                        </a>
+                                        <a href="{{ url }}"><span>{{ hl_name |safe }}{{ ("." if src["ext"] != "" else "") + src["ext"] }}</span></a>
                                         {# File type badge #}
-                                        {% set mime = get_mime(src["ext"]) %}
-                                        {% if mime %}
-                                            <span class="badge badge-pill {{ get_color(mime) }}">
+                                        {% if category %}
+                                            <span class="badge badge-pill {{ get_color(category ) }}">
                                                 {{ src["ext"] }}
                                             </span>
                                         {% endif %}
                                         {# File path #}
                                         <div class="text-muted" title="{{ path }}" style="font-size: 10px;">
-                                            <a style="color: #6c757d" title="See files from this website"
-                                               href="/website/{{ src["website_id"] }}">{{ src["website_url"] }}</a>{{ hl_path|safe }}
+                                            <a title="See files from this website" href="/website/{{ src["website_id"] }}">{{ src["website_url"] }}</a>{{ hl_path|safe }}
                                         </div>
                                     </td>
                                     {# File size & date #}
@@ -100,6 +103,16 @@
                 <div class="card-body">No results</div>
             </div>
         {% endif %}
+
+
+        <script>
+            $('[data-toggle="popover"]').popover({
+                trigger: "focus",
+                delay: {"show": 0, "hide": 100},
+                placement: "right",
+                html: true
+            });
+        </script>
     </div>
 
 {% endblock body %}