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

Merge branch 'release/1.0.0' into bugfix/files-loader

Browse Source
This commit is contained in:
Tatiana Lopaeva 2021-10-22 10:11:53 +03:00
commit 3a33cf8d3a
16 changed files with 176 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -357,7 +357,10 @@ class PageLayout extends React.Component {
paddingRight: "20px",
}}
></div>
<SubSectionFilter className="section-header_filter">
<SubSectionFilter
className="section-header_filter"
viewAs={viewAs}
>
{sectionFilterContent
? sectionFilterContent.props.children
: null}

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

@ -21,7 +21,12 @@ const commonStyles = css`
flex: 1 0 auto;
padding: 17px 7px 16px 24px;
outline: none;
${(props) => props.viewAs == "tile" && "padding-right:0;"}
${(props) =>
props.viewAs == "tile" &&
css`
padding-right: 0;
padding-left: 20px;
`}
@media ${tablet} {
padding: 16px 0 16px 24px;

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

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

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

@ -25,6 +25,11 @@ const StyledSectionHeader = styled.div`
} */
`}
@media ${desktop} {
${(props) =>
(props.viewAs === "table" || props.viewAs === "tile") &&
"margin-left: -4px"};
}
@media ${tablet} {
${(props) =>

8
packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js
View File

@ -311,7 +311,13 @@ class AvatarEditorBody extends React.Component {
const desktopMode = isDesktop();
return (
<Text as="span">
<Link type="action" isHovered color="#316DAA" onClick={this.openDialog}>
<Link
type="action"
fontWeight={600}
isHovered
color="#316DAA"
onClick={this.openDialog}
>
{selectNewPhotoLabel}
</Link>{" "}
{desktopMode && orDropFileHereLabel}

2
packages/asc-web-components/themes/base.js
View File

@ -1388,7 +1388,7 @@ const Base = {
maxWidth: "175px",
lineHeightWithoutBorder: "16px",
lineHeightTextDecoration: "underline dashed transparent",
lineHeightTextDecoration: "underline dashed",
},
childrenButton: {

2
packages/asc-web-components/themes/dark.js
View File

@ -1180,7 +1180,7 @@ const Dark = {
maxWidth: "175px",
lineHeightWithoutBorder: "16px",
lineHeightTextDecoration: "underline dashed transparent",
lineHeightTextDecoration: "underline dashed",
},
childrenButton: {

5
products/ASC.Files/Client/src/HOCs/withContent.js
View File

@ -121,6 +121,7 @@ export default function withContent(WrappedContent) {
createFile,
item,
setIsLoading,
isLoading,
openDocEditor,
isPrivacy,
isDesktop,
@ -131,6 +132,8 @@ export default function withContent(WrappedContent) {
} = this.props;
const { itemTitle } = this.state;
if (isLoading) return;
setIsLoading(true);
const itemId = e.currentTarget.dataset.itemid;
@ -317,6 +320,7 @@ export default function withContent(WrappedContent) {
const { editCompleteAction } = filesActionsStore;
const {
setIsLoading,
isLoading,
openDocEditor,
updateFile,
renameFolder,
@ -340,6 +344,7 @@ export default function withContent(WrappedContent) {
return {
setIsLoading,
isLoading,
isTrashFolder: isRecycleBinFolder,
openDocEditor,
updateFile,

2
products/ASC.Files/Client/src/HOCs/withFileActions.js
View File

@ -96,7 +96,7 @@ export default function withFileActions(WrappedFileItem) {
}
e.preventDefault();
setTooltipPosition(e.pageX, e.pageY);
setStartDrag(true);
!isFileName && setStartDrag(true);
!isActive && setBufferSelection(null);
};

2
products/ASC.Files/Client/src/components/EditingWrapperComponent.js
View File

@ -46,6 +46,8 @@ const EditingWrapper = styled.div`
border-bottom: 1px solid #eceef1;
padding-bottom: 4px;
margin-top: 4px;
margin-left: -4px;
`}
${(props) =>

4
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js
View File

@ -63,6 +63,10 @@ const StyledTableRow = styled(TableRow)`
"url(images/cursor.palm.svg), auto"};
}
.table-container_element {
margin-left: ${(props) => (props.item.isFolder ? "-3px" : "-4px")};
}
&:hover {
.table-container_row-checkbox-wrapper {
${(props) => props.dragging && rowCheckboxDraggingHoverStyle}

14
products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
View File

@ -9,6 +9,7 @@ import Text from "@appserver/components/text";
import TileContent from "./sub-components/TileContent";
import withContent from "../../../../../HOCs/withContent";
import withBadges from "../../../../../HOCs/withBadges";
import { isMobile } from "react-device-detect";
const SimpleFilesTileContent = styled(TileContent)`
.row-main-container {
@ -54,7 +55,8 @@ const SimpleFilesTileContent = styled(TileContent)`
}
.title-link {
font-size: 14px;
font-size: ${isMobile ? "15px" : "13px"};
margin-top: 2px;
}
.favorite,
@ -83,18 +85,14 @@ const FilesTileContent = ({
return (
<>
<SimpleFilesTileContent
sideColor="#333"
isFile={fileExst}
//disableSideInfo
>
<SimpleFilesTileContent sideColor="#333" isFile={fileExst}>
<Link
className="title-link item-file-name"
containerWidth="100%"
type="page"
title={title}
fontWeight="600"
fontSize="14px"
fontSize={isMobile ? "15px" : "13px"}
target="_blank"
{...linkStyles}
color="#333"
@ -106,7 +104,7 @@ const FilesTileContent = ({
className="badge-ext"
as="span"
color="#A3A9AE"
fontSize="14px"
fontSize={isMobile ? "15px" : "13px"}
fontWeight={600}
truncate={true}
>

88
products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
View File

@ -6,6 +6,7 @@ import { ReactSVG } from "react-svg";
import styled, { css } from "styled-components";
import ContextMenu from "@appserver/components/context-menu";
import { tablet } from "@appserver/components/utils/device";
import { isDesktop, isMobile } from "react-device-detect";
import Link from "@appserver/components/link";
@ -100,9 +101,11 @@ const StyledTile = styled.div`
}
.checkbox {
display: flex;
opacity: ${(props) => (props.checked ? 1 : 0)};
flex: 0 0 16px;
margin-right: 4px;
justify-content: center;
@media ${tablet} {
opacity: 1;
@ -112,11 +115,18 @@ const StyledTile = styled.div`
.file-checkbox {
display: ${(props) => (props.checked ? "flex" : "none")};
flex: 0 0 16px;
margin-right: ${(props) => (props.isFolder ? "8px" : "4px")};
margin-top: 3px;
margin-left: ${(props) =>
isMobile
? css`
${props.isFolder ? "6px" : "12px"};
`
: css`
${props.isFolder ? "5px" : "8px"}
`};
@media ${tablet} {
display: flex;
margin-top: 2px;
}
}
@ -126,33 +136,47 @@ const StyledTile = styled.div`
flex: 0 0 auto;
margin-right: 4px;
user-select: none;
margin-top: 3px;
margin-top: ${(props) => (props.isFolder ? "-6px" : "-4px")};
margin-top: ${(props) => (props.isFolder ? "-8px" : "-6px")};
height: 32px;
width: 32px;
height: ${isMobile ? "32px" : "24px"};
width: ${isMobile ? "32px" : "24px"};
img {
height: 32px;
width: 32px;
height: ${isMobile ? "32px" : "24px"};
width: ${isMobile ? "32px" : "24px"};
}
@media ${tablet} {
display: none;
}
margin-left: ${(props) =>
isMobile
? css`
${props.isFolder ? "2px" : "4px"};
`
: css`
${props.isFolder ? "2px" : "4px"}
`};
}
.file-icon_container {
min-width: 36px;
min-width: ${isMobile ? "36px" : "28px"};
}
@media ${tablet} {
min-width: 28px;
}
.styled-content {
padding-left: 10px;
padding-left: ${(props) =>
isMobile
? css`
${props.isFolder ? "8px" : "12px"};
`
: css`
${props.isFolder ? "10px" : "13px"}
`};
}
:hover {
${(props) =>
!props.dragging &&
props.isDesktop &&
css`
.checkbox {
opacity: 1;
@ -173,8 +197,12 @@ const StyledFileTileTop = styled.div`
align-items: baseline;
background-color: #f8f9f9;
padding: 13px;
height: 157px;
height: ${(props) => (props.checked || props.isActive ? "156px" : "156px")};
position: relative;
border-bottom: ${(props) =>
props.checked || props.isActive
? "1px solid #D0D5DA"
: "1px solid transparent"};
.thumbnail-image,
.temporary-icon > .injected-svg {
@ -195,8 +223,6 @@ const StyledFileTileBottom = styled.div`
padding-right: 0;
min-height: 56px;
box-sizing: border-box;
border-top: ${(props) =>
(props.checked || props.isActive) && "1px solid #D0D5DA"};
`;
const StyledContent = styled.div`
@ -292,6 +318,13 @@ class Tile extends React.PureComponent {
onSelect && onSelect(e.target.checked, item);
};
onFileIconClick = () => {
if (isDesktop) return;
const { onSelect, item } = this.props;
onSelect && onSelect(true, item);
};
render() {
const {
checked,
@ -348,12 +381,18 @@ class Tile extends React.PureComponent {
isRecycleBin={isRecycleBin}
checked={checked}
isActive={isActive}
isDesktop={isDesktop}
>
{isFolder || (!fileExst && id === -1) ? (
<>
{renderElement && !(!fileExst && id === -1) && !isEdit && (
<div className="file-icon_container">
<StyledElement className="file-icon">{element}</StyledElement>
<StyledElement
className="file-icon"
onClick={this.onFileIconClick}
>
{element}
</StyledElement>
<Checkbox
className="checkbox file-checkbox"
isChecked={checked}
@ -363,6 +402,7 @@ class Tile extends React.PureComponent {
</div>
)}
<StyledContent
className="styled-content"
isFolder={(isFolder && !fileExst) || (!fileExst && id === -1)}
>
{children}
@ -386,11 +426,15 @@ class Tile extends React.PureComponent {
</>
) : (
<>
<StyledFileTileTop>{icon}</StyledFileTileTop>
<StyledFileTileBottom checked={checked} isActive={isActive}>
<StyledFileTileTop checked={checked} isActive={isActive}>
{icon}
</StyledFileTileTop>
<StyledFileTileBottom>
{id !== -1 && !isEdit && (
<div className="file-icon_container">
<div className="file-icon">{element}</div>
<div className="file-icon" onClick={this.onFileIconClick}>
{element}
</div>
<Checkbox
className="file-checkbox"
isChecked={checked}

55
products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js
View File

@ -1,35 +1,50 @@
/* eslint-disable react/display-name */
import React, { memo } from "react";
import styled from "styled-components";
import styled, { css } from "styled-components";
import PropTypes from "prop-types";
import { FixedSizeList as List, areEqual } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
import Heading from "@appserver/components/heading";
import ContextMenu from "@appserver/components/context-menu";
import CustomScrollbarsVirtualList from "@appserver/components/scrollbar";
import { tablet } from "@appserver/components/utils/device";
import { tablet, desktop } from "@appserver/components/utils/device";
const foldersStyle = css`
grid-gap: 19px 14px;
@media ${desktop} {
margin-left: -1px;
padding-right: 1px;
}
@media ${tablet} {
grid-gap: 17px 12px;
margin-left: -1px;
}
`;
const filesStyle = css`
grid-gap: 14px 18px;
@media ${desktop} {
padding-right: 5px;
}
@media ${tablet} {
grid-gap: 12px 14px;
margin-left: -1px;
padding-right: 2px;
}
`;
const StyledGridWrapper = styled.div`
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
width: 100%;
grid-gap: ${(props) => (props.isFolders ? "13px 14px" : "16px 18px")};
padding-bottom: 24px;
padding-right: 2px;
box-sizing: border-box;
padding-left: 1px;
@media ${tablet} {
margin-left: -6px !important;
}
@media (min-width: 1024px) {
margin-left: -2px;
}
@media (max-width: 1024px) {
margin-left: -2px;
}
${(props) => (props.isFolders ? foldersStyle : filesStyle)};
`;
const StyledTileContainer = styled.div`
@ -59,6 +74,8 @@ const StyledTileContainer = styled.div`
&.files {
padding-top: 8px;
}
margin-left: -1px;
}
@media (min-width: 1024px) {
@ -68,6 +85,10 @@ const StyledTileContainer = styled.div`
}
}
}
@media ${tablet} {
margin-right: -3px;
}
`;
class TileContainer extends React.PureComponent {

4
products/ASC.Files/Client/src/store/FilesStore.js
View File

@ -1062,7 +1062,7 @@ class FilesStore {
const { getFileIcon, getFolderIcon } = this.formatsStore.iconFormatsStore;
if (items.length && items[0].id === -1) return; //TODO: if change media collection from state remove this;
const iconSize = this.viewAs === "tile" ? 32 : 24;
const iconSize = this.viewAs === "tile" && isMobile ? 32 : 24;
const icon = this.fileActionStore.extension
? getFileIcon(`.${this.fileActionStore.extension}`, iconSize)
: getFolderIcon(null, iconSize);
@ -1134,7 +1134,7 @@ class FilesStore {
const isThirdPartyFolder = providerKey && id === rootFolderId;
//const isCanWebEdit = canWebEdit(item.fileExst);
const iconSize = this.viewAs === "tile" ? 32 : 24;
const iconSize = this.viewAs === "tile" && isMobile ? 32 : 24;
const icon = getIcon(iconSize, fileExst, providerKey, contentLength);
let isFolder = false;

32
products/ASC.Files/Client/src/store/UploadDataStore.js
View File

@ -874,25 +874,25 @@ class UploadDataStore {
return;
}
let operationItem = null;
let operationItem = data;
let finished = data.finished;
while (progress !== 100) {
await this.getOperationProgress(data.id)
.then((item) => {
operationItem = item;
progress = item ? item.progress : 100;
while (!finished) {
const item = await this.getOperationProgress(data.id);
operationItem = item;
progress = item ? item.progress : 100;
finished = item.finished;
setSecondaryProgressBarData({
icon: pbData.icon,
label: pbData.label || label,
percent: progress,
visible: true,
alert: false,
});
})
.catch((err) => Promise.reject(err));
setSecondaryProgressBarData({
icon: pbData.icon,
label: pbData.label || label,
percent: progress,
visible: true,
alert: false,
});
}
return Promise.resolve(operationItem);
return operationItem;
};
moveToCopyTo = (destFolderId, pbData, isCopy) => {