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

56
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 * Move the @atlaskit/flag container up a little bit so it does not cover the
* toolbar with the first notification. * toolbar with the first notification.
*/ */
.jIMojv{ .atlaskit-portal > #notifications-container {
bottom: calc(#{$newToolbarSizeWithPadding}) !important; 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 { .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 * Override @atlaskit/dropdown-menu styling when in a modal because the
* dropdown backgrounds clash with the modal backgrounds. * dropdown backgrounds clash with the modal backgrounds.
*/ */
.cksvax[data-role=droplistContent] { .dropdown-menu div[style*="transform"] {
border: 1px solid #455166; 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 * Override @atlaskit/theme styling for the top toolbar so it displays over
* the video thumbnail while obscuring as little as possible. * the video thumbnail while obscuring as little as possible.
*/ */
.videocontainer .tOoji { .videocontainer__toptoolbar > div > div {
background: none; 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. * Keep overflow menu within screen vertical bounds and make it scrollable.
*/ */
.toolbox-button-wth-dialog .sc-ckVGcZ.fdAqDG > :first-child { .toolbox-button-wth-dialog > div:nth-child(2) {
max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 16px); max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px);
overflow-y: auto; overflow-y: auto;
} }

4
css/_audio-preview.scss
View File

@ -143,8 +143,8 @@
top: 18px; top: 18px;
} }
// Override @atlaskit/InlineDialog container which is made with styled components // Override @atlaskit/InlineDialog container which is made with styled components
& > div > div:nth-child(2) > div > div { & > div:nth-child(2) {
outline: none; outline: none;
padding: 0; 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 * pad the modal container in order for the modals to be centered
* while also taking the chat size into consideration. * while also taking the chat size into consideration.
*/ */
@media (min-width: 480px + $sidebarWidth) { @media (min-width: 581px) {
.shift-right [class^="Modal__FillScreen"] { .shift-right .atlaskit-portal > div:not(.Tooltip) {
padding-left: $sidebarWidth; 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 { .jitsi-icon svg {
fill: white; fill: white;
} }

32
css/_chat.scss
View File

@ -103,25 +103,19 @@
position: relative; position: relative;
width: 100%; width: 100%;
z-index: 1; 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 { .jitsi-icon > svg {
align-items: center;
bottom: 8px;
color: white;
cursor: pointer; cursor: pointer;
display: flex; fill: #A4B8D1;
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);
}
} }
} }
@ -184,6 +178,10 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
@media (max-width: 580px) {
display: none !important;
}
} }
.chatmessage { .chatmessage {

2
css/_country-picker.scss
View File

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

2
css/_prejoin.scss
View File

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

10
css/_responsive.scss
View File

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

24
css/_toolbars.scss
View File

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

2
css/_video-preview.scss
View File

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

10
css/_videolayout_default.scss
View File

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

12
css/filmstrip/_tile_view.scss
View File

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

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

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

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

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

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

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

3418
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": "", "author": "",
"readmeFilename": "README.md", "readmeFilename": "README.md",
"dependencies": { "dependencies": {
"@atlaskit/button": "10.1.1", "@atlaskit/button": "15.1.4",
"@atlaskit/checkbox": "5.0.10", "@atlaskit/checkbox": "12.0.0",
"@atlaskit/dropdown-menu": "6.1.25", "@atlaskit/dropdown-menu": "10.1.2",
"@atlaskit/field-text": "7.0.19", "@atlaskit/field-text": "11.0.4",
"@atlaskit/field-text-area": "4.0.15", "@atlaskit/field-text-area": "8.0.4",
"@atlaskit/flag": "13.0.0", "@atlaskit/flag": "14.1.0",
"@atlaskit/icon": "15.0.3", "@atlaskit/icon": "21.2.0",
"@atlaskit/inline-dialog": "5.3.0", "@atlaskit/inline-dialog": "13.0.9",
"@atlaskit/inline-message": "7.0.10", "@atlaskit/inline-message": "11.0.8",
"@atlaskit/lozenge": "6.2.4", "@atlaskit/lozenge": "10.1.1",
"@atlaskit/modal-dialog": "8.0.1", "@atlaskit/modal-dialog": "11.2.4",
"@atlaskit/multi-select": "11.0.13", "@atlaskit/multi-select": "15.0.5",
"@atlaskit/spinner": "9.0.13", "@atlaskit/spinner": "15.0.6",
"@atlaskit/tabs": "8.0.11", "@atlaskit/tabs": "12.1.2",
"@atlaskit/theme": "7.0.2", "@atlaskit/theme": "11.0.2",
"@atlaskit/toggle": "5.0.14", "@atlaskit/toggle": "12.0.3",
"@atlaskit/tooltip": "12.1.13", "@atlaskit/tooltip": "17.1.2",
"@jitsi/js-utils": "1.0.5", "@jitsi/js-utils": "1.0.5",
"@microsoft/microsoft-graph-client": "1.1.0", "@microsoft/microsoft-graph-client": "1.1.0",
"@react-native-async-storage/async-storage": "1.13.2", "@react-native-async-storage/async-storage": "1.13.2",
@ -49,11 +49,11 @@
"i18next": "17.0.6", "i18next": "17.0.6",
"i18next-browser-languagedetector": "3.0.1", "i18next-browser-languagedetector": "3.0.1",
"i18next-xhr-backend": "3.0.0", "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", "jitsi-meet-logger": "github:jitsi/jitsi-meet-logger#v1.0.0",
"jquery": "3.5.1", "jquery": "3.5.1",
"jquery-contextmenu": "2.4.5", "jquery-contextmenu": "2.4.5",
"jquery-i18next": "1.2.1", "jquery-i18next": "1.2.1",
"jQuery-Impromptu": "github:trentrichardson/jQuery-Impromptu#v6.0.0",
"js-md5": "0.6.1", "js-md5": "0.6.1",
"jwt-decode": "2.2.0", "jwt-decode": "2.2.0",
"lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#be18ff34bedf38c7475fe4953074c7959000e15f", "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", "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
"pixelmatch": "5.1.0", "pixelmatch": "5.1.0",
"punycode": "2.1.1", "punycode": "2.1.1",
"react": "16.9", "react": "16.12",
"react-dom": "16.9", "react-dom": "16.12",
"react-emoji-render": "1.2.4", "react-emoji-render": "1.2.4",
"react-i18next": "10.11.4", "react-i18next": "10.11.4",
"react-linkify": "1.0.0-alpha", "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 // @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 Modal, { ModalFooter } from '@atlaskit/modal-dialog';
import _ from 'lodash'; import _ from 'lodash';
import React, { Component } from 'react'; import React, { Component } from 'react';
@ -8,6 +9,8 @@ import React, { Component } from 'react';
import { translate } from '../../../i18n/functions'; import { translate } from '../../../i18n/functions';
import type { DialogProps } from '../../constants'; import type { DialogProps } from '../../constants';
import ModalHeader from './ModalHeader';
/** /**
* The ID to be used for the cancel button if enabled. * The ID to be used for the cancel button if enabled.
* @type {string} * @type {string}
@ -127,10 +130,13 @@ class StatelessDialog extends Component<Props> {
<Modal <Modal
autoFocus = { true } autoFocus = { true }
components = {{ components = {{
Header: customHeader Header: customHeader ? customHeader : props => (
<ModalHeader
{ ...props }
heading = { titleString || t(titleKey) } />
)
}} }}
footer = { this._renderFooter } footer = { this._renderFooter }
heading = { customHeader ? undefined : titleString || t(titleKey) }
i18n = { this.props.i18n } i18n = { this.props.i18n }
onClose = { this._onDialogDismissed } onClose = { this._onDialogDismissed }
onDialogDismissed = { 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} * @returns {string}
*/ */
function _mapPositionToPaddingClass(position = 'left') { 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 <InlineDialog
content = { this._renderContent() } content = { this._renderContent() }
isOpen = { this.state.showDialog } isOpen = { this.state.showDialog }
position = { position }> placement = { position }>
{ children } { children }
</InlineDialog> </InlineDialog>
</div> </div>

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

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

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

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

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

@ -1,10 +1,15 @@
/* @flow */ /* @flow */
import { ToggleStateless } from '@atlaskit/toggle'; import Toggle from '@atlaskit/toggle';
import React, { Component } from 'react'; import React, { Component } from 'react';
type Props = { type Props = {
/**
* ID of the toggle
*/
id: string,
/** /**
* CSS class name. * CSS class name.
*/ */
@ -42,6 +47,7 @@ export default class Switch extends Component<Props> {
disabled, disabled,
onValueChange, onValueChange,
value, value,
id,
...props ...props
} = this.props; } = this.props;
@ -51,7 +57,8 @@ export default class Switch extends Component<Props> {
return ( return (
<div className = { className }> <div className = { className }>
<ToggleStateless <Toggle
id = { id }
isChecked = { value } isChecked = { value }
isDisabled = { disabled } isDisabled = { disabled }
onChange = { onValueChange } 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 = { const props = {
...otherProps, ...otherProps,
disabled: true crossFrame: false
}; };
// MoveFocusInside is added in order to initially bring the focus on the dialog. // 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 React from 'react';
import { translate } from '../../../base/i18n'; import { translate } from '../../../base/i18n';
import { Icon, IconClose } from '../../../base/icons';
import { connect } from '../../../base/redux'; import { connect } from '../../../base/redux';
import AbstractChat, { import AbstractChat, {
_mapDispatchToProps, _mapDispatchToProps,
@ -12,6 +11,7 @@ import AbstractChat, {
} from '../AbstractChat'; } from '../AbstractChat';
import ChatDialog from './ChatDialog'; import ChatDialog from './ChatDialog';
import Header from './ChatDialogHeader';
import ChatInput from './ChatInput'; import ChatInput from './ChatInput';
import DisplayNameForm from './DisplayNameForm'; import DisplayNameForm from './DisplayNameForm';
import MessageContainer from './MessageContainer'; import MessageContainer from './MessageContainer';
@ -133,13 +133,9 @@ class Chat extends AbstractChat<Props> {
*/ */
_renderChatHeader() { _renderChatHeader() {
return ( return (
<div className = 'chat-header'> <Header
<div className = 'chat-header'
className = 'chat-close' onCancel = { this.props._onToggleChat } />
onClick = { this.props._onToggleChat }>
<Icon src = { IconClose } />
</div>
</div>
); );
} }

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

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

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

@ -1,6 +1,7 @@
// @flow // @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 { AtlasKitThemeProvider } from '@atlaskit/theme';
import React, { Component } from 'react'; import React, { Component } from 'react';
import type { Dispatch } from 'redux'; import type { Dispatch } from 'redux';

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

@ -1,7 +1,9 @@
/* @flow */ /* @flow */
import AKDropdownMenu from '@atlaskit/dropdown-menu'; import DropdownMenu, {
import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down'; DropdownItem,
DropdownItemGroup
} from '@atlaskit/dropdown-menu';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { translate } from '../../base/i18n/functions'; import { translate } from '../../base/i18n/functions';
@ -69,6 +71,7 @@ class DeviceSelector extends Component<Props> {
super(props); super(props);
this._onSelect = this._onSelect.bind(this); 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 items = this.props.devices.map(this._createDropdownItem);
const defaultSelected = items.find(item => const defaultSelected = this.props.devices.find(item =>
item.value === this.props.selectedDeviceId item.deviceId === this.props.selectedDeviceId
); );
return this._createDropdown({ return this._createDropdown({
@ -111,18 +114,15 @@ class DeviceSelector extends Component<Props> {
_createDropdownTrigger(triggerText) { _createDropdownTrigger(triggerText) {
return ( return (
<div className = 'device-selector-trigger'> <div className = 'device-selector-trigger'>
<span
className = { `device-selector-icon ${this.props.icon}` } />
<span className = 'device-selector-trigger-text'> <span className = 'device-selector-trigger-text'>
{ triggerText } { triggerText }
</span> </span>
<ChevronDownIcon
label = 'expand'
size = 'large' />
</div> </div>
); );
} }
_createDropdownItem: (Object) => void;
/** /**
* Creates an object in the format expected by AKDropdownMenu for an option. * 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. * format recognized as a valid AKDropdownMenu item.
*/ */
_createDropdownItem(device) { _createDropdownItem(device) {
return { return (
content: device.label, <DropdownItem
value: device.deviceId 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) { _createDropdown(options) {
const triggerText const triggerText
= (options.defaultSelected && options.defaultSelected.content) = (options.defaultSelected && (options.defaultSelected.label || options.defaultSelected.deviceId))
|| options.placeholder; || options.placeholder;
const trigger = this._createDropdownTrigger(triggerText); const trigger = this._createDropdownTrigger(triggerText);
if (options.isDisabled) { if (options.isDisabled || !options.items.length) {
return ( return (
<div className = 'device-selector-trigger-disabled'> <div className = 'device-selector-trigger-disabled'>
{ trigger } { trigger }
@ -169,12 +178,19 @@ class DeviceSelector extends Component<Props> {
} }
return ( return (
<AKDropdownMenu <div className = 'dropdown-menu'>
items = { [ { items: options.items || [] } ] } <DropdownMenu
onItemActivated = { this._onSelect } shouldFitContainer = { true }
shouldFitContainer = { true }> trigger = { triggerText }
{ trigger } triggerButtonProps = {{
</AKDropdownMenu> 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. * 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 * @private
* @returns {void} * @returns {void}
*/ */
_onSelect(selection) { _onSelect(newDeviceId) {
const newDeviceId = selection.item.value;
if (this.props.selectedDeviceId !== 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> </span>
} }
<div className = 'control-row'> <div className = 'control-row'>
<label> <label htmlFor = 'e2ee-section-switch'>
{ t('dialog.e2eeLabel') } { t('dialog.e2eeLabel') }
</label> </label>
<Switch <Switch
id = 'e2ee-section-switch'
onValueChange = { this._onToggle } onValueChange = { this._onToggle }
value = { enabled } /> value = { enabled } />
</div> </div>

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

@ -330,15 +330,15 @@ class Thumbnail extends Component<Props, State> {
switch (_currentLayout) { switch (_currentLayout) {
case LAYOUTS.TILE_VIEW: case LAYOUTS.TILE_VIEW:
statsPopoverPosition = 'right top'; statsPopoverPosition = 'right-start';
tooltipPosition = 'right'; tooltipPosition = 'right';
break; break;
case LAYOUTS.VERTICAL_FILMSTRIP_VIEW: case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
statsPopoverPosition = 'left top'; statsPopoverPosition = 'left-start';
tooltipPosition = 'left'; tooltipPosition = 'left';
break; break;
default: default:
statsPopoverPosition = 'top center'; statsPopoverPosition = 'auto';
tooltipPosition = 'top'; 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') } { t('lobby.enableDialogText') }
</p> </p>
<div className = 'control-row'> <div className = 'control-row'>
<label> <label htmlFor = 'lobby-section-switch'>
{ t('lobby.toggleLabel') } { t('lobby.toggleLabel') }
</label> </label>
<Switch <Switch
id = 'lobby-section-switch'
onValueChange = { this._onToggleLobby } onValueChange = { this._onToggleLobby }
value = { this.state.lobbyEnabled } /> value = { this.state.lobbyEnabled } />
</div> </div>

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

@ -44,8 +44,6 @@ class Notification extends AbstractNotification<Props> {
const { const {
appearance, appearance,
hideErrorSupportLink, hideErrorSupportLink,
isDismissAllowed,
onDismissed,
t, t,
title, title,
titleArguments, titleArguments,
@ -60,8 +58,6 @@ class Notification extends AbstractNotification<Props> {
description = { this._renderDescription() } description = { this._renderDescription() }
icon = { this._mapAppearanceToIcon() } icon = { this._mapAppearanceToIcon() }
id = { uid } id = { uid }
isDismissAllowed = { isDismissAllowed }
onDismissed = { onDismissed }
testId = { titleKey } testId = { titleKey }
title = { title || t(titleKey, titleArguments) } /> 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 ( return (
<FlagGroup onDismissed = { this._onDismissed }> <FlagGroup
id = 'notifications-container'
onDismissed = { this._onDismissed }>
{ this._renderFlags() } { this._renderFlags() }
</FlagGroup> </FlagGroup>
); );
@ -69,6 +71,7 @@ class NotificationsContainer extends AbstractNotificationsContainer<Props> {
{ ...props } { ...props }
id = { uid } id = { uid }
key = { uid } key = { uid }
onDismissed = { this._onDismissed }
uid = { uid } /> 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 } key = { broadcast.boundStreamID }
// eslint-disable-next-line react/jsx-no-bind // eslint-disable-next-line react/jsx-no-bind
onClick = { () => this._onSelect(broadcast.boundStreamID) }> onClick = {
e => {
e.stopPropagation();
this._onSelect(broadcast.boundStreamID);
}
}>
{ broadcast.title } { broadcast.title }
</DropdownItem>)); </DropdownItem>));
const selected const selected
@ -124,7 +129,7 @@ class StreamKeyPicker extends PureComponent<Props, State> {
= (selected && selected.title) || t('liveStreaming.choose'); = (selected && selected.title) || t('liveStreaming.choose');
return ( return (
<div className = 'broadcast-dropdown'> <div className = 'broadcast-dropdown dropdown-menu'>
<DropdownMenuStateless <DropdownMenuStateless
isOpen = { this.state.isDropdownOpen } isOpen = { this.state.isDropdownOpen }
onItemActivated = { this._onSelect } 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) { switch (currentLayout) {
case LAYOUTS.TILE_VIEW: case LAYOUTS.TILE_VIEW:
_menuPosition = 'left top'; _menuPosition = 'left-start';
break; break;
case LAYOUTS.VERTICAL_FILMSTRIP_VIEW: case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
_menuPosition = 'left bottom'; _menuPosition = 'left-end';
break; break;
default: default:
_menuPosition = 'top center'; _menuPosition = 'auto';
} }
return { return {

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

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

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

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

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

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

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

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

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

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

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

3
webpack.config.js
View File

@ -115,7 +115,8 @@ const config = {
test: /\/node_modules\/@atlaskit\/modal-dialog\/.*\.js$/, test: /\/node_modules\/@atlaskit\/modal-dialog\/.*\.js$/,
resolve: { resolve: {
alias: { 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`
} }
} }
}, { }, {