Fixes #1642 Add option to hide participant list by default
In the process, turn it into a component
This commit is contained in:
parent
ae7b29cb90
commit
4252a17f62
@ -910,6 +910,14 @@ geouri_replacement
|
|||||||
String used to replace geo-URIs with. Ought to be a link to osm or similar. ``$1`` and ``$2`` is replaced by
|
String used to replace geo-URIs with. Ought to be a link to osm or similar. ``$1`` and ``$2`` is replaced by
|
||||||
latitude and longitude respectively.
|
latitude and longitude respectively.
|
||||||
|
|
||||||
|
hide_muc_participants
|
||||||
|
---------------------
|
||||||
|
|
||||||
|
* Default: ``false``
|
||||||
|
|
||||||
|
Option which allows you to hide the participants list by default.
|
||||||
|
|
||||||
|
|
||||||
hide_offline_users
|
hide_offline_users
|
||||||
------------------
|
------------------
|
||||||
|
|
||||||
|
46
src/components/muc-sidebar.js
Normal file
46
src/components/muc-sidebar.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import "./autocomplete.js"
|
||||||
|
import tpl_muc_sidebar from "templates/muc_sidebar.js";
|
||||||
|
import { CustomElement } from './element.js';
|
||||||
|
import { api, converse } from "@converse/headless/converse-core";
|
||||||
|
|
||||||
|
const u = converse.env.utils;
|
||||||
|
|
||||||
|
|
||||||
|
export default class MUCSidebar extends CustomElement {
|
||||||
|
|
||||||
|
static get properties () {
|
||||||
|
return {
|
||||||
|
chatroom: { type: Object },
|
||||||
|
occupants: { type: Object}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback () {
|
||||||
|
super.connectedCallback();
|
||||||
|
this.listenTo(this.occupants, 'add', this.requestUpdate);
|
||||||
|
this.listenTo(this.occupants, 'remove', this.requestUpdate);
|
||||||
|
this.listenTo(this.occupants, 'change', this.requestUpdate);
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const tpl = tpl_muc_sidebar(Object.assign(
|
||||||
|
this.chatroom.toJSON(),
|
||||||
|
{'occupants': [...this.occupants.models] }
|
||||||
|
));
|
||||||
|
return tpl;
|
||||||
|
}
|
||||||
|
|
||||||
|
shouldShow () {
|
||||||
|
return !this.chatroom.get('hidden_occupants') &&
|
||||||
|
this.chatroom.session.get('connection_status') === converse.ROOMSTATUS.ENTERED;
|
||||||
|
}
|
||||||
|
|
||||||
|
setVisibility () {
|
||||||
|
// TODO: We're still manually showing/hiding stuff in ChatRoomView,
|
||||||
|
// eventually we want everything to render declaratively, after which this
|
||||||
|
// method won't be necessary anymore
|
||||||
|
this.shouldShow() ? u.showElement(this) : u.hideElement(this);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
api.elements.define('converse-muc-sidebar', MUCSidebar);
|
@ -4,6 +4,7 @@
|
|||||||
* @description XEP-0045 Multi-User Chat Views
|
* @description XEP-0045 Multi-User Chat Views
|
||||||
* @license Mozilla Public License (MPLv2)
|
* @license Mozilla Public License (MPLv2)
|
||||||
*/
|
*/
|
||||||
|
import "./components/muc-sidebar";
|
||||||
import "@converse/headless/utils/muc";
|
import "@converse/headless/utils/muc";
|
||||||
import "converse-modal";
|
import "converse-modal";
|
||||||
import AddMUCModal from 'modals/add-muc.js';
|
import AddMUCModal from 'modals/add-muc.js';
|
||||||
@ -20,7 +21,6 @@ import tpl_chatroom_head from "templates/chatroom_head.js";
|
|||||||
import tpl_muc_nickname_form from "templates/muc_nickname_form.js";
|
import tpl_muc_nickname_form from "templates/muc_nickname_form.js";
|
||||||
import tpl_muc_config_form from "templates/muc_config_form.js";
|
import tpl_muc_config_form from "templates/muc_config_form.js";
|
||||||
import tpl_muc_password_form from "templates/muc_password_form.js";
|
import tpl_muc_password_form from "templates/muc_password_form.js";
|
||||||
import tpl_muc_sidebar from "templates/muc_sidebar.js";
|
|
||||||
import tpl_room_panel from "templates/room_panel.js";
|
import tpl_room_panel from "templates/room_panel.js";
|
||||||
import tpl_spinner from "templates/spinner.js";
|
import tpl_spinner from "templates/spinner.js";
|
||||||
import { ChatBoxView } from "./converse-chatview";
|
import { ChatBoxView } from "./converse-chatview";
|
||||||
@ -90,7 +90,7 @@ export const ChatRoomView = ChatBoxView.extend({
|
|||||||
this.listenTo(this.model, 'change', debounce(() => this.renderHeading(), 250));
|
this.listenTo(this.model, 'change', debounce(() => this.renderHeading(), 250));
|
||||||
this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
|
this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
|
||||||
this.listenTo(this.model, 'change:hidden', m => m.get('hidden') ? this.hide() : this.show());
|
this.listenTo(this.model, 'change:hidden', m => m.get('hidden') ? this.hide() : this.show());
|
||||||
this.listenTo(this.model, 'change:hidden_occupants', this.renderToolbar);
|
this.listenTo(this.model, 'change:hidden_occupants', this.onSidebarToggle);
|
||||||
this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm);
|
this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm);
|
||||||
this.listenTo(this.model, 'destroy', this.hide);
|
this.listenTo(this.model, 'destroy', this.hide);
|
||||||
this.listenTo(this.model, 'show', this.show);
|
this.listenTo(this.model, 'show', this.show);
|
||||||
@ -121,7 +121,6 @@ export const ChatRoomView = ChatBoxView.extend({
|
|||||||
this.listenTo(this.model.occupants, 'change:show', this.showJoinOrLeaveNotification);
|
this.listenTo(this.model.occupants, 'change:show', this.showJoinOrLeaveNotification);
|
||||||
this.listenTo(this.model.occupants, 'remove', this.onOccupantRemoved);
|
this.listenTo(this.model.occupants, 'remove', this.onOccupantRemoved);
|
||||||
|
|
||||||
this.createSidebarView();
|
|
||||||
await this.updateAfterMessagesFetched();
|
await this.updateAfterMessagesFetched();
|
||||||
|
|
||||||
// Register later due to await
|
// Register later due to await
|
||||||
@ -141,8 +140,14 @@ export const ChatRoomView = ChatBoxView.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
async render () {
|
async render () {
|
||||||
|
const sidebar_hidden = !this.shouldShowSidebar();
|
||||||
this.el.setAttribute('id', this.model.get('box_id'));
|
this.el.setAttribute('id', this.model.get('box_id'));
|
||||||
render(tpl_chatroom({
|
render(tpl_chatroom({
|
||||||
|
sidebar_hidden,
|
||||||
|
'model': this.model,
|
||||||
|
'occupants': this.model.occupants,
|
||||||
|
'show_sidebar': !this.model.get('hidden_occupants') &&
|
||||||
|
this.model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED,
|
||||||
'markScrolled': ev => this.markScrolled(ev),
|
'markScrolled': ev => this.markScrolled(ev),
|
||||||
'muc_show_logs_before_join': api.settings.get('muc_show_logs_before_join'),
|
'muc_show_logs_before_join': api.settings.get('muc_show_logs_before_join'),
|
||||||
'show_send_button': _converse.show_send_button,
|
'show_send_button': _converse.show_send_button,
|
||||||
@ -280,23 +285,13 @@ export const ChatRoomView = ChatBoxView.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
createSidebarView () {
|
|
||||||
this.model.occupants.chatroomview = this;
|
|
||||||
this.sidebar_view = new _converse.MUCSidebar({'model': this.model.occupants});
|
|
||||||
const container_el = this.el.querySelector('.chatroom-body');
|
|
||||||
const occupants_width = this.model.get('occupants_width');
|
|
||||||
if (this.sidebar_view && occupants_width !== undefined) {
|
|
||||||
this.sidebar_view.el.style.flex = "0 0 " + occupants_width + "px";
|
|
||||||
}
|
|
||||||
container_el.insertAdjacentElement('beforeend', this.sidebar_view.el);
|
|
||||||
},
|
|
||||||
|
|
||||||
onStartResizeOccupants (ev) {
|
onStartResizeOccupants (ev) {
|
||||||
this.resizing = true;
|
this.resizing = true;
|
||||||
this.el.addEventListener('mousemove', this.onMouseMove);
|
this.el.addEventListener('mousemove', this.onMouseMove);
|
||||||
this.el.addEventListener('mouseup', this.onMouseUp);
|
this.el.addEventListener('mouseup', this.onMouseUp);
|
||||||
|
|
||||||
const style = window.getComputedStyle(this.sidebar_view.el);
|
const sidebar_el = this.el.querySelector('converse-muc-sidebar');
|
||||||
|
const style = window.getComputedStyle(sidebar_el);
|
||||||
this.width = parseInt(style.width.replace(/px$/, ''), 10);
|
this.width = parseInt(style.width.replace(/px$/, ''), 10);
|
||||||
this.prev_pageX = ev.pageX;
|
this.prev_pageX = ev.pageX;
|
||||||
},
|
},
|
||||||
@ -316,7 +311,8 @@ export const ChatRoomView = ChatBoxView.extend({
|
|||||||
this.resizing = false;
|
this.resizing = false;
|
||||||
this.el.removeEventListener('mousemove', this.onMouseMove);
|
this.el.removeEventListener('mousemove', this.onMouseMove);
|
||||||
this.el.removeEventListener('mouseup', this.onMouseUp);
|
this.el.removeEventListener('mouseup', this.onMouseUp);
|
||||||
const element_position = this.sidebar_view.el.getBoundingClientRect();
|
const sidebar_el = this.el.querySelector('converse-muc-sidebar');
|
||||||
|
const element_position = sidebar_el.getBoundingClientRect();
|
||||||
const occupants_width = this.calculateSidebarWidth(element_position, 0);
|
const occupants_width = this.calculateSidebarWidth(element_position, 0);
|
||||||
const attrs = {occupants_width};
|
const attrs = {occupants_width};
|
||||||
_converse.connection.connected ? this.model.save(attrs) : this.model.set(attrs);
|
_converse.connection.connected ? this.model.save(attrs) : this.model.set(attrs);
|
||||||
@ -324,14 +320,15 @@ export const ChatRoomView = ChatBoxView.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
resizeSidebarView (delta, current_mouse_position) {
|
resizeSidebarView (delta, current_mouse_position) {
|
||||||
const element_position = this.sidebar_view.el.getBoundingClientRect();
|
const sidebar_el = this.el.querySelector('converse-muc-sidebar');
|
||||||
|
const element_position = sidebar_el.getBoundingClientRect();
|
||||||
if (this.is_minimum) {
|
if (this.is_minimum) {
|
||||||
this.is_minimum = element_position.left < current_mouse_position;
|
this.is_minimum = element_position.left < current_mouse_position;
|
||||||
} else if (this.is_maximum) {
|
} else if (this.is_maximum) {
|
||||||
this.is_maximum = element_position.left > current_mouse_position;
|
this.is_maximum = element_position.left > current_mouse_position;
|
||||||
} else {
|
} else {
|
||||||
const occupants_width = this.calculateSidebarWidth(element_position, delta);
|
const occupants_width = this.calculateSidebarWidth(element_position, delta);
|
||||||
this.sidebar_view.el.style.flex = "0 0 " + occupants_width + "px";
|
sidebar_el.style.flex = "0 0 " + occupants_width + "px";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -528,6 +525,16 @@ export const ChatRoomView = ChatBoxView.extend({
|
|||||||
return _converse.ChatBoxView.prototype.showChatStateNotification.apply(this, arguments);
|
return _converse.ChatBoxView.prototype.showChatStateNotification.apply(this, arguments);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
shouldShowSidebar () {
|
||||||
|
return !this.model.get('hidden_occupants') &&
|
||||||
|
this.model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED;
|
||||||
|
},
|
||||||
|
|
||||||
|
onSidebarToggle () {
|
||||||
|
this.renderToolbar();
|
||||||
|
this.el.querySelector('.occupants')?.setVisibility();
|
||||||
|
},
|
||||||
|
|
||||||
onOccupantAffiliationChanged (occupant) {
|
onOccupantAffiliationChanged (occupant) {
|
||||||
if (occupant.get('jid') === _converse.bare_jid) {
|
if (occupant.get('jid') === _converse.bare_jid) {
|
||||||
this.renderHeading();
|
this.renderHeading();
|
||||||
@ -737,6 +744,7 @@ export const ChatRoomView = ChatBoxView.extend({
|
|||||||
* @method _converse.ChatRoomView#hideOccupants
|
* @method _converse.ChatRoomView#hideOccupants
|
||||||
*/
|
*/
|
||||||
hideOccupants (ev) {
|
hideOccupants (ev) {
|
||||||
|
debugger;
|
||||||
if (ev) {
|
if (ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
@ -1293,7 +1301,7 @@ export const ChatRoomView = ChatBoxView.extend({
|
|||||||
} else if (conn_status == converse.ROOMSTATUS.ENTERED) {
|
} else if (conn_status == converse.ROOMSTATUS.ENTERED) {
|
||||||
this.hideChatRoomContents();
|
this.hideChatRoomContents();
|
||||||
u.showElement(this.el.querySelector('.chat-area'));
|
u.showElement(this.el.querySelector('.chat-area'));
|
||||||
u.showElement(this.el.querySelector('.occupants'));
|
this.el.querySelector('.occupants')?.setVisibility();
|
||||||
this.scrollDown();
|
this.scrollDown();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -1546,46 +1554,6 @@ converse.plugins.add('converse-muc-views', {
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
_converse.MUCSidebar = View.extend({
|
|
||||||
tagName: 'div',
|
|
||||||
className: 'occupants col-md-3 col-4',
|
|
||||||
|
|
||||||
async initialize () {
|
|
||||||
this.chatroomview = this.model.chatroomview;
|
|
||||||
this.listenTo(this.model, 'add', this.render);
|
|
||||||
this.listenTo(this.model, 'remove', this.render);
|
|
||||||
this.listenTo(this.model, 'change', this.render);
|
|
||||||
this.listenTo(this.chatroomview.model.features, 'change', this.render);
|
|
||||||
this.listenTo(this.chatroomview.model, 'change:hidden_occupants', this.setVisibility);
|
|
||||||
this.render();
|
|
||||||
await this.model.fetched;
|
|
||||||
},
|
|
||||||
|
|
||||||
toHTML () {
|
|
||||||
return tpl_muc_sidebar(
|
|
||||||
Object.assign(this.chatroomview.model.toJSON(), {
|
|
||||||
_converse,
|
|
||||||
'features': this.chatroomview.model.features,
|
|
||||||
'occupants': this.model.models
|
|
||||||
})
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
afterRender () {
|
|
||||||
this.setVisibility();
|
|
||||||
},
|
|
||||||
|
|
||||||
setVisibility () {
|
|
||||||
if (this.chatroomview.model.get('hidden_occupants') ||
|
|
||||||
this.chatroomview.model.session.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
|
|
||||||
u.hideElement(this.el);
|
|
||||||
} else {
|
|
||||||
u.showElement(this.el);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
function setMUCDomain (domain, controlboxview) {
|
function setMUCDomain (domain, controlboxview) {
|
||||||
controlboxview.getRoomsPanel().model.save('muc_domain', Strophe.getDomainFromJid(domain));
|
controlboxview.getRoomsPanel().model.save('muc_domain', Strophe.getDomainFromJid(domain));
|
||||||
}
|
}
|
||||||
|
@ -123,6 +123,7 @@ converse.plugins.add('converse-muc', {
|
|||||||
'auto_join_on_invite': false,
|
'auto_join_on_invite': false,
|
||||||
'auto_join_rooms': [],
|
'auto_join_rooms': [],
|
||||||
'auto_register_muc_nickname': false,
|
'auto_register_muc_nickname': false,
|
||||||
|
'hide_muc_participants': false,
|
||||||
'locked_muc_domain': false,
|
'locked_muc_domain': false,
|
||||||
'muc_domain': undefined,
|
'muc_domain': undefined,
|
||||||
'muc_fetch_members': true,
|
'muc_fetch_members': true,
|
||||||
@ -371,6 +372,7 @@ converse.plugins.add('converse-muc', {
|
|||||||
'bookmarked': false,
|
'bookmarked': false,
|
||||||
'chat_state': undefined,
|
'chat_state': undefined,
|
||||||
'hidden': _converse.isUniView() && !api.settings.get('singleton'),
|
'hidden': _converse.isUniView() && !api.settings.get('singleton'),
|
||||||
|
'hidden_occupants': !!api.settings.get('hide_muc_participants'),
|
||||||
'message_type': 'groupchat',
|
'message_type': 'groupchat',
|
||||||
'name': '',
|
'name': '',
|
||||||
'num_unread': 0,
|
'num_unread': 0,
|
||||||
|
@ -12,6 +12,9 @@ export default (o) => html`
|
|||||||
<div class="bottom-panel"></div>
|
<div class="bottom-panel"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="disconnect-container hidden"></div>
|
<div class="disconnect-container hidden"></div>
|
||||||
|
<converse-muc-sidebar class="occupants col-md-3 col-4 ${o.sidebar_hidden ? 'hidden' : ''}"
|
||||||
|
.occupants=${o.occupants}
|
||||||
|
.chatroom=${o.model}></converse-muc-sidebar>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
@ -17,6 +17,14 @@ const PRETTY_CHAT_STATUS = {
|
|||||||
export default (o) => {
|
export default (o) => {
|
||||||
const i18n_occupant_hint = (occupant) => __('Click to mention %1$s in your message.', occupant.get('nick'))
|
const i18n_occupant_hint = (occupant) => __('Click to mention %1$s in your message.', occupant.get('nick'))
|
||||||
const i18n_participants = __('Participants');
|
const i18n_participants = __('Participants');
|
||||||
|
const occupant_tpls = o.occupants.map(occupant => {
|
||||||
|
return tpl_occupant(Object.assign({
|
||||||
|
'jid': '',
|
||||||
|
'hint_show': PRETTY_CHAT_STATUS[occupant.get('show')],
|
||||||
|
'hint_occupant': i18n_occupant_hint(occupant)
|
||||||
|
}, occupant.toJSON()));
|
||||||
|
});
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="occupants-header">
|
<div class="occupants-header">
|
||||||
<i class="hide-occupants fa fa-times"></i>
|
<i class="hide-occupants fa fa-times"></i>
|
||||||
@ -25,16 +33,6 @@ export default (o) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dragresize dragresize-occupants-left"></div>
|
<div class="dragresize dragresize-occupants-left"></div>
|
||||||
<ul class="occupant-list">
|
<ul class="occupant-list">${occupant_tpls}</ul>
|
||||||
${ o.occupants.map(occupant => {
|
|
||||||
return tpl_occupant(
|
|
||||||
Object.assign({
|
|
||||||
'jid': '',
|
|
||||||
'hint_show': PRETTY_CHAT_STATUS[occupant.get('show')],
|
|
||||||
'hint_occupant': i18n_occupant_hint(occupant)
|
|
||||||
}, occupant.toJSON())
|
|
||||||
);
|
|
||||||
}) }
|
|
||||||
</ul>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user