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

Shared/Client: Fixed styles for invite panel.

Browse Source
This commit is contained in:
Tatiana Lopaeva 2024-08-21 11:04:25 +03:00
parent 925cbc7be7
commit 5c462bb588
4 changed files with 52 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
View File

@ -38,7 +38,6 @@ import { ToggleButton } from "@docspace/shared/components/toggle-button";
import { mobile, commonIconsStyles } from "@docspace/shared/utils";
import CheckIcon from "PUBLIC_DIR/images/check.edit.react.svg";
import CrossIcon from "PUBLIC_DIR/images/cross.edit.react.svg";
import CrossIconMobile from "PUBLIC_DIR/images/cross.react.svg";
import DeleteIcon from "PUBLIC_DIR/images/mobile.actions.remove.react.svg";
import { isMobile, desktop, commonInputStyles } from "@docspace/shared/utils";
import Base from "@docspace/shared/themes/base";
@ -125,8 +124,18 @@ const ScrollList = styled.div`
`;
const StyledBlock = styled.div`
padding: ${(props) => (props.noPadding ? "0px" : "0 16px")};
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 16px;
padding-left: 37px;
`
: css`
padding-left: 16px;
padding-right: 37px;
`}
`;
StyledBlock.defaultProps = { theme: Base };
@ -513,11 +522,16 @@ const StyledControlContainer = styled.div`
z-index: 450;
@media ${mobile} {
display: flex;
top: -27px;
right: 10px;
left: unset;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 13px;
top: 17px;
`
: css`
right: 13px;
top: 17px;
`}
}
`;
const StyledInviteLanguage = styled.div`
@ -574,14 +588,6 @@ const StyledInviteLanguage = styled.div`
gap: 2px;
}
`;
const StyledCrossIconMobile = styled(CrossIconMobile)`
width: 17px;
height: 17px;
z-index: 455;
path {
fill: ${(props) => props.theme.catalog.control.fill};
}
`;
StyledCrossIcon.defaultProps = { theme: Base };
export {
@ -609,6 +615,5 @@ export {
StyledDescription,
StyledInviteLanguage,
StyledControlContainer,
StyledCrossIconMobile,
StyledInviteUserBody,
};

11
packages/client/src/components/panels/InvitePanel/index.js
View File

@ -64,6 +64,8 @@ import { Link } from "@docspace/shared/components/link";
import { Text } from "@docspace/shared/components/text";
import { combineUrl } from "@docspace/shared/utils/combineUrl";
import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
import { IconButton } from "@docspace/shared/components/icon-button";
import CrossIconMobile from "PUBLIC_DIR/images/cross.react.svg?url";
const InvitePanel = ({
folders,
@ -430,7 +432,7 @@ const InvitePanel = ({
const invitePanelNode = (
<>
<StyledBlock>
<StyledHeading>{t("Common:InviteUsers")}</StyledHeading>
<StyledHeading truncate>{t("Common:InviteUsers")}</StyledHeading>
</StyledBlock>
{invitePanelIsLoding ? (
<InvitePanelLoader />
@ -480,7 +482,12 @@ const InvitePanel = ({
{isMobileView ? (
<div className="invite_panel" ref={invitePanelRef}>
<StyledControlContainer onClick={onClose}>
<StyledCrossIconMobile />
<IconButton
size={17}
className="close-button"
iconName={CrossIconMobile}
isClickable
/>
</StyledControlContainer>
{invitePanelNode}
</div>

57
packages/shared/components/aside/Aside.styled.tsx
View File

@ -27,8 +27,6 @@
import React from "react";
import styled, { css } from "styled-components";
import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";
import { Base } from "../../themes";
import { MOBILE_FOOTER_HEIGHT } from "../../constants";
import { tablet, mobile } from "../../utils";
@ -127,53 +125,18 @@ const StyledControlContainer = styled.div`
justify-content: center;
z-index: 450;
top: 18px;
${(props) =>
props.theme.interfaceDirection === "rtl" ? `right: -27px;` : `left: -27px;`}
@media ${tablet} {
display: flex;
top: 18px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? `right: -27px;`
: `left: -27px;`}
}
@media ${mobile} {
display: flex;
top: -27px;
right: 10px;
left: unset;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: unset;
left: 10px;
`
: css`
right: 10px;
left: unset;
`}
}
props.theme.interfaceDirection === "rtl"
? css`
left: 13px;
top: 17px;
`
: css`
right: 13px;
top: 17px;
`}
`;
StyledControlContainer.defaultProps = { theme: Base };
const StyledCrossIcon = styled(CrossReactSvg)`
width: 17px;
height: 17px;
z-index: 455;
path {
fill: ${(props) => props.theme.catalog.control.fill};
}
`;
StyledCrossIcon.defaultProps = { theme: Base };
export { StyledAside, StyledControlContainer, StyledCrossIcon };
export { StyledAside, StyledControlContainer };

22
packages/shared/components/aside/Aside.tsx
View File

@ -27,14 +27,13 @@
import React from "react";
import { Scrollbar } from "../scrollbar";
import { IconButton } from "../icon-button";
import {
StyledAside,
StyledControlContainer,
StyledCrossIcon,
} from "./Aside.styled";
import { StyledAside, StyledControlContainer } from "./Aside.styled";
import { AsideProps } from "./Aside.types";
import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg?url";
const AsidePure = (props: AsideProps) => {
const {
visible,
@ -47,7 +46,7 @@ const AsidePure = (props: AsideProps) => {
onClose,
} = props;
const contentRef = React.useRef<HTMLElement | null>(null);
console.log("AsidePure");
return (
<StyledAside
visible={visible}
@ -58,14 +57,17 @@ const AsidePure = (props: AsideProps) => {
forwardRef={contentRef}
data-testid="aside"
>
{/* <CloseButton displayType="aside" zIndex={zIndex}/> */}
{withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
{visible && (
<StyledControlContainer className="close-button" onClick={onClose}>
<StyledCrossIcon />
<IconButton
size={17}
className="close-button"
iconName={CrossReactSvg}
isClickable
/>
</StyledControlContainer>
)}
{withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
</StyledAside>
);
};