Improve layout of app icon uploader.

r2/r2/controllers/api.py

@@ -50,8 +50,8 @@ from r2.lib.strings import strings
 from r2.lib.filters import _force_unicode, websafe_json, websafe, spaceCompress
 from r2.lib.db import queries
 from r2.lib.db.queries import changed
+from r2.lib import media
 from r2.lib import promote
-from r2.lib.media import force_thumbnail, thumbnail_url, upload_icon
 from r2.lib.comment_tree import delete_comment
 from r2.lib import tracking,  cssfilter, emailer
 from r2.lib.subreddit_search import search_reddits
@@ -2921,9 +2921,9 @@ class ApiController(RedditController, OAuth2ResourceController):
                                      docs=dict(file=_("an icon (72x72)"))))
     @api_doc(api_section.apps)
     def POST_setappicon(self, form, jquery, client, icon_file):
-        if client and icon_file:
+        if client and icon_file and media.can_upload_icon():
             filename = 'icon-%s' % client._id
-            client.icon_url = upload_icon(filename, icon_file, (72, 72))
+            client.icon_url = media.upload_icon(filename, icon_file, (72, 72))
             client._commit()
             jquery('#app-icon-%s' % client._id).attr('src', client.icon_url)
             form.set_html('.img-status', _('icon uploaded'))

r2/r2/lib/media.py

@@ -186,7 +186,7 @@ def force_thumbnail(link, image_data, never_expire=True, file_type=".jpg"):
     update_link(link, thumbnail=thumb_url, media_object=None, thumbnail_size=image.size)
 
 def upload_icon(file_name, image_data, size):
-    assert g.media_store == "s3"
+    assert g.media_store == 's3'
     image = str_to_image(image_data)
     image.format = 'PNG'
     image.thumbnail(size, Image.ANTIALIAS)
@@ -198,6 +198,9 @@ def upload_icon(file_name, image_data, size):
                            never_expire=True,
                            replace=True)
 
+def can_upload_icon():
+    return g.media_store == 's3'
+
 def run():
     @g.stats.amqp_processor('scraper_q')
     def process_link(msg):

r2/r2/lib/pages/pages.py

@@ -40,6 +40,7 @@ from pylons.i18n import _, ungettext
 from pylons import c, request, g
 from pylons.controllers.util import abort
 
+from r2.lib import media
 from r2.lib import promote
 from r2.lib.captcha import get_iden
 from r2.lib.filters import spaceCompress, _force_unicode, _force_utf8
@@ -663,6 +664,7 @@ class PrefApps(Templated):
     def __init__(self, my_apps, developed_apps):
         self.my_apps = my_apps
         self.developed_apps = developed_apps
+        self.can_upload_icon = media.can_upload_icon()
         super(PrefApps, self).__init__()
 
 

r2/r2/public/static/css/reddit.css

@@ -5893,10 +5893,14 @@ background: #eee;
     width: 200px;
 }
 
-.edit-app, .developed-app .collapsed { display: none; }
+.edit-app, .edit-app-icon, .developed-app .collapsed { display: none; }
+.edit-app-icon-button { display: block; text-align: center; width: 72px; }
+.edit-app-icon br { display: none; }
 .edit-app-form, .edit-app-form form { display: inline-block; }
+.edit-app-form th, .edit-app-icon th { width: 12ex; }
 .edit-app-form input, .edit-app-form textarea { margin: 0px; width: 50ex; }
 .edit-app-form input[name="name"] { width: 20ex !important; }
+.edit-app-form input[type="file"] { width: auto !important; }
 .edit-app-form input[type="submit"] {
     margin-left: 10px;
     width: auto !important;

r2/r2/public/static/js/apps.js

@@ -11,6 +11,11 @@ $(function() {
             $(this).hide();
             $("#create-app").fadeIn();
         });
+    $(".edit-app-icon-button").click(
+        function() {
+            $(this).toggleClass("collapsed");
+            $(this).closest(".edit-app").find(".edit-app-icon").show();
+        });
 });
 
 function app_revoked(elem, op) {

r2/r2/templates/prefapps.html

@@ -70,12 +70,26 @@
       <h3>${app._id}</h3>
       <div class="app-description">${app.description}</div>
       ${developers(app)}
-      <a class="edit-app-button" href="javascript://void(0)">
+      <a class="edit-app-button" href="javascript:void(0)">
          ${_("edit")}
       </a>
     </div>
     <div class="edit-app">
-      ${image_upload('/api/setappicon', hidden_data=dict(client_id=app._id))}
+      %if thing.can_upload_icon:
+        <a class="edit-app-icon-button" href="javascript:void(0)">
+          change icon
+        </a>
+        <table class="edit-app-icon pretty-form preftable">
+          <tr>
+            <th>${_("new icon")}</th>
+            <td class="prefright">
+              ${image_upload('/api/setappicon',
+                             form_id='app-icon-upload-%s' % app._id,
+                             hidden_data=dict(client_id=app._id))}
+            </td>
+          </tr>
+        </table>
+      %endif
       <div class="edit-app-form">
         <form method="post" action="/api/updateapp" class="pretty-form"
          id="update-app-${app._id}"