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

web client add rtl panel

Browse Source
This commit is contained in:
Subhonbek 2023-07-28 10:04:47 +03:00
parent 20f396dc89
commit c949063a60
2 changed files with 283 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

336
packages/client/src/components/panels/StyledPanels.js
View File

@ -6,10 +6,24 @@ import { Base } from "@docspace/components/themes";
const PanelStyles = css`
.panel_combo-box {
margin-left: 10px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 10px;
`
: css`
margin-left: 10px;
`}
.optionalBlock {
margin-right: 4px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 4px;
`
: css`
margin-right: 4px;
`}
display: flex;
}
@ -39,19 +53,32 @@ const StyledAsidePanel = styled.div`
width: 100%;
font-weight: 700;
margin: 14px 0;
padding-right: 10px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 10px;
`
: css`
padding-right: 10px;
`}
}
.upload_panel-header {
font-weight: 700;
padding: 19px auto 19px 17px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 19px 17px 19px auto;
`
: css`
padding: 19px auto 19px 17px;
`}
}
.upload-panel_header-content {
z-index: 320;
position: fixed;
left: 0;
right: 0;
background-color: ${(props) =>
props.theme.filesPanels.aside.backgroundColor};
background-color: ${props => props.theme.filesPanels.aside.backgroundColor};
height: ${isMobile ? "55px" : "48px"};
}
.upload-panel_header-content::after {
@ -59,7 +86,7 @@ const StyledAsidePanel = styled.div`
width: 100%;
max-width: 468px;
height: 1px;
background: ${(props) => props.theme.filesPanels.sharing.borderBottom};
background: ${props => props.theme.filesPanels.sharing.borderBottom};
content: "";
top: 48px;
width: calc(100% - 32px);
@ -71,12 +98,12 @@ const StyledAsidePanel = styled.div`
.modal-dialog-aside {
padding: 0;
transform: translateX(${(props) => (props.visible ? "0" : "500px")});
transform: translateX(${props => (props.visible ? "0" : "500px")});
width: 500px;
@media (max-width: 550px) {
width: 320px;
transform: translateX(${(props) => (props.visible ? "0" : "320px")});
transform: translateX(${props => (props.visible ? "0" : "320px")});
}
}
@ -90,7 +117,7 @@ const StyledVersionHistoryPanel = styled.div`
.version-history-modal-dialog {
transition: unset;
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
transform: translateX(${props => (props.visible ? "0" : "480px")});
width: 480px;
max-width: 480px;
}
@ -98,7 +125,14 @@ const StyledVersionHistoryPanel = styled.div`
.version-history-panel-header {
margin-bottom: 12px;
height: 53px;
margin-left: 0px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 0px;
`
: css`
margin-left: 0px;
`}
.version-history-panel-heading {
font-weight: 700;
margin-bottom: 13px;
@ -107,18 +141,39 @@ const StyledVersionHistoryPanel = styled.div`
}
.version-history-panel-body {
padding-bottom: ${(props) => (props.isLoading ? "0px" : null)};
margin-left: 16px;
padding-bottom: ${props => (props.isLoading ? "0px" : null)};
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 16px;
`
: css`
margin-left: 16px;
`}
height: calc(100% - 53px);
box-sizing: border-box;
.version-comment-wrapper {
margin-left: 85px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 85px;
`
: css`
margin-left: 85px;
`}
}
.version_edit-comment {
padding-left: 7px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 7px;
`
: css`
padding-left: 7px;
`}
}
}
`;
@ -134,21 +189,34 @@ const StyledContent = styled.div`
position: relative;
width: 100%;
height: 100%;
background-color: ${(props) =>
props.theme.filesPanels.content.backgroundColor};
background-color: ${props => props.theme.filesPanels.content.backgroundColor};
.upload-panel_header-content {
margin-right: 0 !important;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 0 !important;
`
: css`
margin-right: 0 !important;
`}
}
.header_aside-panel-plus-icon {
margin-left: auto;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: auto;
`
: css`
margin-left: auto;
`}
}
.sharing-access-combo-box-icon {
height: 16px;
path {
fill: ${(props) =>
fill: ${props =>
props.isDisabled
? props.theme.filesPanels.content.disabledFill
: props.theme.filesPanels.content.fill};
@ -164,16 +232,37 @@ const StyledContent = styled.div`
.panel-loader-wrapper {
margin-top: 8px;
padding-left: 32px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 32px;
`
: css`
padding-left: 32px;
`}
}
.panel-loader {
display: inline;
margin-right: 10px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 10px;
`
: css`
margin-right: 10px;
`}
}
.layout-progress-bar {
position: fixed;
right: 15px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
left: 15px;
`
: css`
right: 15px;
`}
bottom: 21px;
@media ${tablet} {
@ -189,9 +278,16 @@ const StyledHeaderContent = styled.div`
align-items: center;
padding: 0 16px;
margin-right: -16px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -16px;
`
: css`
margin-right: -16px;
`}
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
border-bottom: ${props => props.theme.filesPanels.sharing.borderBottom};
.upload_panel-icons-container {
display: flex;
@ -219,13 +315,27 @@ StyledHeaderContent.defaultProps = { theme: Base };
const StyledBody = styled.div`
&.files-operations-body {
padding: 0 0 0 16px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 0 16px 0 0;
`
: css`
padding: 0 0 0 16px;
`}
box-sizing: border-box;
width: 100%;
height: calc(100vh - 125px);
.styled-element {
margin-left: -2px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: -2px;
`
: css`
margin-left: -2px;
`}
}
}
@ -275,7 +385,7 @@ const StyledBody = styled.div`
.sharing-access-combo-box-icon {
path {
fill: ${(props) => props.theme.filesPanels.body.fill};
fill: ${props => props.theme.filesPanels.body.fill};
}
}
`;
@ -306,7 +416,14 @@ const StyledSharingBody = styled(Scrollbar)`
}
.sharing-row {
padding-left: 16px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 16px;
`
: css`
padding-left: 16px;
`}
//width: calc(100% - 16px);
box-sizing: border-box;
border-bottom: none;
@ -340,7 +457,14 @@ const StyledSharingBody = styled(Scrollbar)`
}
.sharing_panel-link-combo-box {
margin-left: auto;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: auto;
`
: css`
margin-left: auto;
`}
.combo-button {
height: 24px;
width: 94px;
@ -355,11 +479,25 @@ const StyledSharingBody = styled(Scrollbar)`
}
.sharing_panel-owner-icon {
padding-right: 19px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 19px;
`
: css`
padding-right: 19px;
`}
}
.sharing_panel-remove-icon {
margin-left: auto;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: auto;
`
: css`
margin-left: auto;
`}
line-height: 24px;
display: flex;
align-items: center;
@ -372,7 +510,14 @@ const StyledSharingBody = styled(Scrollbar)`
}
.panel_combo-box {
margin-left: 0px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 0px;
`
: css`
margin-left: 0px;
`}
.combo-button {
height: 30px;
@ -429,9 +574,8 @@ const StyledFooter = styled.div`
margin: auto;
left: 0;
right: 0;
background-color: ${(props) =>
props.theme.filesPanels.footer.backgroundColor};
border-top: ${(props) => props.theme.filesPanels.footer.borderTop};
background-color: ${props => props.theme.filesPanels.footer.backgroundColor};
border-top: ${props => props.theme.filesPanels.footer.borderTop};
box-sizing: border-box;
.sharing_panel-checkbox {
@ -441,16 +585,37 @@ const StyledFooter = styled.div`
}
.checkbox {
margin-right: 6px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 6px;
`
: css`
margin-right: 6px;
`}
}
}
.sharing_panel-button {
margin-left: auto;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: auto;
`
: css`
margin-left: auto;
`}
}
.new_file_panel-first-button {
margin-right: 8px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 8px;
`
: css`
margin-right: 8px;
`}
}
.new_files_panel-button {
width: 100%;
@ -475,15 +640,21 @@ const StyledFooter = styled.div`
StyledFooter.defaultProps = { theme: Base };
const StyledLinkRow = styled.div`
margin-right: -16px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -16px;
`
: css`
margin-right: -16px;
`}
padding: 0 16px;
box-sizing: border-box;
background-color: ${(props) =>
props.theme.filesPanels.linkRow.backgroundColor};
background-color: ${props => props.theme.filesPanels.linkRow.backgroundColor};
.sharing-access-combo-box-icon {
path {
fill: ${(props) =>
fill: ${props =>
props.isDisabled
? props.theme.filesPanels.linkRow.disabledFill
: props.theme.filesPanels.linkRow.fill};
@ -497,7 +668,7 @@ const StyledLinkRow = styled.div`
a {
text-decoration: none;
${(props) =>
${props =>
props.isDisabled &&
css`
:hover {
@ -509,7 +680,7 @@ const StyledLinkRow = styled.div`
}
.link-row {
${(props) => !props.withToggle && "border-bottom:none;"}
${props => !props.withToggle && "border-bottom:none;"}
}
.sharing-row__toggle-button {
@ -556,7 +727,14 @@ const StyledModalRowContainer = styled.div`
}
.panel_combo-box {
margin-left: 0px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 0px;
`
: css`
margin-left: 0px;
`}
.combo-button {
height: 30px;
@ -566,7 +744,15 @@ const StyledModalRowContainer = styled.div`
}
.optionalBlock {
margin-right: 4px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 4px;
`
: css`
margin-right: 4px;
`}
display: flex;
}
@ -577,7 +763,7 @@ const StyledModalRowContainer = styled.div`
.sharing-access-combo-box-icon {
height: 16px;
path {
fill: ${(props) =>
fill: ${props =>
props.isDisabled
? props.theme.filesPanels.modalRow.disabledFill
: props.theme.filesPanels.modalRow.fill};
@ -604,14 +790,28 @@ const StyledModalRowContainer = styled.div`
position: absolute;
z-index: 1;
margin: 8px;
right: 0px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
left: 0px;
`
: css`
right: 0px;
`}
}
.embedding-panel_links-container {
display: flex;
.embedding-panel_link {
margin-right: 8px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 8px;
`
: css`
margin-right: 8px;
`}
border: 1px solid #eceef1;
border-radius: 16px;
@ -624,7 +824,14 @@ const StyledModalRowContainer = styled.div`
display: flex;
.embedding-panel_input {
margin-right: 8px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 8px;
`
: css`
margin-right: 8px;
`}
width: 94px;
}
}
@ -641,16 +848,37 @@ const StyledModalRowContainer = styled.div`
position: absolute;
z-index: 1;
margin: 8px;
right: 0;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
left: 0;
`
: css`
right: 0;
`}
}
.panel-loader-wrapper {
margin-top: 8px;
padding-left: 32px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 32px;
`
: css`
padding-left: 32px;
`}
}
.panel-loader {
display: inline;
margin-right: 10px;
${props =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 10px;
`
: css`
margin-right: 10px;
`}
}
@media (max-width: 1024px) {

2
packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
View File

@ -8,7 +8,7 @@ const StyledInfoPanelBody = styled.div`
${props =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 0px 3px 0 20px;
padding: 0px 20px 0 3px;
`
: css`
padding: 0px 3px 0 20px;