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

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;
}
}

View File

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

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;
}

View File

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

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;
}

View File

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

View File

@ -167,23 +167,23 @@
}
@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();
}
}
}
}

View File

@ -42,9 +42,11 @@
display: none;
}
&.shift-right {
margin-left: $sidebarWidth;
width: calc(100% - #{$sidebarWidth});
@media (min-width: 581px) {
&.shift-right {
margin-left: $sidebarWidth;
width: calc(100% - #{$sidebarWidth});
}
}
.toolbox-background {
@ -88,31 +90,31 @@
margin: 0px 4px;
width: 38px;
height: 38px;
&:hover {
background-color: #daebfa;
border: 1px solid #daebfa;
}
&.toggled {
background: #2a3a4b;
border: 1px solid #5e6d7a;
svg {
fill: #fff;
}
&:hover {
background-color: #5e6d7a;
}
}
&.disabled, .disabled & {
cursor: initial;
color: #fff;
background-color: #a4b8d1;
}
svg {
fill: #5e6d7a;
}
@ -124,7 +126,7 @@
border: 1px solid $hangupColor;
width: 40px;
height: 40px;
&:hover {
background-color: $hangupColor;
}
@ -262,7 +264,7 @@
&:hover, &.toggled {
background: $newToolbarButtonHoverColor;
}
&.disabled {
cursor: initial !important;
background-color: #a4b8d1 !important;

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;
}

View File

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

View File

@ -47,12 +47,14 @@
width: 100%;
z-index: $filmstripVideosZ;
&.shift-right {
margin-left: $sidebarWidth;
width: calc(100% - #{$sidebarWidth});
@media (min-width: 581px) {
&.shift-right {
margin-left: $sidebarWidth;
width: calc(100% - #{$sidebarWidth});
#filmstripRemoteVideos {
width: calc(100vw - #{$sidebarWidth});
#filmstripRemoteVideos {
width: calc(100vw - #{$sidebarWidth});
}
}
}
}

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%;

View File

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

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.

3418
package-lock.json generated

File diff suppressed because it is too large Load Diff

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",

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>
);
}
}

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 }

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 };

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>

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 = {

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';

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 }

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>
);
}
}

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 } />
);
}

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 }

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';

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);
}
}

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>

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';
}

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>

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) } />
);

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 } />
);

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 }

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 {

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';

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,22 +184,23 @@ class MoreTab extends AbstractDialogTab<Props, State> {
<div className = 'mock-atlaskit-label'>
{ t('settings.language') }
</div>
<DropdownMenu
isOpen = { this.state.isLanguageSelectOpen }
onOpenChange = { this._onLanguageDropdownOpenChange }
shouldFitContainer = { true }
trigger = { currentLanguage
? t(`languages:${currentLanguage}`)
: '' }
triggerButtonProps = {{
appearance: 'primary',
shouldFitContainer: true
}}
triggerType = 'button'>
<DropdownItemGroup>
{ languageItems }
</DropdownItemGroup>
</DropdownMenu>
<div className = 'dropdown-menu'>
<DropdownMenu
isOpen = { this.state.isLanguageSelectOpen }
onOpenChange = { this._onLanguageDropdownOpenChange }
shouldFitContainer = { true }
trigger = { currentLanguage
? t(`languages:${currentLanguage}`)
: '' }
triggerButtonProps = {{
shouldFitContainer: true
}}
triggerType = 'button'>
<DropdownItemGroup>
{ languageItems }
</DropdownItemGroup>
</DropdownMenu>
</div>
</div>
);
}

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';

View File

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

View File

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

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>
)

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`
}
}
}, {