diff --git a/packages/rocketchat-emojione/emojiButton.js b/packages/rocketchat-emojione/emojiButton.js index 0544610658a9..2990f4937fb5 100644 --- a/packages/rocketchat-emojione/emojiButton.js +++ b/packages/rocketchat-emojione/emojiButton.js @@ -2,9 +2,11 @@ Template.messageBox.events({ 'click .emoji-picker-icon'(event) { event.stopPropagation(); + const mainContent = $('.main-content'); if (RocketChat.EmojiPicker.isOpened()) { RocketChat.EmojiPicker.close(); } else { + mainContent.addClass('emoji-picking'); RocketChat.EmojiPicker.open(event.currentTarget, (emoji) => { const input = $(event.currentTarget).parent().parent().find('.input-message'); @@ -15,7 +17,8 @@ Template.messageBox.events({ input.val(textAreaTxt.substring(0, caretPos) + emojiValue + textAreaTxt.substring(caretPos)); - input.focus(); + if ( !window.matchMedia('all and (min-width: 360px)').matches ) + input.focus(); input.prop('selectionStart', caretPos + emojiValue.length); input.prop('selectionEnd', caretPos + emojiValue.length); diff --git a/packages/rocketchat-emojione/emojiPicker.less b/packages/rocketchat-emojione/emojiPicker.less index b4778dede107..61951764e288 100644 --- a/packages/rocketchat-emojione/emojiPicker.less +++ b/packages/rocketchat-emojione/emojiPicker.less @@ -180,4 +180,9 @@ } } } + + @media all and (max-width: 360px) { + border-radius: 0; + .transition(none); + } } diff --git a/packages/rocketchat-emojione/lib/EmojiPicker.js b/packages/rocketchat-emojione/lib/EmojiPicker.js index 2015b2ed8150..a3de8afde8cb 100644 --- a/packages/rocketchat-emojione/lib/EmojiPicker.js +++ b/packages/rocketchat-emojione/lib/EmojiPicker.js @@ -52,6 +52,10 @@ RocketChat.EmojiPicker = { return this.recent; }, setPosition() { + if (window.matchMedia('all and (min-width: 360px)').matches) { + return $('.emoji-picker'); + } + let sourcePos = $(this.source).offset(); let left = (sourcePos.left - this.width + 65); let top = (sourcePos.top - this.height - 5); @@ -88,6 +92,9 @@ RocketChat.EmojiPicker = { this.opened = true; }, close() { + const mainContent = $('.main-content'); + mainContent.removeClass('emoji-picking'); + $('.emoji-picker').removeClass('show'); this.opened = false; }, diff --git a/packages/rocketchat-theme/assets/stylesheets/base.less b/packages/rocketchat-theme/assets/stylesheets/base.less index df2ec553ef7a..02ae0348131e 100644 --- a/packages/rocketchat-theme/assets/stylesheets/base.less +++ b/packages/rocketchat-theme/assets/stylesheets/base.less @@ -4601,3 +4601,174 @@ br.only-after-a { a + br.only-after-a { display: block; } + +@media all and (max-width: 360px) { + #rocket-chat { + .fixed-title h2 { + font-size: 19px; + height: 38px; + margin-left: 22px; + margin-top: -3px; + } + .flex-tab { + .transform(translateY(-100%)); + .transition(height .50s cubic-bezier(ease-in-out)); + border-top: 1px solid #eaeaea; + right: 0px; + top: 76px; + width: 100%; + } + .flex-opened .flex-tab { + .transform(translateY(0px)); + } + .flex-tab-bar { + align-items: center; + border-bottom: 1px solid #eaeaea; + border-left: none; + display: flex; + height: 37px; + left: 0; + padding: 0px; + top: 40px; + width: 100%; + } + .main-content { + right: 0px; + &.emoji-picking { + bottom: 219px; + } + } + + .messages-box { + bottom: 18px; + height: calc(100% - 124px); + margin-top: 77px; + } + .toggle-favorite { + border-bottom: 1px solid #eaeaea; + font-size: 24px; + padding: 7px 8px 3px 1px; + position: absolute; + right: 0px; + top: 0px; + } + } + + .account-box .options, + .flex-nav .content { + height: calc(100%); + } + + .burger { + left: -5px; + top: -5px; + } + + .emoji-picker { + bottom: 0px; + left: initial; + position: absolute; + top: initial; + form { + display: none; + } + } + + .fixed-title { + height: 40px; + z-index: 200; + h2 { + margin-right: 26px; + .icon-lock, .icon-hash, .icon-at { + font-size: 14px; + } + .room-title { + font-size: 14px; + font-weight: bold; + } + .room-topic { + display: block; + font-size: 12px; + font-style: italic; + line-height: 100%; + margin-left: 5px; + margin-top: -6px; + overflow: hidden; + padding-top: 0; + text-overflow: ellipsis; + } + } + } + + .flex-tab-bar .tab-button.active { + border-right: none; + border-top: 3px solid #f00; + margin-left: 0px; + margin-top: -3px; + padding-left: 10px; + } + + .message { + padding-left: 63px; + .thumb { + left: 13px; + } + } + + .messages-container { + .footer { + min-height: 37px; + padding: 0px; + } + .message-form { + .message-input { + display: flex; + .file { + order: 2; + position: relative; + } + .input-message-container { + align-items: center; + background-color: #fff; + display: flex; + .inner-right-toolbar { + left: 0px; + order: 1; + padding: 0px 6px 0px 4px; + position: relative; + top: 0px; + } + } + .message-buttons { + order: 3; + input { + float: left; + width: 34px; + } + } + } + .formatting-tips { + display: none; + } + .users-typing { + display: none; + } + textarea { + border: 0; + height: 35px; + order: 2; + padding-left: 0px; + padding-right: 0px; + } + } + } + + .side-nav { + .footer { + display: none; + } + .rooms-list { + height: calc(100%); + } + } +} diff --git a/packages/rocketchat-ui-message/message/messageBox.coffee b/packages/rocketchat-ui-message/message/messageBox.coffee index 8e603ea3f0fa..9e51505d3951 100644 --- a/packages/rocketchat-ui-message/message/messageBox.coffee +++ b/packages/rocketchat-ui-message/message/messageBox.coffee @@ -80,6 +80,9 @@ Template.messageBox.events # at this point, the input is cleared and ready for autogrow input.updateAutogrow() instance.isMessageFieldEmpty.set(chatMessages[@_id].isEmpty()) + + if window.matchMedia('all and (min-width: 360px)').matches + instance.$('.message-buttons.file').removeClass('hidden') ) input.focus() @@ -87,6 +90,13 @@ Template.messageBox.events chatMessages[@_id].keyup(@_id, event, instance) instance.isMessageFieldEmpty.set(chatMessages[@_id].isEmpty()) + if window.matchMedia('all and (min-width: 360px)').matches + input = event.currentTarget + if input.value.length is 0 + instance.$('.message-buttons.file').removeClass('hidden') + else + instance.$('.message-buttons.file').addClass('hidden') + 'paste .input-message': (e) -> if not e.originalEvent.clipboardData? return