IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'release/v1.2' of github.com:ONLYOFFICE/AppServer into release/v1.2

Browse Source
This commit is contained in:
Artem Tarasov 2022-05-05 13:46:57 +03:00
commit 4955b55cf1
25 changed files with 258 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/asc-web-common/components/FilterInput/sub-components/SortButton.js
View File

@ -253,12 +253,12 @@ const SortButton = ({
viewSettings={viewSettings}
/>
</DropDownItem>
{!isFavoritesFolder && !isRecentFolder && (
{!isRecentFolder && (
<DropDownItem isSeparator={true}></DropDownItem>
)}
</>
)}
{!isFavoritesFolder && !isRecentFolder && (
{!isRecentFolder && (
<>
{data.map((item, index) => (
<DropDownItem
@ -286,7 +286,6 @@ const SortButton = ({
viewAs,
viewSettings,
getSortData,
isFavoritesFolder,
isRecentFolder,
]);

2
packages/asc-web-common/components/Section/sub-components/info-panel.js
View File

@ -19,7 +19,7 @@ const StyledInfoPanelWrapper = styled.div.attrs(({ id }) => ({
height: auto;
width: auto;
background: rgba(6, 22, 38, 0.2);
backdrop-filter: blur(18px);
backdrop-filter: blur(3px);
@media ${tablet} {
z-index: 309;

14
packages/asc-web-components/aside/aside.js
View File

@ -2,7 +2,11 @@ import React from "react";
import PropTypes from "prop-types";
import Scrollbar from "../scrollbar";
import StyledAside from "./styled-aside";
import {
StyledAside,
StyledControlContainer,
StyledCrossIcon,
} from "./styled-aside";
const Aside = React.memo((props) => {
//console.log("Aside render");
@ -14,6 +18,7 @@ const Aside = React.memo((props) => {
className,
contentPaddingBottom,
withoutBodyScroll,
onClose,
} = props;
return (
@ -29,6 +34,12 @@ const Aside = React.memo((props) => {
) : (
<Scrollbar stype="mediumBlack">{children}</Scrollbar>
)}
{visible && (
<StyledControlContainer onClick={onClose}>
<StyledCrossIcon />
</StyledControlContainer>
)}
</StyledAside>
);
});
@ -46,6 +57,7 @@ Aside.propTypes = {
PropTypes.node,
]),
withoutBodyScroll: PropTypes.bool,
onClose: PropTypes.func,
};
Aside.defaultProps = {
scale: false,

86
packages/asc-web-components/aside/styled-aside.js
View File

@ -1,7 +1,13 @@
import React from "react";
import styled from "styled-components";
import styled, { css } from "styled-components";
import Base from "../themes/base";
import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
import { isMobile } from "react-device-detect";
import { tablet } from "@appserver/components/utils/device";
/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
const Container = ({
@ -17,19 +23,44 @@ const Container = ({
const StyledAside = styled(Container)`
background-color: ${(props) => props.theme.aside.backgroundColor};
height: ${(props) => props.theme.aside.height};
overflow-x: ${(props) => props.theme.aside.overflowX};
overflow-y: ${(props) => props.theme.aside.overflowY};
position: fixed;
right: ${(props) => props.theme.aside.right};
top: ${(props) => props.theme.aside.top};
transform: translateX(
${(props) => (props.visible ? "0" : props.scale ? "100%" : "325px")}
${(props) => (props.visible ? "0" : props.scale ? "100%" : "480px")}
);
transition: ${(props) => props.theme.aside.transition};
width: ${(props) => (props.scale ? "100%" : "325px")};
width: ${(props) => (props.scale ? "100%" : "480px")};
z-index: ${(props) => props.zIndex};
box-sizing: border-box;
@media ${tablet} {
max-width: calc(100% - 69px);
transform: translateX(
${(props) =>
props.visible ? "0" : props.scale ? "100%" : "calc(100% - 69px)"}
);
}
${isMobile &&
css`
max-width: calc(100% - 69px);
transform: translateX(
${(props) =>
props.visible ? "0" : props.scale ? "100%" : "calc(100% - 69px)"}
);
`}
@media (max-width: 428px) {
bottom: 0;
top: unset;
height: calc(100% - 64px);
width: 100%;
max-width: 100%;
transform: translateX(${(props) => (props.visible ? "0" : "100%")});
}
&.modal-dialog-aside {
padding-bottom: ${(props) =>
props.contentPaddingBottom
@ -43,4 +74,47 @@ const StyledAside = styled(Container)`
}
`;
StyledAside.defaultProps = { theme: Base };
export default StyledAside;
const StyledControlContainer = styled.div`
display: flex;
width: 24px;
height: 24px;
position: absolute;
border-radius: 100px;
cursor: pointer;
align-items: center;
justify-content: center;
z-index: 450;
top: 14px;
left: -34px;
${isMobile &&
css`
top: 14px;
`}
@media (max-width: 428px) {
top: -34px;
right: 10px;
left: unset;
}
`;
StyledControlContainer.defaultProps = { theme: Base };
const StyledCrossIcon = styled(CrossIcon)`
width: 17px;
height: 17px;
z-index: 455;
path {
fill: ${(props) => props.theme.catalog.control.fill};
}
`;
StyledCrossIcon.defaultProps = { theme: Base };
export { StyledAside, StyledControlContainer, StyledCrossIcon };

7
packages/asc-web-components/context-menu-button/index.js
View File

@ -225,7 +225,12 @@ class ContextMenuButton extends React.Component {
zIndex={310}
isAside={true}
/>
<Aside visible={isOpen} scale={false} zIndex={310}>
<Aside
visible={isOpen}
scale={false}
zIndex={310}
onClose={this.onClose}
>
<StyledContent>
<StyledHeaderContent>
<Heading className="header" size="medium" truncate={true}>

7
packages/asc-web-components/date-picker/index.js
View File

@ -368,7 +368,12 @@ class DatePicker extends Component {
zIndex={zIndex}
isAside={true}
/>
<Aside visible={isOpen} scale={false} zIndex={zIndex}>
<Aside
visible={isOpen}
scale={false}
zIndex={zIndex}
onClose={this.onClose}
>
<Content>
<Header>
<Heading className="header" size="medium" truncate={true}>

1
packages/asc-web-components/modal-dialog/index.js
View File

@ -207,6 +207,7 @@ class ModalDialog extends React.Component {
visible={visible}
scale={scale}
zIndex={zIndex}
onClose={onClose}
contentPaddingBottom={contentPaddingBottom}
className="modal-dialog-aside not-selectable"
withoutBodyScroll={withoutBodyScroll}

6
products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js
View File

@ -127,7 +127,11 @@ class AddGroupsPanelComponent extends React.Component {
zIndex={zIndex}
isAside={true}
/>
<Aside className="header_aside-panel">
<Aside
className="header_aside-panel"
visible={visible}
onClose={this.onClosePanels}
>
<StyledContent>
<StyledBody ref={this.scrollRef}>
<GroupSelector

6
products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js
View File

@ -159,7 +159,11 @@ class AddUsersPanelComponent extends React.Component {
zIndex={zIndex}
isAside={true}
/>
<Aside className="header_aside-panel">
<Aside
className="header_aside-panel"
visible={visible}
onClose={this.onClosePanels}
>
<StyledContent>
<StyledBody ref={this.scrollRef}>
<PeopleSelector

6
products/ASC.Files/Client/src/components/panels/ChangeOwnerPanel/index.js
View File

@ -99,7 +99,11 @@ class ChangeOwnerComponent extends React.Component {
zIndex={zIndex}
isAside
/>
<Aside className="header_aside-panel">
<Aside
className="header_aside-panel"
visible={visible}
onClose={this.onClose}
>
<StyledContent>
<StyledHeaderContent>
<Heading className="sharing_panel-header" size="medium" truncate>

6
products/ASC.Files/Client/src/components/panels/EmbeddingPanel/index.js
View File

@ -34,7 +34,11 @@ class EmbeddingPanelComponent extends React.Component {
zIndex={zIndex}
isAside={true}
/>
<Aside className="header_aside-panel">
<Aside
className="header_aside-panel"
visible={visible}
onClose={this.onClosePanels}
>
<StyledContent>
<StyledHeaderContent isEmbedding={true}>
<IconButton

33
products/ASC.Files/Client/src/components/panels/HotkeysPanel/StyledHotkeys.js
View File

@ -1,22 +1,18 @@
import styled from "styled-components";
import Scrollbar from "@appserver/components/scrollbar";
import { Base } from "@appserver/components/themes";
import { tablet } from "@appserver/components/utils/device";
const StyledHotkeysPanel = styled.div`
.hotkeys-panel {
width: 500px;
@media (max-width: 550px) {
width: 320px;
}
.scroll-body {
padding-right: 0 !important;
}
}
.hotkeys_header {
margin: 0 16px;
border-bottom: 1px solid #eceef1;
padding: 0 16px;
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
.hotkeys_heading {
font-weight: 700;
@ -40,19 +36,36 @@ const StyledHotkeysPanel = styled.div`
.row_content {
margin: 12px 0 12px 0px;
@media ${tablet} {
height: unset;
}
}
}
.hotkey-key-description {
max-width: 320px;
width: 100%;
@media (max-width: 550px) {
max-width: 140px;
word-wrap: break-word;
white-space: normal;
}
}
.hotkeys-key {
margin-left: auto;
width: 112px;
margin: 0 auto 0 0;
@media (max-width: 550px) {
margin: 0 0 0 auto;
width: fit-content;
}
}
`;
StyledHotkeysPanel.defaultProps = { theme: Base };
const StyledScrollbar = styled(Scrollbar)`
position: relative;
padding: 16px 0;

2
products/ASC.Files/Client/src/components/panels/HotkeysPanel/index.js
View File

@ -46,7 +46,7 @@ const HotkeyPanel = ({ visible, setHotkeyPanelVisible, t, tReady }) => {
return (
<StyledHotkeysPanel>
<Backdrop onClick={onClose} visible={visible} isAside={true} />
<Aside className="hotkeys-panel" visible={visible}>
<Aside className="hotkeys-panel" visible={visible} onClose={onClose}>
<div className="hotkeys_header">
<Heading className="hotkeys_heading">{t("Hotkeys")}</Heading>
</div>

6
products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js
View File

@ -168,7 +168,11 @@ class NewFilesPanel extends React.Component {
zIndex={zIndex}
isAside={true}
/>
<Aside className="header_aside-panel" visible={visible}>
<Aside
className="header_aside-panel"
visible={visible}
onClose={this.onClose}
>
<StyledContent>
<StyledHeaderContent>
<Heading

1
products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
View File

@ -711,6 +711,7 @@ class SharingPanelComponent extends React.Component {
className="header_aside-panel"
visible={visible}
withoutBodyScroll={true}
onClose={this.onClose}
>
{!isLoading ? (
<StyledContent isNotifyUsers={isNotifyUsers}>

100
products/ASC.Files/Client/src/components/panels/StyledPanels.js
View File

@ -92,24 +92,6 @@ const StyledAsidePanel = styled.div`
}
}
.header_aside-panel {
transition: unset;
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
width: 480px;
max-width: 480px;
overflow-y: hidden;
@media (max-width: 500px) {
position: fixed;
top: 64px;
bottom: 0;
right: 0;
width: 100%;
height: calc(100% - 64px);
}
}
${PanelStyles}
`;
@ -123,26 +105,6 @@ const StyledVersionHistoryPanel = styled.div`
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
width: 480px;
max-width: 480px;
overflow-y: hidden;
}
.version-history-aside-panel {
transition: unset;
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
width: 480px;
max-width: 480px;
overflow-y: hidden;
@media (max-width: 500px) {
position: fixed;
top: 64px;
bottom: 0;
right: 0;
width: 100%;
height: calc(100% - 64px);
}
}
.version-history-panel-header {
@ -159,7 +121,6 @@ const StyledVersionHistoryPanel = styled.div`
padding-top: ${(props) => (props.isLoading ? "16px" : null)};
padding-bottom: ${(props) => (props.isLoading ? "0px" : null)};
margin-left: 16px;
border-top: ${(props) => props.theme.filesPanels.versionHistory.borderTop};
height: calc(100% - 53px);
box-sizing: border-box;
@ -177,23 +138,6 @@ const StyledVersionHistoryPanel = styled.div`
StyledVersionHistoryPanel.defaultProps = { theme: Base };
const StyledAddUsersPanelPanel = styled.div`
.header_aside-panel {
transition: unset;
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
width: 480px;
max-width: 480px;
overflow-y: hidden;
@media (max-width: 500px) {
position: fixed;
top: 64px;
bottom: 0;
right: 0;
width: 100%;
height: calc(100% - 64px);
}
}
${PanelStyles}
.combo-button-label {
font-size: 14px;
@ -201,23 +145,6 @@ const StyledAddUsersPanelPanel = styled.div`
`;
const StyledAddGroupsPanel = styled.div`
.header_aside-panel {
transition: unset;
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
width: 480px;
max-width: 480px;
overflow-y: hidden;
@media (max-width: 500px) {
position: fixed;
top: 64px;
bottom: 0;
right: 0;
width: 100%;
height: calc(100% - 64px);
}
}
${PanelStyles}
.combo-button-label {
font-size: 14px;
@ -225,23 +152,6 @@ const StyledAddGroupsPanel = styled.div`
`;
const StyledEmbeddingPanel = styled.div`
.header_aside-panel {
transition: unset;
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
width: 480px;
max-width: 480px;
overflow-y: hidden;
@media (max-width: 500px) {
position: fixed;
top: 64px;
bottom: 0;
right: 0;
width: 100%;
height: calc(100% - 64px);
}
}
${PanelStyles}
`;
@ -253,6 +163,10 @@ const StyledContent = styled.div`
background-color: ${(props) =>
props.theme.filesPanels.content.backgroundColor};
.upload-panel_header-content {
margin-right: 0 !important;
}
.header_aside-panel-header {
max-width: 500px;
margin: 0 0 0 16px;
@ -308,6 +222,10 @@ const StyledHeaderContent = styled.div`
align-items: center;
padding: 0 16px;
margin-right: -16px;
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
.upload_panel-icons-container {
display: flex;
margin-left: auto;
@ -330,6 +248,8 @@ const StyledHeaderContent = styled.div`
}
`;
StyledHeaderContent.defaultProps = { theme: Base };
const StyledBody = styled.div`
&.files-operations-body {
padding: 0 0 0 16px;

1
products/ASC.Files/Client/src/components/panels/UploadPanel/index.js
View File

@ -100,6 +100,7 @@ class UploadPanelComponent extends React.Component {
className="header_aside-panel"
visible={visible}
withoutBodyScroll
onClose={this.onClose}
>
<StyledContent>
<StyledHeaderContent className="upload-panel_header-content">

22
products/ASC.Files/Client/src/components/panels/VersionHistoryPanel/index.js
View File

@ -18,20 +18,9 @@ import { inject, observer } from "mobx-react";
import config from "../../../../package.json";
class PureVersionHistoryPanel extends React.Component {
componentDidUpdate(preProps) {
const { isTabletView, fileId } = this.props;
if (isTabletView !== preProps.isTabletView && isTabletView) {
this.redirectToPage(fileId);
}
}
redirectToPage = (fileId) => {
this.onClose();
history.replace(`${this.props.homepage}/${fileId}/history`);
};
onClose = () => {
this.props.setIsVerHistoryPanel(false);
const { setIsVerHistoryPanel } = this.props;
setIsVerHistoryPanel(false);
};
render() {
@ -51,7 +40,12 @@ class PureVersionHistoryPanel extends React.Component {
zIndex={zIndex}
isAside={true}
/>
<Aside className="version-history-aside-panel" withoutBodyScroll>
<Aside
className="version-history-aside-panel"
visible={visible}
onClose={this.onClose}
withoutBodyScroll
>
<StyledContent>
<StyledHeaderContent className="version-history-panel-header">
{versions && !isLoading ? (

16
products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
View File

@ -108,37 +108,44 @@ class SectionHeaderContent extends React.Component {
key: "new-document",
label: t("NewDocument"),
onClick: this.createDocument,
icon: "images/actions.documents.react.svg",
},
{
key: "new-spreadsheet",
label: t("NewSpreadsheet"),
onClick: this.createSpreadsheet,
icon: "images/spreadsheet.react.svg",
},
{
key: "new-presentation",
label: t("NewPresentation"),
onClick: this.createPresentation,
icon: "images/actions.presentation.react.svg",
},
{
label: t("Translations:NewForm"),
icon: "images/form.react.svg",
onClick: this.createForm,
},
{
label: t("Translations:NewFormFile"),
onClick: this.createFormFromFile,
disabled: isPrivacyFolder,
icon: "images/form.file.react.svg",
},
{
key: "new-folder",
label: t("NewFolder"),
onClick: this.createFolder,
icon: "images/catalog.folder.react.svg",
},
{ key: "separator", isSeparator: true },
{
key: "make-invitation-link",
key: "upload-to-folder",
label: t("UploadToFolder"),
onClick: this.uploadToFolder,
disabled: true,
icon: "images/actions.upload.react.svg",
},
];
};
@ -224,12 +231,14 @@ class SectionHeaderContent extends React.Component {
label: t("SharingSettings"),
onClick: this.onOpenSharingPanel,
disabled: personal ? true : false,
icon: "/static/images/share.react.svg",
},
{
key: "link-portal-users",
label: t("LinkForPortalUsers"),
onClick: this.createLinkForPortalUsers,
disabled: personal ? true : false,
icon: "/static/images/invitation.link.react.svg",
},
{ key: "separator-2", isSeparator: true },
{
@ -237,30 +246,35 @@ class SectionHeaderContent extends React.Component {
label: t("MoveTo"),
onClick: this.onMoveAction,
disabled: false,
icon: "images/move.react.svg",
},
{
key: "copy",
label: t("Translations:Copy"),
onClick: this.onCopyAction,
disabled: false,
icon: "/static/images/copy.react.svg",
},
{
key: "download",
label: t("Common:Download"),
onClick: this.downloadAction,
disabled: false,
icon: "images/download.react.svg",
},
{
key: "rename",
label: t("Rename"),
onClick: this.renameAction,
disabled: true,
icon: "images/rename.react.svg",
},
{
key: "delete",
label: t("Common:Delete"),
onClick: this.onDeleteAction,
disabled: false,
icon: "/static/images/catalog.trash.react.svg",
},
];
};

8
products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/StyledVersionHistory.js
View File

@ -140,6 +140,10 @@ const StyledVersionRow = styled(Row)`
}
.version-link-file {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media ${tablet} {
margin-top: -1px;
}
@ -266,6 +270,10 @@ const StyledVersionRow = styled(Row)`
.version_modal-dialog .modal-dialog-aside-body {
margin-top: -24px;
}
.row-header {
max-width: 350px;
}
`;
StyledVersionRow.defaultProps = { theme: Base };

2
products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js
View File

@ -125,7 +125,7 @@ const VersionRow = (props) => {
isEditing={isEditing}
>
<div className={`version-row_${index}`}>
<Box displayProp="flex">
<Box displayProp="flex" className="row-header">
<VersionBadge
theme={theme}
className={`version_badge ${

26
products/ASC.Files/Client/src/pages/VersionHistory/index.js
View File

@ -10,32 +10,6 @@ import { SectionHeaderContent, SectionBodyContent } from "./Section";
import { inject, observer } from "mobx-react";
class PureVersionHistory extends React.Component {
componentDidMount() {
const { isTabletView } = this.props;
if (!isTabletView) {
this.redirectToPanelView();
}
}
componentDidUpdate(prevProps) {
const { isTabletView } = this.props;
if (isTabletView !== prevProps.isTabletView && !isTabletView) {
this.redirectToPanelView();
}
}
redirectToPanelView = () => {
const { setIsVerHistoryPanel } = this.props;
setIsVerHistoryPanel(true);
this.redirectToHomepage();
};
redirectToHomepage = () => {
const { history } = this.props;
history.goBack();
};
render() {
const { isLoading, versions, showProgressBar } = this.props;

13
products/ASC.Files/Client/src/store/VersionHistoryStore.js
View File

@ -16,8 +16,7 @@ class VersionHistoryStore {
makeAutoObservable(this);
this.filesStore = filesStore;
const isTabletView = window.innerWidth <= size.tablet;
if (isTabletView && this.versions) {
if (this.versions) {
//TODO: Files store in not initialized on versionHistory page. Need socket.
const { socketHelper } = this.filesStore.settingsStore;
@ -52,13 +51,21 @@ class VersionHistoryStore {
setIsVerHistoryPanel = (isVisible) => {
this.isVisible = isVisible;
!isVisible && this.setVerHistoryFileId(null);
if (!isVisible) {
this.setVersions(null);
this.setVerHistoryFileId(null);
}
};
setVerHistoryFileId = (fileId) => {
this.fileId = fileId;
};
setVersions = (versions) => {
this.versions = versions;
};
//setFileVersions
setVerHistoryFileVersions = (versions) => {
const file = this.filesStore.files.find((item) => item.id == this.fileId);

27
web/ASC.Web.Client/src/components/pages/About/AboutDialog.js
View File

@ -11,16 +11,23 @@ const AboutDialog = (props) => {
const { t, ready } = useTranslation(["About", "Common"]);
return (
<ModalDialogContainer
isLoading={!ready}
visible={visible}
onClose={onClose}
>
<ModalDialog.Header>{t("AboutHeader")}</ModalDialog.Header>
<ModalDialog.Body>
<AboutContent personal={personal} buildVersionInfo={buildVersionInfo} />
</ModalDialog.Body>
</ModalDialogContainer>
<>
{visible && (
<ModalDialogContainer
isLoading={!ready}
visible={visible}
onClose={onClose}
>
<ModalDialog.Header>{t("AboutHeader")}</ModalDialog.Header>
<ModalDialog.Body>
<AboutContent
personal={personal}
buildVersionInfo={buildVersionInfo}
/>
</ModalDialog.Body>
</ModalDialogContainer>
)}
</>
);
};

54
web/ASC.Web.Client/src/components/pages/DebugInfo/index.js
View File

@ -35,32 +35,36 @@ const DebugInfoDialog = (props) => {
};
return (
<ModalDialog
visible={visible}
onClose={onClose}
contentHeight="500px"
onResize={onResize}
>
<ModalDialog.Header>Debug Info</ModalDialog.Header>
<ModalDialog.Body>
{/* <Text>{`# Build version: ${BUILD_VERSION}`}</Text> */}
<Text>{`# Version: ${VERSION}`}</Text>
<Text>{`# Build date: ${BUILD_AT}`}</Text>
{user && (
<Text>{`# Current User: ${user?.displayName} (id:${user?.id})`}</Text>
)}
<Text>{`# User Agent: ${navigator.userAgent}`}</Text>
<hr />
<Box
overflowProp="auto"
heightProp={modalType === "modal" ? "300px" : "70vh"}
<>
{visible && (
<ModalDialog
visible={visible}
onClose={onClose}
contentHeight="500px"
onResize={onResize}
>
<Scrollbar stype="mediumBlack">
{md && <ReactMarkdown children={md} />}
</Scrollbar>
</Box>
</ModalDialog.Body>
</ModalDialog>
<ModalDialog.Header>Debug Info</ModalDialog.Header>
<ModalDialog.Body>
{/* <Text>{`# Build version: ${BUILD_VERSION}`}</Text> */}
<Text>{`# Version: ${VERSION}`}</Text>
<Text>{`# Build date: ${BUILD_AT}`}</Text>
{user && (
<Text>{`# Current User: ${user?.displayName} (id:${user?.id})`}</Text>
)}
<Text>{`# User Agent: ${navigator.userAgent}`}</Text>
<hr />
<Box
overflowProp="auto"
heightProp={modalType === "modal" ? "300px" : "70vh"}
>
<Scrollbar stype="mediumBlack">
{md && <ReactMarkdown children={md} />}
</Scrollbar>
</Box>
</ModalDialog.Body>
</ModalDialog>
)}
</>
);
};