Merge branch 'feature/virtual-rooms-1.2' into feature/redesign-sharing-panel

This commit is contained in:
Timofey Boyko 2022-04-07 18:03:26 +03:00
commit 1f6dc5c8da
6 changed files with 34 additions and 43 deletions

View File

@ -105,6 +105,8 @@ const Navigation = ({
getContextOptionsFolder={getContextOptionsFolder}
getContextOptionsPlus={getContextOptionsPlus}
toggleDropBox={toggleDropBox}
toggleInfoPanel={toggleInfoPanel}
isInfoPanelVisible={isInfoPanelVisible}
onClickAvailable={onClickAvailable}
/>
)}

View File

@ -9,6 +9,8 @@ const StyledContainer = styled.div`
grid-template-columns: ${(props) =>
props.isRootFolder ? "auto 1fr" : "29px auto 1fr"};
padding: ${(props) => (props.isDropBox ? "10px 0 5px" : "10px 0 11px")};
.arrow-button {
width: 17px;
min-width: 17px;
@ -16,24 +18,25 @@ const StyledContainer = styled.div`
@media ${tablet} {
width: 100%;
padding: ${(props) => (props.isDropBox ? "16px 0 5px" : "16px 0 0px")};
padding: ${(props) => (props.isDropBox ? "14px 0 5px" : "14px 0 15px")};
}
${isMobile &&
css`
width: 100%;
padding: ${(props) =>
props.isDropBox ? "16px 0 5px" : " 16px 0 0px"} !important;
props.isDropBox ? "12px 0 5px" : " 12px 0 13px"} !important;
`}
@media ${mobile} {
height: 53px;
padding: ${(props) =>
props.isDropBox ? "10px 0 5px" : "10px 0 11px"} !important;
}
${isMobileOnly &&
css`
width: 100% !important;
padding: ${(props) =>
props.isDropBox ? "18px 0 5px" : "18px 0 0"} !important;
props.isDropBox ? "10px 0 5px" : "10px 0 11px"} !important;
`}
`;

View File

@ -31,7 +31,6 @@ const StyledContainer = styled.div`
}
.option-button {
margin-left: auto;
margin-right: 15px;
min-width: 17px;
}
@ -46,7 +45,7 @@ const StyledInfoPanelToggleWrapper = styled.div`
align-items: center;
align-self: center;
justify-content: center;
margin-left: ${({ isRootFolder }) => (isRootFolder ? "auto" : "none")};
margin-left: auto;
.info-panel-toggle-bg {
height: 32px;

View File

@ -26,7 +26,7 @@ const StyledBox = styled.div`
top: 0px;
left: ${isMobile ? "-16px" : "-20px"};
padding: ${isMobile ? "0 16px 0 16px" : "0 20px"};
padding: ${isMobile ? "0 16px " : "0 20px"};
width: ${(props) => props.dropBoxWidth}px;
@ -85,7 +85,9 @@ const DropBox = React.forwardRef(
getContextOptionsFolder,
getContextOptionsPlus,
toggleDropBox,
toggleInfoPanel,
onClickAvailable,
isInfoPanelVisible,
},
ref
) => {
@ -141,6 +143,8 @@ const DropBox = React.forwardRef(
canCreate={canCreate}
getContextOptionsFolder={getContextOptionsFolder}
getContextOptionsPlus={getContextOptionsPlus}
toggleInfoPanel={toggleInfoPanel}
isInfoPanelVisible={isInfoPanelVisible}
/>
</StyledContainer>

View File

@ -22,7 +22,7 @@ const tabletProps = css`
${isMobileOnly &&
css`
padding: 0 16px;
margin: 0 -16px;
margin: 0 0 0 -16px;
`}
}
.section-body_filter {

View File

@ -11,59 +11,42 @@ import Base from "@appserver/components/themes/base";
const StyledSectionHeader = styled.div`
position: relative;
height: 53px;
min-height: 53px;
margin-right: 20px;
padding-right: 20px;
box-sizing: border-box;
${NoUserSelect}
display: grid;
align-items: center;
/* width: calc(100vw - 296px);
max-width: calc(100vw - 296px); */
width: ${(props) =>
props.infoPanelIsVisible ? "calc(100vw - 696px)" : "calc(100vw - 296px)"};
max-width: ${(props) =>
props.infoPanelIsVisible ? "calc(100vw - 696px)" : "calc(100vw - 296px)"};
width: 100%;
max-width: 100%;
@media ${tablet} {
width: ${(props) =>
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"};
max-width: ${(props) =>
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"};
height: 61px;
min-height: 61px;
margin-right: 0px !important;
padding-right: 16px;
margin-right: 0px;
}
${isMobile &&
css`
width: ${(props) =>
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"} !important;
max-width: ${(props) =>
props.showText ? "calc(100vw - 272px)" : "calc(100vw - 84px)"} !important;
height: 61px !important;
min-height: 61px !important;
margin-right: 0px !important;
padding-right: 0 !important;
margin-right: -16px !important;
`}
@media ${mobile} {
width: calc(100vw - 32px) !important;
max-width: calc(100vw - 32px) !important;
height: 53px;
min-height: 53px;
margin-right: 0px !important;
margin-right: 0px;
}
${isMobileOnly &&
css`
width: calc(100vw - 32px) !important;
max-width: calc(100vw - 32px) !important;
height: 53px;
min-height: 53px;
margin-top: -2px;
margin-right: 0px !important;
width: 100vw !important;
max-width: 100vw !important;
padding-right: 16px !important;
margin-top: -2px !important;
`}
`;