Update page when an app is created or updated.

r2/r2/controllers/api.py

@@ -40,7 +40,7 @@ from r2.lib.pages import EnemyList, FriendList, ContributorList, ModList, \
     UrlParser, WrappedUser, BoringPage
 from r2.lib.pages import FlairList, FlairCsv, FlairTemplateEditor, \
     FlairSelector
-from r2.lib.pages import AppDeveloper
+from r2.lib.pages import PrefApps
 from r2.lib.utils.trial_utils import indict, end_trial, trial_info
 from r2.lib.pages.things import wrap_links, default_thing_wrapper
 from r2.models.last_modified import LastModified
@@ -2862,20 +2862,24 @@ class ApiController(RedditController, OAuth2ResourceController):
             client.name = name
             client.description = description
             client.about_url = about_url or ''
-            client.icon_url = icon_url or ''
             client.redirect_uri = redirect_uri
             client._commit()
             form.set_html('.status', _('application updated'))
+            apps = PrefApps([], [client])
+            jquery('#developed-app-%s' % client._id).replaceWith(
+                apps.call('developed_app', client, collapsed=False))
         else:
             # client_id was omitted or empty, creating new OAuth2Client
             client = OAuth2Client._new(name=name,
                                        description=description,
                                        about_url=about_url or '',
-                                       icon_url=icon_url or '',
                                        redirect_uri=redirect_uri)
             client._commit()
             client.add_developer(c.user)
             form.set_html('.status', _('application created'))
