feat(ui) update AtlasKit components
This commit is contained in:
Steffen Kolmer
Saúl Ibarra Corretgé
parent
a9bb8e5e81
commit
ef7d425859
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@
|
|||
}
|
||||
|
||||
&-dropdown-container {
|
||||
& > div > div:nth-child(2) > div > div {
|
||||
& > div:nth-child(2) {
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
.device-selector-trigger-text {
|
||||
overflow: hidden;
|
||||
margin-left: 8px;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@
|
|||
padding: 20px 0px 4px 0px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + svg + span {
|
||||
color: #9FB0CC;
|
||||
}
|
||||
|
||||
.calendar-tab,
|
||||
.more-tab,
|
||||
.profile-edit {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
40
package.json
40
package.json
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* @flow */
|
||||
|
||||
import Button from '@atlaskit/button';
|
||||
import Button from '@atlaskit/button/standard-button';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
type Props = {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 } />
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) } />
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 } />
|
||||
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ function AudioSettingsPopup({
|
|||
setAudioOutputDevice = { setAudioOutputDevice } /> }
|
||||
isOpen = { isOpen }
|
||||
onClose = { onClose }
|
||||
position = 'top left'>
|
||||
placement = 'top-start'>
|
||||
{children}
|
||||
</InlineDialog>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ function VideoSettingsPopup({
|
|||
videoDeviceIds = { videoDeviceIds } /> }
|
||||
isOpen = { isOpen }
|
||||
onClose = { onClose }
|
||||
position = 'top right'>
|
||||
placement = 'top-end'>
|
||||
{ children }
|
||||
</InlineDialog>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
}
|
||||
}
|
||||
}, {
|
||||
|
|
|
|||
Loading…
Reference in New Issue