diff --git a/converse.js b/converse.js
index 3ce9d4f29..e799455c4 100644
--- a/converse.js
+++ b/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],
diff --git a/css/converse.css b/css/converse.css
index 3d27353f2..5fb4f41fd 100644
--- a/css/converse.css
+++ b/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%;
}
diff --git a/less/converse.less b/less/converse.less
index 9a3c383f4..39ee63819 100644
--- a/less/converse.less
+++ b/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;
diff --git a/src/templates.js b/src/templates.js
index 087173690..fa82944ab 100644
--- a/src/templates.js
+++ b/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]
};
});
diff --git a/src/templates/contacts.html b/src/templates/contacts.html
deleted file mode 100644
index 36941d4a7..000000000
--- a/src/templates/contacts.html
+++ /dev/null
@@ -1 +0,0 @@
-{{label_contacts}}
diff --git a/src/templates/group_header.html b/src/templates/group_header.html
new file mode 100644
index 000000000..b7782a86e
--- /dev/null
+++ b/src/templates/group_header.html
@@ -0,0 +1 @@
+{{label_group}}
diff --git a/src/templates/pending_contacts.html b/src/templates/pending_contacts.html
index 445ba36b8..e066cff3f 100644
--- a/src/templates/pending_contacts.html
+++ b/src/templates/pending_contacts.html
@@ -1 +1 @@
-{{label_pending_contacts}}
+{{label_pending_contacts}}
diff --git a/src/templates/requesting_contacts.html b/src/templates/requesting_contacts.html
index 6c0111859..d57c4cba1 100644
--- a/src/templates/requesting_contacts.html
+++ b/src/templates/requesting_contacts.html
@@ -1 +1 @@
-{{label_contact_requests}}
+{{label_contact_requests}}