[extensions-web] Fix screenshot upload

[Yuri Konotopov <ykonotopov src gnome org>]

commit ba9fdef74c900f3ebba962ae1a1d3ab917f12144
Author: Yuri Konotopov <ykonotopov gnome org>
Date:   Sun Jan 15 23:09:15 2017 +0400

    Fix screenshot upload

 .../extensions/templates/extensions/detail.html    |    7 +----
 .../templates/extensions/detail_edit.html          |   11 +--------
 sweettooth/static/css/sweettooth.css               |   23 --------------------
 sweettooth/static/js/main.js                       |   11 +++++++--
 sweettooth/static/js/uploader.js                   |   23 ++++++++++++++++++-
 5 files changed, 32 insertions(+), 43 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/detail.html 
b/sweettooth/extensions/templates/extensions/detail.html
index 46e1dc8..5f5ffb3 100644
--- a/sweettooth/extensions/templates/extensions/detail.html
+++ b/sweettooth/extensions/templates/extensions/detail.html
@@ -22,16 +22,13 @@
       </div>
 
       <div class="extension-details">
-        {% if extension.screenshot %}
             <div class="screenshot">
+                {% if extension.screenshot %}
                 <a href="{{ extension.screenshot.url }}"><img src="{{ extension.screenshot.url }}" /></a>
+                {% endif %}
                 {% block screenshot_upload %}
                 {% endblock screenshot_upload %}
             </div>
-        {% else %}
-        {% block no-screenshot %}
-        {% endblock %}
-        {% endif %}
 
         <p class="description" id="extension_description">{{ extension.description }}</p>
 
diff --git a/sweettooth/extensions/templates/extensions/detail_edit.html 
b/sweettooth/extensions/templates/extensions/detail_edit.html
index 462114b..c677db0 100644
--- a/sweettooth/extensions/templates/extensions/detail_edit.html
+++ b/sweettooth/extensions/templates/extensions/detail_edit.html
@@ -53,20 +53,11 @@
 
 {% block screenshot_upload %}
   <label class="upload">
-      <span class="action_button">Upload new</span>
+      <span class="action_button">Upload screenshot</span>
       <input type="file" accept="image/*">
   </label>
 {% endblock %}
 
-{% block no-screenshot %}
-<div class="screenshot upload placeholder">
-  <div class="text">
-    <span>Upload a screenshot</span>
-  </div>
-</div>
-<input type="file" accept="image/*">
-{% endblock %}
-
 
 {% block icon %}
 <label class="icon upload">
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 7caa0db..3657e35 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -490,33 +490,10 @@ li.extension:last-child {
     display: none;
 }
 
-.extension .upload.placeholder {
-    border: 2px dashed #ccc;
-    padding: 0;
-    background-color: #eee;
-}
-
 .extension .screenshot .upload {
     text-align: center;
 }
 
-.extension .screenshot.upload.placeholder {
-    width: 250px;
-    height: 200px;
-}
-
-.extension .screenshot.upload.placeholder .text {
-    display: table;
-    width: 100%;
-    height: 100%;
-}
-
-.extension .screenshot.upload.placeholder .text span {
-    display: table-cell;
-    vertical-align: middle;
-    text-align: center;
-}
-
 /* Various other things */
 
 .extension .uninstall {
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index f924c24..98ed0a8 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -44,9 +44,14 @@ function($, messages, modal, hashParamUtils, templates) {
         });
 
         // Add lightbox for screenshots
-        $('div.screenshot > a').colorbox({
-            maxWidth: '80%',
-            maxHeight: '80%'
+        $('div.extension-details').on('click', 'div.screenshot > a', function(event) {
+            event.preventDefault();
+
+            $.colorbox({
+                href: $(this).prop('href'),
+                maxWidth: '80%',
+                maxHeight: '80%'
+            });
         });
 
         $("time").timeago();
diff --git a/sweettooth/static/js/uploader.js b/sweettooth/static/js/uploader.js
index 89adf97..92e3ac8 100644
--- a/sweettooth/static/js/uploader.js
+++ b/sweettooth/static/js/uploader.js
@@ -23,8 +23,27 @@ define(['jquery'], function($) {
 
         function uploadComplete(result) {
             var $old = $elem.find('img').first();
-            $old.attr('src', result);
-            $elem.removeClass('placeholder');
+            if($old.length == 0)
+            {
+                $elem.prepend(
+                    $('<a />')
+                        .prop('href', result)
+                        .append(
+                            $('<img />')
+                                .prop('src', result)
+                        )
+                );
+            }
+            else
+            {
+                $old.prop('src', result);
+                $elem.removeClass('placeholder');
+
+                if ($old.parent().is('a'))
+                {
+                    $old.parent().prop('href', result);
+                }
+            }
         }
 
         $input.on('change', function(e) {