yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-27 15:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

WYSIWYG: Fix CSS flex setup to take the toolbar into account

Browse Source
This commit is contained in:
Gustav Hansen 2023-01-25 09:45:03 +01:00
parent d3d0265927
commit 8c52770ae4
1 changed files with 17 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/core/admin/admin/src/content-manager/components/Wysiwyg/EditorLayout.js
View File

@ -1,15 +1,11 @@
import React, { useEffect } from 'react';
import React from 'react';
import { useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Flex } from '@strapi/design-system/Flex';
import { Box } from '@strapi/design-system/Box';
import { FocusTrap } from '@strapi/design-system/FocusTrap';
import { Portal } from '@strapi/design-system/Portal';
import { BaseButton } from '@strapi/design-system/BaseButton';
import { Typography } from '@strapi/design-system/Typography';
import { pxToRem } from '@strapi/helper-plugin';
import Collapse from '@strapi/icons/Collapse';
import { useIntl } from 'react-intl';
import { BaseButton, Box, Flex, FocusTrap, Portal, Typography } from '@strapi/design-system';
import { Collapse } from '@strapi/icons';
import { pxToRem, useLockScroll } from '@strapi/helper-plugin';
import PreviewWysiwyg from '../PreviewWysiwyg';
const setOpacity = (hex, alpha) =>
@ -32,6 +28,7 @@ export const ExpandButton = styled(BaseButton)`
svg {
margin-left: ${({ theme }) => `${theme.spaces[2]}`};
path {
fill: ${({ theme }) => theme.colors.neutral700};
width: ${12 / 16}rem;
@ -42,19 +39,8 @@ export const ExpandButton = styled(BaseButton)`
export const EditorLayout = ({ children, isExpandMode, error, previewContent, onCollapse }) => {
const { formatMessage } = useIntl();
useEffect(() => {
const body = document.body;
if (isExpandMode) {
body.classList.add('lock-body-scroll');
}
return () => {
if (isExpandMode) {
body.classList.remove('lock-body-scroll');
}
};
}, [isExpandMode]);
useLockScroll(isExpandMode);
if (isExpandMode) {
return (
@ -71,7 +57,6 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
onClick={onCollapse}
>
<Box
id="wysiwyg-expand"
background="neutral0"
hasRadius
shadow="popupShadow"
@ -84,8 +69,13 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
<BoxWithBorder flex="1" height="100%">
{children}
</BoxWithBorder>
<Box flex="1" height="100%">
<Flex height={pxToRem(48)} background="neutral100" justifyContent="flex-end">
<Flex alignItems="start" direction="column" flex="1" height="100%" width="100%">
<Flex
height={pxToRem(48)}
background="neutral100"
justifyContent="flex-end"
width="100%"
>
<ExpandButton id="collapse" onClick={onCollapse}>
<Typography>
{formatMessage({
@ -97,10 +87,10 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
</ExpandButton>
</Flex>
<Box position="relative" height="100%">
<Box position="relative" height="100%" width="100%">
<PreviewWysiwyg data={previewContent} />
</Box>
</Box>
</Flex>
</Flex>
</Box>
</ExpandWrapper>