From da713f316240f89339150d6db14059ab1cbeda3d Mon Sep 17 00:00:00 2001 From: JC Brand Date: Wed, 29 May 2019 12:57:54 +0200 Subject: [PATCH] Improve chatroom name rendering - Take locked_muc_domain into consideration in chatroom display name - Use getDisplayName when rendering the heading name - Give preference to bookmark name if it exists --- spec/bookmarks.js | 16 ++++++++++++---- src/converse-bookmark-views.js | 20 +------------------- src/converse-muc-views.js | 2 ++ src/headless/converse-bookmarks.js | 12 +++++++++++- src/headless/converse-muc.js | 9 ++++++++- src/templates/chatroom_head.html | 8 +------- 6 files changed, 35 insertions(+), 32 deletions(-) diff --git a/spec/bookmarks.js b/spec/bookmarks.js index 8b65612a9..24d494cbd 100644 --- a/spec/bookmarks.js +++ b/spec/bookmarks.js @@ -134,7 +134,7 @@ }); _converse.connection._dataRecv(test_utils.createRequest(stanza)); await test_utils.waitUntil(() => view.model.get('bookmarked')); - toggle = view.el.querySelector('.toggle-bookmark'); + toggle = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark')); expect(view.model.get('bookmarked')).toBeTruthy(); expect(toggle.title).toBe('Unbookmark this groupchat'); expect(u.hasClass('on-button', toggle), true); @@ -224,12 +224,19 @@ ); await _converse.api.rooms.open(`lounge@localhost`); const view = _converse.chatboxviews.get('lounge@localhost'); - await test_utils.waitUntil(() => !_.isNull(view.el.querySelector('.toggle-bookmark'))); - var bookmark_icon = view.el.querySelector('.toggle-bookmark'); + let bookmark_icon = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark')); expect(_.includes(bookmark_icon.classList, 'button-on')).toBeFalsy(); + _converse.bookmarks.create({ + 'jid': view.model.get('jid'), + 'autojoin': false, + 'name': 'The lounge', + 'nick': ' some1' + }); view.model.set('bookmarked', true); + bookmark_icon = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark')); expect(_.includes(bookmark_icon.classList, 'button-on')).toBeTruthy(); view.model.set('bookmarked', false); + bookmark_icon = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark')); expect(_.includes(bookmark_icon.classList, 'button-on')).toBeFalsy(); done(); })); @@ -264,7 +271,7 @@ }); expect(_converse.bookmarks.length).toBe(1); expect(view.model.get('bookmarked')).toBeTruthy(); - var bookmark_icon = view.el.querySelector('.toggle-bookmark'); + let bookmark_icon = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark')); expect(u.hasClass('button-on', bookmark_icon)).toBeTruthy(); spyOn(_converse.connection, 'sendIQ').and.callFake(function (iq, callback, errback) { @@ -273,6 +280,7 @@ }); spyOn(_converse.connection, 'getUniqueId').and.callThrough(); bookmark_icon.click(); + bookmark_icon = await test_utils.waitUntil(() => view.el.querySelector('.toggle-bookmark')); expect(view.toggleBookmark).toHaveBeenCalled(); expect(u.hasClass('button-on', bookmark_icon)).toBeFalsy(); expect(_converse.bookmarks.length).toBe(0); diff --git a/src/converse-bookmark-views.js b/src/converse-bookmark-views.js index cc804a74e..77c68a9ce 100644 --- a/src/converse-bookmark-views.js +++ b/src/converse-bookmark-views.js @@ -127,20 +127,6 @@ converse.plugins.add('converse-bookmark-views', { } }, - onBookmarked () { - const icon = this.el.querySelector('.toggle-bookmark'); - if (_.isNull(icon)) { - return; - } - if (this.model.get('bookmarked')) { - icon.classList.add('button-on'); - icon.title = __('Unbookmark this groupchat'); - } else { - icon.classList.remove('button-on'); - icon.title = __('Bookmark this groupchat'); - } - }, - setBookmarkState () { /* Set whether the groupchat is bookmarked or not. */ @@ -177,7 +163,6 @@ converse.plugins.add('converse-bookmark-views', { this.renderBookmarkForm(); } else { models.forEach(model => model.destroy()); - this.el.querySelector('.toggle-bookmark').classList.remove('button-on'); } } } @@ -372,10 +357,7 @@ converse.plugins.add('converse-bookmark-views', { _converse.api.listen.on('bookmarksInitialized', initBookmarkViews); - _converse.api.listen.on('chatRoomOpened', view => { - view.model.on('change:bookmarked', view.onBookmarked, view); - view.setBookmarkState(); - }); + _converse.api.listen.on('chatRoomOpened', view => view.setBookmarkState()); /************************ END Event Handlers ************************/ } }); diff --git a/src/converse-muc-views.js b/src/converse-muc-views.js index 90205a844..78ad882a0 100644 --- a/src/converse-muc-views.js +++ b/src/converse-muc-views.js @@ -559,6 +559,7 @@ converse.plugins.add('converse-muc-views', { this.model.on('change:affiliation', this.renderHeading, this); this.model.on('change:connection_status', this.onConnectionStatusChanged, this); this.model.on('change:hidden_occupants', this.updateOccupantsToggle, this); + this.model.on('change:bookmarked', this.renderHeading, this); this.model.on('change:jid', this.renderHeading, this); this.model.on('change:name', this.renderHeading, this); this.model.on('change:role', this.renderBottomPanel, this); @@ -739,6 +740,7 @@ converse.plugins.add('converse-muc-views', { */ return tpl_chatroom_head( Object.assign(this.model.toJSON(), { + 'title': this.model.getDisplayName(), 'Strophe': Strophe, '_converse': _converse, 'info_close': __('Close and leave this groupchat'), diff --git a/src/headless/converse-bookmarks.js b/src/headless/converse-bookmarks.js index f0c2a1958..a7ede7cc0 100644 --- a/src/headless/converse-bookmarks.js +++ b/src/headless/converse-bookmarks.js @@ -40,7 +40,17 @@ converse.plugins.add('converse-bookmarks', { // New functions which don't exist yet can also be added. ChatRoom: { - getAndPersistNickname(nick) { + getDisplayName () { + const { _converse } = this.__super__; + if (this.get('bookmarked') && _converse.bookmarks) { + const bookmark = _converse.bookmarks.findWhere({'jid': this.get('jid')}); + return bookmark.get('name'); + } else { + return this.__super__.getDisplayName.apply(this, arguments); + } + }, + + getAndPersistNickname (nick) { const { _converse } = this.__super__; nick = nick || _converse.getNicknameFromBookmark(this.get('jid')); return this.__super__.getAndPersistNickname.call(this, nick); diff --git a/src/headless/converse-muc.js b/src/headless/converse-muc.js index 1b583b642..4ecc09799 100644 --- a/src/headless/converse-muc.js +++ b/src/headless/converse-muc.js @@ -356,7 +356,14 @@ converse.plugins.add('converse-muc', { }, getDisplayName () { - return this.get('name') || this.get('jid'); + const name = this.get('name'); + if (name) { + return name; + } else if (_converse.locked_muc_domain === 'hidden') { + return Strophe.getNodeFromJid(this.get('jid')); + } else { + return this.get('jid'); + } }, /** diff --git a/src/templates/chatroom_head.html b/src/templates/chatroom_head.html index 4ab978b97..f4ff91192 100644 --- a/src/templates/chatroom_head.html +++ b/src/templates/chatroom_head.html @@ -1,13 +1,7 @@
- {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]} - {{{ o.name }}} - {[ } else if (o._converse.locked_muc_domain === 'hidden') { ]} - {{{ o.Strophe.getNodeFromJid(o.jid) }}} - {[ } else { ]} - {{{ o.Strophe.getNodeFromJid(o.jid) }}}@{{{ o.Strophe.getDomainFromJid(o.jid) }}} - {[ } ]} + {{{ o.title }}}

{{o.description}}