Skip to content

Commit

Permalink
Merge pull request #7985 from RocketChat/text-area-mobile
Browse files Browse the repository at this point in the history 
[FIX] Text area buttons and layout on mobile
  • Loading branch information
@rodrigok
rodrigok committed Aug 30, 2017
1 parent c49d86a commit eb2ffde
Show file tree
Hide file tree
Showing 8 changed files with 715 additions and 787 deletions.
1,301 changes: 569 additions & 732 deletions packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json
View file

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions packages/rocketchat-lib/client/lib/roomExit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@
this.roomExit = function() {
// 7370 - Close flex-tab when opening a room on mobile UI
if (window.matchMedia('(max-width: 500px)').matches) {
const templateData = Blaze.getData(document.querySelector('.flex-tab'));
templateData && templateData.tabBar && templateData.tabBar.close();
const flex = document.querySelector('.flex-tab');
if (flex) {
const templateData = Blaze.getData(flex);
templateData && templateData.tabBar && templateData.tabBar.close();
}
}
RocketChat.callbacks.run('roomExit');
BlazeLayout.render('main', {
Expand Down
62 changes: 60 additions & 2 deletions packages/rocketchat-theme/client/imports/components/message-box.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,14 +158,21 @@
}
}
}

& [data-small] {
display: none;
}
}

