apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/12214/head jitsi-meet_7807
Robert Pintilii 2 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 40
      css/_chat.scss
  2. 2
      css/_polls.scss
  3. 117
      react/features/base/ui/components/web/Tabs.tsx
  4. 82
      react/features/chat/components/web/Chat.js
  5. 5
      react/features/chat/constants.ts

40
css/_chat.scss
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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'
};

Write Preview
Loading…
Cancel
Save