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

Merge branch 'feature/virtual-rooms-1.2' of github.com:ONLYOFFICE/AppServer into feature/virtual-rooms-1.2

Browse Source
This commit is contained in:
Nikita Gopienko 2022-03-03 14:37:14 +03:00
commit b909b5c031
14 changed files with 244 additions and 485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/asc-web-common/components/Navigation/Navigation.js
View File

@ -34,8 +34,10 @@ const Navigation = ({
}) => {
const [isOpen, setIsOpen] = React.useState(false);
const [firstClick, setFirstClick] = React.useState(true);
const [changeWidth, setChangeWidth] = React.useState(false);
const [dropBoxWidth, setDropBoxWidth] = React.useState(0);
const dropBoxRef = React.useRef(null);
const containerRef = React.useRef(null);
const onMissClick = (e) => {
e.preventDefault;
@ -56,18 +58,12 @@ const Navigation = ({
[onClickFolder, toggleDropBox]
);
const toggleDropBox = React.useCallback(() => {
const toggleDropBox = () => {
if (isRootFolder) return setIsOpen(false);
setDropBoxWidth(DomHelpers.getOuterWidth(containerRef.current));
setIsOpen((prev) => !prev);
setFirstClick(true);
setTimeout(() => {
setChangeWidth(
DomHelpers.getOuterWidth(dropBoxRef.current) + 24 ===
DomHelpers.getOuterWidth(document.getElementById("section"))
);
}, 0);
}, [isRootFolder]);
};
React.useEffect(() => {
if (isOpen) {
@ -84,6 +80,7 @@ const Navigation = ({
setIsOpen((val) => !val);
onBackToParentFolder && onBackToParentFolder();
}, [onBackToParentFolder]);
return (
<Consumer>
{(context) => (
@ -92,9 +89,8 @@ const Navigation = ({
<DropBox
{...rest}
ref={dropBoxRef}
changeWidth={changeWidth}
width={context.sectionWidth}
height={context.sectionHeight}
dropBoxWidth={dropBoxWidth}
sectionHeight={context.sectionHeight}
showText={showText}
isRootFolder={isRootFolder}
onBackToParentFolder={onBackToParentFolderAction}
@ -110,15 +106,15 @@ const Navigation = ({
/>
)}
<StyledContainer
ref={containerRef}
width={context.sectionWidth}
isRootFolder={isRootFolder}
canCreate={canCreate}
title={title}
isDesktop={isDesktop}
isTabletView={isTabletView}
isRecycleBinFolder={isRecycleBinFolder}
>
<div className="header-container">
<>
<ArrowButton
isRootFolder={isRootFolder}
onBackToParentFolder={onBackToParentFolder}
@ -139,8 +135,6 @@ const Navigation = ({
isEmptyFilesList={isEmptyFilesList}
clearTrash={clearTrash}
/>
</>
</div>
</StyledContainer>
</>
)}

87
packages/asc-web-common/components/Navigation/StyledNavigation.js
View File

@ -3,88 +3,45 @@ import { isMobile, isMobileOnly } from "react-device-detect";
import { tablet, desktop, mobile } from "@appserver/components/utils/device";
const StyledContainer = styled.div`
.header-container {
margin-top: 14px;
margin-bottom: 6px;
position: relative;
padding: ${(props) => (props.isDropBox ? "14px 0 3px" : "14px 0 0px")};
width: fit-content;
display: grid;
grid-template-columns: ${(props) =>
props.isRootFolder ? "1fr auto" : "29px 1fr auto"};
align-items: center;
max-width: ${(props) => props.width}px;
${(props) =>
props.title &&
css`
display: grid;
grid-template-columns: ${(props) =>
props.isRootFolder
? "auto auto 1fr"
: props.canCreate
? "auto auto auto auto 1fr"
: "auto auto auto 1fr"};
.arrow-button {
width: 17px;
min-width: 17px;
}
@media ${tablet} {
margin-top: 17px;
grid-template-columns: ${(props) =>
props.isRootFolder
? "1fr auto"
: props.canCreate
? "auto 1fr auto auto"
: "auto 1fr auto"};
width: 100%;
padding: ${(props) => (props.isDropBox ? "16px 0 5px" : "16px 0 0px")};
}
${isMobile &&
css`
margin-top: 17px;
grid-template-columns: ${(props) =>
props.isRootFolder
? "1fr auto"
: props.canCreate
? "auto 1fr auto auto"
: "auto 1fr auto"};
width: 100% !important;
padding: ${(props) =>
props.isDropBox ? "16px 0 5px" : " 16px 0 0px"} !important;
`}
@media ${mobile} {
margin-top: 12px;
padding-bottom: 7px;
width: 100%;
padding: ${(props) => (props.isDropBox ? "12px 0 5px" : "12px 0 0")};
}
${isMobileOnly &&
css`
margin-top: 12px;
padding-bottom: 7px;
width: 100% !important;
padding: ${(props) =>
props.isDropBox ? "12px 0 5px" : "12px 0 0"} !important;
`}
`}
.arrow-button {
margin-right: 12px;
min-width: 17px;
align-items: center;
}
.add-button {
margin-right: 10px;
min-width: 17px;
@media ${tablet} {
display: none;
}
${isMobile &&
css`
display: none;
`}
}
.trash-button {
min-width: 17px;
margin-left: 6px;
}
.option-button {
min-width: 17px;
}
}
`;
export default StyledContainer;

36
packages/asc-web-common/components/Navigation/sub-components/control-btn.js
View File

@ -1,14 +1,38 @@
import React from "react";
import styled from "styled-components";
import styled, { css } from "styled-components";
import PropTypes from "prop-types";
import ContextMenuButton from "@appserver/components/context-menu-button";
import IconButton from "@appserver/components/icon-button";
import { isMobile } from "react-device-detect";
import { tablet } from "@appserver/components/utils/device";
const StyledContainer = styled.div`
margin-left: 20px;
padding-right: 6px;
display: flex;
align-items: center;
.add-button {
margin-right: 12px;
min-width: 17px;
@media ${tablet} {
display: none;
}
${isMobile &&
css`
display: none;
`}
}
.option-button {
margin-right: 8px;
min-width: 17px;
}
.trash-button {
min-width: 17px;
}
`;
const ControlButtons = ({
@ -21,8 +45,10 @@ const ControlButtons = ({
isEmptyFilesList,
clearTrash,
}) => {
return !isRootFolder && canCreate ? (
return (
<StyledContainer>
{!isRootFolder && canCreate ? (
<>
<ContextMenuButton
className="add-button"
directionX="right"
@ -43,7 +69,7 @@ const ControlButtons = ({
isDisabled={false}
/>
)}
</StyledContainer>
</>
) : canCreate ? (
<ContextMenuButton
className="add-button"
@ -64,6 +90,8 @@ const ControlButtons = ({
/>
) : (
<></>
)}
</StyledContainer>
);
};

153
packages/asc-web-common/components/Navigation/sub-components/drop-box.js
View File

@ -9,14 +9,16 @@ import ArrowButton from "./arrow-btn";
import Text from "./text";
import ControlButtons from "./control-btn";
import Item from "./item";
import StyledContainer from "../StyledNavigation";
import { isMobile, isMobileOnly } from "react-device-detect";
import {
tablet,
mobile,
isMobile as IsMobileUtils,
isMobile as isMobileUtils,
isTablet as isTabletUtils,
} from "@appserver/components/utils/device";
import { Base } from "@appserver/components/themes";
const StyledBox = styled.div`
@ -24,13 +26,13 @@ const StyledBox = styled.div`
top: 0px;
left: ${isMobile ? "-16px" : "-20px"};
padding: ${isMobile ? "0 16px" : "0 20px"};
width: ${(props) => props.dropBoxWidth}px;
height: ${(props) => (props.height ? `${props.height}px` : "fit-content")};
${(props) =>
props.changeWidth &&
!isMobile &&
css`
width: ${(props) => `calc(${props.width}px + 24px)`};
`}
max-height: calc(100vh - 48px);
z-index: 399;
display: flex;
flex-direction: column;
@ -41,118 +43,13 @@ const StyledBox = styled.div`
border-radius: 0px 0px 6px 6px;
@media ${tablet} {
top: 0px;
left: -16px;
width: ${(props) =>
props.showText ? css`calc(100vw - 240px)` : css`calc(100vw - 52px)`};
max-width: 100vw !important;
padding: 0 16px;
}
@media ${mobile} {
width: 100vw !important;
max-width: 100vw !important;
}
${isMobile &&
css`
top: 0px;
left: -16px;
width: ${(props) =>
props.showText ? css`calc(100vw - 240px)` : css`calc(100vw - 52px)`};
max-width: 100vw !important;
`}
${isMobileOnly &&
css`
width: 100vw !important;
max-width: 100vw !important;
`}
`;
StyledBox.defaultProps = { theme: Base };
const StyledContainer = styled.div`
margin-top: 14px;
margin-bottom: 6px;
position: relative;
top: 0px;
align-items: center;
min-width: 100px;
max-width: calc(100vw - 32px);
padding: ${isMobile ? "0px 16px" : "0px 20px"};
display: grid;
grid-template-columns: ${(props) =>
props.canCreate ? "auto auto auto auto 1fr" : "auto auto auto 1fr"};
@media ${tablet} {
padding: 0 16px;
margin-top: 17px;
grid-template-columns: ${(props) =>
props.canCreate ? "auto 1fr auto auto" : "auto 1fr auto"};
}
${
isMobile &&
css`
margin-top: 17px;
grid-template-columns: ${(props) =>
props.canCreate ? "auto 1fr auto auto" : "auto 1fr auto"};
`
}
@media ${mobile} {
padding: 0 16px;
margin-top: 12px;
// padding-bottom: 7px;
}
${
isMobileOnly &&
css`
margin-top: 12px;
padding-bottom: 7px;
`
}
.arrow-button {
margin-right: 12px;
min-width: 17px;
align-items: center;
}
.add-button {
margin-right: 10px;
min-width: 17px;
@media ${tablet} {
display: none;
}
${
isMobile &&
css`
display: none;
`
}
}
.trash-button {
min-width: 17px;
margin-left: 6px;
}
.option-button {
min-width: 17px;
}
}
`;
const Row = React.memo(({ data, index, style }) => {
const isRoot = index === data[0].length - 1;
return (
@ -170,10 +67,9 @@ const Row = React.memo(({ data, index, style }) => {
const DropBox = React.forwardRef(
(
{
width,
height,
sectionHeight,
showText,
changeWidth,
dropBoxWidth,
isRootFolder,
onBackToParentFolder,
title,
@ -192,7 +88,7 @@ const DropBox = React.forwardRef(
const getItemSize = (index) => {
if (index === countItems - 1) return 51;
return isMobile || IsMobileUtils() || isTabletUtils() ? 36 : 30;
return isMobile || isMobileUtils() || isTabletUtils() ? 36 : 30;
};
React.useEffect(() => {
@ -202,22 +98,31 @@ const DropBox = React.forwardRef(
const currentHeight = itemsHeight.reduce((a, b) => a + b);
let navHeight = 41;
if (isMobile || isTabletUtils()) {
navHeight = 49;
}
if (isMobileOnly || isMobileUtils()) {
navHeight = 45;
}
setDropBoxHeight(
currentHeight > window.innerHeight - 99
? window.innerHeight - 99
currentHeight + navHeight > sectionHeight
? sectionHeight - navHeight
: currentHeight
);
});
}, [sectionHeight]);
return (
<StyledBox
ref={ref}
width={width}
height={height < dropBoxHeight ? height : null}
height={sectionHeight < dropBoxHeight ? sectionHeight : null}
showText={showText}
changeWidth={changeWidth}
dropBoxWidth={dropBoxWidth}
>
<StyledContainer canCreate={canCreate}>
<StyledContainer canCreate={canCreate} isDropBox={true}>
<ArrowButton
isRootFolder={isRootFolder}
onBackToParentFolder={onBackToParentFolder}

8
packages/asc-web-common/components/Navigation/sub-components/item.js
View File

@ -25,16 +25,10 @@ const StyledItem = styled.div`
align-items: ${(props) => (props.isRoot ? "baseline" : "end")};
grid-template-columns: 17px auto;
cursor: pointer;
padding: ${isMobile ? "0px 16px" : "0px 24px"};
@media ${tablet} {
padding: 0px 16px;
max-width: 100vw !important;
}
`;
const StyledIconWrapper = styled.div`
width: 19px;
width: 17px;
display: flex;
align-items: ${(props) => (props.isRoot ? "center" : "flex-end")};
justify-content: center;

13
packages/asc-web-common/components/Navigation/sub-components/text.js
View File

@ -13,16 +13,20 @@ import { Base } from "@appserver/components/themes";
const StyledTextContainer = styled.div`
width: fit-content;
position: relative;
display: grid;
grid-template-columns: auto 14px;
grid-template-columns: ${(props) =>
props.isRootFolder ? "auto" : "auto 12px"};
align-items: center;
${(props) => !props.isRootFolder && "cursor: pointer"};
`;
const StyledHeadline = styled(Headline)`
width: 100%;
width: calc(100% + 1px);
font-weight: 700;
font-size: ${isMobile ? "21px !important" : "18px"};
line-height: ${isMobile ? "28px !important" : "24px"};
@ -36,8 +40,7 @@ const StyledExpanderDownIcon = styled(ExpanderDownIcon)`
min-width: 8px !important;
width: 8px !important;
min-height: 18px !important;
padding-left: 6px;
padding: 0 2px 0 4px;
path {
fill: ${(props) => props.theme.navigation.expanderColor};
}
@ -51,7 +54,7 @@ const StyledExpanderDownIconRotate = styled(ExpanderDownIcon)`
min-width: 8px !important;
width: 8px !important;
min-height: 18px !important;
padding-right: 6px;
padding: 0 4px 0 1px;
transform: rotate(-180deg);
path {

2
packages/asc-web-common/components/NewFilterInput/index.js
View File

@ -84,7 +84,7 @@ const FilterInput = ({
/>
) : (
<>
{(isMobile || isTabletUtils()) && (
{(isMobile || isTabletUtils() || isMobileUtils()) && (
<SortButton
selectedFilterData={selectedFilterData}
getSortData={getSortData}

2
packages/asc-web-common/components/NewFilterInput/sub-components/SortButton.js
View File

@ -188,6 +188,7 @@ const SortButton = ({
}, [selectedFilterData]);
const toggleCombobox = React.useCallback(() => {
console.log("1");
setIsOpen((val) => !val);
}, []);
@ -278,6 +279,7 @@ const SortButton = ({
options={[]}
selectedOption={{}}
directionX={"right"}
directionY={"top"}
scaled={true}
size={"content"}
advancedOptions={getAdvancedOptions()}

4
packages/asc-web-common/components/PageLayout/index.js
View File

@ -44,13 +44,12 @@ const StyledMainBar = styled.div`
${!isMobile
? css`
padding-right: 24px;
padding-right: 20px;
@media ${tablet} {
padding-right: 16px;
}
`
: css`
margin-top: 10px;
padding-right: 0px;
@media ${desktop} {
@ -454,6 +453,7 @@ class PageLayout extends React.Component {
unpinArticle={this.unpinArticle}
pinned={isArticlePinned}
visible={isArticleVisible}
viewAs={viewAs}
>
{isSectionHeaderAvailable && (
<SubSectionHeader

18
packages/asc-web-common/components/PageLayout/sub-components/section-body.js
View File

@ -11,20 +11,20 @@ import DragAndDrop from "@appserver/components/drag-and-drop";
import { tablet, mobile, desktop } from "@appserver/components/utils/device";
const paddingStyles = css`
padding: 17px 7px 16px 20px;
padding: 19px 7px 16px 20px;
@media ${tablet} {
padding: 6px 0 16px 24px;
padding: 3px 0 16px 24px;
}
@media ${mobile} {
padding: 8px 0 16px 24px;
padding: 6px 0 16px 24px;
}
${isMobile &&
css`
padding: 6px 0 16px 24px !important;
padding: 3px 0 16px 24px !important;
`};
${isMobileOnly &&
css`
padding: 8px 0 16px 24px !important;
padding: 6px 0 16px 24px !important;
`};
`;
const commonStyles = css`
@ -77,7 +77,11 @@ const StyledSectionBody = styled.div`
${(props) =>
props.withScroll &&
`
margin-left: -20px;
@media ${tablet}{
margin-left: -24px;
}
`}
.additional-scroll-height {
@ -101,7 +105,11 @@ const StyledDropZoneBody = styled(DragAndDrop)`
${(props) =>
props.withScroll &&
`
margin-left: -20px;
@media ${tablet}{
margin-left: -24px;
}
`}
`;

16
packages/asc-web-common/components/PageLayout/sub-components/section-filter.js
View File

@ -1,24 +1,14 @@
import React from "react";
import styled, { css } from "styled-components";
import equal from "fast-deep-equal/react";
import { isMobile } from "react-device-detect";
import { tablet, desktop } from "@appserver/components/utils/device";
const StyledSectionFilter = styled.div`
margin: 11px 24px 0 0;
@media ${desktop} {
${(props) =>
(props.viewAs === "table" || props.viewAs === "tile") &&
css`
margin-left: -4px;
/* margin-right: 20px; */
margin-right: 22px;
margin-bottom: ${props.viewAs === "tile" ? "-2px" : "0px"};
`};
}
margin-right: ${isMobile ? "16px" : "20px"};
@media ${tablet} {
margin-left: -4px;
margin-right: 16px;
}
`;

65
packages/asc-web-common/components/PageLayout/sub-components/section-header.js
View File

@ -4,52 +4,45 @@ import equal from "fast-deep-equal/react";
import classnames from "classnames";
import PropTypes from "prop-types";
import { LayoutContextConsumer } from "studio/Layout/context";
import { isMobile } from "react-device-detect";
import { tablet, desktop } from "@appserver/components/utils/device";
import { isMobile, isMobileOnly } from "react-device-detect";
import { tablet, desktop, mobile } from "@appserver/components/utils/device";
import NoUserSelect from "@appserver/components/utils/commonStyles";
import Base from "@appserver/components/themes/base";
const StyledSectionHeader = styled.div`
position: relative;
height: 42px;
margin-right: 24px;
height: 53px;
margin-right: 20px;
${NoUserSelect}
${isMobile &&
css`
height: 20px;
width: ${(props) => !props.isLoaded && "100%"};
margin-top: 62px;
@media ${tablet} {
margin-top: 48px;
}
`}
@media ${desktop} {
${(props) =>
(props.viewAs === "table" || props.viewAs === "tile") &&
"margin-left: -4px"};
}
@media ${tablet} {
${(props) =>
props.viewAs !== "tablet" &&
css`
height: 49px;
.arrow-button {
svg {
width: 14px;
}
margin-right: 10px;
}
`}
}
@media ${tablet} {
height: 61px;
margin-right: 16px;
}
${isMobile &&
css`
height: 61px !important;
margin-top: 48px !important;
margin-right: 0px !important;
`}
@media ${mobile} {
max-width: calc(100vw - 32px);
height: 53px;
margin-top: 0px;
margin-right: 0px;
}
${isMobileOnly &&
css`
max-width: calc(100vw - 32px);
height: 53px !important;
margin-top: 48px !important;
margin-right: 0px !important;
`}
${isMobile &&
css`
.section-header,
@ -99,7 +92,7 @@ class SectionHeader extends React.Component {
}
render() {
console.log("PageLayout SectionHeader render");
// console.log("PageLayout SectionHeader render");
// eslint-disable-next-line react/prop-types
const { isArticlePinned, isHeaderVisible, viewAs, ...rest } = this.props;

4
packages/asc-web-common/components/PageLayout/sub-components/section.js
View File

@ -17,12 +17,12 @@ const tabletProps = css`
.section-body_filter {
display: block;
margin: 0 0 25px;
margin: ${(props) => (props.viewAs === "tile" ? "0 0 18px" : "0 0 30px")};
}
`;
const StyledSection = styled.section`
padding: 0 0 0 24px;
padding: 0 0 0 20px;
flex-grow: 1;
display: flex;
flex-direction: column;

163
products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
View File

@ -7,17 +7,37 @@ import Loaders from "@appserver/common/components/Loaders";
import Headline from "@appserver/common/components/Headline";
import { FilterType, FileAction } from "@appserver/common/constants";
import { withTranslation } from "react-i18next";
import { isMobile } from "react-device-detect";
import { isMobile, isMobileOnly } from "react-device-detect";
import ContextMenuButton from "@appserver/components/context-menu-button";
import DropDownItem from "@appserver/components/drop-down-item";
import IconButton from "@appserver/components/icon-button";
import { tablet, desktop } from "@appserver/components/utils/device";
import { tablet, desktop, mobile } from "@appserver/components/utils/device";
import { Consumer } from "@appserver/components/utils/context";
import { inject, observer } from "mobx-react";
import TableGroupMenu from "@appserver/components/table-container/TableGroupMenu";
import Navigation from "@appserver/common/components/Navigation";
const StyledContainer = styled.div`
padding: 0 0 15px;
@media ${tablet} {
padding: 0 0 17px;
}
${isMobile &&
css`
padding: 0 0 17px;
`}
@media ${mobile} {
padding: 0 0 13px;
}
${isMobileOnly &&
css`
padding: 0 0 13px;
`}
.table-container_group-menu {
${(props) =>
props.viewAs === "table"
@ -26,7 +46,7 @@ const StyledContainer = styled.div`
width: calc(100% + 44px);
`
: css`
margin: 0px -24px;
margin: 0px -20px;
width: calc(100% + 48px);
`}
@ -36,142 +56,6 @@ const StyledContainer = styled.div`
}
}
`;
// .header-container {
// position: relative;
// ${(props) =>
// props.title &&
// css`
// display: grid;
// grid-template-columns: ${(props) =>
// props.isRootFolder
// ? "auto auto 1fr"
// : props.canCreate
// ? "auto auto auto auto 1fr"
// : "auto auto auto 1fr"};
// @media ${tablet} {
// grid-template-columns: ${(props) =>
// props.isRootFolder
// ? "1fr auto"
// : props.canCreate
// ? "auto 1fr auto auto"
// : "auto 1fr auto"};
// ${(props) => !props.isLoading && "top: 7px;"}
// }
// `}
// align-items: center;
// max-width: calc(100vw - 32px);
// @media ${tablet} {
// .headline-header {
// margin-left: -1px;
// }
// }
// .arrow-button {
// margin-right: 15px;
// min-width: 17px;
// @media ${tablet} {
// padding: 8px 0 8px 8px;
// margin-left: -8px;
// margin-right: 16px;
// }
// }
// .add-button {
// margin-bottom: -1px;
// margin-left: 16px;
// @media ${tablet} {
// margin-left: auto;
// & > div:first-child {
// padding: 8px 8px 8px 8px;
// margin-right: -8px;
// }
// }
// }
// .option-button {
// margin-bottom: -1px;
// @media (min-width: 1024px) {
// margin-left: 8px;
// }
// @media ${tablet} {
// & > div:first-child {
// padding: 8px 8px 8px 8px;
// margin-right: -8px;
// }
// }
// }
// .trash-button {
// margin-bottom: -1px;
// @media (min-width: 1024px) {
// margin-left: 8px;
// }
// @media ${tablet} {
// & > div:first-child {
// margin-right: -8px;
// }
// }
// }
// }
// .group-button-menu-container {
// margin: 0 -16px;
// -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
// ${isMobile &&
// css`
// position: sticky;
// `}
// ${(props) =>
// !props.isTabletView
// ? props.width &&
// isMobile &&
// css`
// width: ${props.width + 40 + "px"};
// `
// : props.width &&
// isMobile &&
// css`
// width: ${props.width + 32 + "px"};
// `}
// @media ${tablet} {
// padding-bottom: 0;
// ${!isMobile &&
// css`
// height: 56px;
// `}
// & > div:first-child {
// ${(props) =>
// !isMobile &&
// props.width &&
// css`
// width: ${props.width + 16 + "px"};
// `}
// position: absolute;
// ${(props) =>
// !props.isDesktop &&
// css`
// top: 48px;
// `}
// z-index: 180;
// }
// }
// @media ${desktop} {
// margin: 0 -24px;
// }
// }
class SectionHeaderContent extends React.Component {
constructor(props) {
@ -472,6 +356,7 @@ class SectionHeaderContent extends React.Component {
<Loaders.SectionHeader />
) : (
<Navigation
sectionWidth={context.sectionWidth}
showText={showText}
isRootFolder={isRootFolder}
canCreate={canCreate}