Allow group headings to be toggleable. updates #83

converse.js

@@ -3215,6 +3215,9 @@
         this.RosterView = Backbone.Overview.extend({
             tagName: 'dl',
             id: 'converse-roster',
+            events: {
+                "click a.group-toggle": "toggleGroup"
+            },
 
             initialize: function () {
                 this.model.on("add", function (item) {
@@ -3244,18 +3247,25 @@
                 this.model.fetch({add: true}); // Get the cached roster items from localstorage
             },
 
-
             initRender: function () {
-                var roster_markup = converse.templates.contacts({
-                    'label_contacts': this.roster_groups ? __('Ungrouped') : __('My contacts')
-                });
+                var desc_group_toggle = __('Click to hide these contacts'),
+                    toggle_state = 'opened',
+                    roster_markup = converse.templates.group_header({
+                        label_group: this.roster_groups ? __('Ungrouped') : __('My contacts'),
+                        desc_group_toggle: desc_group_toggle,
+                        toggle_state: toggle_state
+                    });
                 if (converse.allow_contact_requests) {
                     roster_markup += converse.templates.requesting_contacts({
-                            'label_contact_requests': __('Contact requests')
-                        }) +
-                        converse.templates.pending_contacts({
-                            'label_pending_contacts': __('Pending contacts')
-                        });
+                        label_contact_requests: __('Contact requests'),
+                        desc_group_toggle: desc_group_toggle,
+                        toggle_state: toggle_state
+                    }) +
+                    converse.templates.pending_contacts({
+                        label_pending_contacts: __('Pending contacts'),
+                        desc_group_toggle: desc_group_toggle,
+                        toggle_state: toggle_state
+                    });
                 }
                 this.$el.hide().html(roster_markup);
             },
@@ -3338,7 +3348,7 @@
                         this.renderRosterItem(item, view);
                     }
                 }
-                this.updateCount().toggleHeadings($contact_requests, $pending_contacts);
+                this.updateCount().toggleHeaders($contact_requests, $pending_contacts);
                 converse.emit('rosterViewUpdated');
                 return this;
             },
@@ -3352,9 +3362,9 @@
                 return this;
             },
 
