Skip to content

C
converse.js
Commit a6ca5aad authored by JC Brand's avatar JC Brand
Browse files
Options

Show room features in the sidebar.

parent 570e6aba
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 181 additions and 79 deletions
css/converse.css
View file @ a6ca5aad
This diff is collapsed.
docs/CHANGES.md
View file @ a6ca5aad
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
- The chat room `description` is now shown in the heading, not the `subject`. - The chat room `description` is now shown in the heading, not the `subject`.
[jcbrand] [jcbrand]
- Chat room features are shown in the sidebar. [jcbrand]
- Created a new non-core plugin `converse-muc-embedded` which embeds a single - Created a new non-core plugin `converse-muc-embedded` which embeds a single
chat room into a page. An example can be found at https://conversejs.org/demo/embedded.html chat room into a page. An example can be found at https://conversejs.org/demo/embedded.html
[jcbrand] [jcbrand]
......
sass/_chatrooms.scss
View file @ a6ca5aad
...@@ -93,33 +93,38 @@ ...@@ -93,33 +93,38 @@
float: right; float: right;
vertical-align: top; vertical-align: top;
background-color: white; background-color: white;
overflow: hidden; overflow: scroll;
border-left: 1px solid $text-color; border-left: 1px solid $text-color;
border-bottom-right-radius: $chatbox-border-radius; border-bottom-right-radius: $chatbox-border-radius;
width: 30%; width: 30%;
height: 100%; height: 100%;
padding: 0.5em;
&.hidden { &.hidden {
display: none; display: none;
} }
.occupants-heading { .occupants-heading {
padding: 0.3em; padding: 0.3em 0;
font-weight: bold; font-weight: bold;
} }
.occupant-list { ul {
height: 85%; padding: 0.3em 0;
height: calc(100% - 70px);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
list-style: none; list-style: none;
li { li {
cursor: default; cursor: default;
display: block; display: block;
font-size: 12px; font-size: $font-size-small;
overflow: hidden; overflow: hidden;
padding: 2px 5px; padding: 2px 5px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 100px; [class^="icon-"], [class*=" icon-"] {
padding-right: 0.5em;
}
&.feature {
font-size: $font-size-tiny;
}
&.occupant { &.occupant {
cursor: pointer; cursor: pointer;
} }
...@@ -161,7 +166,6 @@ ...@@ -161,7 +166,6 @@
} }
.room-invite { .room-invite {
margin: 0.3em;
.invited-contact { .invited-contact {
margin: -1px 0 0 -1px; margin: -1px 0 0 -1px;
width: 100%; width: 100%;
......
sass/_variables.scss
View file @ a6ca5aad
...@@ -49,6 +49,7 @@ $chatbox-hover-height: 6px !default; ...@@ -49,6 +49,7 @@ $chatbox-hover-height: 6px !default;
$mobile_landscape_height: 450px !default; $mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default; $mobile_portrait_length: 480px !default;
$font-size-tiny: 10px !default;
$font-size-small: 12px !default; $font-size-small: 12px !default;
$font-size: 14px !default; $font-size: 14px !default;
$font-size-large: 16px !default; $font-size-large: 16px !default;
...@@ -66,7 +67,7 @@ $mobile-chat-height: 400px !default; ...@@ -66,7 +67,7 @@ $mobile-chat-height: 400px !default;
$small-mobile-chat-height: 300px !default; $small-mobile-chat-height: 300px !default;
/* $font-path: "../fonticons/fonts/" !default; */ /* $font-path: "../fonticons/fonts/" !default; */
$font-path: "https://cdn.conversejs.org/fonticons/fonts/" !default; $font-path: "/fonticons/fonts/" !default;
$chatroom-width: 300px !default; $chatroom-width: 300px !default;
$chatroom-head-color: #E76F51 !default; $chatroom-head-color: #E76F51 !default;
......
src/converse-muc.js
View file @ a6ca5aad
...@@ -297,11 +297,13 @@ ...@@ -297,11 +297,13 @@
* "chatroom". * "chatroom".
*/ */
return _converse.chatboxviews.showChat( return _converse.chatboxviews.showChat(
_.extend(settings, { _.extend({
'type': 'chatroom',
'affiliation': null, 'affiliation': null,
'connection_status': Strophe.Status.DISCONNECTED,
'description': '',
'features_fetched': false, 'features_fetched': false,
'hidden': false, 'hidden': false,
'mam_enabled': false,
'membersonly': false, 'membersonly': false,
'moderated': false, 'moderated': false,
'nonanonymous': false, 'nonanonymous': false,
...@@ -309,12 +311,13 @@ ...@@ -309,12 +311,13 @@
'passwordprotected': false, 'passwordprotected': false,
'persistent': false, 'persistent': false,
'public': false, 'public': false,
'roomconfig': {},
'semianonymous': false, 'semianonymous': false,
'temporary': false, 'temporary': false,
'type': 'chatroom',
'unmoderated': false, 'unmoderated': false,
'unsecured': false, 'unsecured': false,
'connection_status': Strophe.Status.DISCONNECTED }, settings)
})
); );
}; };
...@@ -410,11 +413,13 @@ ...@@ -410,11 +413,13 @@
/* Create the ChatRoomOccupantsView Backbone.View /* Create the ChatRoomOccupantsView Backbone.View
*/ */
this.occupantsview = new _converse.ChatRoomOccupantsView({ this.occupantsview = new _converse.ChatRoomOccupantsView({
model: new _converse.ChatRoomOccupants() 'model': new _converse.ChatRoomOccupants(),
'attributes': {
'chatroomview': this
}
}); });
var id = b64_sha1('converse.occupants'+_converse.bare_jid+this.model.get('jid')); var id = b64_sha1('converse.occupants'+_converse.bare_jid+this.model.get('jid'));
this.occupantsview.model.browserStorage = new Backbone.BrowserStorage.session(id); this.occupantsview.model.browserStorage = new Backbone.BrowserStorage.session(id);
this.occupantsview.chatroomview = this;
this.occupantsview.render(); this.occupantsview.render();
this.occupantsview.model.fetch({add:true}); this.occupantsview.model.fetch({add:true});
}, },
...@@ -1369,6 +1374,7 @@ ...@@ -1369,6 +1374,7 @@
* <feature var='muc_open'/> * <feature var='muc_open'/>
* <feature var='muc_unmoderated'/> * <feature var='muc_unmoderated'/>
* <feature var='muc_nonanonymous'/> * <feature var='muc_nonanonymous'/>
* <feature var='urn:xmpp:mam:0'/>
*/ */
var features = { var features = {
'features_fetched': true 'features_fetched': true
...@@ -1376,6 +1382,9 @@ ...@@ -1376,6 +1382,9 @@
_.each(iq.querySelectorAll('feature'), function (field) { _.each(iq.querySelectorAll('feature'), function (field) {
var fieldname = field.getAttribute('var'); var fieldname = field.getAttribute('var');
if (!fieldname.startsWith('muc_')) { if (!fieldname.startsWith('muc_')) {
if (fieldname === 'urn:xmpp:mam:0') {
features.mam_enabled = true;
}
return; return;
} }
features[fieldname.replace('muc_', '')] = true; features[fieldname.replace('muc_', '')] = true;
...@@ -1966,15 +1975,58 @@ ...@@ -1966,15 +1975,58 @@
initialize: function () { initialize: function () {
this.model.on("add", this.onOccupantAdded, this); this.model.on("add", this.onOccupantAdded, this);
var debounced_render = _.debounce(this.render, 100);
this.chatroomview = this.attributes.chatroomview;
this.chatroomview.model.on('change:hidden', debounced_render, this);
this.chatroomview.model.on('change:mam_enabled', debounced_render, this);
this.chatroomview.model.on('change:membersonly', debounced_render, this);
this.chatroomview.model.on('change:moderated', debounced_render, this);
this.chatroomview.model.on('change:nonanonymous', debounced_render, this);
this.chatroomview.model.on('change:open', debounced_render, this);
this.chatroomview.model.on('change:passwordprotected', debounced_render, this);
this.chatroomview.model.on('change:persistent', debounced_render, this);
this.chatroomview.model.on('change:public', debounced_render, this);
this.chatroomview.model.on('change:semianonymous', debounced_render, this);
this.chatroomview.model.on('change:temporary', debounced_render, this);
this.chatroomview.model.on('change:unmoderated', debounced_render, this);
this.chatroomview.model.on('change:unsecured', debounced_render, this);
}, },
render: function () { render: function () {
this.$el.html( this.$el.html(
_converse.templates.chatroom_sidebar({ _converse.templates.chatroom_sidebar(
'allow_muc_invitations': _converse.allow_muc_invitations, _.extend(this.chatroomview.model.toJSON(), {
'label_invitation': __('Invite'), 'allow_muc_invitations': _converse.allow_muc_invitations,
'label_occupants': __('Occupants') 'label_features': __('Features'),
}) 'label_hidden': __('Hidden'),
'label_invitation': __('Invite'),
'label_mam_enabled': __('Message archiving'),
'label_membersonly': __('Members only'),
'label_moderated': __('Moderated'),
'label_nonanonymous': __('Non-anonymous'),
'label_occupants': __('Occupants'),
'label_open': __('Open'),
'label_passwordprotected': __('Password protected'),
'label_persistent': __('Persistent'),
'label_public': __('Public'),
'label_semianonymous': __('Semi-anonymous'),
'label_temporary': __('Temporary'),
'label_unmoderated': __('Unmoderated'),
'label_unsecured': __('Unsecured'),
'tt_hidden': __('This room is not publically searchable'),
'tt_mam_enabled': __('Messages are archived on the server'),
'tt_membersonly': __('This room is restricted to members only'),
'tt_moderated': __('This room is being moderated'),
'tt_nonanonymous': __('All other room occupants can see your Jabber ID'),
'tt_open': __('Anyone can join this room'),
'tt_passwordprotected': __('This room requires a password before entry'),
'tt_persistent': __('This room pesists even if it\'s unoccupied'),
'tt_public': __('This room is publically searchable'),
'tt_semianonymous': __('Only moderators can see your Jabber ID'),
'tt_temporary': __('This room will disappear once the last person leaves'),
'tt_unmoderated': __('This room is not being moderated'),
'tt_unsecured': __('This room does not require a password upon entry')
}))
); );
if (_converse.allow_muc_invitations) { if (_converse.allow_muc_invitations) {
_converse.api.waitUntil('rosterContactsFetched').then(this.initInviteWidget.bind(this)); _converse.api.waitUntil('rosterContactsFetched').then(this.initInviteWidget.bind(this));
......
src/templates/chatroom_sidebar.html
View file @ a6ca5aad
<!-- <div class="occupants"> --> <!-- <div class="occupants"> -->
<p class="occupants-heading">{{{label_occupants}}}</p>
{[ if (allow_muc_invitations) { ]} {[ if (allow_muc_invitations) { ]}
<form class="pure-form room-invite"> <form class="pure-form room-invite">
<input class="invited-contact" placeholder="{{{label_invitation}}}" type="text"/> <input class="invited-contact" placeholder="{{{label_invitation}}}" type="text"/>
</form> </form>
{[ } ]} {[ } ]}
<p class="occupants-heading">{{{label_occupants}}}:</p>
<ul class="occupant-list"></ul> <ul class="occupant-list"></ul>
<p class="occupants-heading">{{{label_features}}}</p>
<ul>
{[ if (passwordprotected) { ]}
<li class="feature" title="{{{ tt_passwordprotected }}}"><span class="icon-lock-2"></span>{{{ label_passwordprotected }}}</li>
{[ } ]}
{[ if (unsecured) { ]}
<li class="feature" title="{{{ tt_unsecured }}}"><span class="icon-unlocked"></span>{{{ label_unsecured }}}</li>
{[ } ]}
{[ if (hidden) { ]}
<li class="feature" title="{{{ tt_hidden }}}"><span class="icon-eye-blocked"></span>{{{ label_hidden }}}</li>
{[ } ]}
{[ if (public) { ]}
<li class="feature" title="{{{ tt_public }}}"><span class="icon-eye"></span>{{{ label_public }}}</li>
{[ } ]}
{[ if (membersonly) { ]}
<li class="feature" title="{{{ tt_membersonly }}}"><span class="icon-address-book"></span>{{{ label_membersonly }}}</li>
{[ } ]}
{[ if (open) { ]}
<li class="feature" title="{{{ tt_open }}}"><span class="icon-globe"></span>{{{ label_open }}}</li>
{[ } ]}
{[ if (persistent) { ]}
<li class="feature" title="{{{ tt_persistent }}}"><span class="icon-save"></span>{{{ label_persistent }}}</li>
{[ } ]}
{[ if (temporary) { ]}
<li class="feature" title="{{{ tt_temporary }}}"><span class="icon-snowflake"></span>{{{ label_temporary }}}</li>
{[ } ]}
{[ if (nonanonymous) { ]}
<li class="feature" title="{{{ tt_nonanonymous }}}"><span class="icon-idcard-dark"></span>{{{ label_nonanonymous }}}</li>
{[ } ]}
{[ if (semianonymous) { ]}
<li class="feature" title="{{{ tt_semianonymous }}}"><span class="icon-info"></span>{{{ label_semianonymous }}}</li>
{[ } ]}
{[ if (moderated) { ]}
<li class="feature" title="{{{ tt_moderated }}}"><span class="icon-legal"></span>{{{ label_moderated }}}</li>
{[ } ]}
{[ if (unmoderated) { ]}
<li class="feature" title="{{{ tt_unmoderated }}}"><span class="icon-info"></span>{{{ label_unmoderated }}}</li>
{[ } ]}
{[ if (mam_enabled) { ]}
<li class="feature" title="{{{ tt_mam_enabled }}}"><span class="icon-database"></span>{{{ label_mam_enabled }}}</li>
{[ } ]}
</ul>
<!-- </div> --> <!-- </div> -->
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7