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

feat(ui-components) Add Tabs component (#12199)

This commit is contained in:
Robert Pintilii 2022-09-21 14:57:59 +03:00 committed by GitHub
parent dd4d49a591
commit 779ecd6da6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 156 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
css/_chat.scss
View File

@ -22,7 +22,7 @@
display: flex;
flex-direction: column;
// extract header + tabs height
height: calc(100% - 102px);
height: calc(100% - 119px);
}
.chat-panel-no-tabs {
@ -531,41 +531,3 @@
background: #36383C;
border-radius: 3px;
}
.chat-tabs-container {
width: 100%;
border-bottom: thin solid #292929;
display: flex;
justify-content: space-around;
}
.chat-tab {
font-size: 1.2em;
padding-bottom: 0.5em;
width: 50%;
text-align: center;
color: #8B8B8B;
cursor: pointer;
}
.chat-tab-focus {
border-bottom-style: solid;
color: #FFF;
}
.chat-tab-title {
margin-right: 8px;
}
.chat-tab-badge {
background-color: #165ecc;
border-radius: 50%;
box-sizing: border-box;
font-weight: 700;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
vertical-align: middle;
padding: 0 4px;
color: #FFF;
}

2
css/_polls.scss
View File

@ -310,7 +310,7 @@ ol.poll-result-list {
}
#polls-panel {
height: calc(100% - 102px);
height: calc(100% - 119px);
}
.poll-container {

117
react/features/base/ui/components/web/Tabs.tsx Normal file
View File

@ -0,0 +1,117 @@
import { Theme } from '@mui/material';
import React, { useCallback } from 'react';
import { makeStyles } from 'tss-react/mui';
import { isMobileBrowser } from '../../../environment/utils';
import { withPixelLineHeight } from '../../../styles/functions.web';
interface TabProps {
accessibilityLabel: string;
onChange: (id: string) => void;
selected: string;
tabs: Array<{
accessibilityLabel: string;
countBadge?: number;
disabled?: boolean;
id: string;
label: string;
}>;
}
const useStyles = makeStyles()((theme: Theme) => {
return {
container: {
display: 'flex'
},
tab: {
...withPixelLineHeight(theme.typography.bodyShortBold),
color: theme.palette.text02,
flex: 1,
padding: '14px',
background: 'none',
border: 0,
appearance: 'none',
borderBottom: `2px solid ${theme.palette.ui05}`,
transition: 'color, border-color 0.2s',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 0,
'&:hover': {
color: theme.palette.text01,
borderColor: theme.palette.ui10
},
'&:focus': {
outline: 0,
boxShadow: `0px 0px 0px 2px ${theme.palette.focus01}`,
border: 0,
color: theme.palette.text01
},
'&.selected': {
color: theme.palette.text01,
borderColor: theme.palette.action01
},
'&:disabled': {
color: theme.palette.text03,
borderColor: theme.palette.ui05
},
'&.is-mobile': {
...withPixelLineHeight(theme.typography.bodyShortBoldLarge)
}
},
badge: {
...withPixelLineHeight(theme.typography.labelBold),
color: theme.palette.text04,
padding: `0 ${theme.spacing(1)}`,
borderRadius: '100%',
backgroundColor: theme.palette.warning01,
marginLeft: theme.spacing(2)
}
};
});
const Tabs = ({
tabs,
onChange,
selected,
accessibilityLabel
}: TabProps) => {
const { classes, cx } = useStyles();
const isMobile = isMobileBrowser();
const handleChange = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
onChange(e.currentTarget.id);
}, []);
return (
<div
aria-label = { accessibilityLabel }
className = { classes.container }
role = 'tablist'>
{tabs.map(tab => (
<button
aria-label = { tab.accessibilityLabel }
aria-selected = { selected === tab.id }
className = { cx(classes.tab, selected === tab.id && 'selected', isMobile && 'is-mobile') }
disabled = { tab.disabled }
id = { tab.id }
key = { tab.id }
onClick = { handleChange }
role = 'tab'>
{tab.label}
{tab.countBadge && <span className = { classes.badge }>{tab.countBadge}</span>}
</button>
))}
</div>
);
};
export default Tabs;

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

@ -5,8 +5,10 @@ import React from 'react';
import { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux';
import Tabs from '../../../base/ui/components/web/Tabs';
import { PollsPane } from '../../../polls/components';
import { toggleChat } from '../../actions.web';
import { CHAT_TABS } from '../../constants';
import AbstractChat, {
_mapStateToProps,
type Props
@ -47,6 +49,7 @@ class Chat extends AbstractChat<Props> {
this._onEscClick = this._onEscClick.bind(this);
this._onPollsTabKeyDown = this._onPollsTabKeyDown.bind(this);
this._onToggleChat = this._onToggleChat.bind(this);
this._onChangeTab = this._onChangeTab.bind(this);
}
/**
@ -138,7 +141,7 @@ class Chat extends AbstractChat<Props> {
<>
{ _isPollsEnabled && this._renderTabs() }
<div
aria-labelledby = 'polls-tab'
aria-labelledby = { CHAT_TABS.POLLS }
id = 'polls-panel'
role = 'tabpanel'>
<PollsPane />
@ -152,7 +155,7 @@ class Chat extends AbstractChat<Props> {
<>
{ _isPollsEnabled && this._renderTabs() }
<div
aria-labelledby = 'chat-tab'
aria-labelledby = { CHAT_TABS.CHAT }
className = { clsx('chat-panel', !_isPollsEnabled && 'chat-panel-no-tabs') }
id = 'chat-panel'
role = 'tabpanel'>
@ -178,54 +181,22 @@ class Chat extends AbstractChat<Props> {
const { _isPollsEnabled, _isPollsTabFocused, _nbUnreadMessages, _nbUnreadPolls, t } = this.props;
return (
<div
aria-label = { 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>
<Tabs
accessibilityLabel = { t(_isPollsEnabled ? 'chat.titleWithPolls' : 'chat.title') }
onChange = { this._onChangeTab }
selected = { _isPollsTabFocused ? CHAT_TABS.POLLS : CHAT_TABS.CHAT }
tabs = { [ {
accessibilityLabel: t('chat.tabs.chat'),
countBadge: _isPollsTabFocused && _nbUnreadMessages > 0 ? _nbUnreadMessages : undefined,
id: CHAT_TABS.CHAT,
label: t('chat.tabs.chat')
}, {
accessibilityLabel: t('chat.tabs.polls'),
countBadge: !_isPollsTabFocused && _nbUnreadPolls > 0 ? _nbUnreadPolls : undefined,
id: CHAT_TABS.POLLS,
label: t('chat.tabs.polls')
}
] } />
);
}
@ -243,6 +214,17 @@ class Chat extends AbstractChat<Props> {
}
_onTogglePollsTab: () => void;
_onToggleChatTab: () => void;
_onChangeTab: (string) => void;
/**
* Change selected tab.
*
* @param {string} id - Id of the clicked tab.
* @returns {void}
*/
_onChangeTab(id) {
id === CHAT_TABS.CHAT ? this._onToggleChatTab() : this._onTogglePollsTab();
}
}
export default translate(connect(_mapStateToProps)(Chat));

5
react/features/chat/constants.ts
View File

@ -35,3 +35,8 @@ export const SMALL_WIDTH_THRESHOLD = 580;
* Lobby message type.
*/
export const LOBBY_CHAT_MESSAGE = 'LOBBY_CHAT_MESSAGE';
export const CHAT_TABS = {
POLLS: 'polls-tab',
CHAT: 'chat-tab'
};