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

Web: Components: Adapt Row component to RTL interface

Browse Source
This commit is contained in:
Aleksandr Lushkin 2023-06-22 16:22:54 +02:00
parent d6af896ccf
commit 1d4c3624f0
1 changed files with 46 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/components/row/styled-row.js
View File

@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
import { tablet } from "../utils/device";
import Base from "../themes/base";
import { isMobile } from "react-device-detect";
import { getCorrectFourValuesStyle } from "../utils/rtlUtils";
const StyledRow = styled.div`
cursor: default;
@ -35,8 +36,11 @@ const StyledRow = styled.div`
align-content: center;
.row-loader {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: 9px;`
: `margin-left: 9px;`}
padding: 0;
margin-left: 9px;
display: flex;
align-items: center;
justify-items: center;
@ -48,8 +52,14 @@ const StyledRow = styled.div`
css`
.checkbox {
display: ${(props) => (props.checked ? "flex" : "none")};
margin-left: -4px;
padding: 10px 0px 10px 8px;
padding: ${getCorrectFourValuesStyle(
"10px 0px 10px 8px",
props.theme.interfaceDirection
)};
${props.theme.interfaceDirection === "rtl"
? `margin-right: -4px;`
: `margin-left: -4px;`}
}
.styled-element {
@ -57,7 +67,7 @@ const StyledRow = styled.div`
}
`}
`;
StyledRow.defaultProps = { theme: Base };
StyledRow.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
const StyledContent = styled.div`
display: flex;
@ -72,7 +82,7 @@ const StyledContent = styled.div`
height: ${(props) => props.theme.rowContent.height};
}
`;
StyledContent.defaultProps = { theme: Base };
StyledContent.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
const StyledCheckbox = styled.div`
display: flex;
@ -104,8 +114,16 @@ const StyledCheckbox = styled.div`
const StyledElement = styled.div`
flex: 0 0 auto;
display: flex;
margin-right: ${(props) => props.theme.row.element.marginRight};
margin-left: ${(props) => props.theme.row.element.marginLeft};
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `
margin-left: ${theme.row.element.marginRight};
margin-right: ${theme.row.element.marginLeft};
`
: `
margin-right: ${theme.row.element.marginRight};
margin-left: ${theme.row.element.marginLeft};
`}
user-select: none;
.react-svg-icon svg {
@ -115,7 +133,7 @@ const StyledElement = styled.div`
margin: 4px 0 0 28px;
} */
`;
StyledElement.defaultProps = { theme: Base };
StyledElement.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
const StyledContentElement = styled.div`
margin-top: 6px;
@ -128,15 +146,28 @@ const StyledOptionButton = styled.div`
justify-content: flex-end;
.expandButton > div:first-child {
padding: ${(props) => props.theme.row.optionButton.padding};
padding: ${({ theme }) =>
getCorrectFourValuesStyle(
theme.row.optionButton.padding,
theme.interfaceDirection
)};
margin-right: 0px;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: 0px;`
: `margin-right: 0px;`}
@media (min-width: 1024px) {
margin-right: -1px;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: -1px;`
: `margin-right: -1px;`}
}
@media (max-width: 516px) {
padding-left: 10px;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `padding-right: 10px;`
: `padding-left: 10px;`}
}
}
@ -145,7 +176,9 @@ const StyledOptionButton = styled.div`
margin-top: unset;
}
`;
StyledOptionButton.defaultProps = { theme: Base };
StyledOptionButton.defaultProps = {
theme: { ...Base, interfaceDirection: "ltr" },
};
export {
StyledOptionButton,