-            toggleHeadings: function ($contact_requests, $pending_contacts) {
+            toggleHeaders: function ($contact_requests, $pending_contacts) {
                 var $groups = this.$el.find('.roster-group');
-                // Hide the headings if there are no contacts under them
+                // Hide the headers if there are no contacts under them
                 _.each([$groups, $contact_requests, $pending_contacts], function (h) {
                     var show_or_hide = function (h) {
                         if (h.nextUntil('dt').length) {
@@ -3375,6 +3385,17 @@
                 return this;
             },
 
+            toggleGroup: function (ev) {
+                if (ev && ev.preventDefault) { ev.preventDefault(); }
+                var $el = $(ev.target);
+                $el.parent().nextUntil('dt').slideToggle();
+                if ($el.hasClass("icon-opened")) {
+                    $el.removeClass("icon-opened").addClass("icon-closed");
+                } else {
+                    $el.removeClass("icon-closed").addClass("icon-opened");
+                }
+            },
+
             sortRoster: function (chat_status) {
                 var sortFunction = function (a, b) {
                     var a_status = a.s[0],

css/converse.css

@@ -818,8 +818,7 @@ dl.add-converse-contact {
   top: 1px;
 }
 #conversejs .controlbox-pane dt {
-  margin: 0;
-  padding-top: 0.5em;
+  padding: 3px;
 }
 #conversejs .chatroom-form-container {
   height: 100%;
@@ -886,7 +885,7 @@ dl.add-converse-contact {
   height: 254px;
   height: calc(100% - 70px);
 }
-#converse-roster .roster-group {
+#converse-roster .group-toggle {
   color: #666;
 }
 #conversejs dd.available-chatroom {
@@ -959,7 +958,7 @@ dl.add-converse-contact {
 #conversejs #converse-roster dd {
   line-height: 16px;
 }
-#conversejs .roster-group {
+#conversejs .group-toggle {
   display: block;
   width: 100%;
 }

less/converse.less

@@ -903,8 +903,7 @@ dl.add-converse-contact {
 }
 
 #conversejs .controlbox-pane dt {
-    margin: 0;
-    padding-top: 0.5em;
+    padding: 3px;
 }
 
 #conversejs .chatroom-form-container {
@@ -1075,7 +1074,7 @@ dl.add-converse-contact {
     width: 100%;
 }
 
-#conversejs .group-toggle:hover,
+#conversejs .roster-group:hover,
 #conversejs dd.available-chatroom:hover,
 #conversejs #converse-roster dd:hover {
     background-color: #eee;

src/templates.js

@@ -10,7 +10,6 @@ define("converse-templates", [
     "tpl!src/templates/chatrooms_tab",
     "tpl!src/templates/chats_panel",
     "tpl!src/templates/choose_status",
-    "tpl!src/templates/contacts",
     "tpl!src/templates/contacts_panel",
     "tpl!src/templates/contacts_tab",
     "tpl!src/templates/controlbox",
@@ -19,6 +18,7 @@ define("converse-templates", [
     "tpl!src/templates/form_checkbox",
     "tpl!src/templates/form_input",
     "tpl!src/templates/form_select",
+    "tpl!src/templates/group_header",
     "tpl!src/templates/info",
     "tpl!src/templates/login_panel",
     "tpl!src/templates/login_tab",
@@ -35,9 +35,9 @@ define("converse-templates", [
     "tpl!src/templates/roster_item",
     "tpl!src/templates/select_option",
     "tpl!src/templates/status_option",
+    "tpl!src/templates/toggle_chats",
     "tpl!src/templates/toolbar",
-    "tpl!src/templates/trimmed_chat",
-    "tpl!src/templates/toggle_chats"
+    "tpl!src/templates/trimmed_chat"
 ], function () {
     return {
         action:                 arguments[0],
@@ -51,15 +51,15 @@ define("converse-templates", [
         chatrooms_tab:          arguments[8],
         chats_panel:            arguments[9],
         choose_status:          arguments[10],
-        contacts:               arguments[11],
-        contacts_panel:         arguments[12],
-        contacts_tab:           arguments[13],
-        controlbox:             arguments[14],
-        controlbox_toggle:      arguments[15],
-        field:                  arguments[16],
-        form_checkbox:          arguments[17],
-        form_input:             arguments[18],
-        form_select:            arguments[19],
+        contacts_panel:         arguments[11],
+        contacts_tab:           arguments[12],
+        controlbox:             arguments[13],
+        controlbox_toggle:      arguments[14],
+        field:                  arguments[15],
+        form_checkbox:          arguments[16],
+        form_input:             arguments[17],
+        form_select:            arguments[18],
+        group_header:           arguments[19],
         info:                   arguments[20],
         login_panel:            arguments[21],
         login_tab:              arguments[22],
@@ -76,8 +76,8 @@ define("converse-templates", [
         roster_item:            arguments[33],
         select_option:          arguments[34],
         status_option:          arguments[35],
-        toolbar:                arguments[36],
-        trimmed_chat:           arguments[37],
-        toggle_chats:           arguments[38]
+        toggle_chats:           arguments[36],
+        toolbar:                arguments[37],
+        trimmed_chat:           arguments[38]
     };
 });

src/templates/contacts.html

-<dt class="roster-group">{{label_contacts}}</dt>

src/templates/group_header.html

+<dt class="roster-group"><a href="#" class="group-toggle icon-{{toggle_state}}" title="{{desc_group_toggle}}">{{label_group}}</a></dt>

src/templates/pending_contacts.html

-<dt id="pending-xmpp-contacts">{{label_pending_contacts}}</dt>
+<dt id="pending-xmpp-contacts"><a href="#" class="group-toggle icon-{{toggle_state}}" title="{{desc_group_toggle}}">{{label_pending_contacts}}</a></dt>

src/templates/requesting_contacts.html

-<dt id="xmpp-contact-requests">{{label_contact_requests}}</dt>
+<dt id="xmpp-contact-requests"><a href="#" class="group-toggle icon-{{toggle_state}}" title="{{desc_group_toggle}}">{{label_contact_requests}}</a></dt>