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

feat(ui) update AtlasKit components

This commit is contained in:
Steffen Kolmer 2021-01-14 17:12:08 +01:00 committed by Saúl Ibarra Corretgé
parent a9bb8e5e81
commit ef7d425859
42 changed files with 2003 additions and 1963 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
css/_atlaskit_overrides.scss
View File

@ -2,34 +2,27 @@
* Move the @atlaskit/flag container up a little bit so it does not cover the
* toolbar with the first notification.
*/
.jIMojv{
.atlaskit-portal > #notifications-container {
bottom: calc(#{$newToolbarSizeWithPadding}) !important;
}
/**
* Disable the slide-in animation for @atlaskit/flag due to the animation
* repeating for each queued flag once it becomes the top flag.
*/
.mIBKA:first-child {
animation: cbfRuT 0s !important;
-webkit-animation: cbfRuT 0s !important;
}
.modal-dialog-form {
/**
* Update the @atlaskit/dropdown-menu trigger wrapper to make sure it looks
* click-able.
*/
.cjJUnw {
cursor: pointer;
}
/**
* Override @atlaskit/dropdown-menu styling when in a modal because the
* dropdown backgrounds clash with the modal backgrounds.
*/
.cksvax[data-role=droplistContent] {
border: 1px solid #455166;
.dropdown-menu div[style*="transform"] {
outline: 1px solid #455166;
}
}
/**
* Override @atlaskit/modal-dialog header styling
*/
.atlaskit-portal [role="dialog"] header {
.jitsi-icon svg {
fill: #B8C7E0;
cursor: pointer;
}
}
@ -37,30 +30,15 @@
* Override @atlaskit/theme styling for the top toolbar so it displays over
* the video thumbnail while obscuring as little as possible.
*/
.videocontainer .tOoji {
.videocontainer__toptoolbar > div > div {
background: none;
}
/**
* Override @atlaskit/InlineDialog styling for the overflowmenu so it displays
* with the correct height.
*/
.toolbox-button-wth-dialog .eYJELv {
max-height: initial;
}
/**
* Override @atlaskit/InlineDialog styling for the overflowmenu so it displays
* a scrollable list of elements at small screen widths.
*/
.sc-eNQAEJ {
overflow-y: auto;
}
/**
* Keep overflow menu within screen vertical bounds and make it scrollable.
*/
.toolbox-button-wth-dialog .sc-ckVGcZ.fdAqDG > :first-child {
max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 16px);
.toolbox-button-wth-dialog > div:nth-child(2) {
max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px);
overflow-y: auto;
}

2
css/_audio-preview.scss
View File

@ -144,7 +144,7 @@
}
// Override @atlaskit/InlineDialog container which is made with styled components
& > div > div:nth-child(2) > div > div {
& > div:nth-child(2) {
outline: none;
padding: 0;
}

12
css/_base.scss
View File

@ -45,20 +45,12 @@ body {
* pad the modal container in order for the modals to be centered
* while also taking the chat size into consideration.
*/
@media (min-width: 480px + $sidebarWidth) {
.shift-right [class^="Modal__FillScreen"] {
@media (min-width: 581px) {
.shift-right .atlaskit-portal > div:not(.Tooltip) {
padding-left: $sidebarWidth;
}
}
/**
* Similarly, we offset the notifications when the chat is open by
* padding the container.
*/
.shift-right [class^="styledFlagGroup-"] {
padding-left: $sidebarWidth;
}
.jitsi-icon svg {
fill: white;
}

32
css/_chat.scss
View File

@ -103,25 +103,19 @@
position: relative;
width: 100%;
z-index: 1;
.chat-close {
align-items: center;
bottom: 8px;
color: white;
cursor: pointer;
display: flex;
font-size: 18px;
height: 40px;
justify-content: center;
line-height: 15px;
padding: 4px;
position: absolute;
right: 5px;
width: 40px;
justify-content: space-between;
padding: 16px;
align-items: center;
box-sizing: border-box;
color: #fff;
font-weight: 600;
font-size: 24px;
line-height: 32px;
&:hover {
color: rgba(255, 255, 255, 0.8);
}
.jitsi-icon > svg {
cursor: pointer;
fill: #A4B8D1;
}
}
@ -184,6 +178,10 @@
text-overflow: ellipsis;
overflow: hidden;
}
@media (max-width: 580px) {
display: none !important;
}
}
.chatmessage {

2
css/_country-picker.scss
View File

@ -69,7 +69,7 @@
}
// Override @Atlaskit/inline-dialog styles
.cpick-container > div > div:nth-child(2) > div > div {
.cpick-container > div:nth-child(2) {
outline: none;
padding: 8px 0 0 0;
}

2
css/_prejoin.scss
View File

@ -129,7 +129,7 @@
}
&-dropdown-container {
& > div > div:nth-child(2) > div > div {
& > div:nth-child(2) {
background: #fff;
padding: 0;
}

8
css/_responsive.scss
View File

@ -167,22 +167,22 @@
}
@media (min-width: 480px) and (max-width: 580px) {
.shift-right [class^="Modal__PositionerAbsolute"] {
.shift-right .focus-lock > div > div {
@include full-size-modal-positioner();
}
.shift-right [class^="Modal__Dialog-"] {
.shift-right .focus-lock [role="dialog"] {
@include full-size-modal-dialog();
}
}
@media (min-width: 580px) and (max-width: 680px) {
.mobile-browser {
&.shift-right [class^="Modal__PositionerAbsolute"] {
&.shift-right .focus-lock > div > div {
@include full-size-modal-positioner();
}
&.shift-right [class^="Modal__Dialog-"] {
&.shift-right .focus-lock [role="dialog"] {
@include full-size-modal-dialog();
}
}

2
css/_toolbars.scss
View File

@ -42,10 +42,12 @@
display: none;
}
@media (min-width: 581px) {
&.shift-right {
margin-left: $sidebarWidth;
width: calc(100% - #{$sidebarWidth});
}
}
.toolbox-background {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

2
css/_video-preview.scss
View File

@ -63,7 +63,7 @@
}
// Override @atlaskit/InlineDialog container which is made with styled components
& > div > div:nth-child(2) > div > div {
& > div:nth-child(2) {
outline: none;
padding: 0;
}

2
css/_videolayout_default.scss
View File

@ -182,12 +182,14 @@
z-index: $zindex2;
}
@media (min-width: 581px) {
&.shift-right {
&#largeVideoContainer {
margin-left: $sidebarWidth;
width: calc(100% - #{$sidebarWidth});
}
}
}
}
#localVideoWrapper {

2
css/filmstrip/_tile_view.scss
View File

@ -47,6 +47,7 @@
width: 100%;
z-index: $filmstripVideosZ;
@media (min-width: 581px) {
&.shift-right {
margin-left: $sidebarWidth;
width: calc(100% - #{$sidebarWidth});
@ -56,6 +57,7 @@
}
}
}
}
/**
* Regardless of the user setting, do not let the filmstrip be in a hidden

2
css/modals/device-selection/_device-selection.scss
View File

@ -39,7 +39,7 @@
.device-selector-trigger-text {
overflow: hidden;
margin-left: 8px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

4
css/modals/settings/_settings.scss
View File

@ -23,6 +23,10 @@
padding: 20px 0px 4px 0px;
}
input[type="checkbox"] + svg + span {
color: #9FB0CC;
}
.calendar-tab,
.more-tab,
.profile-edit {

2
modules/UI/videolayout/LargeVideoManager.js
View File

@ -372,7 +372,7 @@ export default class LargeVideoManager {
let widthToUse = this.preferredWidth || window.innerWidth;
const { isOpen } = APP.store.getState()['features/chat'];
if (isOpen) {
if (isOpen && window.innerWidth > 580) {
/**
* If chat state is open, we re-compute the container width
* by subtracting the default width of the chat.

3368
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

40
package.json
View File

@ -15,23 +15,23 @@
"author": "",
"readmeFilename": "README.md",
"dependencies": {
"@atlaskit/button": "10.1.1",
"@atlaskit/checkbox": "5.0.10",
"@atlaskit/dropdown-menu": "6.1.25",
"@atlaskit/field-text": "7.0.19",
"@atlaskit/field-text-area": "4.0.15",
"@atlaskit/flag": "13.0.0",
"@atlaskit/icon": "15.0.3",
"@atlaskit/inline-dialog": "5.3.0",
"@atlaskit/inline-message": "7.0.10",
"@atlaskit/lozenge": "6.2.4",
"@atlaskit/modal-dialog": "8.0.1",
"@atlaskit/multi-select": "11.0.13",
"@atlaskit/spinner": "9.0.13",
"@atlaskit/tabs": "8.0.11",
"@atlaskit/theme": "7.0.2",
"@atlaskit/toggle": "5.0.14",
"@atlaskit/tooltip": "12.1.13",
"@atlaskit/button": "15.1.4",
"@atlaskit/checkbox": "12.0.0",
"@atlaskit/dropdown-menu": "10.1.2",
"@atlaskit/field-text": "11.0.4",
"@atlaskit/field-text-area": "8.0.4",
"@atlaskit/flag": "14.1.0",
"@atlaskit/icon": "21.2.0",
"@atlaskit/inline-dialog": "13.0.9",
"@atlaskit/inline-message": "11.0.8",
"@atlaskit/lozenge": "10.1.1",
"@atlaskit/modal-dialog": "11.2.4",
"@atlaskit/multi-select": "15.0.5",
"@atlaskit/spinner": "15.0.6",
"@atlaskit/tabs": "12.1.2",
"@atlaskit/theme": "11.0.2",
"@atlaskit/toggle": "12.0.3",
"@atlaskit/tooltip": "17.1.2",
"@jitsi/js-utils": "1.0.5",
"@microsoft/microsoft-graph-client": "1.1.0",
"@react-native-async-storage/async-storage": "1.13.2",
@ -49,11 +49,11 @@
"i18next": "17.0.6",
"i18next-browser-languagedetector": "3.0.1",
"i18next-xhr-backend": "3.0.0",
"jQuery-Impromptu": "github:trentrichardson/jQuery-Impromptu#v6.0.0",
"jitsi-meet-logger": "github:jitsi/jitsi-meet-logger#v1.0.0",
"jquery": "3.5.1",
"jquery-contextmenu": "2.4.5",
"jquery-i18next": "1.2.1",
"jQuery-Impromptu": "github:trentrichardson/jQuery-Impromptu#v6.0.0",
"js-md5": "0.6.1",
"jwt-decode": "2.2.0",
"lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#be18ff34bedf38c7475fe4953074c7959000e15f",
@ -64,8 +64,8 @@
"olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
"pixelmatch": "5.1.0",
"punycode": "2.1.1",
"react": "16.9",
"react-dom": "16.9",
"react": "16.12",
"react-dom": "16.12",
"react-emoji-render": "1.2.4",
"react-i18next": "10.11.4",
"react-linkify": "1.0.0-alpha",

90
react/features/base/dialog/components/web/ModalHeader.js Normal file
View File

@ -0,0 +1,90 @@
// @flow
/* eslint-disable react/no-multi-comp */
import ErrorIcon from '@atlaskit/icon/glyph/error';
import WarningIcon from '@atlaskit/icon/glyph/warning';
import {
Header,
Title,
titleIconWrapperStyles,
TitleText
} from '@atlaskit/modal-dialog/dist/es2019/styled/Content';
import React from 'react';
import { Icon, IconClose } from '../../../icons';
const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning' }) => {
if (!appearance) {
return null;
}
const IconSymbol = appearance === 'danger' ? ErrorIcon : WarningIcon;
return (
<span css = { titleIconWrapperStyles(appearance) }>
<IconSymbol label = { `${appearance} icon` } />
</span>
);
};
type Props = {
id: string,
appearance?: 'danger' | 'warning',
heading: string,
onClose: Function,
showKeyline: boolean,
isHeadingMultiline: boolean,
testId: string,
t: Function
}
/**
* A default header for modal-dialog components
*
* @export
* @class ModalHeader
* @extends {React.Component<Props>}
*/
export default class ModalHeader extends React.Component<Props> {
static defaultProps = {
isHeadingMultiline: true
};
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const {
id,
appearance,
heading,
onClose,
showKeyline,
isHeadingMultiline,
testId
} = this.props;
if (!heading) {
return null;
}
return (
<Header showKeyline = { showKeyline }>
<Title>
<TitleIcon appearance = { appearance } />
<TitleText
data-testid = { testId && `${testId}-heading` }
id = { id }
isHeadingMultiline = { isHeadingMultiline }>
{heading}
</TitleText>
</Title>
<Icon
onClick = { onClose }
src = { IconClose } />
</Header>
);
}
}

12
react/features/base/dialog/components/web/StatelessDialog.js
View File

@ -1,6 +1,7 @@
// @flow
import Button, { ButtonGroup } from '@atlaskit/button';
import ButtonGroup from '@atlaskit/button/button-group';
import Button from '@atlaskit/button/standard-button';
import Modal, { ModalFooter } from '@atlaskit/modal-dialog';
import _ from 'lodash';
import React, { Component } from 'react';
@ -8,6 +9,8 @@ import React, { Component } from 'react';
import { translate } from '../../../i18n/functions';
import type { DialogProps } from '../../constants';
import ModalHeader from './ModalHeader';
/**
* The ID to be used for the cancel button if enabled.
* @type {string}
@ -127,10 +130,13 @@ class StatelessDialog extends Component<Props> {
<Modal
autoFocus = { true }
components = {{
Header: customHeader
Header: customHeader ? customHeader : props => (
<ModalHeader
{ ...props }
heading = { titleString || t(titleKey) } />
)
}}
footer = { this._renderFooter }
heading = { customHeader ? undefined : titleString || t(titleKey) }
i18n = { this.props.i18n }
onClose = { this._onDialogDismissed }
onDialogDismissed = { this._onDialogDismissed }

25
react/features/base/dialog/components/web/ThemedDialog.js Normal file
View File

@ -0,0 +1,25 @@
import {
Dialog,
FillScreen,
dialogWidth,
dialogHeight,
PositionerAbsolute,
PositionerRelative
} from '@atlaskit/modal-dialog/dist/es2019/styled/Modal.js';
import { N0, DN50 } from '@atlaskit/theme/colors';
import { themed } from '@atlaskit/theme/components';
import React from 'react';
const ThemedDialog = props => {
const style = { backgroundColor: props.isChromeless ? 'transparent' : themed({ light: N0,
dark: DN50 })({ theme: { mode: 'dark' } }) };
return (<Dialog
{ ...props }
aria-modal = { true }
style = { style }
theme = {{ mode: 'dark' }} />);
};
export { ThemedDialog as Dialog, FillScreen, dialogWidth, dialogHeight, PositionerAbsolute, PositionerRelative };

4
react/features/base/popover/components/Popover.web.js
View File

@ -28,7 +28,7 @@ const DIALOG_TO_PADDING_POSITION = {
* @returns {string}
*/
function _mapPositionToPaddingClass(position = 'left') {
return DIALOG_TO_PADDING_POSITION[position.split(' ')[0]];
return DIALOG_TO_PADDING_POSITION[position.split('-')[0]];
}
/**
@ -212,7 +212,7 @@ class Popover extends Component<Props, State> {
<InlineDialog
content = { this._renderContent() }
isOpen = { this.state.showDialog }
position = { position }>
placement = { position }>
{ children }
</InlineDialog>
</div>

2
react/features/base/react/components/web/Button.js
View File

@ -1,6 +1,6 @@
/* @flow */
import Button from '@atlaskit/button';
import Button from '@atlaskit/button/standard-button';
import React, { Component } from 'react';
type Props = {

2
react/features/base/react/components/web/InlineDialogFailure.js
View File

@ -1,6 +1,6 @@
/* @flow */
import Button from '@atlaskit/button';
import Button from '@atlaskit/button/standard-button';
import React, { Component } from 'react';
import { translate } from '../../../i18n';

11
react/features/base/react/components/web/Switch.js
View File

@ -1,10 +1,15 @@
/* @flow */
import { ToggleStateless } from '@atlaskit/toggle';
import Toggle from '@atlaskit/toggle';
import React, { Component } from 'react';
type Props = {
/**
* ID of the toggle
*/
id: string,
/**
* CSS class name.
*/
@ -42,6 +47,7 @@ export default class Switch extends Component<Props> {
disabled,
onValueChange,
value,
id,
...props
} = this.props;
@ -51,7 +57,8 @@ export default class Switch extends Component<Props> {
return (
<div className = { className }>
<ToggleStateless
<Toggle
id = { id }
isChecked = { value }
isDisabled = { disabled }
onChange = { onValueChange }

10
react/features/base/util/react-focus-lock-wrapper.js vendored
View File

@ -19,11 +19,17 @@ export default class FocusLockWrapper extends FocusLock<*> {
const props = {
...otherProps,
disabled: true
crossFrame: false
};
// MoveFocusInside is added in order to initially bring the focus on the dialog.
return <FocusLock { ...props } ><MoveFocusInside>{children}</MoveFocusInside></FocusLock>;
return (
<FocusLock
{ ...props }
className = 'focus-lock'>
<MoveFocusInside>{children}</MoveFocusInside>
</FocusLock>
);
}
}

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

@ -3,7 +3,6 @@
import React from 'react';
import { translate } from '../../../base/i18n';
import { Icon, IconClose } from '../../../base/icons';
import { connect } from '../../../base/redux';
import AbstractChat, {
_mapDispatchToProps,
@ -12,6 +11,7 @@ import AbstractChat, {
} from '../AbstractChat';
import ChatDialog from './ChatDialog';
import Header from './ChatDialogHeader';
import ChatInput from './ChatInput';
import DisplayNameForm from './DisplayNameForm';
import MessageContainer from './MessageContainer';
@ -133,13 +133,9 @@ class Chat extends AbstractChat<Props> {
*/
_renderChatHeader() {
return (
<div className = 'chat-header'>
<div
className = 'chat-close'
onClick = { this.props._onToggleChat }>
<Icon src = { IconClose } />
</div>
</div>
<Header
className = 'chat-header'
onCancel = { this.props._onToggleChat } />
);
}

9
react/features/chat/components/web/ChatDialogHeader.js
View File

@ -14,6 +14,11 @@ type Props = {
*/
onCancel: Function,
/**
* An optional class name.
*/
className: string,
/**
* Invoked to obtain translated strings.
*/
@ -25,10 +30,10 @@ type Props = {
*
* @returns {React$Element<any>}
*/
function Header({ onCancel, t }: Props) {
function Header({ onCancel, className, t }: Props) {
return (
<div
className = 'chat-dialog-header'>
className = { className || 'chat-dialog-header' }>
{ t('chat.title') }
<Icon
onClick = { onCancel }

3
react/features/deep-linking/components/DeepLinkingDesktopPage.web.js
View File

@ -1,6 +1,7 @@
// @flow
import Button, { ButtonGroup } from '@atlaskit/button';
import ButtonGroup from '@atlaskit/button/button-group';
import Button from '@atlaskit/button/standard-button';
import { AtlasKitThemeProvider } from '@atlaskit/theme';
import React, { Component } from 'react';
import type { Dispatch } from 'redux';

66
react/features/device-selection/components/DeviceSelector.web.js
View File

@ -1,7 +1,9 @@
/* @flow */
import AKDropdownMenu from '@atlaskit/dropdown-menu';
import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
import DropdownMenu, {
DropdownItem,
DropdownItemGroup
} from '@atlaskit/dropdown-menu';
import React, { Component } from 'react';
import { translate } from '../../base/i18n/functions';
@ -69,6 +71,7 @@ class DeviceSelector extends Component<Props> {
super(props);
this._onSelect = this._onSelect.bind(this);
this._createDropdownItem = this._createDropdownItem.bind(this);
}
/**
@ -87,8 +90,8 @@ class DeviceSelector extends Component<Props> {
}
const items = this.props.devices.map(this._createDropdownItem);
const defaultSelected = items.find(item =>
item.value === this.props.selectedDeviceId
const defaultSelected = this.props.devices.find(item =>
item.deviceId === this.props.selectedDeviceId
);
return this._createDropdown({
@ -111,18 +114,15 @@ class DeviceSelector extends Component<Props> {
_createDropdownTrigger(triggerText) {
return (
<div className = 'device-selector-trigger'>
<span
className = { `device-selector-icon ${this.props.icon}` } />
<span className = 'device-selector-trigger-text'>
{ triggerText }
</span>
<ChevronDownIcon
label = 'expand'
size = 'large' />
</div>
);
}
_createDropdownItem: (Object) => void;
/**
* Creates an object in the format expected by AKDropdownMenu for an option.
*
@ -132,10 +132,19 @@ class DeviceSelector extends Component<Props> {
* format recognized as a valid AKDropdownMenu item.
*/
_createDropdownItem(device) {
return {
content: device.label,
value: device.deviceId
};
return (
<DropdownItem
key = { device.deviceId }
// eslint-disable-next-line react/jsx-no-bind
onClick = {
e => {
e.stopPropagation();
this._onSelect(device.deviceId);
}
}>
{ device.label || device.deviceId }
</DropdownItem>
);
}
/**
@ -156,11 +165,11 @@ class DeviceSelector extends Component<Props> {
*/
_createDropdown(options) {
const triggerText
= (options.defaultSelected && options.defaultSelected.content)
= (options.defaultSelected && (options.defaultSelected.label || options.defaultSelected.deviceId))
|| options.placeholder;
const trigger = this._createDropdownTrigger(triggerText);
if (options.isDisabled) {
if (options.isDisabled || !options.items.length) {
return (
<div className = 'device-selector-trigger-disabled'>
{ trigger }
@ -169,12 +178,19 @@ class DeviceSelector extends Component<Props> {
}
return (
<AKDropdownMenu
items = { [ { items: options.items || [] } ] }
onItemActivated = { this._onSelect }
shouldFitContainer = { true }>
{ trigger }
</AKDropdownMenu>
<div className = 'dropdown-menu'>
<DropdownMenu
shouldFitContainer = { true }
trigger = { triggerText }
triggerButtonProps = {{
shouldFitContainer: true
}}
triggerType = 'button'>
<DropdownItemGroup>
{ options.items }
</DropdownItemGroup>
</DropdownMenu>
</div>
);
}
@ -183,15 +199,13 @@ class DeviceSelector extends Component<Props> {
/**
* Invokes the passed in callback to notify of selection changes.
*
* @param {Object} selection - Event from choosing a AKDropdownMenu option.
* @param {Object} newDeviceId - Selected device id from DropdownMenu option.
* @private
* @returns {void}
*/
_onSelect(selection) {
const newDeviceId = selection.item.value;
_onSelect(newDeviceId) {
if (this.props.selectedDeviceId !== newDeviceId) {
this.props.onSelect(selection.item.value);
this.props.onSelect(newDeviceId);
}
}

3
react/features/e2ee/components/E2EESection.js
View File

@ -117,10 +117,11 @@ class E2EESection extends Component<Props, State> {
</span>
}
<div className = 'control-row'>
<label>
<label htmlFor = 'e2ee-section-switch'>
{ t('dialog.e2eeLabel') }
</label>
<Switch
id = 'e2ee-section-switch'
onValueChange = { this._onToggle }
value = { enabled } />
</div>

6
react/features/filmstrip/components/web/Thumbnail.js
View File

@ -330,15 +330,15 @@ class Thumbnail extends Component<Props, State> {
switch (_currentLayout) {
case LAYOUTS.TILE_VIEW:
statsPopoverPosition = 'right top';
statsPopoverPosition = 'right-start';
tooltipPosition = 'right';
break;
case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
statsPopoverPosition = 'left top';
statsPopoverPosition = 'left-start';
tooltipPosition = 'left';
break;
default:
statsPopoverPosition = 'top center';
statsPopoverPosition = 'auto';
tooltipPosition = 'top';
}

3
react/features/lobby/components/web/LobbySection.js
View File

@ -93,10 +93,11 @@ class LobbySection extends PureComponent<Props, State> {
{ t('lobby.enableDialogText') }
</p>
<div className = 'control-row'>
<label>
<label htmlFor = 'lobby-section-switch'>
{ t('lobby.toggleLabel') }
</label>
<Switch
id = 'lobby-section-switch'
onValueChange = { this._onToggleLobby }
value = { this.state.lobbyEnabled } />
</div>

4
react/features/notifications/components/web/Notification.js
View File

@ -44,8 +44,6 @@ class Notification extends AbstractNotification<Props> {
const {
appearance,
hideErrorSupportLink,
isDismissAllowed,
onDismissed,
t,
title,
titleArguments,
@ -60,8 +58,6 @@ class Notification extends AbstractNotification<Props> {
description = { this._renderDescription() }
icon = { this._mapAppearanceToIcon() }
id = { uid }
isDismissAllowed = { isDismissAllowed }
onDismissed = { onDismissed }
testId = { titleKey }
title = { title || t(titleKey, titleArguments) } />
);

5
react/features/notifications/components/web/NotificationsContainer.js
View File

@ -40,7 +40,9 @@ class NotificationsContainer extends AbstractNotificationsContainer<Props> {
}
return (
<FlagGroup onDismissed = { this._onDismissed }>
<FlagGroup
id = 'notifications-container'
onDismissed = { this._onDismissed }>
{ this._renderFlags() }
</FlagGroup>
);
@ -69,6 +71,7 @@ class NotificationsContainer extends AbstractNotificationsContainer<Props> {
{ ...props }
id = { uid }
key = { uid }
onDismissed = { this._onDismissed }
uid = { uid } />
);

9
react/features/recording/components/LiveStream/web/StreamKeyPicker.js
View File

@ -114,7 +114,12 @@ class StreamKeyPicker extends PureComponent<Props, State> {
key = { broadcast.boundStreamID }
// eslint-disable-next-line react/jsx-no-bind
onClick = { () => this._onSelect(broadcast.boundStreamID) }>
onClick = {
e => {
e.stopPropagation();
this._onSelect(broadcast.boundStreamID);
}
}>
{ broadcast.title }
</DropdownItem>));
const selected
@ -124,7 +129,7 @@ class StreamKeyPicker extends PureComponent<Props, State> {
= (selected && selected.title) || t('liveStreaming.choose');
return (
<div className = 'broadcast-dropdown'>
<div className = 'broadcast-dropdown dropdown-menu'>
<DropdownMenuStateless
isOpen = { this.state.isDropdownOpen }
onItemActivated = { this._onSelect }

6
react/features/remote-video-menu/components/web/RemoteVideoMenuTriggerButton.js
View File

@ -276,13 +276,13 @@ function _mapStateToProps(state, ownProps) {
switch (currentLayout) {
case LAYOUTS.TILE_VIEW:
_menuPosition = 'left top';
_menuPosition = 'left-start';
break;
case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
_menuPosition = 'left bottom';
_menuPosition = 'left-end';
break;
default:
_menuPosition = 'top center';
_menuPosition = 'auto';
}
return {

2
react/features/settings/components/web/CalendarTab.js
View File

@ -1,6 +1,6 @@
// @flow
import Button from '@atlaskit/button';
import Button from '@atlaskit/button/standard-button';
import Spinner from '@atlaskit/spinner';
import React, { Component } from 'react';

9
react/features/settings/components/web/MoreTab.js
View File

@ -169,7 +169,11 @@ class MoreTab extends AbstractDialogTab<Props, State> {
// eslint-disable-next-line react/jsx-no-bind
onClick = {
() => super._onChange({ currentLanguage: language }) }>
e => {
e.stopPropagation();
super._onChange({ currentLanguage: language });
}
}>
{ t(`languages:${language}`) }
</DropdownItem>));
@ -180,6 +184,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
<div className = 'mock-atlaskit-label'>
{ t('settings.language') }
</div>
<div className = 'dropdown-menu'>
<DropdownMenu
isOpen = { this.state.isLanguageSelectOpen }
onOpenChange = { this._onLanguageDropdownOpenChange }
@ -188,7 +193,6 @@ class MoreTab extends AbstractDialogTab<Props, State> {
? t(`languages:${currentLanguage}`)
: '' }
triggerButtonProps = {{
appearance: 'primary',
shouldFitContainer: true
}}
triggerType = 'button'>
@ -197,6 +201,7 @@ class MoreTab extends AbstractDialogTab<Props, State> {
</DropdownItemGroup>
</DropdownMenu>
</div>
</div>
);
}

2
react/features/settings/components/web/ProfileTab.js
View File

@ -1,6 +1,6 @@
// @flow
import Button from '@atlaskit/button';
import Button from '@atlaskit/button/standard-button';
import { FieldTextStateless } from '@atlaskit/field-text';
import React from 'react';

2
react/features/settings/components/web/audio/AudioSettingsPopup.js
View File

@ -66,7 +66,7 @@ function AudioSettingsPopup({
setAudioOutputDevice = { setAudioOutputDevice } /> }
isOpen = { isOpen }
onClose = { onClose }
position = 'top left'>
placement = 'top-start'>
{children}
</InlineDialog>
</div>

2
react/features/settings/components/web/video/VideoSettingsPopup.js
View File

@ -56,7 +56,7 @@ function VideoSettingsPopup({
videoDeviceIds = { videoDeviceIds } /> }
isOpen = { isOpen }
onClose = { onClose }
position = 'top right'>
placement = 'top-end'>
{ children }
</InlineDialog>
</div>

2
react/features/toolbox/components/web/OverflowMenuButton.js
View File

@ -93,7 +93,7 @@ class OverflowMenuButton extends Component<Props> {
content = { children }
isOpen = { isOpen }
onClose = { this._onCloseDialog }
position = { 'top right' }>
placement = 'top-end'>
{this._renderToolbarButton()}
</InlineDialog>
)

3
webpack.config.js
View File

@ -115,7 +115,8 @@ const config = {
test: /\/node_modules\/@atlaskit\/modal-dialog\/.*\.js$/,
resolve: {
alias: {
'react-focus-lock': `${__dirname}/react/features/base/util/react-focus-lock-wrapper.js`
'react-focus-lock': `${__dirname}/react/features/base/util/react-focus-lock-wrapper.js`,
'../styled/Modal': `${__dirname}/react/features/base/dialog/components/web/ThemedDialog.js`
}
}
}, {