Shared/Client: AddUsersPanel/InvitePanel: Fixed styles because of an aside header component.
This commit is contained in:
parent
9934ff843c
commit
52af6b45a4
@ -529,6 +529,7 @@ const AddUsersPanel = ({
|
||||
visible={visible}
|
||||
onClose={onClosePanels}
|
||||
withoutBodyScroll
|
||||
withoutHeader
|
||||
>
|
||||
<Selector
|
||||
withHeader
|
||||
@ -539,6 +540,7 @@ const AddUsersPanel = ({
|
||||
withoutBackButton: false,
|
||||
withoutBorder: true,
|
||||
onBackClick,
|
||||
onCloseClick: onClosePanels,
|
||||
}}
|
||||
onSelect={onSelect}
|
||||
renderCustomItem={renderCustomItem}
|
||||
|
@ -140,6 +140,9 @@ const StyledBlock = styled.div`
|
||||
|
||||
StyledBlock.defaultProps = { theme: Base };
|
||||
|
||||
const StyledExternalLink = styled.div`
|
||||
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
|
||||
`;
|
||||
const StyledInviteUserBody = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -616,4 +619,5 @@ export {
|
||||
StyledInviteLanguage,
|
||||
StyledControlContainer,
|
||||
StyledInviteUserBody,
|
||||
StyledExternalLink,
|
||||
};
|
||||
|
@ -431,9 +431,11 @@ const InvitePanel = ({
|
||||
|
||||
const invitePanelNode = (
|
||||
<>
|
||||
<StyledBlock>
|
||||
<StyledHeading truncate>{t("Common:InviteUsers")}</StyledHeading>
|
||||
</StyledBlock>
|
||||
{isMobileView && (
|
||||
<StyledBlock>
|
||||
<StyledHeading truncate>{t("Common:InviteUsers")}</StyledHeading>
|
||||
</StyledBlock>
|
||||
)}
|
||||
{invitePanelIsLoding ? (
|
||||
<InvitePanelLoader />
|
||||
) : (
|
||||
@ -505,6 +507,7 @@ const InvitePanel = ({
|
||||
onClose={onClose}
|
||||
withoutBodyScroll
|
||||
zIndex={310}
|
||||
header={t("Common:InviteUsers")}
|
||||
>
|
||||
{invitePanelNode}
|
||||
</Aside>
|
||||
|
@ -45,12 +45,12 @@ import { Text } from "@docspace/shared/components/text";
|
||||
import AccessSelector from "../../../AccessSelector";
|
||||
import PaidQuotaLimitError from "../../../PaidQuotaLimitError";
|
||||
import {
|
||||
StyledBlock,
|
||||
StyledSubHeader,
|
||||
StyledInviteInput,
|
||||
StyledInviteInputContainer,
|
||||
StyledToggleButton,
|
||||
StyledDescription,
|
||||
StyledExternalLink,
|
||||
} from "../StyledInvitePanel";
|
||||
|
||||
import { getFreeUsersRoleArray, getFreeUsersTypeArray } from "../utils";
|
||||
@ -212,7 +212,7 @@ const ExternalLinks = ({
|
||||
roomId === -1 ? getFreeUsersTypeArray() : getFreeUsersRoleArray();
|
||||
|
||||
return (
|
||||
<StyledBlock noPadding ref={inputsRef}>
|
||||
<StyledExternalLink noPadding ref={inputsRef}>
|
||||
<StyledSubHeader inline>
|
||||
{t("InviteViaLink")}
|
||||
{false && ( //TODO: Change to linksVisible after added link information from backend
|
||||
@ -285,7 +285,7 @@ const ExternalLinks = ({
|
||||
/>
|
||||
</StyledInviteInputContainer>
|
||||
)}
|
||||
</StyledBlock>
|
||||
</StyledExternalLink>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -41,6 +41,7 @@ const AsidePure = (props: AsideProps) => {
|
||||
contentPaddingBottom,
|
||||
withoutBodyScroll = false,
|
||||
onClose,
|
||||
withoutHeader = false,
|
||||
...rest
|
||||
} = props;
|
||||
const contentRef = React.useRef<HTMLElement | null>(null);
|
||||
@ -55,7 +56,7 @@ const AsidePure = (props: AsideProps) => {
|
||||
forwardRef={contentRef}
|
||||
data-testid="aside"
|
||||
>
|
||||
<AsideHeader onCloseClick={onClose} {...rest} />
|
||||
{!withoutHeader && <AsideHeader onCloseClick={onClose} {...rest} />}
|
||||
{withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
|
||||
</StyledAside>
|
||||
);
|
||||
|
@ -73,6 +73,7 @@ export type BreadCrumbsProps = {
|
||||
|
||||
export type HeaderProps = {
|
||||
headerLabel: string;
|
||||
onCloseClick: () => void;
|
||||
} & THeaderBackButton;
|
||||
|
||||
export type TSelectorHeader =
|
||||
|
@ -26,36 +26,25 @@
|
||||
|
||||
import React from "react";
|
||||
|
||||
import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
|
||||
|
||||
import { IconButton } from "../../icon-button";
|
||||
import { Heading } from "../../heading";
|
||||
|
||||
import { StyledHeader } from "../Selector.styled";
|
||||
import { HeaderProps } from "../Selector.types";
|
||||
import { AsideHeader } from "../../aside";
|
||||
|
||||
const Header = React.memo(
|
||||
({
|
||||
onBackClick,
|
||||
onCloseClick,
|
||||
withoutBackButton,
|
||||
headerLabel,
|
||||
withoutBorder,
|
||||
}: HeaderProps) => {
|
||||
return (
|
||||
<StyledHeader withoutBorder={withoutBorder}>
|
||||
{!withoutBackButton && typeof withoutBackButton === "boolean" && (
|
||||
<IconButton
|
||||
className="arrow-button"
|
||||
iconName={ArrowPathReactSvgUrl}
|
||||
size={17}
|
||||
onClick={onBackClick}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Heading className="heading-text" truncate>
|
||||
{headerLabel}
|
||||
</Heading>
|
||||
</StyledHeader>
|
||||
<AsideHeader
|
||||
header={headerLabel}
|
||||
isBackButton={
|
||||
!withoutBackButton && typeof withoutBackButton === "boolean"
|
||||
}
|
||||
onBackClick={onBackClick}
|
||||
onCloseClick={onCloseClick}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user