mirror of https://github.com/jitsi/jitsi-meet
Saúl Ibarra Corretgé
2 years ago
parent
d7cad9d560
commit
34b2577b97
@ -1,109 +0,0 @@ |
||||
/** |
||||
* Mixins that mimic the way Atlaskit fills the screen with modals at low screen widths. |
||||
*/ |
||||
@mixin full-size-modal-positioner() { |
||||
height: 100%; |
||||
left: 0; |
||||
position: fixed; |
||||
top: 0; |
||||
max-width: 100%; |
||||
width: 100%; |
||||
} |
||||
|
||||
@mixin full-size-modal-dialog() { |
||||
height: 100%; |
||||
max-height: 100%; |
||||
border-radius: 0; |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Keep overflow menu within screen vertical bounds and make it scrollable. |
||||
*/ |
||||
.toolbox-button-wth-dialog > div:nth-child(2) { |
||||
background: $menuBG; |
||||
max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px); |
||||
margin-bottom: 4px; |
||||
padding: 0; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
/** |
||||
* Remove background color and box-shadow for the context menu container. |
||||
*/ |
||||
.toolbox-button-wth-dialog.context-menu > div:nth-child(2) { |
||||
background: transparent; |
||||
box-shadow: none; |
||||
overflow-y: initial; |
||||
} |
||||
|
||||
.audio-preview > div:nth-child(2), |
||||
.video-preview > div:nth-child(2) { |
||||
margin-bottom: 4px; |
||||
outline: none; |
||||
padding: 0; |
||||
} |
||||
|
||||
/** |
||||
* The following selectors keep the chat modal full-size anywhere between 100px |
||||
* and 580px for desktop or 680px for mobile. |
||||
*/ |
||||
@media (min-width: 100px) and (max-width: 320px) { |
||||
.smiley-input { |
||||
display: none; |
||||
} |
||||
.shift-right .focus-lock > div > div { |
||||
@include full-size-modal-positioner(); |
||||
} |
||||
|
||||
.shift-right .focus-lock [role="dialog"] { |
||||
@include full-size-modal-dialog(); |
||||
} |
||||
} |
||||
|
||||
@media (min-width: 480px) and (max-width: 580px) { |
||||
.shift-right .focus-lock > div > div { |
||||
@include full-size-modal-positioner(); |
||||
} |
||||
|
||||
.shift-right .focus-lock [role="dialog"] { |
||||
@include full-size-modal-dialog(); |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 580px) { |
||||
// Override Atlaskit inline style for the modal background. |
||||
// Important is unfortunately needed for that. |
||||
.shift-right .focus-lock [role="dialog"][style] { |
||||
background-color: $chatBackgroundColor !important; |
||||
} |
||||
|
||||
// Remove Atlaskit padding from the chat dialog. |
||||
.shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) { |
||||
padding: 0; |
||||
} |
||||
} |
||||
|
||||
div.Tooltip { |
||||
color: #fff; |
||||
font-size: 12px; |
||||
line-height: 14px; |
||||
padding: 8px; |
||||
} |
||||
|
||||
// make modal full screen on landscape orientation |
||||
@media (max-height: 420px) { |
||||
.atlaskit-portal { |
||||
.css-1oc7v0j { |
||||
height: 100%; |
||||
padding: 0; |
||||
max-width: 100%; |
||||
top: 0; |
||||
width: 100%; |
||||
|
||||
&> div { |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,31 +0,0 @@ |
||||
// @flow
|
||||
import React from 'react'; |
||||
import FocusLock, { MoveFocusInside } from 'react-focus-lock'; |
||||
|
||||
/** |
||||
* FocusLock wrapper that disable the FocusLock in the @atlaskit/modal-dialog. We need to disable it because if the |
||||
* iframe API is used and a dialog is displayed it is impossible to click on fields outside of the iframe (FocusLock |
||||
* will steal the focus from any element that is not part of the dialog). |
||||
* |
||||
* @param {Object} props - The props passed to the FocusLock. |
||||
* @returns {ReactElement} |
||||
*/ |
||||
export default (props: any) => { |
||||
const { children, ...otherProps } = props; |
||||
|
||||
const forwardProps = { |
||||
...otherProps, |
||||
crossFrame: false |
||||
}; |
||||
|
||||
// MoveFocusInside is added in order to initially bring the focus on the dialog.
|
||||
return ( |
||||
<FocusLock |
||||
{ ...forwardProps } |
||||
className = 'focus-lock'> |
||||
<MoveFocusInside>{children}</MoveFocusInside> |
||||
</FocusLock> |
||||
); |
||||
}; |
||||
|
||||
export * from 'react-focus-lock'; |
||||
@ -1,85 +0,0 @@ |
||||
import React, { ReactElement, useEffect, useRef } from 'react'; |
||||
import { makeStyles } from 'tss-react/mui'; |
||||
|
||||
import { isMobileBrowser } from '../../../base/environment/utils'; |
||||
|
||||
interface IProps { |
||||
|
||||
/** |
||||
* The component(s) that need to be scrollable on mobile. |
||||
*/ |
||||
children: ReactElement; |
||||
|
||||
/** |
||||
* Whether the component should be flex container or not. |
||||
*/ |
||||
flex?: boolean; |
||||
|
||||
/** |
||||
* Whether the component is rendered within a modal. |
||||
*/ |
||||
isModal: boolean; |
||||
|
||||
} |
||||
|
||||
const useStyles = makeStyles()(() => { |
||||
return { |
||||
flex: { |
||||
display: 'flex', |
||||
flex: 1 |
||||
}, |
||||
base: { |
||||
height: '100%', |
||||
overflow: 'auto' |
||||
} |
||||
}; |
||||
}); |
||||
|
||||
/** |
||||
* Component that disables {@code touchmove} propagation below it. |
||||
* |
||||
* @returns {ReactElement} |
||||
*/ |
||||
function TouchmoveHack({ children, isModal, flex }: IProps) { |
||||
if (!isModal || !isMobileBrowser()) { |
||||
return children; |
||||
} |
||||
|
||||
const touchMoveElementRef = useRef<HTMLDivElement>(null); |
||||
|
||||
/** |
||||
* Atlaskit's {@code Modal} uses a third party library to disable touchmove events |
||||
* which makes scrolling inside dialogs impossible. We therefore employ this hack |
||||
* to intercept and stop the propagation of touchmove events from this wrapper that |
||||
* is placed around the chat conversation from the {@code ChatDialog}. |
||||
* |
||||
* @param {Event} event - The touchmove event fired within the component. |
||||
* @returns {void} |
||||
*/ |
||||
function handleTouchMove(event: TouchEvent) { |
||||
event.stopImmediatePropagation(); |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if (touchMoveElementRef?.current) { |
||||
touchMoveElementRef.current.addEventListener('touchmove', handleTouchMove, true); |
||||
} |
||||
|
||||
return () => { |
||||
if (touchMoveElementRef?.current) { |
||||
touchMoveElementRef.current.removeEventListener('touchmove', handleTouchMove, true); |
||||
} |
||||
}; |
||||
}, []); |
||||
const { classes, cx } = useStyles(); |
||||
|
||||
return ( |
||||
<div |
||||
className = { cx(classes.base, flex && classes.flex) } |
||||
ref = { touchMoveElementRef }> |
||||
{children} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default TouchmoveHack; |
||||
Loading…
Reference in new issue