From 4742e66b69b1084b32584bd852a009aeac4f4b66 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Wed, 7 Feb 2018 13:29:54 +0100 Subject: [PATCH] Fix linting errors and failing tests --- css/converse.css | 32 +++++++++++------------ css/inverse.css | 40 ++++++++++++++--------------- sass/_chatbox.scss | 4 +-- sass/_chatrooms.scss | 4 +-- sass/inverse/_chatbox.scss | 2 +- spec/chatbox.js | 2 +- src/converse-chatview.js | 17 +++++++----- src/converse-controlbox.js | 2 +- src/converse-muc.js | 7 +++-- src/templates/chatroom_toolbar.html | 7 ++--- src/templates/toolbar.html | 9 ++++--- src/utils.js | 2 +- tests/utils.js | 5 +++- 13 files changed, 69 insertions(+), 64 deletions(-) diff --git a/css/converse.css b/css/converse.css index f168638dd..c428914be 100644 --- a/css/converse.css +++ b/css/converse.css @@ -1759,11 +1759,12 @@ padding: 0.25em; height: 25px; display: block; - background-color: #50c282; } + background-color: #50c282; + color: white; } #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a, #conversejs .chatbox .sendXMPPMessage .chat-toolbar a { - font-size: 16px; color: white; + font-size: 16px; text-decoration: none; text-shadow: none; } #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a, @@ -1857,14 +1858,11 @@ #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu { color: white; } - #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley, - #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley { - padding-left: 5px; } - #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, - #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover, - #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, - #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover { - background-color: #DCF9F6; } + #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, + #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover, + #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, + #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover { + background-color: #DCF9F6; } #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul { z-index: 99; } @@ -2764,14 +2762,14 @@ #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary { background-color: #E77051; } - #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar, - #conversejs .chatroom form.sendXMPPMessage .chat-toolbar { - background-color: #FFECE7; } - #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea, - #conversejs .chatroom form.sendXMPPMessage .chat-textarea { + #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar, + #conversejs .chatroom .sendXMPPMessage .chat-toolbar { + background-color: #ed957e; } + #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea, + #conversejs .chatroom .sendXMPPMessage .chat-textarea { border-bottom-right-radius: 0; } - #converse-embedded-chat .chatroom form.sendXMPPMessage .send-button, - #conversejs .chatroom form.sendXMPPMessage .send-button { + #converse-embedded-chat .chatroom .sendXMPPMessage .send-button, + #conversejs .chatroom .sendXMPPMessage .send-button { background-color: #E77051; } #converse-embedded-chat .chatroom .room-invite .invited-contact, #conversejs .chatroom .room-invite .invited-contact { diff --git a/css/inverse.css b/css/inverse.css index c97420eb7..6c9f793a3 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -1824,11 +1824,12 @@ body { padding: 0.25em; height: 29px; display: block; - background-color: #50c282; } + background-color: #50c282; + color: white; } #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a, #conversejs .chatbox .sendXMPPMessage .chat-toolbar a { - font-size: 18px; color: white; + font-size: 18px; text-decoration: none; text-shadow: none; } #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a, @@ -1922,14 +1923,11 @@ body { #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu { color: white; } - #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley, - #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley { - padding-left: 5px; } - #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, - #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover, - #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, - #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover { - background-color: #DCF9F6; } + #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, + #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover, + #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, + #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover { + background-color: #DCF9F6; } #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul { z-index: 99; } @@ -2021,13 +2019,13 @@ body { #conversejs .chatbox .chat-title { font-size: 26px; line-height: 26px; } - #conversejs .chatbox form.sendXMPPMessage ul { + #conversejs .chatbox .sendXMPPMessage ul { width: 100%; } - #conversejs .chatbox form.sendXMPPMessage .toggle-smiley { + #conversejs .chatbox .sendXMPPMessage .toggle-smiley { padding-left: 0.5em; } - #conversejs .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker { + #conversejs .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker { margin-right: 5em; } - #conversejs .chatbox form.sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category { + #conversejs .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category { padding-left: 10px; padding-right: 10px; } @@ -2928,14 +2926,14 @@ body { #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary { background-color: #E77051; } - #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar, - #conversejs .chatroom form.sendXMPPMessage .chat-toolbar { - background-color: #FFECE7; } - #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea, - #conversejs .chatroom form.sendXMPPMessage .chat-textarea { + #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar, + #conversejs .chatroom .sendXMPPMessage .chat-toolbar { + background-color: #ed957e; } + #converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea, + #conversejs .chatroom .sendXMPPMessage .chat-textarea { border-bottom-right-radius: 0; } - #converse-embedded-chat .chatroom form.sendXMPPMessage .send-button, - #conversejs .chatroom form.sendXMPPMessage .send-button { + #converse-embedded-chat .chatroom .sendXMPPMessage .send-button, + #conversejs .chatroom .sendXMPPMessage .send-button { background-color: #E77051; } #converse-embedded-chat .chatroom .room-invite .invited-contact, #conversejs .chatroom .room-invite .invited-contact { diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 6335e9570..d1f2e6abe 100644 --- a/sass/_chatbox.scss +++ b/sass/_chatbox.scss @@ -298,9 +298,10 @@ height: $toolbar-height; display: block; background-color: lighten($chat-head-color, 10%); + color: white; a { - font-size: $font-size-large; color: white; + font-size: $font-size-large; text-decoration: none; text-shadow: none; } @@ -395,7 +396,6 @@ color: white; } &.toggle-smiley { - padding-left: 5px; .emoji-toolbar { .emoji-category-picker, .emoji-skintone-picker { diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss index 66ce4b154..54f1ef908 100644 --- a/sass/_chatrooms.scss +++ b/sass/_chatrooms.scss @@ -227,9 +227,9 @@ } } - form.sendXMPPMessage { + .sendXMPPMessage { .chat-toolbar { - background-color: $chatroom-toolbar-color; + background-color: lighten($chatroom-head-color, 10%); } .chat-textarea { border-bottom-right-radius: 0; diff --git a/sass/inverse/_chatbox.scss b/sass/inverse/_chatbox.scss index 6eeb68314..1330003e1 100644 --- a/sass/inverse/_chatbox.scss +++ b/sass/inverse/_chatbox.scss @@ -65,7 +65,7 @@ line-height: $font-size-huge; } - form.sendXMPPMessage { + .sendXMPPMessage { ul { width: 100%; } diff --git a/spec/chatbox.js b/spec/chatbox.js index 5a70d3e50..02ad8783c 100644 --- a/spec/chatbox.js +++ b/spec/chatbox.js @@ -419,7 +419,7 @@ expect(view).toBeDefined(); var $toolbar = $(view.el).find('ul.chat-toolbar'); expect($toolbar.length).toBe(1); - expect($toolbar.children('li').length).toBe(3); + expect($toolbar.children('li').length).toBe(4); done(); })); diff --git a/src/converse-chatview.js b/src/converse-chatview.js index 6715f0926..b504f5cf7 100644 --- a/src/converse-chatview.js +++ b/src/converse-chatview.js @@ -345,7 +345,8 @@ 'show_send_button': _converse.show_send_button, 'show_spoiler_button': _converse.visible_toolbar_buttons.spoiler, 'show_textarea': true, - 'show_toolbar': _converse.show_toolbar + 'show_toolbar': _converse.show_toolbar, + 'unread_msgs': __('You have unread messages') })); this.renderToolbar(); }, @@ -1077,11 +1078,15 @@ return this; }, + renderEmojiPicker () { + this.emoji_picker_view.render(); + }, + insertEmojiPicker () { - var toggle = this.el.querySelector('.toggle-smiley'); - if (!_.isNull(toggle)) { - toggle.innerHTML = ''; - toggle.appendChild(this.emoji_picker_view.render().el); + var picker_el = this.el.querySelector('.emoji-picker'); + if (!_.isNull(picker_el)) { + picker_el.innerHTML = ''; + picker_el.appendChild(this.emoji_picker_view.el); } }, @@ -1105,7 +1110,7 @@ } this.setChatState(_converse.ACTIVE); this.scrollDown(); - this.renderToolbar(); + this.renderEmojiPicker(); if (focus) { this.focus(); } diff --git a/src/converse-controlbox.js b/src/converse-controlbox.js index 1dd5b02e7..4b3f804e4 100644 --- a/src/converse-controlbox.js +++ b/src/converse-controlbox.js @@ -688,7 +688,7 @@ ev.preventDefault(); const input = ev.target.querySelector('input'); const jid = input.value; - if (!jid || _.filter(jid.split('@')).length < 2) { + if (!jid || _.compact(jid.split('@')).length < 2) { this.el.querySelector('.search-xmpp div').innerHTML = this.generateAddContactHTML({ error_message: __('Please enter a valid XMPP address'), diff --git a/src/converse-muc.js b/src/converse-muc.js index 05a3e78bf..c82c88aea 100644 --- a/src/converse-muc.js +++ b/src/converse-muc.js @@ -486,8 +486,7 @@ }, renderChatArea () { - /* Render the UI container in which chat room messages will - * appear. + /* Render the UI container in which chat room messages will appear. */ if (_.isNull(this.el.querySelector('.chat-area'))) { const container_el = this.el.querySelector('.chatroom-body'); @@ -583,8 +582,8 @@ afterConnected () { if (this.model.get('connection_status') === converse.ROOMSTATUS.ENTERED) { this.setChatState(_converse.ACTIVE); - this.renderEmojiPicker(); this.scrollDown(); + this.renderEmojiPicker(); this.focus(); } }, @@ -2488,7 +2487,7 @@ evt.preventDefault(); const el = evt.target.querySelector('input.invited-contact'), jid = el.value; - if (!jid || _.filter(jid.split('@')).length < 2) { + if (!jid || _.compact(jid.split('@')).length < 2) { evt.target.outerHTML = tpl_chatroom_invite({ 'error_message': __('Please enter a valid XMPP username'), 'label_invitation': __('Invite'), diff --git a/src/templates/chatroom_toolbar.html b/src/templates/chatroom_toolbar.html index 54e5d26c3..2fafb7693 100644 --- a/src/templates/chatroom_toolbar.html +++ b/src/templates/chatroom_toolbar.html @@ -1,7 +1,8 @@ {[ if (o.use_emoji) { ]} -
  • - -
    • +
  • + + +
    • {[ } ]} {[ if (o.show_call_button) { ]}
    • diff --git a/src/templates/toolbar.html b/src/templates/toolbar.html index 3523febd5..13a10decd 100644 --- a/src/templates/toolbar.html +++ b/src/templates/toolbar.html @@ -1,13 +1,14 @@ {[ if (o.use_emoji) { ]} -
  • - +
  • + +
    • {[ } ]} {[ if (o.show_spoiler_button) { ]}
    • {[ } ]} diff --git a/src/utils.js b/src/utils.js index 1a8b4f2a4..f9f605e34 100644 --- a/src/utils.js +++ b/src/utils.js @@ -364,7 +364,7 @@ }; u.isValidJID = function (jid) { - return _.filter(jid.split('@')).length === 2 && !jid.startsWith('@') && !jid.endsWith('@'); + return _.compact(jid.split('@')).length === 2 && !jid.startsWith('@') && !jid.endsWith('@'); }; u.isValidMUCJID = function (jid) { diff --git a/tests/utils.js b/tests/utils.js index 36e55507f..89bb9fb1c 100644 --- a/tests/utils.js +++ b/tests/utils.js @@ -68,7 +68,10 @@ utils.closeControlBox = function () { var controlbox = document.querySelector("#controlbox"); if (u.isVisible(controlbox)) { - controlbox.querySelector(".close-chatbox-button").click(); + var button = controlbox.querySelector(".close-chatbox-button"); + if (!_.isNull(button)) { + button.click(); + } } return this; };