@media (width <= 500px) {
.rc-message-box {
padding: 24px 0 0;
margin-top: 1rem;
padding: 0;

&__typing {
margin-left: 10px;
top: -1rem;

margin-left: 1rem;
}

&__toolbar-markdown {
Expand All @@ -175,8 +182,59 @@
&__container {
display: flex;

padding: var(--default-small-padding);
padding-bottom: calc(var(--default-small-padding) - 8px);

border-width: 0;
border-top-width: 1px;
flex-wrap: wrap;
}

& [data-desktop] {
display: none;
}

& [data-small] {
display: flex;
}

&__textarea {
flex: 1 0 100%;

margin-bottom: 10px;
order: 1;
}

&__action {
margin: 5px 10px;

font-size: 20px;
}

& [disabled] {
opacity: 0.4;
}

& .emoji-picker-icon {
width: initial;
padding-right: 10px;
order: 2;
}

&__action-label {
display: flex;
flex-direction: row;
flex: 1 1 auto;

font-size: 20px;
order: 3;
}

&__send {
flex: 0;

font-size: 20px;
order: 4;
}
}
}
1 change: 1 addition & 0 deletions packages/rocketchat-theme/client/imports/general/variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
--status-busy: var(--color-error);
--status-invisible: var(--color-gray-medium);
--status-invisible-sidebar: var(--color-darkest);
--default-small-padding: 1rem;

/*
* Forms
Expand Down
91 changes: 54 additions & 37 deletions packages/rocketchat-ui-message/client/messageBox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,46 +26,18 @@
{{> icon block="rc-input__icon-svg" icon="emoji"}}
</div>
<textarea autofocus dir="auto" name="msg" maxlength="{{maxMessageLength}}" placeholder="{{_ 'Message'}}" rows="1" class="rc-message-box__textarea js-input-message autogrow-short"></textarea>
{{#if sendIcon}}
<div class="rc-message-box__icon js-send">
{{#unless disableSendIcon}}
<div class="rc-message-box__icon rc-message-box__send js-send" data-desktop>
{{> icon block="rc-input__icon-svg" icon="send"}}
</div>
{{else}}
<label class="rc-message-box__action-label" for="rc-message-box__action-input" data-popover="label">
<input id="rc-message-box__action-input" type="checkbox" class="rc-popover-anchor" data-popover="anchor">
<div class="rc-popover js-message-actions" data-popover="popover">
<div class="rc-popover__content">
{{# each column in columns }}
<div class="rc-popover__column">
{{#each group in column }}
<div class="rc-popover__column-wrapper">
<h3 class="rc-popover__title">{{_ group.name}}</h3>
<ul class="rc-popover__list">
{{#each group.actions }}
<li class="rc-popover__item" data-action="open" data-open="account">
<span class="rc-popover__icon">
{{#if icon}}
{{> icon block="rc-popover__icon-element" icon=icon }}
{{/if}}
</span>
<span class="rc-popover__item-text">{{_ label}}</span>
</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
{{/each}}
</div>
</div>
{{#if columns}}
<div class="rc-message-box__icon">
{{> icon block="rc-input__icon-svg" icon="plus"}}
</div>
{{/if}}
</label>

{{/if}}
{{> messageBox__actions}}
{{/unless}}
{{# messageBox__actionsSmall}}
<span class="rc-message-box__send js-message-action js-send" {{disableSendIcon}} data-small>
{{> icon block="rc-message-box__action" icon="send"}}
</span>
{{/messageBox__actionsSmall}}
</label>
{{#unless embeddedVersion}}
{{#if showFormattingTips}}
Expand Down Expand Up @@ -118,3 +90,48 @@ <h3 class="rc-popover__title">{{_ group.name}}</h3>
{{/if}}
</div>
</template>
<template name="messageBox__actionsSmall">
<div class="js-message-actions rc-message-box__action-label" data-small>
{{# each actions }}
<span class="js-message-action">
{{> icon block="rc-message-box__action" icon=icon }}
</span>
{{/each}}
</div>
{{> Template.contentBlock}}
</template>
<template name="messageBox__actions">
<label class="rc-message-box__action-label" for="rc-message-box__action-input" data-popover="label" data-desktop>
<input id="rc-message-box__action-input" type="checkbox" class="rc-popover-anchor" data-popover="anchor">
<div class="rc-popover js-message-actions" data-popover="popover">
<div class="rc-popover__content">
{{# each column in columns }}
<div class="rc-popover__column">
{{#each group in column }}
<div class="rc-popover__column-wrapper">
<h3 class="rc-popover__title">{{_ group.name}}</h3>
<ul class="rc-popover__list">
{{#each group.actions }}
<li class="rc-popover__item" data-action="open" data-open="account">
{{#if icon}}
<span class="rc-popover__icon">
{{> icon block="rc-popover__icon-element" icon=icon }}
</span>
{{/if}}
<span class="rc-popover__item-text">{{_ label}}</span>
</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
{{/each}}
</div>
</div>
{{#if columns}}
<div class="rc-message-box__icon">
{{> icon block="rc-input__icon-svg" icon="plus"}}
</div>
{{/if}}
</label>
</template>
22 changes: 16 additions & 6 deletions packages/rocketchat-ui-message/client/messageBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,11 @@ const markdownButtons = [
}
];

Template.messageBox.helpers({
const methods = {
actions() {
const groups = RocketChat.messageBox.actions.get();
return Object.keys(groups).reduce((ret, el) => ret.concat(groups[el]), []);
},
columns() {
const groups = RocketChat.messageBox.actions.get();
const sorted = Object.keys(groups).sort((a, b) => groups[b].length - groups[a].length);
Expand All @@ -153,7 +157,12 @@ Template.messageBox.helpers({
});

return columns;
},
}
};

Template.messageBox__actions.helpers(methods);
Template.messageBox__actionsSmall.helpers(methods);
Template.messageBox.helpers({
mdButtons() {
return markdownButtons.filter(button => !button.condition || button.condition());
},
Expand Down Expand Up @@ -275,8 +284,8 @@ Template.messageBox.helpers({
anonymousWrite() {
return (Meteor.userId() == null) && RocketChat.settings.get('Accounts_AllowAnonymousRead') === true && RocketChat.settings.get('Accounts_AllowAnonymousWrite') === true;
},
sendIcon() {
return Template.instance().sendIcon.get();
disableSendIcon() {
return !Template.instance().sendIcon.get() ? 'disabled' : '';
},
embeddedVersion() {
return RocketChat.Layout.isEmbedded();
Expand Down Expand Up @@ -334,8 +343,9 @@ function firefoxPasteUpload(fn) {
}

Template.messageBox.events({
'click .js-message-actions .rc-popover__item'(event, instance) {
this.action.apply(this, [{rid: Template.parentData()._id, messageBox: instance.find('.rc-message-box'), element: $(event.target).parent('.rc-popover__item')[0], event}]);
'click .js-message-actions .rc-popover__item, click .js-message-actions .js-message-action'(event, instance) {
const action = this.action || Template.parentData().action;
action.apply(this, [{rid: Template.parentData()._id, messageBox: instance.find('.rc-message-box'), element: event.currentTarget, event}]);
},
'click .join'(event) {
event.stopPropagation();
Expand Down
10 changes: 5 additions & 5 deletions packages/rocketchat-ui-message/startup/messageBoxActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ import {VRecDialog} from 'meteor/rocketchat:ui-vrecord';

RocketChat.messageBox.actions.add('Create_new', 'Video_message', {
icon: 'video',
condition: () => RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_VideoRecorderEnabled') && ((navigator.getUserMedia != null) || (navigator.webkitGetUserMedia != null)) && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/video\/webm|video\/\*/i)),
condition: () => (navigator.getUserMedia || navigator.webkitGetUserMedia) && RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_VideoRecorderEnabled') && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/video\/webm|video\/\*/i)),
action({messageBox}) {
return VRecDialog.opened ? VRecDialog.close() : VRecDialog.open(messageBox);
}
});

