diff --git a/css/converse.css b/css/converse.css index 0f6140610..6da98e154 100644 --- a/css/converse.css +++ b/css/converse.css @@ -13,8 +13,8 @@ /* $font-path: "../fonticons/fonts/" !default; */ @font-face { font-family: 'Converse-js'; - src: url("https://cdn.conversejs.org/fonticons/fonts/icomoon.eot?-mnoxh0"); - src: url("https://cdn.conversejs.org/fonticons/fonts/icomoon.eot?#iefix-mnoxh0") format("embedded-opentype"), url("https://cdn.conversejs.org/fonticons/fonts/icomoon.woff?-mnoxh0") format("woff"), url("https://cdn.conversejs.org/fonticons/fonts/icomoon.ttf?-mnoxh0") format("truetype"), url("https://cdn.conversejs.org/fonticons/fonts/icomoon.svg?-mnoxh0#icomoon") format("svg"); + src: url("/fonticons/fonts/icomoon.eot?wvi0ht"); + src: url("/fonticons/fonts/icomoon.eot?wvi0ht#iefix") format("embedded-opentype"), url("/fonticons/fonts/icomoon.ttf?wvi0ht") format("truetype"), url("/fonticons/fonts/icomoon.woff?wvi0ht") format("woff"), url("/fonticons/fonts/icomoon.svg?wvi0ht#icomoon") format("svg"); font-weight: normal; font-style: normal; } .icon-conversejs { @@ -68,6 +68,9 @@ #converse-embedded-chat .icon-cancel-circle:before, #conversejs .icon-cancel-circle:before { content: "\e058"; } +#converse-embedded-chat .icon-chat:before, +#conversejs .icon-chat:before { + content: "\25fc"; } #converse-embedded-chat .icon-checkbox-checked:before, #conversejs .icon-checkbox-checked:before { content: "\2611"; } @@ -98,6 +101,9 @@ #converse-embedded-chat .icon-cool:before, #conversejs .icon-cool:before { content: "\e040"; } +#converse-embedded-chat .icon-database:before, +#conversejs .icon-database:before { + content: "\f1c0"; } #converse-embedded-chat .icon-dnd:before, #conversejs .icon-dnd:before { content: "\e004"; } @@ -115,7 +121,7 @@ content: "\e030"; } #converse-embedded-chat .icon-globe:before, #conversejs .icon-globe:before { - content: "\e033"; } + content: "\f0ac"; } #converse-embedded-chat .icon-grin:before, #conversejs .icon-grin:before { content: "\e041"; } @@ -134,15 +140,21 @@ #converse-embedded-chat .icon-home:before, #conversejs .icon-home:before { content: "\e000"; } +#converse-embedded-chat .icon-idcard-dark:before, +#conversejs .icon-idcard-dark:before { + content: "\f2c2"; } +#converse-embedded-chat .icon-idcard:before, +#conversejs .icon-idcard:before { + content: "\f2c3"; } #converse-embedded-chat .icon-image:before, #conversejs .icon-image:before { content: "\2b14"; } -#converse-embedded-chat .icon-info:before, -#conversejs .icon-info:before { - content: "\2360"; } #converse-embedded-chat .icon-info-2:before, #conversejs .icon-info-2:before { content: "i"; } +#converse-embedded-chat .icon-info:before, +#conversejs .icon-info:before { + content: "\2360"; } #converse-embedded-chat .icon-italic:before, #conversejs .icon-italic:before { content: "\e04f"; } @@ -152,6 +164,9 @@ #converse-embedded-chat .icon-key:before, #conversejs .icon-key:before { content: "\e028"; } +#converse-embedded-chat .icon-legal:before, +#conversejs .icon-legal:before { + content: "\f0e3"; } #converse-embedded-chat .icon-lock-2:before, #conversejs .icon-lock-2:before { content: "\e027"; } @@ -179,12 +194,12 @@ #converse-embedded-chat .icon-notification:before, #conversejs .icon-notification:before { content: "\e01f"; } +#converse-embedded-chat .icon-offline:before, +#conversejs .icon-offline:before { + content: "\e002"; } #converse-embedded-chat .icon-online:before, #conversejs .icon-online:before { content: "\25fc"; } -#converse-embedded-chat .icon-chat:before, -#conversejs .icon-chat:before { - content: "\25fc"; } #converse-embedded-chat .icon-opened:before, #conversejs .icon-opened:before { content: "\25bc"; } @@ -224,6 +239,9 @@ #converse-embedded-chat .icon-sad:before, #conversejs .icon-sad:before { content: "\2639"; } +#converse-embedded-chat .icon-save:before, +#conversejs .icon-save:before { + content: "\f0c7"; } #converse-embedded-chat .icon-search:before, #conversejs .icon-search:before { content: "\e021"; } @@ -236,6 +254,9 @@ #converse-embedded-chat .icon-smiley:before, #conversejs .icon-smiley:before { content: "\263a"; } +#converse-embedded-chat .icon-snowflake:before, +#conversejs .icon-snowflake:before { + content: "\f2dc"; } #converse-embedded-chat .icon-spell-check:before, #conversejs .icon-spell-check:before { content: "\e045"; } @@ -251,7 +272,9 @@ #converse-embedded-chat .icon-tongue:before, #conversejs .icon-tongue:before { content: "\e038"; } +#converse-embedded-chat .icon-unavailable:before, #converse-embedded-chat .icon-underline:before, +#conversejs .icon-unavailable:before, #conversejs .icon-underline:before { content: "\e04e"; } #converse-embedded-chat .icon-unlocked:before, @@ -263,27 +286,6 @@ #converse-embedded-chat .icon-users:before, #conversejs .icon-users:before { content: "\e01b"; } -#converse-embedded-chat .icon-volume-decrease:before, -#conversejs .icon-volume-decrease:before { - content: "\e04b"; } -#converse-embedded-chat .icon-volume-high:before, -#conversejs .icon-volume-high:before { - content: "\e046"; } -#converse-embedded-chat .icon-volume-increase:before, -#conversejs .icon-volume-increase:before { - content: "\e04c"; } -#converse-embedded-chat .icon-volume-low:before, -#conversejs .icon-volume-low:before { - content: "\e048"; } -#converse-embedded-chat .icon-volume-medium:before, -#conversejs .icon-volume-medium:before { - content: "\e047"; } -#converse-embedded-chat .icon-volume-mute-2:before, -#conversejs .icon-volume-mute-2:before { - content: "\e04a"; } -#converse-embedded-chat .icon-volume-mute:before, -#conversejs .icon-volume-mute:before { - content: "\e049"; } #converse-embedded-chat .icon-warning:before, #conversejs .icon-warning:before { content: "\26a0"; } @@ -299,11 +301,6 @@ #converse-embedded-chat .icon-xa:before, #conversejs .icon-xa:before { content: "\e602"; } -#converse-embedded-chat .icon-unavailable:before, -#converse-embedded-chat .icon-offline:before, -#conversejs .icon-unavailable:before, -#conversejs .icon-offline:before { - content: "\e002"; } #converse-embedded-chat .icon-youtube:before, #conversejs .icon-youtube:before { content: "\e055"; } @@ -2320,40 +2317,46 @@ float: right; vertical-align: top; background-color: white; - overflow: hidden; + overflow: scroll; border-left: 1px solid #818479; border-bottom-right-radius: 4px; width: 30%; - height: 100%; } + height: 100%; + padding: 0.5em; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants.hidden, #conversejs .chatroom .box-flyout .chatroom-body .occupants.hidden { display: none; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading, #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { - padding: 0.3em; + padding: 0.3em 0; font-weight: bold; } - #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupant-list, - #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list { - height: 85%; - height: calc(100% - 70px); + #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul, + #conversejs .chatroom .box-flyout .chatroom-body .occupants ul { + padding: 0.3em 0; overflow-x: hidden; overflow-y: auto; list-style: none; } - #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupant-list li, - #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li { + #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li, + #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li { cursor: default; display: block; font-size: 12px; overflow: hidden; padding: 2px 5px; text-overflow: ellipsis; - white-space: nowrap; - width: 100px; } - #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupant-list li.occupant, - #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li.occupant { + white-space: nowrap; } + #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"], + #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], + #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"] { + padding-right: 0.5em; } + #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature, + #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature { + font-size: 10px; } + #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant, + #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant { cursor: pointer; } - #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupant-list li.moderator, - #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupant-list li.moderator { + #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator, + #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator { color: #D24E2B; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { @@ -2381,14 +2384,11 @@ #converse-embedded-chat .chatroom .chat-textarea, #conversejs .chatroom .chat-textarea { border-bottom-right-radius: 0; } - #converse-embedded-chat .chatroom .room-invite, - #conversejs .chatroom .room-invite { - margin: 0.3em; } - #converse-embedded-chat .chatroom .room-invite .invited-contact, - #conversejs .chatroom .room-invite .invited-contact { - margin: -1px 0 0 -1px; - width: 100%; - border: 1px solid #999; } + #converse-embedded-chat .chatroom .room-invite .invited-contact, + #conversejs .chatroom .room-invite .invited-contact { + margin: -1px 0 0 -1px; + width: 100%; + border: 1px solid #999; } #conversejs .chatbox.headlines .chat-head.chat-head-chatbox { background-color: #2A9D8F; } diff --git a/docs/CHANGES.md b/docs/CHANGES.md index 91957708b..7e22f5ffb 100755 --- a/docs/CHANGES.md +++ b/docs/CHANGES.md @@ -16,6 +16,7 @@ - The chat room `description` is now shown in the heading, not the `subject`. [jcbrand] +- Chat room features are shown in the sidebar. [jcbrand] - 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 [jcbrand] diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss index e16910be8..e2f5d67a7 100644 --- a/sass/_chatrooms.scss +++ b/sass/_chatrooms.scss @@ -93,33 +93,38 @@ float: right; vertical-align: top; background-color: white; - overflow: hidden; + overflow: scroll; border-left: 1px solid $text-color; border-bottom-right-radius: $chatbox-border-radius; width: 30%; height: 100%; + padding: 0.5em; &.hidden { display: none; } .occupants-heading { - padding: 0.3em; + padding: 0.3em 0; font-weight: bold; } - .occupant-list { - height: 85%; - height: calc(100% - 70px); + ul { + padding: 0.3em 0; overflow-x: hidden; overflow-y: auto; list-style: none; li { cursor: default; display: block; - font-size: 12px; + font-size: $font-size-small; overflow: hidden; padding: 2px 5px; text-overflow: ellipsis; white-space: nowrap; - width: 100px; + [class^="icon-"], [class*=" icon-"] { + padding-right: 0.5em; + } + &.feature { + font-size: $font-size-tiny; + } &.occupant { cursor: pointer; } @@ -161,7 +166,6 @@ } .room-invite { - margin: 0.3em; .invited-contact { margin: -1px 0 0 -1px; width: 100%; diff --git a/sass/_variables.scss b/sass/_variables.scss index eaaf4a78e..bc27aee17 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -49,6 +49,7 @@ $chatbox-hover-height: 6px !default; $mobile_landscape_height: 450px !default; $mobile_portrait_length: 480px !default; +$font-size-tiny: 10px !default; $font-size-small: 12px !default; $font-size: 14px !default; $font-size-large: 16px !default; @@ -66,7 +67,7 @@ $mobile-chat-height: 400px !default; $small-mobile-chat-height: 300px !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-head-color: #E76F51 !default; diff --git a/src/converse-muc.js b/src/converse-muc.js index 96a646f97..26b6e214e 100755 --- a/src/converse-muc.js +++ b/src/converse-muc.js @@ -297,11 +297,13 @@ * "chatroom". */ return _converse.chatboxviews.showChat( - _.extend(settings, { - 'type': 'chatroom', + _.extend({ 'affiliation': null, + 'connection_status': Strophe.Status.DISCONNECTED, + 'description': '', 'features_fetched': false, 'hidden': false, + 'mam_enabled': false, 'membersonly': false, 'moderated': false, 'nonanonymous': false, @@ -309,12 +311,13 @@ 'passwordprotected': false, 'persistent': false, 'public': false, + 'roomconfig': {}, 'semianonymous': false, 'temporary': false, + 'type': 'chatroom', 'unmoderated': false, 'unsecured': false, - 'connection_status': Strophe.Status.DISCONNECTED - }) + }, settings) ); }; @@ -410,11 +413,13 @@ /* Create the ChatRoomOccupantsView Backbone.View */ 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')); this.occupantsview.model.browserStorage = new Backbone.BrowserStorage.session(id); - this.occupantsview.chatroomview = this; this.occupantsview.render(); this.occupantsview.model.fetch({add:true}); }, @@ -1369,6 +1374,7 @@ * * * + * */ var features = { 'features_fetched': true @@ -1376,6 +1382,9 @@ _.each(iq.querySelectorAll('feature'), function (field) { var fieldname = field.getAttribute('var'); if (!fieldname.startsWith('muc_')) { + if (fieldname === 'urn:xmpp:mam:0') { + features.mam_enabled = true; + } return; } features[fieldname.replace('muc_', '')] = true; @@ -1966,15 +1975,58 @@ initialize: function () { 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 () { this.$el.html( - _converse.templates.chatroom_sidebar({ - 'allow_muc_invitations': _converse.allow_muc_invitations, - 'label_invitation': __('Invite'), - 'label_occupants': __('Occupants') - }) + _converse.templates.chatroom_sidebar( + _.extend(this.chatroomview.model.toJSON(), { + 'allow_muc_invitations': _converse.allow_muc_invitations, + '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) { _converse.api.waitUntil('rosterContactsFetched').then(this.initInviteWidget.bind(this)); diff --git a/src/templates/chatroom_sidebar.html b/src/templates/chatroom_sidebar.html index 9f57535e0..500aacaa6 100644 --- a/src/templates/chatroom_sidebar.html +++ b/src/templates/chatroom_sidebar.html @@ -1,9 +1,53 @@ +

{{{label_occupants}}}

{[ if (allow_muc_invitations) { ]}
{[ } ]} -

{{{label_occupants}}}:

    + +

    {{{label_features}}}

    +
      + {[ if (passwordprotected) { ]} +
    • {{{ label_passwordprotected }}}
      • + {[ } ]} + {[ if (unsecured) { ]} +
    • {{{ label_unsecured }}}
      • + {[ } ]} + {[ if (hidden) { ]} +
    • {{{ label_hidden }}}
      • + {[ } ]} + {[ if (public) { ]} +
    • {{{ label_public }}}
      • + {[ } ]} + {[ if (membersonly) { ]} +
    • {{{ label_membersonly }}}
      • + {[ } ]} + {[ if (open) { ]} +
    • {{{ label_open }}}
      • + {[ } ]} + {[ if (persistent) { ]} +
    • {{{ label_persistent }}}
      • + {[ } ]} + {[ if (temporary) { ]} +
    • {{{ label_temporary }}}
      • + {[ } ]} + {[ if (nonanonymous) { ]} +
    • {{{ label_nonanonymous }}}
      • + {[ } ]} + {[ if (semianonymous) { ]} +
    • {{{ label_semianonymous }}}
      • + {[ } ]} + {[ if (moderated) { ]} +
    • {{{ label_moderated }}}
      • + {[ } ]} + {[ if (unmoderated) { ]} +
    • {{{ label_unmoderated }}}
      • + {[ } ]} + {[ if (mam_enabled) { ]} +
    • {{{ label_mam_enabled }}}
      • + {[ } ]} +
    +