From 7dabfc21b4f0d2d5e4234b50c381d0bc1d2172a4 Mon Sep 17 00:00:00 2001 From: Mihai-Andrei Uscat <52234168+muscat1@users.noreply.github.com> Date: Thu, 18 Mar 2021 09:08:34 +0200 Subject: [PATCH] feat(Chat): Revamp design. * ensure keyboard stays open when sending messages on mobile web. --- css/_atlaskit_overrides.scss | 11 +++ css/_chat.scss | 78 +++++++++++-------- css/_variables.scss | 8 +- react/features/base/icons/svg/index.js | 1 + react/features/base/icons/svg/smile.svg | 3 + .../chat/components/web/ChatDialogHeader.js | 11 +-- .../features/chat/components/web/ChatInput.js | 24 +++--- react/features/chat/constants.js | 2 +- react/features/chat/middleware.js | 29 +++---- 9 files changed, 91 insertions(+), 76 deletions(-) create mode 100644 react/features/base/icons/svg/smile.svg diff --git a/css/_atlaskit_overrides.scss b/css/_atlaskit_overrides.scss index 60a0dc575..f1172512e 100644 --- a/css/_atlaskit_overrides.scss +++ b/css/_atlaskit_overrides.scss @@ -123,6 +123,17 @@ } } +// Override Atlaskit inline style for the modal background. +// Important is unfortunately needed for that. +.shift-right .focus-lock [role="dialog"][style] { + background-color: $chatBackgroundColor !important; +} + +// Remove Atlaskit padding from the chat dialog. +.shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) { + padding: 0; +} + div.Tooltip { color: #fff; font-size: 12px; diff --git a/css/_chat.scss b/css/_chat.scss index 2e5784247..6ab54357a 100644 --- a/css/_chat.scss +++ b/css/_chat.scss @@ -1,5 +1,5 @@ #sideToolbarContainer { - background-color: $newToolbarBackgroundColor; + background-color: $chatBackgroundColor; box-sizing: border-box; color: #FFF; display: flex; @@ -105,13 +105,12 @@ } .chat-header { - background-color: $chatHeaderBackgroundColor; height: 70px; position: relative; width: 100%; z-index: 1; display: flex; - justify-content: space-between; + justify-content: flex-end; padding: 16px; align-items: center; box-sizing: border-box; @@ -123,23 +122,31 @@ .jitsi-icon { cursor: pointer; } - - .jitsi-icon > svg { - fill: #A4B8D1; - } } .chat-input-container { - padding: 0 16px 24px; + padding: 0 16px 16px; &.populated { #chat-input { - border: 1px solid #619CF4; + &:focus-within { + border: 1px solid #619CF4; + } .send-button { background: #1B67EC; cursor: pointer; + @media (hover: hover) and (pointer: fine) { + &:hover { + background: #3D82FB; + } + } + + &:active { + background: #0852D4; + } + path { fill: #fff; } @@ -151,7 +158,7 @@ #chat-input { border: 1px solid $chatInputSeparatorColor; display: flex; - padding: 5px 10px; + padding: 4px; border-radius: 3px; * { @@ -177,10 +184,20 @@ } } -.mobile-browser { - .send-button { - height: 48px; - width: 48px; +.smiley-button { + display: flex; + align-items: center; + justify-content: center; + height: 40px; + width: 40px; + border-radius: 3px; +} + +#chat-input .smiley-button { + @media (hover: hover) and (pointer: fine) { + &:hover { + background-color: #484A4F; + } } } @@ -263,8 +280,8 @@ } .display-name { - font-size: 13px; - font-weight: bold; + font-size: 12px; + font-weight: 600; margin-bottom: 5px; white-space: nowrap; text-overflow: ellipsis; @@ -314,12 +331,16 @@ } .messagecontent { - margin: 5px 10px; + margin: 8px; max-width: 100%; overflow: hidden; } } +.timestamp { + color: #757575; +} + .smiley { font-size: 14pt; } @@ -355,7 +376,9 @@ max-height: 0; overflow: hidden; position: absolute; - width: $sidebarWidth; + width: calc(#{$sidebarWidth} - 32px); + margin-bottom: 5px; + margin-left: -5px; /** * CSS transitions do not apply for auto dimensions. So to produce the css @@ -370,9 +393,8 @@ } #smileysContainer { - background-color: $newToolbarBackgroundColor; - border-bottom: 1px solid; - border-top: 1px solid; + background-color: $chatBackgroundColor; + border-top: 1px solid $chatInputSeparatorColor; } } @@ -478,9 +500,9 @@ &-header { display: flex; - justify-content: space-between; + justify-content: flex-end; align-items: center; - margin: 16px 16px 24px; + margin: 16px; width: calc(100% - 32px); box-sizing: border-box; color: #fff; @@ -491,19 +513,11 @@ .jitsi-icon { cursor: pointer; } - - .jitsi-icon > svg { - fill: #A4B8D1; - } } #chatconversation { width: 100%; } - - .chat-input-container { - padding: 0 0 24px; - } } .touchmove-hack { @@ -520,6 +534,6 @@ place-items: center; height: 48px; width: 48px; - background: #2a3a4b; + background: #36383C; border-radius: 3px; } diff --git a/css/_variables.scss b/css/_variables.scss index 7b630dd45..409b8eae0 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -91,12 +91,12 @@ $modalTextColor: #333; * Chat */ $chatActionsSeparatorColor: rgb(173, 105, 112); -$chatHeaderBackgroundColor: rgba(42, 58, 75, 0.9); +$chatBackgroundColor: #131519; $chatInputSeparatorColor: #A4B8D1; -$chatLocalMessageBackgroundColor: rgb(4, 98, 178); +$chatLocalMessageBackgroundColor: #484A4F; $chatPrivateMessageBackgroundColor: rgb(153, 69, 77); -$chatRemoteMessageBackgroundColor: rgb(86, 101, 114); -$sidebarWidth: 375px; +$chatRemoteMessageBackgroundColor: #242528; +$sidebarWidth: 315px; /** * Misc. diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js index 713997e54..4b27fd468 100644 --- a/react/features/base/icons/svg/index.js +++ b/react/features/base/icons/svg/index.js @@ -102,6 +102,7 @@ export { default as IconShare } from './share.svg'; export { default as IconShareDesktop } from './share-desktop.svg'; export { default as IconShareDoc } from './share-doc.svg'; export { default as IconShareVideo } from './shared-video.svg'; +export { default as IconSmile } from './smile.svg'; export { default as IconSwitchCamera } from './switch-camera.svg'; export { default as IconTileView } from './tiles-many.svg'; export { default as IconToggleRecording } from './camera-take-picture.svg'; diff --git a/react/features/base/icons/svg/smile.svg b/react/features/base/icons/svg/smile.svg new file mode 100644 index 000000000..87af6370e --- /dev/null +++ b/react/features/base/icons/svg/smile.svg @@ -0,0 +1,3 @@ + + + diff --git a/react/features/chat/components/web/ChatDialogHeader.js b/react/features/chat/components/web/ChatDialogHeader.js index 10c935b7f..41286c271 100644 --- a/react/features/chat/components/web/ChatDialogHeader.js +++ b/react/features/chat/components/web/ChatDialogHeader.js @@ -2,7 +2,6 @@ import React from 'react'; -import { translate } from '../../../base/i18n'; import { Icon, IconClose } from '../../../base/icons'; import { connect } from '../../../base/redux'; import { toggleChat } from '../../actions.web'; @@ -18,11 +17,6 @@ type Props = { * An optional class name. */ className: string, - - /** - * Invoked to obtain translated strings. - */ - t: Function }; /** @@ -30,11 +24,10 @@ type Props = { * * @returns {React$Element} */ -function Header({ onCancel, className, t }: Props) { +function Header({ onCancel, className }: Props) { return (
- { t('chat.title') } @@ -44,4 +37,4 @@ function Header({ onCancel, className, t }: Props) { const mapDispatchToProps = { onCancel: toggleChat }; -export default translate(connect(null, mapDispatchToProps)(Header)); +export default connect(null, mapDispatchToProps)(Header); diff --git a/react/features/chat/components/web/ChatInput.js b/react/features/chat/components/web/ChatInput.js index 3252882d7..b16d9d553 100644 --- a/react/features/chat/components/web/ChatInput.js +++ b/react/features/chat/components/web/ChatInput.js @@ -1,12 +1,12 @@ // @flow import React, { Component } from 'react'; -import Emoji from 'react-emoji-render'; import TextareaAutosize from 'react-textarea-autosize'; import type { Dispatch } from 'redux'; +import { isMobileBrowser } from '../../../base/environment/utils'; import { translate } from '../../../base/i18n'; -import { Icon, IconPlane } from '../../../base/icons'; +import { Icon, IconPlane, IconSmile } from '../../../base/icons'; import { connect } from '../../../base/redux'; import SmileysPanel from './SmileysPanel'; @@ -93,11 +93,10 @@ class ChatInput extends Component { * @inheritdoc */ componentDidMount() { - /** - * HTML Textareas do not support autofocus. Simulate autofocus by - * manually focusing. - */ - this._focus(); + if (isMobileBrowser()) { + // Ensure textarea is not focused when opening chat on mobile browser. + this._textArea && this._textArea.blur(); + } } /** @@ -116,9 +115,11 @@ class ChatInput extends Component {
- +
+ +
@@ -174,6 +175,9 @@ class ChatInput extends Component { this.props.onSend(trimmed); this.setState({ message: '' }); + + // Keep the textarea in focus when sending messages via submit button. + this._focus(); } } diff --git a/react/features/chat/constants.js b/react/features/chat/constants.js index 321f90182..775648888 100644 --- a/react/features/chat/constants.js +++ b/react/features/chat/constants.js @@ -5,7 +5,7 @@ export const CHAT_VIEW_MODAL_ID = 'chatView'; /** * The size of the chat. */ -export const CHAT_SIZE = 375; +export const CHAT_SIZE = 315; /** * The audio ID of the audio element for which the {@link playAudio} action is diff --git a/react/features/chat/middleware.js b/react/features/chat/middleware.js index f1929f01f..553da4446 100644 --- a/react/features/chat/middleware.js +++ b/react/features/chat/middleware.js @@ -81,14 +81,16 @@ MiddlewareRegistry.register(store => next => action => { break; case OPEN_CHAT: - if (localParticipant.name) { - dispatch(setActiveModalId(CHAT_VIEW_MODAL_ID)); - _maybeFocusField(); - } else { - dispatch(openDisplayNamePrompt(() => { + if (navigator.product === 'ReactNative') { + if (localParticipant.name) { dispatch(setActiveModalId(CHAT_VIEW_MODAL_ID)); - _maybeFocusField(); - })); + } else { + dispatch(openDisplayNamePrompt(() => { + dispatch(setActiveModalId(CHAT_VIEW_MODAL_ID)); + })); + } + } else { + dispatch(setActiveModalId(CHAT_VIEW_MODAL_ID)); } unreadCount = 0; @@ -291,19 +293,6 @@ function _handleReceivedMessage({ dispatch, getState }, { id, message, privateMe } } -/** - * Focuses the chat text field on web after the message recipient was updated, if needed. - * - * @returns {void} - */ -function _maybeFocusField() { - if (navigator.product !== 'ReactNative') { - const textField = document.getElementById('usermsg'); - - textField && textField.focus(); - } -} - /** * Persists the sent private messages as if they were received over the muc. *