Add collapse button to the moderation tools sidebar box.

Also, add an id attribute to the moderation tools box.

r2/r2/lib/pages/pages.py

@@ -231,7 +231,9 @@ class Reddit(Templated):
                                        type="flat_vert",
                                        base_path="/about/",
                                        css_class="icon-menu",
-                                       separator="")])
+                                       separator="")],
+                              _id="moderation_tools",
+                              collapsible=True)
 
     def sr_moderators(self, limit = 10):
         accounts = Account._byID([uid
@@ -579,12 +581,12 @@ class SponsorshipBox(Templated):
     pass
 
 class SideContentBox(Templated):
-    def __init__(self, title, content, helplink=None, extra_class=None,
-                 more_href = None, more_text = "more"):
+    def __init__(self, title, content, helplink=None, _id=None, extra_class=None,
+                 more_href = None, more_text = "more", collapsible=False):
         Templated.__init__(self, title=title, helplink = helplink,
-                           content=content, extra_class=extra_class,
-                           more_href = more_href,
-                           more_text = more_text)
+                           content=content, _id=_id, extra_class=extra_class,
+                           more_href = more_href, more_text = more_text,
+                           collapsible=collapsible)
 
 class SideBox(CachedTemplate):
     """

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

@@ -4325,13 +4325,33 @@ dd { margin-left: 20px;  }
     color: gray; 
 }
 
-.sidecontentbox h1 {
+.sidecontentbox .title h1 {
+    display: inline;
     text-transform:uppercase;
     margin: 0;
     color: gray;
     font-size: 130%;
 }
 
+.sidecontentbox.collapsible .title {
+    cursor: pointer;
+}
+
+.sidecontentbox .collapse-button {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    line-height: 10px;
+    text-align: center;
+    font-size: 10px;
+    background: #eee;
+    color: #333;
+    border: 1px solid #999;
+    border-radius: 2px;
+    margin: 1px 8px;
+    vertical-align: bottom;
+}
+
 .titlebox form.toggle, .leavemoderator {
     margin: 0;
     padding: 5px 0px;

r2/r2/public/static/js/ui.js

@@ -4,6 +4,44 @@ r.ui.Base = function(el) {
     this.$el = $(el)
 }
 
+r.ui.collapsibleSideBox = function(id) {
+    var $el = $('#'+id)
+    return new r.ui.Collapse($el.find('.title'), $el.find('.content'), id)
+}
+
+r.ui.Collapse = function(el, target, key) {
+    r.ui.Base.call(this, el)
+    this.target = target
+    this.key = 'ui.collapse.' + key
+    this.isCollapsed = store.get(this.key) == true
+    this.$el.click($.proxy(this, 'toggle', null, false))
+    this.toggle(this.isCollapsed, true)
+}
+r.ui.Collapse.prototype = {
+    animDuration: 200,
+
+    toggle: function(collapsed, immediate) {
+        if (collapsed == null) {
+            collapsed = !this.isCollapsed
+        }
+
+        var duration = immediate ? 0 : this.animDuration
+        if (collapsed) {
+            $(this.target).slideUp(duration)
+        } else {
+            $(this.target).slideDown(duration)
+        }
+
+        this.isCollapsed = collapsed
+        store.set(this.key, collapsed)
+        this.update()
+    },
+
+    update: function() {
+        this.$el.find('.collapse-button').text(this.isCollapsed ? '+' : '-')
+    }
+}
+
 r.ui.Form = function(el) {
     r.ui.Base.call(this, el)
     this.$el.submit($.proxy(function(e) {

r2/r2/templates/sidecontentbox.html

@@ -19,14 +19,19 @@
 ## All portions of the code written by CondeNet are Copyright (c) 2006-2010
 ## CondeNet, Inc. All Rights Reserved.
 ################################################################################
-
-<div class="sidecontentbox ${thing.extra_class or ''}">
+<%namespace file="utils.html" import="tags"/>
+<div class="sidecontentbox ${thing.extra_class or ''} ${'collapsible' if thing.collapsible else ''}" ${tags(_id=thing._id)}>
   %if thing.helplink:
      <a class="helplink" href="${thing.helplink[0]}">
        ${thing.helplink[1]}
      </a>
   %endif
-  <h1>${thing.title.upper()}</h1>
+  <div class="title">
+    <h1>${thing.title.upper()}</h1>
+    %if thing.collapsible:
+      <span class="collapse-button">-</span>
+    %endif
+  </div>
   <ul class="content">
     %for c in thing.content:
       <li>${c}</li>
@@ -40,4 +45,8 @@
       </li>
     %endif
   </ul>
+
+  %if thing.collapsible:
+    <script>r.ui.collapsibleSideBox("${thing._id}")</script>
+  %endif
 </div>