ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2025-12-30 11:22:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(cleanup) drop no longer needed AtlasKit supporting code

Browse Source
This commit is contained in:
Saúl Ibarra Corretgé
2023-03-23 11:07:12 +01:00
parent d7cad9d560
commit 34b2577b97
5 changed files with 0 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
css/_atlaskit_overrides.scss
View File

@@ -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
css/main.scss
View File

@@ -25,7 +25,6 @@ $flagsImagePath: "../images/";
/* Modules BEGIN */
@import 'reset';
@import 'atlaskit_overrides';
@import 'base';
@import 'utils';
@import 'overlay/overlay';

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

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

85
react/features/chat/components/web/TouchmoveHack.tsx
View File

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

15
webpack.config.js
View File

@@ -149,21 +149,6 @@ function getConfig(options = {}) {
'style-loader',
'css-loader'
]
}, {
test: /\/node_modules\/@atlaskit\/modal-dialog\/.*\.js$/,
resolve: {
alias: {
'react-focus-lock': `${__dirname}/react/features/base/util/react-focus-lock-wrapper.js`,
'../styled/Modal': `${__dirname}/react/features/base/dialog/components/web/ThemedDialog.js`
}
}
}, {
test: /\/react\/features\/base\/util\/react-focus-lock-wrapper.js$/,
resolve: {
alias: {
'react-focus-lock': `${__dirname}/node_modules/react-focus-lock`
}
}
}, {
test: /\.svg$/,
use: [ {