From 496d2521fc5234afe92d7eb14fad9b12a797b956 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Mon, 17 Jul 2017 17:10:25 +0200 Subject: [PATCH] muc: Show room domain in header. Also make sure room name gets saved once it's been updated. --- CHANGES.md | 4 ++++ css/converse.css | 33 +++++++++++++++++++------------- css/inverse.css | 33 +++++++++++++++++++------------- sass/_chatbox.scss | 5 +++-- sass/_chatrooms.scss | 27 +++++++++++++++----------- sass/converse/_variables.scss | 1 + sass/inverse/_variables.scss | 1 + src/converse-muc.js | 21 ++++++++++++++------ src/templates/chatroom_head.html | 2 +- 9 files changed, 81 insertions(+), 46 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 9ca34a6f6..424a2b080 100755 --- a/CHANGES.md +++ b/CHANGES.md @@ -21,6 +21,10 @@ instead of jQuery's Deferred. [jcbrand] - #866 Add babel in order to support ES2015 syntax [jcbrand] +#### Bugfixes: + +- Room name wasn't being updated after changing it in the configuration form. [jcbrand] + ## 3.1.1 (2017-07-12) - Use a patched version of [awesomplete](https://github.com/LeaVerou/awesomplete) diff --git a/css/converse.css b/css/converse.css index c5418c6ee..a8644d145 100644 --- a/css/converse.css +++ b/css/converse.css @@ -1522,10 +1522,11 @@ #converse-embedded-chat .chatbox .chat-title, #conversejs .chatbox .chat-title { color: white; - line-height: 15px; display: block; + line-height: 15px; + overflow: hidden; text-overflow: ellipsis; - overflow: hidden; } + white-space: nowrap; } #converse-embedded-chat .chatbox .chat-title a, #conversejs .chatbox .chat-title a { color: white; @@ -2402,17 +2403,23 @@ #conversejs .chat-head-chatroom .chatbox-btn.button-on { background-color: white; color: #E77051; } - #converse-embedded-chat .chat-head-chatroom .chatroom-description, - #conversejs .chat-head-chatroom .chatroom-description { - color: white; - font-size: 80%; - font-style: italic; - height: 1.3em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin: 0; - margin-top: 0.3em; } + #converse-embedded-chat .chat-head-chatroom .chat-title, + #conversejs .chat-head-chatroom .chat-title { + color: #FF977C; } + #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-name, + #conversejs .chat-head-chatroom .chat-title .chatroom-name { + color: white; } + #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-description, + #conversejs .chat-head-chatroom .chat-title .chatroom-description { + color: white; + font-size: 80%; + font-style: italic; + height: 1.3em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin: 0; + margin-top: 0.3em; } #converse-embedded-chat .chatroom, #conversejs .chatroom { width: 300px; } diff --git a/css/inverse.css b/css/inverse.css index 7c9dbd135..c935a455f 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -1568,10 +1568,11 @@ body { #converse-embedded-chat .chatbox .chat-title, #conversejs .chatbox .chat-title { color: white; - line-height: 15px; display: block; + line-height: 15px; + overflow: hidden; text-overflow: ellipsis; - overflow: hidden; } + white-space: nowrap; } #converse-embedded-chat .chatbox .chat-title a, #conversejs .chatbox .chat-title a { color: white; @@ -2518,17 +2519,23 @@ body { #conversejs .chat-head-chatroom .chatbox-btn.button-on { background-color: white; color: #E77051; } - #converse-embedded-chat .chat-head-chatroom .chatroom-description, - #conversejs .chat-head-chatroom .chatroom-description { - color: white; - font-size: 80%; - font-style: italic; - height: 1.3em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin: 0; - margin-top: 0.3em; } + #converse-embedded-chat .chat-head-chatroom .chat-title, + #conversejs .chat-head-chatroom .chat-title { + color: #FF977C; } + #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-name, + #conversejs .chat-head-chatroom .chat-title .chatroom-name { + color: white; } + #converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-description, + #conversejs .chat-head-chatroom .chat-title .chatroom-description { + color: white; + font-size: 80%; + font-style: italic; + height: 1.3em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin: 0; + margin-top: 0.3em; } #converse-embedded-chat .chatroom, #conversejs .chatroom { width: 300px; } diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 41fc938b7..3f078dbc2 100644 --- a/sass/_chatbox.scss +++ b/sass/_chatbox.scss @@ -100,10 +100,11 @@ } .chat-title { color: $chat-head-text-color; - line-height: 15px; display: block; - text-overflow: ellipsis; + line-height: 15px; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; a { color: $chat-head-text-color; width: 100%; diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss index 44ecc0c2a..9279d6731 100644 --- a/sass/_chatrooms.scss +++ b/sass/_chatrooms.scss @@ -19,17 +19,22 @@ color: $chatroom-head-color; } } - - .chatroom-description { - color: white; - font-size: 80%; - font-style: italic; - height: 1.3em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin: 0; - margin-top: 0.3em; + .chat-title { + color: $chatroom-color-lightest; + .chatroom-name { + color: white; + } + .chatroom-description { + color: white; + font-size: 80%; + font-style: italic; + height: 1.3em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin: 0; + margin-top: 0.3em; + } } } diff --git a/sass/converse/_variables.scss b/sass/converse/_variables.scss index b2ed3860c..9c608675f 100644 --- a/sass/converse/_variables.scss +++ b/sass/converse/_variables.scss @@ -120,6 +120,7 @@ $font-path: "../fonticons/fonts/" !default; $chatroom-width: 300px !default; $chatroom-head-color: $red !default; $chatroom-color-light: $light-red !default; +$chatroom-color-lightest: $light-red !default; $chatroom-color-dark: $darkest-red !default; $chatroom-message-them-color: $green !default; $chatroom-toolbar-color: $reddish-white !default; diff --git a/sass/inverse/_variables.scss b/sass/inverse/_variables.scss index 091deb6c7..dc646af93 100644 --- a/sass/inverse/_variables.scss +++ b/sass/inverse/_variables.scss @@ -125,6 +125,7 @@ $chatroom-head-height: 62px !default; $chatroom-width: 300px !default; $chatroom-head-color: $red !default; $chatroom-color-light: $light-red !default; +$chatroom-color-lightest: $light-red !default; $chatroom-color-dark: $darkest-red !default; $chatroom-message-them-color: $green !default; $chatroom-toolbar-color: $reddish-white !default; diff --git a/src/converse-muc.js b/src/converse-muc.js index 269c16c0d..791e66b81 100755 --- a/src/converse-muc.js +++ b/src/converse-muc.js @@ -342,7 +342,15 @@ * are correct, for example that the "type" is set to * "chatroom". */ - settings = _.assign({'type': CHATROOMS_TYPE}, settings); + settings = _.assign({ + 'name': Strophe.unescapeNode( + Strophe.getNodeFromJid(settings.jid) + ), + 'domain': Strophe.getDomainFromJid(settings.jid), + 'type': CHATROOMS_TYPE, + }, settings); + + return _converse.chatboxviews.showChat(settings); }; @@ -1284,7 +1292,9 @@ }); $form.on('submit', (ev) => { ev.preventDefault(); - this.saveConfiguration(ev.target); + this.saveConfiguration(ev.target).then( + this.getRoomFeatures.bind(this) + ); }); }, @@ -1434,8 +1444,9 @@ * */ const features = { - 'features_fetched': true - }; + 'features_fetched': true, + 'name': iq.querySelector('identity').getAttribute('name') + } _.each(iq.querySelectorAll('feature'), function (field) { const fieldname = field.getAttribute('var'); if (!fieldname.startsWith('muc_')) { @@ -2623,8 +2634,6 @@ const chatroom = _converse.openChatRoom({ 'id': room_jid, 'jid': room_jid, - 'name': Strophe.unescapeNode(Strophe.getNodeFromJid(room_jid)), - 'type': CHATROOMS_TYPE, 'box_id': b64_sha1(room_jid), 'password': $x.attr('password') }); diff --git a/src/templates/chatroom_head.html b/src/templates/chatroom_head.html index beff57621..eb98d1287 100644 --- a/src/templates/chatroom_head.html +++ b/src/templates/chatroom_head.html @@ -3,6 +3,6 @@ {[ } ]}
- {{{ name }}} + {{{ name }}}@{{{ domain }}}

{{{ description }}}