Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Allow group headings to be toggleable. updates #83

Browse Source
This commit is contained in:
JC Brand 2014-07-20 19:11:34 +02:00
parent 5b5c7ad7c1
commit e1a19678ad
8 changed files with 56 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
converse.js
View File

@ -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],

7
css/converse.css
View File

@ -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%;
}

5
less/converse.less
View File

@ -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;

30
src/templates.js
View File

@ -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]
};
});

1
src/templates/contacts.html
View File

@ -1 +0,0 @@
<dt class="roster-group">{{label_contacts}}</dt>

1
src/templates/group_header.html Normal file
View File

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

2
src/templates/pending_contacts.html
View File

@ -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>

2
src/templates/requesting_contacts.html
View File

@ -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>