haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(chat): Don't display chat inside a dialog 

* In order to be able to customize the background of the chat
it had not be displayed inside of a dialog. This also removes
the need to extensively use 'TouchmoveHack' component.

* Adds the ability to change panes (Chat vs Polls) using the keyboard.

* Adds accessibility attributes to panes.
This commit is contained in:
Vlad Piersec 2021-10-21 09:43:01 +03:00 committed by vp8x8
parent b0f8b34d94
commit 9e3084ef48
6 changed files with 155 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
css/_chat.scss
View File

@ -2,34 +2,39 @@
background-color: $chatBackgroundColor;
box-sizing: border-box;
color: #FFF;
display: flex;
flex-direction: column;
height: 100%;
left: -$sidebarWidth;
overflow: hidden;
position: absolute;
top: 0;
width: $sidebarWidth;
z-index: $sideToolbarContainerZ;
/**
* The sidebar (chat) is off-screen when hidden. Move it flush to the left
* side of the window when it should be visible.
*/
&.slideInExt {
left: 0;
@media (max-width: 580px) {
width: 100%;
}
}
.chat-panel {
display: flex;
flex-direction: column;
// extract header + tabs height
height: calc(100% - 102px);
}
.chat-panel-no-tabs {
// extract header height
height: calc(100% - 70px);
}
#chatconversation {
box-sizing: border-box;
flex: 1;
font-size: 10pt;
// extract message input height
height: calc(100% - 68px);
line-height: 20px;
overflow: auto;
padding: 16px;
text-align: left;
width: $sidebarWidth;
word-wrap: break-word;
display: flex;
@ -58,28 +63,6 @@
a:active {
color: black;
}
&::-webkit-scrollbar {
background: #06a5df;
width: 7px;
}
&::-webkit-scrollbar-button {
display: none;
}
&::-webkit-scrollbar-track {
background: black;
}
&::-webkit-scrollbar-track-piece {
background: black;
}
&::-webkit-scrollbar-thumb {
background: #06a5df;
border-radius: 4px;
}
}
#chat-recipient {
@ -319,10 +302,6 @@
text-overflow: ellipsis;
overflow: hidden;
}
@media (max-width: 580px) {
display: none !important;
}
}
.sr-only {

4
css/_polls.scss
View File

@ -238,10 +238,6 @@ ol.poll-result-list {
.polls-pane-content {
height: calc(100% - 102px);
position: relative;
@media (max-width: 580px) {
height: 100%;
}
}
.pane-content{

4
css/_variables.scss
View File

@ -122,7 +122,7 @@ $zindex10: 10;
$reloadZ: 20;
$poweredByZ: 100;
$ringingZ: 300;
$sideToolbarContainerZ: 200;
$sideToolbarContainerZ: 300;
$toolbarZ: 250;
$drawerZ: 351;
$tooltipsZ: 401;
@ -269,4 +269,4 @@ $verySmallScreen: 500px;
* Prejoin / premeeting screen
*/
$prejoinDefaultContentWidth: 336px;
$prejoinDefaultContentWidth: 336px;

277
react/features/chat/components/web/Chat.js
View File

@ -1,5 +1,6 @@
// @flow
import clsx from 'clsx';
import React from 'react';
import { translate } from '../../../base/i18n';
@ -11,14 +12,12 @@ import AbstractChat, {
type Props
} from '../AbstractChat';
import ChatDialog from './ChatDialog';
import Header from './ChatDialogHeader';
import ChatHeader from './ChatHeader';
import ChatInput from './ChatInput';
import DisplayNameForm from './DisplayNameForm';
import KeyboardAvoider from './KeyboardAvoider';
import MessageContainer from './MessageContainer';
import MessageRecipient from './MessageRecipient';
import TouchmoveHack from './TouchmoveHack';
/**
* React Component for holding the chat feature in a side panel that slides in
@ -26,12 +25,6 @@ import TouchmoveHack from './TouchmoveHack';
*/
class Chat extends AbstractChat<Props> {
/**
* Whether or not the {@code Chat} component is off-screen, having finished
* its hiding animation.
*/
_isExited: boolean;
/**
* Reference to the React Component for displaying chat messages. Used for
* scrolling to the end of the chat messages.
@ -47,13 +40,13 @@ class Chat extends AbstractChat<Props> {
constructor(props: Props) {
super(props);
this._isExited = true;
this._messageContainerRef = React.createRef();
// Bind event handlers so they are only bound once for every instance.
this._renderPanelContent = this._renderPanelContent.bind(this);
this._onChatTabKeyDown = this._onChatTabKeyDown.bind(this);
this._onChatInputResize = this._onChatInputResize.bind(this);
this._onEscClick = this._onEscClick.bind(this);
this._onPollsTabKeyDown = this._onPollsTabKeyDown.bind(this);
this._onToggleChat = this._onToggleChat.bind(this);
}
@ -78,21 +71,6 @@ class Chat extends AbstractChat<Props> {
this._scrollMessageContainerToBottom(false);
}
}
_onEscClick: (KeyboardEvent) => void;
/**
* Click handler for the chat sidenav.
*
* @param {KeyboardEvent} event - Esc key click to close the popup.
* @returns {void}
*/
_onEscClick(event) {
if (event.key === 'Escape' && this.props._isOpen) {
event.preventDefault();
event.stopPropagation();
this._onToggleChat();
}
}
/**
* Implements React's {@link Component#render()}.
@ -101,10 +79,22 @@ class Chat extends AbstractChat<Props> {
* @returns {ReactElement}
*/
render() {
const { _isOpen, _isPollsEnabled, _showNamePrompt } = this.props;
return (
<>
{ this._renderPanelContent() }
</>
_isOpen ? <div
className = 'sideToolbarContainer'
id = 'sideToolbarContainer'
onKeyDown = { this._onEscClick } >
<ChatHeader
className = 'chat-header'
id = 'chat-header'
isPollsEnabled = { _isPollsEnabled }
onCancel = { this._onToggleChat } />
{ _showNamePrompt
? <DisplayNameForm isPollsEnabled = { _isPollsEnabled } />
: this._renderChat() }
</div> : null
);
}
@ -121,6 +111,54 @@ class Chat extends AbstractChat<Props> {
this._messageContainerRef.current.maybeUpdateBottomScroll();
}
_onChatTabKeyDown: (KeyboardEvent) => void;
/**
* Key press handler for the chat tab.
*
* @param {KeyboardEvent} event - The event.
* @returns {void}
*/
_onChatTabKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
this._onToggleChatTab();
}
}
_onEscClick: (KeyboardEvent) => void;
/**
* Click handler for the chat sidenav.
*
* @param {KeyboardEvent} event - Esc key click to close the popup.
* @returns {void}
*/
_onEscClick(event) {
if (event.key === 'Escape' && this.props._isOpen) {
event.preventDefault();
event.stopPropagation();
this._onToggleChat();
}
}
_onPollsTabKeyDown: (KeyboardEvent) => void;
/**
* Key press handler for the polls tab.
*
* @param {KeyboardEvent} event - The event.
* @returns {void}
*/
_onPollsTabKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
this._onTogglePollsTab();
}
}
/**
* Returns a React Element for showing chat messages and a form to send new
* chat messages.
@ -129,12 +167,18 @@ class Chat extends AbstractChat<Props> {
* @returns {ReactElement}
*/
_renderChat() {
const { _isPollsEnabled, _isPollsTabFocused } = this.props;
if (this.props._isPollsTabFocused) {
if (_isPollsTabFocused) {
return (
<>
{ this.props._isPollsEnabled && this._renderTabs()}
<TouchmoveHack isModal = { true }><PollsPane /></TouchmoveHack>
{_isPollsEnabled && this._renderTabs()}
<div
aria-labelledby = 'polls-tab'
id = 'polls-panel'
role = 'tabpanel'>
<PollsPane />
</div>
<KeyboardAvoider />
</>
);
@ -142,19 +186,21 @@ class Chat extends AbstractChat<Props> {
return (
<>
{this.props._isPollsEnabled && this._renderTabs()}
<TouchmoveHack
flex = { true }
isModal = { this.props._isModal }>
{_isPollsEnabled && this._renderTabs()}
<div
aria-labelledby = 'chat-tab'
className = { clsx('chat-panel', !_isPollsEnabled && 'chat-panel-no-tabs') }
id = 'chat-panel'
role = 'tabpanel'>
<MessageContainer
messages = { this.props._messages }
ref = { this._messageContainerRef } />
</TouchmoveHack>
<MessageRecipient />
<ChatInput
onResize = { this._onChatInputResize }
onSend = { this._onSendMessage } />
<KeyboardAvoider />
<MessageRecipient />
<ChatInput
onResize = { this._onChatInputResize }
onSend = { this._onSendMessage } />
<KeyboardAvoider />
</div>
</>
);
}
@ -166,107 +212,58 @@ class Chat extends AbstractChat<Props> {
* @returns {ReactElement}
*/
_renderTabs() {
return (
<div className = { 'chat-tabs-container' }>
<div
className = { `chat-tab ${
this.props._isPollsTabFocused ? '' : 'chat-tab-focus'
}` }
onClick = { this._onToggleChatTab }>
<span className = { 'chat-tab-title' }>
{this.props.t('chat.tabs.chat')}
</span>
{this.props._isPollsTabFocused
&& this.props._nbUnreadMessages > 0 && (
<span className = { 'chat-tab-badge' }>
{this.props._nbUnreadMessages}
</span>
)}
</div>
<div
className = { `chat-tab ${
this.props._isPollsTabFocused ? 'chat-tab-focus' : ''
}` }
onClick = { this._onTogglePollsTab }>
<span className = { 'chat-tab-title' }>
{this.props.t('chat.tabs.polls')}
</span>
{!this.props._isPollsTabFocused
&& this.props._nbUnreadPolls > 0 && (
<span className = { 'chat-tab-badge' }>
{this.props._nbUnreadPolls}
</span>
)}
</div>
</div>
);
}
/**
* Instantiates a React Element to display at the top of {@code Chat} to
* close {@code Chat}.
*
* @private
* @returns {ReactElement}
*/
_renderChatHeader() {
return (
<Header
className = 'chat-header'
id = 'chat-header'
isPollsEnabled = { this.props._isPollsEnabled }
onCancel = { this._onToggleChat } />
);
}
_renderPanelContent: () => React$Node | null;
/**
* Renders the contents of the chat panel.
*
* @private
* @returns {ReactElement | null}
*/
_renderPanelContent() {
const { _isModal, _isOpen, _showNamePrompt } = this.props;
let ComponentToRender = null;
if (_isOpen) {
if (_isModal) {
ComponentToRender = (
<ChatDialog isPollsEnabled = { this.props._isPollsEnabled }>
{ _showNamePrompt
? <DisplayNameForm isPollsEnabled = { this.props._isPollsEnabled } />
: this._renderChat() }
</ChatDialog>
);
} else {
ComponentToRender = (
<>
{ this._renderChatHeader() }
{ _showNamePrompt
? <DisplayNameForm isPollsEnabled = { this.props._isPollsEnabled } />
: this._renderChat() }
</>
);
}
}
let className = '';
if (_isOpen) {
className = 'slideInExt';
} else if (this._isExited) {
className = 'invisible';
}
const { _isPollsEnabled, _isPollsTabFocused, _nbUnreadMessages, _nbUnreadPolls, t } = this.props;
return (
<div
aria-haspopup = 'true'
className = { `sideToolbarContainer ${className}` }
id = 'sideToolbarContainer'
onKeyDown = { this._onEscClick } >
{ ComponentToRender }
ariaLabel = { t(_isPollsEnabled ? 'chat.titleWithPolls' : 'chat.title') }
className = { 'chat-tabs-container' }
role = 'tablist'>
<div
aria-controls = 'chat-panel'
aria-label = { t('chat.tabs.chat') }
aria-selected = { !_isPollsTabFocused }
className = { `chat-tab ${
_isPollsTabFocused ? '' : 'chat-tab-focus'
}` }
id = 'chat-tab'
onClick = { this._onToggleChatTab }
onKeyDown = { this._onChatTabKeyDown }
role = 'tab'
tabIndex = '0'>
<span
className = { 'chat-tab-title' }>
{t('chat.tabs.chat')}
</span>
{this.props._isPollsTabFocused
&& _nbUnreadMessages > 0 && (
<span className = { 'chat-tab-badge' }>
{_nbUnreadMessages}
</span>
)}
</div>
<div
aria-controls = 'polls-panel'
aria-label = { t('chat.tabs.polls') }
aria-selected = { _isPollsTabFocused }
className = { `chat-tab ${
_isPollsTabFocused ? 'chat-tab-focus' : ''
}` }
id = 'polls-tab'
onClick = { this._onTogglePollsTab }
onKeyDown = { this._onPollsTabKeyDown }
role = 'tab'
tabIndex = '0'>
<span className = { 'chat-tab-title' }>
{t('chat.tabs.polls')}
</span>
{!_isPollsTabFocused
&& this.props._nbUnreadPolls > 0 && (
<span className = { 'chat-tab-badge' }>
{_nbUnreadPolls}
</span>
)}
</div>
</div>
);
}

43
react/features/chat/components/web/ChatDialog.js
View File

@ -1,43 +0,0 @@
// @flow
import React from 'react';
import { Dialog } from '../../../base/dialog';
import Header from './ChatDialogHeader';
type Props = {
/**
* Children of the component.
*/
children: React$Node,
/**
* Whether the polls feature is enabled or not.
*/
isPollsEnabled: boolean
}
/**
* Component that renders the content of the chat in a modal.
*
* @returns {React$Element<any>}
*/
function ChatDialog({ children, isPollsEnabled }: Props) {
return (
<Dialog
customHeader = { Header }
disableEnter = { true }
disableFooter = { true }
hideCancelButton = { true }
submitDisabled = { true }
titleKey = { isPollsEnabled ? 'chat.titleWithPolls' : 'chat.title' } >
<div className = 'chat-dialog'>
{children}
</div>
</Dialog>
);
}
export default ChatDialog;

0
react/features/chat/components/web/ChatDialogHeader.js → react/features/chat/components/web/ChatHeader.js
View File