Merge branch 'release/v1.2' of github.com:ONLYOFFICE/AppServer into release/v1.2
This commit is contained in:
commit
1685d3fa97
@ -2,19 +2,14 @@ import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
import { mobile } from "@appserver/components/utils/device";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
import { Base } from "@appserver/components/themes";
|
||||
|
||||
import Selector from "./sub-components/Selector";
|
||||
import Backdrop from "@appserver/components/backdrop";
|
||||
|
||||
const mobileView = css`
|
||||
top: 64px;
|
||||
|
||||
width: 100% !important;
|
||||
height: calc(100% - 64px) !important;
|
||||
`;
|
||||
import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
|
||||
|
||||
const StyledBlock = styled.div`
|
||||
position: fixed;
|
||||
@ -32,11 +27,22 @@ const StyledBlock = styled.div`
|
||||
|
||||
background: ${(props) => props.theme.filterInput.filter.background};
|
||||
|
||||
@media ${mobile} {
|
||||
${mobileView}
|
||||
@media ${tablet} {
|
||||
max-width: calc(100% - 69px);
|
||||
}
|
||||
|
||||
${isMobileOnly && mobileView}
|
||||
${isMobile &&
|
||||
css`
|
||||
max-width: calc(100% - 69px);
|
||||
`}
|
||||
|
||||
@media (max-width: 428px) {
|
||||
bottom: 0;
|
||||
top: unset;
|
||||
height: calc(100% - 64px);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.people-selector {
|
||||
height: 100%;
|
||||
@ -51,6 +57,48 @@ const StyledBlock = styled.div`
|
||||
|
||||
StyledBlock.defaultProps = { theme: Base };
|
||||
|
||||
const StyledControlContainer = styled.div`
|
||||
display: flex;
|
||||
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 450;
|
||||
|
||||
top: 14px;
|
||||
left: -34px;
|
||||
|
||||
${isMobile &&
|
||||
css`
|
||||
top: 14px;
|
||||
`}
|
||||
|
||||
@media (max-width: 428px) {
|
||||
top: -34px;
|
||||
right: 10px;
|
||||
left: unset;
|
||||
}
|
||||
`;
|
||||
|
||||
StyledControlContainer.defaultProps = { theme: Base };
|
||||
|
||||
const StyledCrossIcon = styled(CrossIcon)`
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
z-index: 455;
|
||||
path {
|
||||
fill: ${(props) => props.theme.catalog.control.fill};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledCrossIcon.defaultProps = { theme: Base };
|
||||
|
||||
class AdvancedSelector extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -83,6 +131,10 @@ class AdvancedSelector extends React.Component {
|
||||
/>
|
||||
<StyledBlock>
|
||||
<Selector {...this.props} />
|
||||
|
||||
<StyledControlContainer onClick={this.onClose}>
|
||||
<StyledCrossIcon />
|
||||
</StyledControlContainer>
|
||||
</StyledBlock>
|
||||
</>
|
||||
)}
|
||||
|
@ -201,6 +201,10 @@ const FilterBlock = ({
|
||||
headerLabel={headerLabel}
|
||||
/>
|
||||
)}
|
||||
|
||||
<StyledControlContainer onClick={hideFilterBlock}>
|
||||
<StyledCrossIcon />
|
||||
</StyledControlContainer>
|
||||
</StyledFilterBlock>
|
||||
</>
|
||||
) : (
|
||||
@ -242,6 +246,10 @@ const FilterBlock = ({
|
||||
onClick={onFilterAction}
|
||||
/>
|
||||
</StyledFilterBlockFooter>
|
||||
|
||||
<StyledControlContainer onClick={hideFilterBlock}>
|
||||
<StyledCrossIcon />
|
||||
</StyledControlContainer>
|
||||
</StyledFilterBlock>
|
||||
)}
|
||||
|
||||
@ -250,10 +258,6 @@ const FilterBlock = ({
|
||||
withBackground={true}
|
||||
onClick={hideFilterBlock}
|
||||
/>
|
||||
|
||||
<StyledControlContainer onClick={hideFilterBlock}>
|
||||
<StyledCrossIcon />
|
||||
</StyledControlContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -1,19 +1,12 @@
|
||||
import Text from "@appserver/components/text";
|
||||
import styled, { css } from "styled-components";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
import { isMobileOnly, isMobile } from "react-device-detect";
|
||||
|
||||
import ToggleButton from "@appserver/components/toggle-button";
|
||||
import { mobile } from "@appserver/components/utils/device";
|
||||
import { mobile, tablet } from "@appserver/components/utils/device";
|
||||
import { Base } from "@appserver/components/themes";
|
||||
import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
|
||||
|
||||
const mobileView = css`
|
||||
top: 64px;
|
||||
|
||||
width: 100% !important;
|
||||
height: calc(100% - 64px) !important;
|
||||
`;
|
||||
|
||||
const StyledFilterBlock = styled.div`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -29,11 +22,22 @@ const StyledFilterBlock = styled.div`
|
||||
|
||||
background: ${(props) => props.theme.filterInput.filter.background};
|
||||
|
||||
@media ${mobile} {
|
||||
${mobileView}
|
||||
@media ${tablet} {
|
||||
max-width: calc(100% - 69px);
|
||||
}
|
||||
|
||||
${isMobileOnly && mobileView}
|
||||
${isMobile &&
|
||||
css`
|
||||
max-width: calc(100% - 69px);
|
||||
`}
|
||||
|
||||
@media (max-width: 428px) {
|
||||
bottom: 0;
|
||||
top: unset;
|
||||
height: calc(100% - 64px);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.people-selector {
|
||||
height: 100%;
|
||||
@ -247,62 +251,51 @@ const StyledFilterBlockFooter = styled.div`
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media ${mobile} {
|
||||
@media (max-width: 428px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
width: 100%;
|
||||
`}
|
||||
`;
|
||||
|
||||
StyledFilterBlockFooter.defaultProps = { theme: Base };
|
||||
|
||||
const StyledControlContainer = styled.div`
|
||||
background: ${(props) => props.theme.catalog.control.background};
|
||||
display: flex;
|
||||
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
z-index: 450;
|
||||
|
||||
@media ${mobile} {
|
||||
display: flex;
|
||||
}
|
||||
top: 14px;
|
||||
left: -34px;
|
||||
|
||||
${isMobileOnly &&
|
||||
${isMobile &&
|
||||
css`
|
||||
display: flex;
|
||||
top: 14px;
|
||||
`}
|
||||
|
||||
@media (max-width: 428px) {
|
||||
top: -34px;
|
||||
right: 10px;
|
||||
left: unset;
|
||||
}
|
||||
`;
|
||||
|
||||
StyledControlContainer.defaultProps = { theme: Base };
|
||||
|
||||
const StyledCrossIcon = styled(CrossIcon)`
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
z-index: 455;
|
||||
path {
|
||||
fill: ${(props) => props.theme.catalog.control.fill};
|
||||
}
|
||||
|
||||
display: none;
|
||||
|
||||
@media ${mobile} {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
display: flex;
|
||||
`}
|
||||
`;
|
||||
|
||||
StyledCrossIcon.defaultProps = { theme: Base };
|
||||
|
@ -18,7 +18,8 @@ const weight = {
|
||||
const StyledHeading = styled(Heading)`
|
||||
margin: 0;
|
||||
line-height: 50px;
|
||||
font-size: ${(props) => size[props.headlineType]};
|
||||
font-size: ${(props) =>
|
||||
props.fontSize ? props.fontSize : size[props.headlineType]};
|
||||
font-weight: ${(props) => weight[props.headlineType]};
|
||||
color: ${(props) => (props.color ? props.color : props.theme.color)};
|
||||
${NoUserSelect}
|
||||
|
@ -30,7 +30,7 @@ class Backdrop extends React.Component {
|
||||
}
|
||||
|
||||
checkingExistBackdrop = () => {
|
||||
const { visible, isAside, withBackground } = this.props;
|
||||
const { visible, isAside, withBackground, isContextMenu } = this.props;
|
||||
if (visible) {
|
||||
const isTablet = window.innerWidth < 1024;
|
||||
const backdrops = document.querySelectorAll(".backdrop-active");
|
||||
@ -38,7 +38,8 @@ class Backdrop extends React.Component {
|
||||
const needBackdrop =
|
||||
backdrops.length < 1 || (isAside && backdrops.length <= 1);
|
||||
|
||||
let needBackground = needBackdrop && (isTablet || withBackground);
|
||||
let needBackground =
|
||||
needBackdrop && ((isTablet && !isContextMenu) || withBackground);
|
||||
|
||||
if (isAside && needBackdrop) needBackground = true;
|
||||
|
||||
@ -115,6 +116,8 @@ Backdrop.propTypes = {
|
||||
withBackground: PropTypes.bool,
|
||||
/** Must be true if used with Aside component */
|
||||
isAside: PropTypes.bool,
|
||||
/** Must be true if used with Context menu */
|
||||
isContextMenu: PropTypes.bool,
|
||||
};
|
||||
|
||||
Backdrop.defaultProps = {
|
||||
@ -123,6 +126,7 @@ Backdrop.defaultProps = {
|
||||
withBackground: false,
|
||||
isAside: false,
|
||||
isModalDialog: false,
|
||||
isContextMenu: false,
|
||||
};
|
||||
|
||||
export default Backdrop;
|
||||
|
@ -351,7 +351,11 @@ class ContextMenu extends Component {
|
||||
return (
|
||||
<>
|
||||
{this.props.withBackdrop && (
|
||||
<Backdrop visible={this.state.visible} withBackground={true} />
|
||||
<Backdrop
|
||||
visible={this.state.visible}
|
||||
withBackground={false}
|
||||
isContextMenu={true}
|
||||
/>
|
||||
)}
|
||||
<Portal element={element} appendTo={this.props.appendTo} />
|
||||
</>
|
||||
|
@ -4,7 +4,12 @@ import Headline from "@appserver/common/components/Headline";
|
||||
const SectionHeaderContent = ({ title }) => {
|
||||
return (
|
||||
<div>
|
||||
<Headline className="headline-header" type="content" truncate={true}>
|
||||
<Headline
|
||||
fontSize="18px"
|
||||
className="headline-header"
|
||||
type="content"
|
||||
truncate={true}
|
||||
>
|
||||
{title}
|
||||
</Headline>
|
||||
</div>
|
||||
|
@ -115,6 +115,10 @@ const Layout = (props) => {
|
||||
// height = window.screen.availHeight - correctorTabletSafari;
|
||||
// }
|
||||
// }
|
||||
|
||||
let vh = (height - 48) * 0.01;
|
||||
document.documentElement.style.setProperty("--vh", `${vh}px`);
|
||||
|
||||
setContentHeight(height);
|
||||
};
|
||||
intervalHandler = setInterval(() => {
|
||||
|
@ -30,21 +30,20 @@ const StyledMain = styled.main`
|
||||
`;
|
||||
|
||||
const Main = React.memo((props) => {
|
||||
const orientationChanged = React.useCallback(() => {
|
||||
if (isIOS && !isFirefox) {
|
||||
let vh = (window.innerHeight - 48) * 0.01;
|
||||
// const orientationChanged = React.useCallback(() => {
|
||||
// if (isIOS && !isFirefox) {
|
||||
// let vh = (window.innerHeight - 48) * 0.01;
|
||||
// document.documentElement.style.setProperty("--vh", `${vh}px`);
|
||||
// }
|
||||
// }, []);
|
||||
|
||||
document.documentElement.style.setProperty("--vh", `${vh}px`);
|
||||
}
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
orientationChanged();
|
||||
if (isIOS && !isFirefox) {
|
||||
window.addEventListener("resize", orientationChanged);
|
||||
}
|
||||
return () => window.removeEventListener("resize", orientationChanged);
|
||||
}, []);
|
||||
// React.useEffect(() => {
|
||||
// orientationChanged();
|
||||
// if (isIOS && !isFirefox) {
|
||||
// window.addEventListener("resize", orientationChanged);
|
||||
// }
|
||||
// return () => window.removeEventListener("resize", orientationChanged);
|
||||
// }, []);
|
||||
|
||||
//console.log("Main render");
|
||||
return <StyledMain className="main" {...props} />;
|
||||
|
Loading…
Reference in New Issue
Block a user