Shared/Client: InfoPanel: Fixed styles because of an aside header component.
This commit is contained in:
parent
13b2c3d60a
commit
7f7882f4ff
@ -43,6 +43,7 @@ import { StyledInfoPanelHeader } from "./styles/common";
|
|||||||
|
|
||||||
import { PluginFileType } from "SRC_DIR/helpers/plugins/enums";
|
import { PluginFileType } from "SRC_DIR/helpers/plugins/enums";
|
||||||
import { FolderType } from "@docspace/shared/enums";
|
import { FolderType } from "@docspace/shared/enums";
|
||||||
|
import { AsideHeader } from "@docspace/shared/components/aside";
|
||||||
|
|
||||||
const InfoPanelHeaderContent = (props) => {
|
const InfoPanelHeaderContent = (props) => {
|
||||||
const {
|
const {
|
||||||
@ -194,25 +195,11 @@ const InfoPanelHeaderContent = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledInfoPanelHeader isTablet={isTablet} withTabs={withTabs}>
|
<StyledInfoPanelHeader isTablet={isTablet} withTabs={withTabs}>
|
||||||
<div className="main">
|
<AsideHeader
|
||||||
<Text className="header-text" fontSize="21px" fontWeight="700">
|
header={t("Common:Info")}
|
||||||
{t("Common:Info")}
|
onCloseClick={closeInfoPanel}
|
||||||
</Text>
|
withoutBorder
|
||||||
|
/>
|
||||||
{!isTablet && (
|
|
||||||
<div className="info-panel-toggle-bg">
|
|
||||||
<IconButton
|
|
||||||
isStroke
|
|
||||||
size="17"
|
|
||||||
onClick={closeInfoPanel}
|
|
||||||
iconName={CrossReactSvgUrl}
|
|
||||||
title={t("Common:InfoPanel")}
|
|
||||||
className="info-panel-toggle"
|
|
||||||
id="info-panel-toggle--close"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{withTabs && (
|
{withTabs && (
|
||||||
<div className="tabs">
|
<div className="tabs">
|
||||||
|
@ -29,7 +29,7 @@ import { Base } from "@docspace/shared/themes";
|
|||||||
import { tablet } from "@docspace/shared/utils";
|
import { tablet } from "@docspace/shared/utils";
|
||||||
|
|
||||||
const getHeaderHeight = ({ withTabs, isTablet }) => {
|
const getHeaderHeight = ({ withTabs, isTablet }) => {
|
||||||
let res = isTablet ? 53 : 69;
|
let res = isTablet ? 54 : 70;
|
||||||
if (withTabs) res += 32;
|
if (withTabs) res += 32;
|
||||||
return `${res}px`;
|
return `${res}px`;
|
||||||
};
|
};
|
||||||
@ -54,40 +54,6 @@ const StyledInfoPanelHeader = styled.div`
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-bottom: ${(props) =>
|
border-bottom: ${(props) =>
|
||||||
props.withTabs ? "none" : `1px solid ${props.theme.infoPanel.borderColor}`};
|
props.withTabs ? "none" : `1px solid ${props.theme.infoPanel.borderColor}`};
|
||||||
.main {
|
|
||||||
height: ${(props) => getMainHeight(props)};
|
|
||||||
min-height: ${(props) => getMainHeight(props)};
|
|
||||||
@media ${tablet} {
|
|
||||||
height: ${(props) => getMainHeight({ ...props, isTablet: true })};
|
|
||||||
min-height: ${(props) => getMainHeight({ ...props, isTablet: true })};
|
|
||||||
}
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
.header-text {
|
|
||||||
${(props) =>
|
|
||||||
props.theme.interfaceDirection === "rtl"
|
|
||||||
? css`
|
|
||||||
margin-right: 20px;
|
|
||||||
`
|
|
||||||
: css`
|
|
||||||
margin-left: 20px;
|
|
||||||
`}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-panel-toggle-bg {
|
|
||||||
${(props) =>
|
|
||||||
props.theme.interfaceDirection === "rtl"
|
|
||||||
? css`
|
|
||||||
margin-left: 20px;
|
|
||||||
`
|
|
||||||
: css`
|
|
||||||
margin-right: 20px;
|
|
||||||
`}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -29,12 +29,7 @@ import React, { useEffect, useRef } from "react";
|
|||||||
import { DeviceType } from "../../../enums";
|
import { DeviceType } from "../../../enums";
|
||||||
import { Portal } from "../../portal";
|
import { Portal } from "../../portal";
|
||||||
|
|
||||||
import {
|
import { StyledInfoPanelWrapper, StyledInfoPanel } from "../Section.styled";
|
||||||
StyledInfoPanelWrapper,
|
|
||||||
StyledInfoPanel,
|
|
||||||
StyledControlContainer,
|
|
||||||
StyledCrossIcon,
|
|
||||||
} from "../Section.styled";
|
|
||||||
import { InfoPanelProps } from "../Section.types";
|
import { InfoPanelProps } from "../Section.types";
|
||||||
|
|
||||||
const InfoPanel = ({
|
const InfoPanel = ({
|
||||||
@ -49,8 +44,6 @@ const InfoPanel = ({
|
|||||||
}: InfoPanelProps) => {
|
}: InfoPanelProps) => {
|
||||||
const infoPanelRef = useRef<null | HTMLDivElement>(null);
|
const infoPanelRef = useRef<null | HTMLDivElement>(null);
|
||||||
|
|
||||||
const closeInfoPanel = () => setIsVisible?.(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const onMouseDown = (e: MouseEvent) => {
|
const onMouseDown = (e: MouseEvent) => {
|
||||||
const target = e.target as HTMLElement;
|
const target = e.target as HTMLElement;
|
||||||
@ -74,13 +67,7 @@ const InfoPanel = ({
|
|||||||
id="InfoPanelWrapper"
|
id="InfoPanelWrapper"
|
||||||
ref={infoPanelRef}
|
ref={infoPanelRef}
|
||||||
>
|
>
|
||||||
<StyledInfoPanel>
|
<StyledInfoPanel>{children}</StyledInfoPanel>
|
||||||
<StyledControlContainer onClick={closeInfoPanel}>
|
|
||||||
<StyledCrossIcon />
|
|
||||||
</StyledControlContainer>
|
|
||||||
|
|
||||||
{children}
|
|
||||||
</StyledInfoPanel>
|
|
||||||
</StyledInfoPanelWrapper>
|
</StyledInfoPanelWrapper>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user