Allow group headings to be toggleable. updates #83
This commit is contained in:
parent
5b5c7ad7c1
commit
e1a19678ad
45
converse.js
45
converse.js
@ -3215,6 +3215,9 @@
|
|||||||
this.RosterView = Backbone.Overview.extend({
|
this.RosterView = Backbone.Overview.extend({
|
||||||
tagName: 'dl',
|
tagName: 'dl',
|
||||||
id: 'converse-roster',
|
id: 'converse-roster',
|
||||||
|
events: {
|
||||||
|
"click a.group-toggle": "toggleGroup"
|
||||||
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
this.model.on("add", function (item) {
|
this.model.on("add", function (item) {
|
||||||
@ -3244,18 +3247,25 @@
|
|||||||
this.model.fetch({add: true}); // Get the cached roster items from localstorage
|
this.model.fetch({add: true}); // Get the cached roster items from localstorage
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
initRender: function () {
|
initRender: function () {
|
||||||
var roster_markup = converse.templates.contacts({
|
var desc_group_toggle = __('Click to hide these contacts'),
|
||||||
'label_contacts': this.roster_groups ? __('Ungrouped') : __('My 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) {
|
if (converse.allow_contact_requests) {
|
||||||
roster_markup += converse.templates.requesting_contacts({
|
roster_markup += converse.templates.requesting_contacts({
|
||||||
'label_contact_requests': __('Contact requests')
|
label_contact_requests: __('Contact requests'),
|
||||||
}) +
|
desc_group_toggle: desc_group_toggle,
|
||||||
converse.templates.pending_contacts({
|
toggle_state: toggle_state
|
||||||
'label_pending_contacts': __('Pending contacts')
|
}) +
|
||||||
});
|
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);
|
this.$el.hide().html(roster_markup);
|
||||||
},
|
},
|
||||||
@ -3338,7 +3348,7 @@
|
|||||||
this.renderRosterItem(item, view);
|
this.renderRosterItem(item, view);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.updateCount().toggleHeadings($contact_requests, $pending_contacts);
|
this.updateCount().toggleHeaders($contact_requests, $pending_contacts);
|
||||||
converse.emit('rosterViewUpdated');
|
converse.emit('rosterViewUpdated');
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
@ -3352,9 +3362,9 @@
|
|||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleHeadings: function ($contact_requests, $pending_contacts) {
|
toggleHeaders: function ($contact_requests, $pending_contacts) {
|
||||||
var $groups = this.$el.find('.roster-group');
|
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) {
|
_.each([$groups, $contact_requests, $pending_contacts], function (h) {
|
||||||
var show_or_hide = function (h) {
|
var show_or_hide = function (h) {
|
||||||
if (h.nextUntil('dt').length) {
|
if (h.nextUntil('dt').length) {
|
||||||
@ -3375,6 +3385,17 @@
|
|||||||
return this;
|
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) {
|
sortRoster: function (chat_status) {
|
||||||
var sortFunction = function (a, b) {
|
var sortFunction = function (a, b) {
|
||||||
var a_status = a.s[0],
|
var a_status = a.s[0],
|
||||||
|
@ -818,8 +818,7 @@ dl.add-converse-contact {
|
|||||||
top: 1px;
|
top: 1px;
|
||||||
}
|
}
|
||||||
#conversejs .controlbox-pane dt {
|
#conversejs .controlbox-pane dt {
|
||||||
margin: 0;
|
padding: 3px;
|
||||||
padding-top: 0.5em;
|
|
||||||
}
|
}
|
||||||
#conversejs .chatroom-form-container {
|
#conversejs .chatroom-form-container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -886,7 +885,7 @@ dl.add-converse-contact {
|
|||||||
height: 254px;
|
height: 254px;
|
||||||
height: calc(100% - 70px);
|
height: calc(100% - 70px);
|
||||||
}
|
}
|
||||||
#converse-roster .roster-group {
|
#converse-roster .group-toggle {
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
#conversejs dd.available-chatroom {
|
#conversejs dd.available-chatroom {
|
||||||
@ -959,7 +958,7 @@ dl.add-converse-contact {
|
|||||||
#conversejs #converse-roster dd {
|
#conversejs #converse-roster dd {
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
}
|
}
|
||||||
#conversejs .roster-group {
|
#conversejs .group-toggle {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -903,8 +903,7 @@ dl.add-converse-contact {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#conversejs .controlbox-pane dt {
|
#conversejs .controlbox-pane dt {
|
||||||
margin: 0;
|
padding: 3px;
|
||||||
padding-top: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#conversejs .chatroom-form-container {
|
#conversejs .chatroom-form-container {
|
||||||
@ -1075,7 +1074,7 @@ dl.add-converse-contact {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#conversejs .group-toggle:hover,
|
#conversejs .roster-group:hover,
|
||||||
#conversejs dd.available-chatroom:hover,
|
#conversejs dd.available-chatroom:hover,
|
||||||
#conversejs #converse-roster dd:hover {
|
#conversejs #converse-roster dd:hover {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
|
@ -10,7 +10,6 @@ define("converse-templates", [
|
|||||||
"tpl!src/templates/chatrooms_tab",
|
"tpl!src/templates/chatrooms_tab",
|
||||||
"tpl!src/templates/chats_panel",
|
"tpl!src/templates/chats_panel",
|
||||||
"tpl!src/templates/choose_status",
|
"tpl!src/templates/choose_status",
|
||||||
"tpl!src/templates/contacts",
|
|
||||||
"tpl!src/templates/contacts_panel",
|
"tpl!src/templates/contacts_panel",
|
||||||
"tpl!src/templates/contacts_tab",
|
"tpl!src/templates/contacts_tab",
|
||||||
"tpl!src/templates/controlbox",
|
"tpl!src/templates/controlbox",
|
||||||
@ -19,6 +18,7 @@ define("converse-templates", [
|
|||||||
"tpl!src/templates/form_checkbox",
|
"tpl!src/templates/form_checkbox",
|
||||||
"tpl!src/templates/form_input",
|
"tpl!src/templates/form_input",
|
||||||
"tpl!src/templates/form_select",
|
"tpl!src/templates/form_select",
|
||||||
|
"tpl!src/templates/group_header",
|
||||||
"tpl!src/templates/info",
|
"tpl!src/templates/info",
|
||||||
"tpl!src/templates/login_panel",
|
"tpl!src/templates/login_panel",
|
||||||
"tpl!src/templates/login_tab",
|
"tpl!src/templates/login_tab",
|
||||||
@ -35,9 +35,9 @@ define("converse-templates", [
|
|||||||
"tpl!src/templates/roster_item",
|
"tpl!src/templates/roster_item",
|
||||||
"tpl!src/templates/select_option",
|
"tpl!src/templates/select_option",
|
||||||
"tpl!src/templates/status_option",
|
"tpl!src/templates/status_option",
|
||||||
|
"tpl!src/templates/toggle_chats",
|
||||||
"tpl!src/templates/toolbar",
|
"tpl!src/templates/toolbar",
|
||||||
"tpl!src/templates/trimmed_chat",
|
"tpl!src/templates/trimmed_chat"
|
||||||
"tpl!src/templates/toggle_chats"
|
|
||||||
], function () {
|
], function () {
|
||||||
return {
|
return {
|
||||||
action: arguments[0],
|
action: arguments[0],
|
||||||
@ -51,15 +51,15 @@ define("converse-templates", [
|
|||||||
chatrooms_tab: arguments[8],
|
chatrooms_tab: arguments[8],
|
||||||
chats_panel: arguments[9],
|
chats_panel: arguments[9],
|
||||||
choose_status: arguments[10],
|
choose_status: arguments[10],
|
||||||
contacts: arguments[11],
|
contacts_panel: arguments[11],
|
||||||
contacts_panel: arguments[12],
|
contacts_tab: arguments[12],
|
||||||
contacts_tab: arguments[13],
|
controlbox: arguments[13],
|
||||||
controlbox: arguments[14],
|
controlbox_toggle: arguments[14],
|
||||||
controlbox_toggle: arguments[15],
|
field: arguments[15],
|
||||||
field: arguments[16],
|
form_checkbox: arguments[16],
|
||||||
form_checkbox: arguments[17],
|
form_input: arguments[17],
|
||||||
form_input: arguments[18],
|
form_select: arguments[18],
|
||||||
form_select: arguments[19],
|
group_header: arguments[19],
|
||||||
info: arguments[20],
|
info: arguments[20],
|
||||||
login_panel: arguments[21],
|
login_panel: arguments[21],
|
||||||
login_tab: arguments[22],
|
login_tab: arguments[22],
|
||||||
@ -76,8 +76,8 @@ define("converse-templates", [
|
|||||||
roster_item: arguments[33],
|
roster_item: arguments[33],
|
||||||
select_option: arguments[34],
|
select_option: arguments[34],
|
||||||
status_option: arguments[35],
|
status_option: arguments[35],
|
||||||
toolbar: arguments[36],
|
toggle_chats: arguments[36],
|
||||||
trimmed_chat: arguments[37],
|
toolbar: arguments[37],
|
||||||
toggle_chats: arguments[38]
|
trimmed_chat: arguments[38]
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
@ -1 +0,0 @@
|
|||||||
<dt class="roster-group">{{label_contacts}}</dt>
|
|
1
src/templates/group_header.html
Normal file
1
src/templates/group_header.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
<dt class="roster-group"><a href="#" class="group-toggle icon-{{toggle_state}}" title="{{desc_group_toggle}}">{{label_group}}</a></dt>
|
@ -1 +1 @@
|
|||||||
<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>
|
||||||
|
@ -1 +1 @@
|
|||||||
<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>
|
||||||
|
Loading…
Reference in New Issue
Block a user