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

Merge branch 'release/v1.2' of github.com:ONLYOFFICE/AppServer into release/v1.2

Browse Source
This commit is contained in:
Viktor Fomin 2022-05-04 16:25:07 +03:00
commit 1685d3fa97
9 changed files with 143 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js
View File

@ -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>
</>
)}

12
packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js
View File

@ -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>
</>
);
};

79
packages/asc-web-common/components/FilterInput/sub-components/StyledFilterBlock.js
View File

@ -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 };

3
packages/asc-web-common/components/Headline/StyledHeadline.js
View File

@ -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}

8
packages/asc-web-components/backdrop/index.js
View File

@ -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;

6
packages/asc-web-components/context-menu/index.js
View File

@ -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} />
</>

7
products/ASC.Files/Client/src/pages/Settings/Section/Header/index.js
View File

@ -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>

4
web/ASC.Web.Client/src/components/Layout/index.js
View File

@ -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(() => {

27
web/ASC.Web.Client/src/components/Main/index.js
View File

@ -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} />;