+            apps = PrefApps([], [client])
+            jquery('#developed-apps ul').append(
+                apps.call('developed_app', client, collapsed=False))
 
     @validatedForm(VUser(),
                    VModhash(),
@@ -2894,9 +2898,10 @@ class ApiController(RedditController, OAuth2ResourceController):
             return
         client.add_developer(account)
         form.set_html('.status', _('developer added'))
+        apps = PrefApps([], [client])
         (jquery('#app-developer-%s input[name="name"]' % client._id).val('')
             .closest('.prefright').find('ul').append(
-                AppDeveloper(client, account).render(style='html')))
+                apps.call('editable_developer', client, account)))
 
     @validatedForm(VUser(),
                    VModhash(),

r2/r2/lib/pages/pages.py

@@ -664,15 +664,8 @@ 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__()
 
-class AppDeveloper(Templated):
-    def __init__(self, app, dev):
-        self.app = app
-        self.dev = dev
-        super(AppDeveloper, self).__init__()
-
 class PrefDelete(Templated):
     """Preference form for deleting a user's own account."""
     pass

r2/r2/lib/wrapped.pyx

@@ -400,6 +400,13 @@ class Templated(object):
         if style: del kw['style']
         return self._render(attr, style, **kw)
 
+    def call(self, name, *args, **kwargs):
+        from pylons import g
+        from r2.lib.filters import spaceCompress
+        res = self.template().get_def(name).render(*args, **kwargs)
+        if not g.template_debug:
+            res = spaceCompress(res)
+        return res
 
 class Uncachable(Exception): pass
 

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

@@ -5847,6 +5847,7 @@ tr.gold-accent + tr > td {
     width: 880px;
 }
 
+.developed-app.collapsed, .authorized-app { height: 100px; }
 .developed-app .collapsed { display: none; }
 
 .developed-app .ajax-upload-form {
@@ -5854,11 +5855,10 @@ tr.gold-accent + tr > td {
 }
 
 .app-details {
-    position: absolute;
-    top: 7px;
-    left: 80px;
+    display: inline-block;
+    width: 200px;
     height: 72px;
-    margin-left: 0.5em;
+    margin-left: 1em;
     vertical-align: top;
 }
 
@@ -5866,6 +5866,7 @@ tr.gold-accent + tr > td {
 .app-details h3 { font-size: x-small; }
 
 .app-icon {
+    display: inline-block;
     width: 72px;
     height: 72px;
     line-height: 72px;
@@ -5877,27 +5878,32 @@ tr.gold-accent + tr > td {
 }
 
 .app-description {
+    display: inline-block;
     font-size: small;
-    position: absolute;
-    top: 0px;
-    left: 200px;
-    width: 600px;
+    width: 597px;
+    height: 80px;
+    overflow-y: auto;
+    vertical-align: top;
 }
 
 .app-developers {
     position: absolute;
-    left: 200px;
-    bottom: 0px;
+    left: 289px;
+    bottom: 1ex;
     width: 600px;
 }
 
 .edit-app-button, .revoke-app-button {
     position: absolute;
-    bottom: 0px;
+    bottom: 1ex;
+    left: 12px;
     width: 200px;
 }
 
-.edit-app, .edit-app-icon, .developed-app .collapsed { display: none; }
+.edit-app.collapsed, .edit-app-icon, .developed-app .collapsed {
+    display: none;
+}
+
 .edit-app-icon-button { display: block; text-align: center; width: 72px; }
 .edit-app-form, .edit-app-form form { display: inline-block; }
 .edit-app-form th, .edit-app-icon th { width: 12ex; }

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

@@ -1,21 +1,25 @@
 $(function() {
-    $(".edit-app-button").click(
-        function() {
-            var app = $(this).closest(".developed-app");
-            $(this).toggleClass("collapsed");
-            app.find(".app-developers").remove();
-            app.find(".edit-app").slideToggle();
-        });
+    $("#developed-apps")
+        .delegate(".edit-app-button", "click",
+                  function() {
+                      $(this).toggleClass("collapsed").closest(".developed-app")
+                          .removeClass('collapsed')
+                          .find(".app-developers").remove().end()
+                          .find(".edit-app")
+                            .slideToggle().removeClass('collapsed').end();
+                  })
+        .delegate(".edit-app-icon-button", "click",
+                  function() {
+                      $(this).toggleClass("collapsed")
+                          .closest(".developed-app")
+                              .find(".ajax-upload-form").show();
+                  });
+
     $("#create-app-button").click(
         function() {
             $(this).hide();
             $("#create-app").fadeIn();
         });
-    $(".edit-app-icon-button").click(
-        function() {
-            $(this).toggleClass("collapsed");
-            $(this).closest(".developed-app").find(".ajax-upload-form").show();
-        });
 });
 
 function app_revoked(elem, op) {

r2/r2/templates/appdeveloper.html

@@ -1,12 +0,0 @@
-<%namespace file="printablebuttons.html" import="ajax_ynbutton" />
-
-<li id="app-dev-${thing.app._id}-${thing.dev._id}">
-${thing.dev.name}&#32;
-%if c.user == thing.dev:
-  <span class="gray">(that's you!)</span>
-%else:
-  ${ajax_ynbutton(_("remove"), "removedeveloper",
-                  hidden_data=dict(client_id=thing.app._id,
-                                   name=thing.dev.name))}
-%endif
-</li>

r2/r2/templates/prefapps.html

@@ -1,7 +1,6 @@
-<% from r2.lib.pages import AppDeveloper %>
 <%namespace name="utils" file="utils.html" />
 <%namespace file="utils.html" import="error_field, plain_link" />
-<%namespace file="printablebuttons.html" import="ynbutton" />
+<%namespace file="printablebuttons.html" import="ajax_ynbutton, ynbutton" />
 
 <%def name="icon(app)">
   <div class="app-icon">
@@ -28,39 +27,26 @@
   %endif
 </%def>
 
-%if thing.my_apps:
-  <h1>${_("authorized applications")}</h1>
+<%def name="editable_developer(app, dev)">
+  <li id="app-dev-${app._id}-${dev._id}">
+    ${dev.name}&#32;
+    %if c.user == dev:
+      <span class="gray">${_("(that's you!)")}</span>&#32;
+    %else:
+      ${ajax_ynbutton(_("remove"), "removedeveloper",
+                      hidden_data=dict(client_id=app._id, name=dev.name))}
+    %endif
+  </li>
+</%def>
 
-  %for app in thing.my_apps:
-  <div id="authorized-app-${app._id}" class="authorized-app rounded">
-    ${icon(app)}
-    <div class="app-details">
-      <h2>
-      %if app.about_url:
-        <a href="${app.about_url}">${app.name}</a>
-      %else:
-        ${app.name}
-      %endif
-      </h2>
-      <div class="app-description">${app.description}</div>
-      ${developers(app)}
-      ${ynbutton(_("revoke access"),
-                 _("revoked"),
-                 "revokeapp",
-                 callback="app_revoked",
-                 hidden_data=dict(client_id=app._id),
-                 _class="revoke-app-button")}
-    </div>
-  </div>
-  %endfor
-%endif
-
-%if thing.developed_apps:
-  <h1>${_("developed applications")}</h1>
-
-  %for app in thing.developed_apps:
-  <div id="developed-app-${app._id}" class="developed-app rounded">
+<%def name="developed_app(app, collapsed=True)">
+  <li id="developed-app-${app._id}"
+      class="developed-app rounded ${'collapsed' if collapsed else ''}">
     ${icon(app)}
+    <a class="edit-app-button ${'' if collapsed else 'collapsed'}"
+       href="javascript:void(0)">
+       ${_("edit")}
+    </a>
     <div class="app-details">
       <h2>
       %if app.about_url:
@@ -70,14 +56,14 @@
       %endif
       </h2>
       <h3>${app._id}</h3>
-      <div class="app-description">${app.description}</div>
-      ${developers(app)}
-      <a class="edit-app-button" href="javascript:void(0)">
-         ${_("edit")}
-      </a>
     </div>
-    <div class="edit-app">
-      %if thing.can_upload_icon:
+    <div class="app-description">${app.description}</div>
+    %if collapsed:
+      ${developers(app)}
+    %endif
+    <div class="edit-app ${'collapsed' if collapsed else ''}">
+      <% from r2.lib import media %>
+      %if media.can_upload_icon():
         <a class="edit-app-icon-button" href="javascript:void(0)">
           change icon
         </a>
@@ -141,7 +127,7 @@
             <td class="prefright">
               <ul>
                 %for dev in app._developers:
-                  ${AppDeveloper(app, dev)}
+                  ${editable_developer(app, dev)}
                 %endfor
               </ul>
               <br>
@@ -166,13 +152,48 @@
                    hidden_data=dict(client_id=app._id))}
       </div>
     </div>
+  </li>
+</%def>
+
+%if thing.my_apps:
+  <h1>${_("authorized applications")}</h1>
+
+  %for app in thing.my_apps:
+  <div id="authorized-app-${app._id}" class="authorized-app rounded">
+    ${icon(app)}
+    <div class="app-details">
+      <h2>
+      %if app.about_url:
+        <a href="${app.about_url}">${app.name}</a>
+      %else:
+        ${app.name}
+      %endif
+      </h2>
+    </div>
+    <div class="app-description">${app.description}</div>
+    ${developers(app)}
+    ${ynbutton(_("revoke access"),
+               _("revoked"),
+               "revokeapp",
+               callback="r.apps.revoked",
+               hidden_data=dict(client_id=app._id),
+               _class="revoke-app-button")}
   </div>
   %endfor
-  <p><a href="#">create another app...</a></p>
-%else:
-  <p><a href="#">are you a developer?  create an app...</a></p>
 %endif
 
+<div id="developed-apps">
+  %if thing.developed_apps:
+    <h1>${_("developed applications")}</h1>
+
+    <ul>
+    %for app in thing.developed_apps:
+      ${developed_app(app)}
+    %endfor
+    </ul>
+  %endif
+</div>
+
 <div class="edit-app-form">
   <button id="create-app-button" class="submit-img">
     ${_("create application")}