RocketChat.messageBox.actions.add('Create_new', 'Audio_message', {
icon: 'mic',
condition: () => RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_AudioRecorderEnabled') && ((navigator.getUserMedia != null) || (navigator.webkitGetUserMedia != null)) && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/audio\/wav|audio\/\*/i)),
condition: () => (navigator.getUserMedia || navigator.webkitGetUserMedia) && RocketChat.settings.get('FileUpload_Enabled') && RocketChat.settings.get('Message_AudioRecorderEnabled') && (!RocketChat.settings.get('FileUpload_MediaTypeWhiteList') || RocketChat.settings.get('FileUpload_MediaTypeWhiteList').match(/audio\/wav|audio\/\*/i)),
action({event, element}) {
event.preventDefault();
const icon = element.querySelector('.rc-popover__icon');
const icon = element;
if (chatMessages[RocketChat.openedRoom].recording) {
return AudioRecorder.stop(function(blob) {
icon.style.color = '';
Expand All @@ -31,10 +31,10 @@ RocketChat.messageBox.actions.add('Create_new', 'Audio_message', {
]);
});
}
icon.classList.add('pulse');
icon.style.color = 'red';
chatMessages[RocketChat.openedRoom].recording = true;
return AudioRecorder.start(function() {
icon.classList.add('pulse');
icon.style.color = 'red';
});
}
});
Expand Down
8 changes: 5 additions & 3 deletions packages/rocketchat-ui/client/lib/textarea-autogrow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
var self = this;
var $self = $(self);
var minHeight = $self.height();
var noFlickerPad = $self.hasClass('autogrow-short') ? 0 : parseInt($self.css('lineHeight')) || 0;
var settings = $.extend({
preGrowCallback: null,
postGrowCallback: null
Expand All @@ -24,6 +23,9 @@
}

shadow.css({
position: 'absolute',
top: -10000,
left: -10000,
width: $self.width(),
fontSize: $self.css('fontSize'),
fontFamily: $self.css('fontFamily'),
Expand Down Expand Up @@ -54,9 +56,9 @@
}

shadow.css('width', $self.width());
shadow.html(val + (noFlickerPad === 0 ? '...' : '')); // Append '...' to resize pre-emptively.
shadow.html(val);

var newHeight = Math.max(shadow.height() + noFlickerPad + 1, minHeight);
var newHeight = Math.max(shadow.height() + 1, minHeight) + 1;
if (settings.preGrowCallback !== null) {
newHeight = settings.preGrowCallback($self, shadow, newHeight, minHeight);
}
Expand Down

0 comments on commit eb2ffde

Please sign in to comment.